/* ==========================================================================
   Mito Skin Lab — Pastel Aristocracy (Pink & White Edition)
   Palette source: "Website design" tab.
   NOTE: two hex codes in the doc were malformed and have been corrected:
     Dusty Mauve  #cB57873 (7 chars, invalid) -> #B57873
     Chantilly    #CFEAM   (not hex)          -> #FCF9F6
   Confirm both with the client, then change only the two vars below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* --- Blush & rose tones --- */
  --powder-blush: #F4E6E6;
  --antique-rose: #CFB4AB;
  --dusty-mauve:  #B57873;
  --tea-rose:     #E8CFCB;

  /* --- Creamy whites --- */
  --chantilly:    #FCF9F6;
  --vintage-lace: #F3EEE6;
  --oat-silk:     #D7CCAE;
  --porcelain:    #F3F4F2;

  /* --- Ink & premium accents (Feedback 4: premium black tone) --- */
  --ink:        #241D1B;
  --ink-soft:   #6B5C57;
  --premium:    #141010;
  --hairline:   rgba(181,120,115,.22);

  /* --- Type --- */
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* --- Rhythm --- */
  --pad-section: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --radius: 999px;         /* Feedback 4: rounder / circular */
  --radius-card: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
/* Feedback: buttons/links flashed blue on tap on mobile — that's Chrome/
   Android's default tap-highlight overlay; nothing here was overriding it. */
a, button, .btn, .icon-btn, .tab, [role="button"] { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--chantilly);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: .01em;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
p  { margin: 0 0 1.1em; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(44px, 6vw, 84px); }
.bg-lace { background: var(--vintage-lace); }
.bg-blush { background: var(--powder-blush); }
.bg-porcelain { background: var(--porcelain); }
.bg-premium { background: var(--premium); color: var(--chantilly); }
.center { text-align: center; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dusty-mauve);
  font-weight: 500;
  margin: 0 0 .9rem;
}
.bg-premium .eyebrow { color: var(--antique-rose); }

.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 62ch; }
.center .lede { margin-inline: auto; }
.bg-premium .lede { color: rgba(252,249,246,.7); }

.rule { width: 46px; height: 1px; background: var(--antique-rose); border: 0; margin: 1.4rem 0 2rem; }
.center .rule { margin-inline: auto; }

/* ---------- buttons (pill / premium black per Feedback 4) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 2.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--premium);
  background: var(--premium);
  color: var(--chantilly);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--dusty-mauve); border-color: var(--dusty-mauve); transform: translateY(-2px); }
.btn:focus:not(:focus-visible), .icon-btn:focus:not(:focus-visible) { outline: none; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--dusty-mauve); outline-offset: 2px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--antique-rose); }
.btn--ghost:hover { background: var(--premium); color: var(--chantilly); border-color: var(--premium); }
.btn--light { background: var(--chantilly); color: var(--premium); border-color: var(--chantilly); }
.btn--light:hover { background: var(--dusty-mauve); border-color: var(--dusty-mauve); color: #fff; }
.btn--sm { padding: .7rem 1.5rem; font-size: .72rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   ENTRY LOADER — premium splash shown on every page load, ~1.5s.
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--premium);
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.loader__mark { text-align: center; }
.loader__word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .5em;
  padding-left: .5em;
  color: var(--chantilly);
}
.loader__rule {
  display: block; margin: 1.1rem auto 0;
  height: 1px; width: 0;
  background: var(--antique-rose);
  animation: loaderRule 1.1s var(--ease) forwards;
}
@keyframes loaderRule { to { width: 120px; } }
.loader--hide { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .loader__rule { animation: none; width: 120px; }
}

/* ==========================================================================
   HEADER — centered, exactly 5 items (Feedback 4)
   Home · Doctors · Services · Shop · About Us
   ========================================================================== */
.topbar {
  background: var(--premium); color: rgba(252,249,246,.72);
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar a:hover { color: #fff; }
.topbar__set { display: flex; gap: 1.6rem; }
.topbar__set a { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__set a svg { width: 13px; height: 13px; flex: none; }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(252,249,246,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* centered nav */
  align-items: center;
  gap: 1rem;
  min-height: 84px;
}
.brand { display: flex; align-items: center; gap: .7rem; justify-self: start; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tea-rose), var(--antique-rose));
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: #fff;
}
.brand__logo { height: 72px; width: auto; display: block; }
.footer__brand .brand__logo { height: 80px; }
.brand__name { font-family: var(--font-display); font-size: 1.24rem; letter-spacing: .06em; line-height: 1.1; }
.brand__sub { display: block; font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--dusty-mauve); font-family: var(--font-body); }

.nav { justify-self: center; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.8rem); }
.nav__link {
  position: relative;
  font-size: .72rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem 0; display: inline-block; white-space: nowrap;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: .25rem;
  width: 0; height: 1px; background: var(--dusty-mauve);
  transition: width .35s var(--ease);
}
.nav__link:hover::after, .nav__item--active > .nav__link::after { width: 100%; }
.nav__item--active > .nav__link { color: var(--dusty-mauve); }

/* Services hover dropdown — 4 departments (Feedback 4) */
.nav__item--has-menu > .nav__link::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: .5rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
}
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  min-width: 320px; padding: .7rem;
  background: var(--chantilly);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(36,29,27,.13);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item--has-menu { position: relative; }
.nav__item--has-menu:hover .dropdown,
.nav__item--has-menu:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.dropdown a {
  display: block; padding: .78rem 1.1rem;
  font-size: .84rem; letter-spacing: .03em;
  border-radius: 2px;
  transition: background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.dropdown a:hover { background: var(--powder-blush); color: var(--dusty-mauve); padding-left: 1.5rem; }

.header__actions { display: flex; align-items: center; gap: .55rem; justify-self: end; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline); background: transparent;
  display: grid; place-items: center; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.icon-btn:hover { background: var(--premium); color: #fff; border-color: var(--premium); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn__count {
  position: absolute; transform: translate(14px, -14px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--dusty-mauve); color: #fff;
  font-size: .62rem; line-height: 17px; text-align: center;
}
.header__cta { margin-left: .3rem; white-space: nowrap; }
/* Six menu items: tighten the menu between the burger breakpoint and wide desktop so the logo and Book Now keep their size. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__list { gap: .85rem; }
  .nav__link { letter-spacing: .07em; font-size: .68rem; }
  .brand { flex: none; }
}

/* Background-music toggle: two stacked SVGs, only one shown at a time —
   the crossed note by default (music off), the plain note once playing. */
[data-music-toggle] { position: relative; }
[data-music-toggle] svg { position: absolute; }
[data-music-toggle] .icon-btn__music-on { opacity: 0; }
[data-music-toggle] .icon-btn__music-off { opacity: 1; }
[data-music-toggle].is-playing .icon-btn__music-on { opacity: 1; }
[data-music-toggle].is-playing .icon-btn__music-off { opacity: 0; }
.burger { display: none; }

/* ---------- mobile nav ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--chantilly);
  padding: 1.4rem var(--gutter) 2.4rem;
  transform: translateX(100%);
  transition: transform .42s var(--ease);
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { transform: none; }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.mobile-nav__list > li { border-bottom: 1px solid var(--hairline); }
.mobile-nav__list > li > a,
.mobile-nav__toggle {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 1.15rem 0; background: none; border: 0; text-align: left;
  font-family: var(--font-display); font-size: 1.22rem; color: var(--ink);
}
.mobile-nav__sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.mobile-nav__sub[data-open="true"] { max-height: 320px; }
.mobile-nav__sub a { display: block; padding: .62rem 0 .62rem 1rem; font-size: .92rem; color: var(--ink-soft); }
.mobile-nav__foot { margin-top: 2rem; display: grid; gap: .8rem; }

/* ==========================================================================
   HERO — video at top of landing page (Feedback 2 & 4)
   ========================================================================== */
.hero { position: relative; min-height: clamp(560px, 88vh, 880px); display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,16,16,.72) 0%, rgba(20,16,16,.44) 46%, rgba(181,120,115,.28) 100%);
}
.hero__inner { position: relative; z-index: 2; color: #fff; max-width: 720px; padding-block: clamp(70px, 12vw, 120px); }
.hero h1 { color: #fff; margin-bottom: 1.3rem; }
.hero .eyebrow { color: var(--tea-rose); }
.hero__lede { color: rgba(255,255,255,.84); font-size: 1.08rem; max-width: 52ch; margin-bottom: 1.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Benefit checklist under the hero lede (Dr. Leigh hero reference) */
.hero__checks { display: grid; grid-template-columns: repeat(2, auto); gap: .6rem 2.4rem; margin-bottom: 2.2rem; }
.hero__check { display: flex; align-items: center; gap: .55rem; font-size: .86rem; color: rgba(255,255,255,.92); }
.hero__check svg { width: 16px; height: 16px; color: var(--tea-rose); flex: none; }

/* ---------- brand strip: CeraVe, Candela, Botox (Feedback 4) ---------- */
.brands { border-block: 1px solid var(--hairline); background: var(--chantilly); }
.brands .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block: 2.2rem; }
.brands__label { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
/* Continuous marquee. The track holds two identical copies and slides by
   exactly -50%, so the seam is invisible. Spacing lives on each item
   (margin-right) rather than flex `gap` — with `gap` the two copies would
   not be exactly half the track and the loop would visibly jump. */
.brands__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brands__track {
  display: flex; align-items: center; width: max-content;
  animation: brand-marquee 30s linear infinite;
}
.brands__viewport:hover .brands__track { animation-play-state: paused; }
.brands__track span {
  margin-right: clamp(1.6rem, 4vw, 3.6rem);
  font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: .12em; color: var(--antique-rose); white-space: nowrap;
  transition: color .35s var(--ease);
}
.brands__track span:hover { color: var(--dusty-mauve); }
@keyframes brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   DEPARTMENTS — high on the page (Feedback 2)
   Numbered photo card (Sirpi services-grid reference): big number
   overlapping the bottom of the image, label + copy below.
   ========================================================================== */
.dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
.dept-card {
  position: relative; display: block;
  background: var(--chantilly);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dept-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(36,29,27,.11); }
.dept-card__photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(150deg, var(--powder-blush), var(--tea-rose));
}
.dept-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.dept-card__num {
  position: absolute; left: .9rem; bottom: .4rem; z-index: 1;
  font-family: var(--font-display); font-size: 3.6rem; line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 20px rgba(36,29,27,.22);
}
.dept-card__body { padding: 1.7rem 1.7rem 1.9rem; }
.dept-card h3 { margin-bottom: .7rem; font-size: 1.16rem; }
.dept-card p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.dept-card__link { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dusty-mauve); }
.dept-card__link::after { content: ' →'; }

/* ==========================================================================
   POPULAR SERVICES (Feedback 2: highlight most popular)
   ========================================================================== */
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 1.2rem; }
.pop-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.7rem 1.5rem;
  background: var(--chantilly); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.pop-card:hover { background: var(--powder-blush); transform: translateY(-4px); }
.pop-card h4 { font-family: var(--font-display); font-size: 1.08rem; margin: 0; }
.pop-card p { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.pop-card__meta { margin-top: auto; padding-top: .9rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dusty-mauve); }

/* ==========================================================================
   SERVICES PAGE — department tabs, then nested category tabs (Feedback 4)
   Service names + short description only. No prices.
   ========================================================================== */
.tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.6rem; }
.tab {
  padding: .8rem 1.7rem; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: transparent; color: var(--ink);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  transition: all .32s var(--ease);
}
.tab:hover { border-color: var(--antique-rose); }
.tab[aria-selected="true"] { background: var(--premium); border-color: var(--premium); color: #fff; }

.tabs--nested { justify-content: flex-start; margin-bottom: 2rem; }
.tabs--nested .tab { font-size: .72rem; padding: .6rem 1.3rem; }
.tabs--nested .tab[aria-selected="true"] { background: var(--dusty-mauve); border-color: var(--dusty-mauve); }

.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.svc-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem 1.6rem;
  background: var(--chantilly); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.svc-item:hover { background: #fff; border-color: var(--antique-rose); }
.svc-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--antique-rose); margin-top: .62rem; flex: none; }
.svc-item h4 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 .3rem; }
.svc-item p { font-size: .86rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.svc-item__book { margin-left: auto; align-self: center; flex: none; }

.panel[hidden] { display: none !important; }

/* ==========================================================================
   DOCTORS — client's serial order (Feedback 4)
   Card: name (bold) · title · education. No working shifts. (Feedback 3)
   ========================================================================== */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 1.6rem; }
.doc-card {
  background: var(--chantilly); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doc-card:hover { transform: translateY(-6px); box-shadow: 0 28px 58px rgba(36,29,27,.12); }
.doc-card__photo { position: relative; aspect-ratio: 1/1; background: var(--powder-blush); overflow: hidden; }
.doc-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-card__ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(150deg, var(--powder-blush), var(--tea-rose)); }
.doc-card__ph span { font-family: var(--font-display); font-size: 2.6rem; color: rgba(255,255,255,.9); }
.doc-card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }

/* Feedback 3 #2 — name in bold, title beneath, then educational background */
.doc-card__name { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em; margin: 0 0 .2rem; }
.doc-card__title { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dusty-mauve); margin: 0 0 .1rem; }
/* Feedback 3 #1 — "Anti Aging Expert" sits as a 2nd title on its own 2nd line */
.doc-card__title2 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--antique-rose); margin: 0 0 .85rem; }
.doc-card__bio { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 1.3rem; padding-top: .85rem; border-top: 1px solid var(--hairline); }
.doc-card__body .btn { margin-top: auto; }

/* ==========================================================================
   SHOP — left filter, hidden behind a button on mobile (Feedback 4)
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: clamp(1.6rem, 3vw, 3rem); align-items: start; }
.shop-layout > * { min-width: 0; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.shop-toolbar__count { font-size: .84rem; color: var(--ink-soft); }
.filter-open { display: none; }

.search {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem 1.2rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);   /* circular, Feedback 4 */
  background: var(--chantilly); min-width: 210px;
}
.search input { border: 0; background: none; outline: none; font: inherit; font-size: .88rem; width: 100%; color: var(--ink); }
.search svg { width: 15px; height: 15px; color: var(--ink-soft); flex: none; }
select.select {
  padding: .62rem 1.2rem; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--chantilly);
  font: inherit; font-size: .84rem; color: var(--ink); outline: none;
}

.filters { position: sticky; top: 104px; }
.filter-group { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--hairline); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h4 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin: 0 0 1rem; }
.filter-opt { display: flex; align-items: center; gap: .65rem; padding: .34rem 0; font-size: .88rem; color: var(--ink-soft); cursor: pointer; }
.filter-opt input { accent-color: var(--dusty-mauve); width: 15px; height: 15px; }
.filter-opt:hover { color: var(--dusty-mauve); }
.filters__close { display: none; }

/* ---------- treatment price list (Price List sheet) ---------- */
.shop-switch { justify-content: center; margin-bottom: 2.6rem; }
.tx-cats { justify-content: flex-start; margin-bottom: 2.2rem; }
.tx-cats .tab { font-size: .71rem; padding: .55rem 1.2rem; }
.tx-cats .tab[aria-selected="true"] { background: var(--dusty-mauve); border-color: var(--dusty-mauve); color: #fff; }
.tx-group { margin-bottom: 2.8rem; }
.tx-group__head { font-family: var(--font-display); font-size: 1.28rem; padding-bottom: .8rem; border-bottom: 1px solid var(--antique-rose); margin-bottom: .3rem; }
.tx-row { display: flex; align-items: baseline; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--hairline); }
.tx-row__name { flex: none; max-width: 58%; }
.tx-row__name span { display: block; font-size: .76rem; color: var(--ink-soft); line-height: 1.5; margin-top: .15rem; }
.tx-row__leader { flex: 1; border-bottom: 1px dotted var(--hairline); transform: translateY(-.3em); }
.tx-row__price { flex: none; font-weight: 500; color: var(--dusty-mauve); white-space: nowrap; }
.tx-row__book { flex: none; align-self: center; }

.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1.4rem; }
/* align-items:stretch is the grid's default, so every card in a row is
   already the same height as its tallest neighbour — but a longer product
   name wrapping to 2 lines still pushes the price/button down inside its
   OWN card, since they just follow the title in normal document flow.
   margin-top:auto on .prod-card__quick (below) fixes that: it's pushed to
   the bottom of the flex column instead, so every button in a row lines up
   at the same position regardless of how many lines any one title took. */
.prod-card { display: flex; flex-direction: column; }
.prod-card__media {
  position: relative; aspect-ratio: 1/1.12; background: var(--vintage-lace);
  border-radius: var(--radius-card); overflow: hidden; margin-bottom: 1rem;
  display: grid; place-items: center;
}
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.prod-card:hover .prod-card__media img { transform: scale(1.06); }
.prod-card__ph { font-family: var(--font-display); font-size: 1.5rem; color: var(--antique-rose); text-align: center; padding: 1rem; }
.prod-card__tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  padding: .3rem .8rem; border-radius: var(--radius);
  background: var(--premium); color: #fff;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
}
/* Was a hover-only reveal (opacity 0 until :hover) sitting inside the image
   link — invisible on touchscreens, which have no persistent hover state,
   and clipped by the image box's overflow:hidden if just switched to
   always-visible in place. Now a normal, always-visible block below the
   price on every device, and no longer nested inside the image's link. */
.prod-card__quick { margin-top: auto; padding-top: .6rem; }
.prod-card__brand { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--antique-rose); margin: 0 0 .3rem; }
.prod-card h4 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 .35rem; }
.prod-card__price { font-size: .92rem; color: var(--ink); }
.prod-card__price s { color: var(--ink-soft); opacity: .6; margin-right: .45rem; font-size: .84rem; }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.6rem); align-items: start; }
.pdp > * { min-width: 0; }
.pdp__gallery { display: grid; gap: .8rem; }
.pdp__main { position: relative; aspect-ratio: 1/1.05; background: var(--vintage-lace); border-radius: var(--radius-card); display: grid; place-items: center; overflow: hidden; }
.pdp__main .prod-card__ph { font-size: 2.2rem; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.pdp__thumbs div { position: relative; aspect-ratio: 1; background: var(--powder-blush); border-radius: 3px; border: 1px solid transparent; cursor: pointer; overflow: hidden; transition: border-color .3s var(--ease); }
.pdp__thumbs div:hover, .pdp__thumbs div[aria-current="true"] { border-color: var(--dusty-mauve); }
.pdp__price { font-family: var(--font-display); font-size: 1.9rem; color: var(--dusty-mauve); margin: .4rem 0 1.2rem; }
.pdp__price s { font-size: 1.1rem; color: var(--ink-soft); opacity: .55; margin-right: .6rem; }
.pdp__cart { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.6rem 0; }
.qty { display: flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.qty button { width: 42px; height: 48px; border: 0; background: none; color: var(--ink); font-size: 1.1rem; }
.qty button:hover { background: var(--powder-blush); }
.qty input { width: 46px; height: 48px; border: 0; text-align: center; font: inherit; background: none; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Feedback 2 #10 — clean, well-spaced Description / How to apply.
   Tabbed (Dr. Leigh product-page reference) instead of stacked — reuses
   the generic .tabs/.tab/.panel component and wireTabs(). */
.pdp__tabs { margin-top: clamp(2.6rem, 5vw, 4.2rem); justify-content: flex-start; }
.pdp__panels { border: 1px solid var(--hairline); border-radius: var(--radius-card); overflow: hidden; }
.pdp__panel { background: var(--chantilly); padding: clamp(1.8rem, 3.4vw, 3rem); }
.pdp__panel h3 { margin-bottom: 1.1rem; }
.pdp__panel ol { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.pdp__panel ol li { margin-bottom: .7rem; padding-left: .4rem; }
.pdp__rating { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 1rem; font-size: .84rem; color: var(--ink-soft); }
.pdp__rating .stars { color: var(--oat-silk); letter-spacing: .16em; font-size: .95rem; }
.pdp__meta { display: grid; gap: .55rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); font-size: .86rem; color: var(--ink-soft); }
.pdp__meta div { display: flex; gap: .7rem; }
.pdp__meta b { font-weight: 500; color: var(--ink); min-width: 96px; }

/* ==========================================================================
   BOOKING — full-page, long booking section (Feedback 4)
   ========================================================================== */
.booking { background: var(--premium); color: var(--chantilly); }
.booking__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.booking__grid > * { min-width: 0; }
.booking h2 { color: #fff; }
.booking__steps { margin-top: 2.4rem; display: grid; gap: 1.5rem; }
.booking__step { display: flex; gap: 1.1rem; }
.booking__step b {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--dusty-mauve); color: var(--antique-rose);
  display: grid; place-items: center; font-family: var(--font-display); font-size: .9rem; font-weight: 400;
}
.booking__step h4 { color: #fff; font-size: 1rem; margin-bottom: .2rem; }
.booking__step p { font-size: .88rem; color: rgba(252,249,246,.6); margin: 0; }

/* Working Hours (Sirpi appointment-page reference: uppercase day, dotted
   leader, time — reusing the CLINIC.hours schedule, not new hours) */
.hours-list { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(252,249,246,.14); }
.hours-list h4 { color: #fff; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-bottom: 1.1rem; }
.hours-row { display: flex; align-items: baseline; gap: .6rem; padding: .42rem 0; font-size: .84rem; }
.hours-row b { flex: none; font-family: var(--font-body); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--tea-rose); }
.hours-row .leader { flex: 1; border-bottom: 1px dotted rgba(252,249,246,.26); transform: translateY(-.3em); }
.hours-row span:last-child { flex: none; color: rgba(252,249,246,.78); }
.hours-row[data-closed] span:last-child { color: var(--antique-rose); }

.form-card { background: var(--chantilly); color: var(--ink); padding: clamp(1.8rem, 3.6vw, 3rem); border-radius: var(--radius-card); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: .88rem 1.2rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: #fff; font: inherit; font-size: .92rem; color: var(--ink);
  outline: none; transition: border-color .3s var(--ease);
}
.field textarea { border-radius: 18px; resize: vertical; min-height: 108px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--dusty-mauve); }
.form-note { font-size: .78rem; color: var(--ink-soft); margin: 1.1rem 0 0; }
.form-ok {
  margin-top: 1.1rem; padding: .9rem 1.2rem; border-radius: var(--radius-card);
  background: var(--powder-blush); color: var(--dusty-mauve); font-size: .88rem;
}
/* Order confirmation — the one message a customer must not miss, so it is a
   large, centred card rather than a small tinted line. */
.form-ok--order {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
  margin: 1.4rem 0; padding: 1.8rem 1.4rem; font-size: 1.05rem; line-height: 1.5;
  background: #E9F4EC; color: #1F4D2E; border: 1.5px solid #7DB892;
}
.form-ok--order strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.form-ok--order b { font-weight: 700; }
.form-ok--order .form-ok__total { font-size: 1.25rem; margin: .2rem 0; }
.form-ok__check {
  width: 54px; height: 54px; border-radius: 50%; background: #2F7D4A; color: #fff;
  display: grid; place-items: center; font-size: 1.7rem; margin-bottom: .3rem;
}

/* ---------- Buy Now checkout modal ---------- */
.checkout-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.checkout-modal[data-open="false"] { display: none; }
.checkout-modal__backdrop { position: absolute; inset: 0; background: rgba(20,16,16,.55); }
.checkout-modal__card { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.checkout-modal__close { position: absolute; top: 1rem; right: 1rem; }
.checkout-modal__summary {
  font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.2rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--hairline);
}
.form-error { color: #9C4A3F; font-size: .82rem; margin: .8rem 0 0; }

/* ==========================================================================
   CART DRAWER — a real per-item cart, opened by the header cart icon and by
   any "Add to cart" button. Checkout here POSTs to /api/orders (a separate,
   newer path from the single-item Buy Now modal on the product page).
   ========================================================================== */
.cart-drawer { position: fixed; inset: 0; z-index: 210; }
/* Buttons/panels inside the drawer set their own `display` (.btn is
   display:inline-flex, .cart-drawer__body is display:flex) — an author
   style always wins over the browser's default [hidden]{display:none},
   so toggling el.hidden in JS silently did nothing for them: "Checkout"
   and "Confirm order" were both visible at once instead of swapping.
   Same fix already used for .panel[hidden] elsewhere in this file. */
.cart-drawer [hidden] { display: none !important; }
.cart-drawer[data-open="false"] { display: none; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(20,16,16,.55); }
/* A full-height edge-to-edge drawer, not a floating card capped to a fixed
   box — that capped version kept needing its height bumped every time
   checkout grew a new field (delivery area, payment method, ...), and
   whatever didn't fit sat below a scroll fold that's invisible by default
   on macOS/Chrome. Pinning this to the viewport's own height sidesteps
   the whole class of bug: there's no fixed box size left to outgrow. */
.cart-drawer__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1;
  width: min(420px, 100vw); height: 100dvh;
  background: var(--chantilly); border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -30px 0 70px rgba(20,16,16,.26);
}
.cart-drawer__head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--hairline);
}
.cart-drawer__head h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.cart-drawer__body { flex: 1; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-drawer__empty { color: var(--ink-soft); font-size: .9rem; text-align: center; padding: 2rem 0; }
/* flex:1 + overflow-y:auto — same treatment as .cart-drawer__body. Without
   it, this section (visible only on the checkout step, with items hidden)
   had no scroll of its own: its content just overflowed the panel's fixed
   height and got clipped by the panel's overflow:hidden, with the "Confirm
   order" button in the footer pushed out of view and no way to reach it. */
.cart-drawer__checkout { flex: 1; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto; padding: 0 1.4rem 1.2rem; }
.cart-drawer__summary { margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); }
.cart-drawer__summary-row { display: flex; justify-content: space-between; gap: .8rem; font-size: .85rem; padding: .28rem 0; }
.cart-drawer__summary-row span:first-child { color: var(--ink-soft); }
.cart-drawer__summary-row.subtotal { font-weight: 600; margin-top: .2rem; padding-top: .55rem; border-top: 1px solid var(--hairline); color: var(--ink); }
.cart-drawer__bkash-note { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 .7rem; }
.cart-line { display: flex; align-items: center; gap: 1rem; }
/* position:relative is required here — .stock-photo (used via productPhoto())
   is itself `position:absolute;inset:0`, expecting a positioned parent with
   real dimensions to fill. Without it, it escapes to the nearest positioned
   ancestor instead (the whole drawer panel), which is exactly what happened:
   one giant photo covering the entire cart drawer instead of a 64px thumb. */
.cart-line__media { position: relative; width: 64px; height: 64px; flex: none; border-radius: var(--radius-card); overflow: hidden; }
.cart-line__media .stock-photo, .cart-line__media img { width: 100%; height: 100%; }
.cart-line__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cart-line__info strong { font-size: .9rem; font-family: var(--font-display); }
.cart-line__info span { font-size: .82rem; color: var(--ink-soft); }
.cart-line__qty { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.cart-line__qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hairline);
  background: #fff; display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.cart-line__qty button:hover { background: var(--premium); color: #fff; border-color: var(--premium); }
.cart-line__qty span { font-size: .85rem; min-width: 1.2em; text-align: center; }
.cart-line__remove { flex: none; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; padding: .2rem; }
.cart-line__remove:hover { color: var(--dusty-mauve); }
/* Lock the page behind the open drawer (see openCart) and, once an order is
   placed, drop the footer totals — the cart is empty by then, so they would
   read as "Total ৳0" beside the confirmation. */
html.cart-open, html.cart-open body { overflow: hidden; }
.cart-drawer[data-state="done"] #cartTotalRow, .cart-drawer[data-state="done"] #cartDiscountRow, .cart-drawer[data-state="done"] #cartDeliveryRow { display: none !important; }
.cart-drawer__backdrop { touch-action: none; }
.cart-drawer__foot { flex: none; padding: 1.2rem 1.4rem max(1.2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.cart-drawer__delivery { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; font-size: .85rem; opacity: .75; }
.cart-drawer__total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .95rem; }
.cart-drawer__total strong { font-family: var(--font-display); font-size: 1.2rem; }
/* No mobile override needed any more — width: min(420px, 100vw) and
   height: 100dvh on .cart-drawer__panel already go full-width/full-height
   on a narrow screen without a separate breakpoint. */

/* ==========================================================================
   CLIENT REVIEWS (renamed from Success Stories — Feedback 2)
   ========================================================================== */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.rev-card {
  padding: 2rem 1.8rem; background: var(--chantilly);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 1rem;
}
.rev-card__stars { color: var(--oat-silk); letter-spacing: .22em; font-size: .9rem; }
.rev-card p { font-size: .94rem; color: var(--ink-soft); font-style: italic; margin: 0; }
.rev-card__who { margin-top: auto; display: flex; align-items: center; gap: .8rem; padding-top: .6rem; }
.rev-card__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--tea-rose), var(--antique-rose));
  display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-size: .95rem;
  overflow: hidden;
}
.rev-card__av img { width: 100%; height: 100%; object-fit: cover; }
.rev-card__who b { display: block; font-weight: 500; font-size: .9rem; }
.rev-card__who span { font-size: .76rem; color: var(--ink-soft); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.6rem); align-items: center; }
.about-split > * { min-width: 0; }
.about-figure { position: relative; aspect-ratio: 4/4.6; border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(150deg, var(--powder-blush), var(--tea-rose)); display: grid; place-items: center; }
.about-figure img { width: 100%; height: 100%; object-fit: cover; }
.about-figure span { font-family: var(--font-display); font-size: 1.2rem; color: rgba(255,255,255,.85); letter-spacing: .18em; text-transform: uppercase; }
.founder { max-width: 780px; margin-inline: auto; }
.founder p { font-size: 1.02rem; }
.founder__sign { font-family: var(--font-display); font-size: 1.35rem; color: var(--dusty-mauve); margin-top: 2rem; }
.founder__sign span { display: block; font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; }

/* ---------- values / assurances: moved to the very bottom (Feedback 2) ---------- */
.assure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem; }
.assure { text-align: center; padding: 1.6rem 1.2rem; }
.assure__ico {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--powder-blush); display: grid; place-items: center; color: var(--dusty-mauve);
}
.assure__ico svg { width: 22px; height: 22px; }
.assure h4 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 .35rem; }
.assure p { font-size: .84rem; color: var(--ink-soft); margin: 0; }

/* ---------- page banner ---------- */
.pagehead { background: var(--vintage-lace); padding-block: clamp(48px, 7vw, 92px); text-align: center; border-bottom: 1px solid var(--hairline); }
.crumbs { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: .9rem; }
.crumbs a:hover { color: var(--dusty-mauve); }

/* ==========================================================================
   FOOTER — map, branch info, WhatsApp (Feedback 2). No Contact page.
   ========================================================================== */
.footer { background: var(--premium); color: rgba(252,249,246,.66); padding-top: clamp(56px, 7vw, 92px); font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.5fr; gap: clamp(1.8rem, 4vw, 3.4rem); padding-bottom: 3rem; }
.footer__grid > * { min-width: 0; }
.footer h4 { font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin: 0 0 1.3rem; }
.footer a:hover { color: var(--antique-rose); }
.footer__links li { margin-bottom: .6rem; }
.footer .brand__name { color: #fff; }
.footer__brand p { margin-top: 1.2rem; max-width: 34ch; }
.footer__social { display: flex; gap: .55rem; margin-top: 1.4rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(252,249,246,.18);
  display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.footer__social a:hover { background: var(--dusty-mauve); border-color: var(--dusty-mauve); color: #fff; }
.footer__social svg { width: 15px; height: 15px; }
.footer__contact li { display: flex; gap: .7rem; margin-bottom: .8rem; align-items: flex-start; }
.footer__contact svg { width: 15px; height: 15px; color: var(--antique-rose); flex: none; margin-top: .34rem; }
.footer__map { border: 0; width: 100%; height: 190px; border-radius: var(--radius-card); filter: grayscale(1) contrast(.9) opacity(.8); margin-top: 1rem; }
.footer__bar {
  border-top: 1px solid rgba(252,249,246,.12); padding-block: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem;
}

/* ==========================================================================
   CHAT ASSISTANT — floating launcher + panel. Answers come from /api/chat
   (Gemini, keyed server-side).
   ========================================================================== */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 101;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--premium); background: var(--premium); color: var(--chantilly);
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(20,16,16,.3);
  transition: background .35s var(--ease), border-color .35s var(--ease);
  animation: chatFabPop .6s var(--ease) .5s backwards, chatFabFloat 3.4s ease-in-out 1.1s infinite;
}
.chat-fab:hover { background: var(--dusty-mauve); border-color: var(--dusty-mauve); }
.chat-fab svg { width: 26px; height: 26px; transition: transform .35s var(--ease); }
.chat-fab:hover svg { transform: scale(1.15) rotate(8deg); }

/* Two staggered rings breathing outward — quiet enough to sit unattended
   on a luxury site, still enough motion to catch a first-time visitor's eye. */
.chat-fab::before, .chat-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--dusty-mauve); opacity: 0; pointer-events: none;
  animation: chatFabRing 2.8s var(--ease) infinite;
}
.chat-fab::after { animation-delay: 1.4s; }

.chat-fab__dot {
  position: absolute; top: 4px; right: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--tea-rose); border: 2px solid var(--premium);
  animation: chatFabDot 1.8s ease-in-out 2s infinite;
}
.chat-panel[data-open="true"] ~ .chat-fab .chat-fab__dot,
.chat-fab[aria-expanded="true"] .chat-fab__dot { display: none; }

/* Once the visitor has opened the chat, or asked not to be nudged, the
   button still works exactly the same — it just stops asking for attention. */
.chat-fab[data-noticed="true"] {
  animation: none;
}
.chat-fab[data-noticed="true"]::before,
.chat-fab[data-noticed="true"]::after { animation: none; opacity: 0; }
.chat-fab[data-noticed="true"] .chat-fab__dot { animation: none; }

@keyframes chatFabRing {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { opacity: .12; }
  100% { transform: scale(1.6);  opacity: 0; }
}
@keyframes chatFabFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes chatFabPop {
  0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  55%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  80%  { transform: scale(.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes chatFabDot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

.chat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 102;
  width: min(380px, calc(100vw - 40px)); height: min(540px, calc(100vh - 200px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--chantilly);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: 0 30px 70px rgba(20,16,16,.26);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.chat-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.chat-panel__head {
  flex: none; display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.1rem; background: var(--premium); color: var(--chantilly);
}
.chat-panel__head img { height: 34px; width: auto; }
.chat-panel__title { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
/* :not([data-live]) — the assistant's name is itself wrapped in a span now
   (so /admin can rename it), and must keep the title's display styling
   rather than picking up this small-caps subtitle treatment. */
.chat-panel__title span:not([data-live]) {
  display: block; font-family: var(--font-body); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--antique-rose); margin-top: .15rem;
}
.chat-panel__close {
  margin-left: auto; background: none; border: 0; color: var(--chantilly);
  display: grid; place-items: center; padding: .3rem; opacity: .8;
}
.chat-panel__close:hover { opacity: 1; }
.chat-panel__close svg { width: 18px; height: 18px; }

.chat-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.chat-msg { max-width: 85%; padding: .7rem 1rem; font-size: .9rem; line-height: 1.6; border-radius: 14px; white-space: pre-wrap; }
.chat-msg--bot  { background: var(--powder-blush); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg--user { background: var(--premium); color: var(--chantilly); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg a { text-decoration: underline; }

.chat-typing { display: flex; gap: 4px; align-self: flex-start; padding: .85rem 1rem; background: var(--powder-blush); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--dusty-mauve); opacity: .45; animation: chatDot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }

.chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.1rem .8rem; }
.chat-chips button {
  border: 1px solid var(--hairline); background: transparent; color: var(--ink-soft);
  border-radius: var(--radius); padding: .42rem .9rem; font-size: .74rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chat-chips button:hover { background: var(--premium); border-color: var(--premium); color: var(--chantilly); }

.chat-form { flex: none; display: flex; gap: .5rem; padding: .8rem 1.1rem 1.1rem; border-top: 1px solid var(--hairline); }
.chat-form input {
  flex: 1; min-width: 0; padding: .75rem 1.1rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: #fff; font: inherit; font-size: .88rem; color: var(--ink); outline: none;
  transition: border-color .3s var(--ease);
}
.chat-form input:focus { border-color: var(--dusty-mauve); }
.chat-form button {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--premium); background: var(--premium); color: var(--chantilly);
  display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.chat-form button:hover { background: var(--dusty-mauve); border-color: var(--dusty-mauve); }
.chat-form button:disabled { opacity: .45; }
.chat-form button svg { width: 17px; height: 17px; }
.chat-note { flex: none; font-size: .66rem; color: var(--ink-soft); text-align: center; padding: 0 1.1rem .8rem; margin: 0; }

@media (max-width: 640px) {
  .chat-panel {
    right: 12px; left: 12px; bottom: 12px;
    width: auto; height: min(76vh, calc(100vh - 24px));
  }
}

/* ==========================================================================
   RESPONSIVE — mobile optimisation (Feedback 2 & 4)
   ========================================================================== */
@media (max-width: 1080px) {
  .booking__grid, .pdp, .about-split { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav, .header__cta, .topbar { display: none; }
  .burger { display: grid; }
  .header__inner { grid-template-columns: auto 1fr; min-height: 68px; }
  .brand { justify-self: start; }

  /* Feedback 4 — hide the full filter panel, open it from a button */
  .filter-open { display: inline-flex; }
  .filters {
    position: fixed; inset: 0; z-index: 130;
    background: var(--chantilly); padding: 1.3rem var(--gutter) 2rem;
    overflow-y: auto; transform: translateY(100%);
    transition: transform .42s var(--ease);
  }
  .filters[data-open="true"] { transform: none; }
  .filters__close { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }

  /* Feedback 4 — premium black, rounder controls on mobile */
  .btn { background: var(--premium); border-color: var(--premium); color: #fff; }
  .btn--ghost { background: transparent; color: var(--premium); border-color: var(--premium); }
  .search, select.select { border-color: var(--premium); }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .prod-card h4 { font-size: .92rem; }
  .hero__cta .btn { width: 100%; }
  .hero__checks { grid-template-columns: 1fr; }
  /* label on its own line so the marquee gets the full width */
  .brands .wrap { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .brands__viewport { width: 100%; }
  .svc-item__book { display: none; }
  /* Name on its own line, then leader · price · Book — the booking CTA stays
     visible on mobile, which is the primary device for this site. */
  .tx-row { flex-wrap: wrap; gap: .45rem .7rem; }
  .tx-row__name { max-width: none; flex: 1 0 100%; }
  .tx-row__book { padding: .5rem 1.1rem; font-size: .66rem; }
  .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }

  /* Feedback: the hero video is 16:9 (landscape), overlaid full-bleed behind
     the headline text. On a phone the text stack alone needs 700px+, so the
     video box was forced to that same tall/narrow shape and object-fit:cover
     had to zoom in hard — only a thin sliver of the video was visible.
     Below 640px, stop overlaying: video sits in its own near-native-ratio
     band up top (mild, expected cover-crop only), text flows below it on a
     solid dark panel instead of on top of the footage. */
  .hero { display: block; min-height: 0; background: var(--premium); overflow: visible; }
  .hero__media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero__inner { max-width: none; padding-block: 2.4rem clamp(70px, 12vw, 120px); }

  /* Feedback: WORKING HOURS day + time overflowed the panel on narrow
     phones (no room for "SATURDAY" + "4:00 PM – 8:00 PM" on one line),
     which is what let the page rubber-band scroll sideways. Stack instead. */
  .hours-row { flex-wrap: wrap; row-gap: .2rem; }
  .hours-row .leader { display: none; }
  .hours-row b { flex-basis: 100%; }
  .hours-row span:last-child { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* The rule above would spin an infinite marquee at .01ms per loop — kill the
     animation outright and let the strip sit still instead. */
  .brands__track { animation: none; }
  .chat-fab, .chat-fab::before, .chat-fab::after, .chat-fab__dot { animation: none; }
}

/* ==========================================================================
   IMAGE PLACEHOLDERS
   Every picture slot on the site is marked with a dashed, striped box that
   names the slot, the item it belongs to, and the size to supply — so the
   client can see exactly which photo goes where.
   When a real image arrives, replace the .ph element with an <img>.
   ========================================================================== */
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: 1rem; text-align: center;
  background: repeating-linear-gradient(45deg,
              var(--vintage-lace) 0 11px, var(--powder-blush) 11px 22px);
  border: 1px dashed var(--dusty-mauve);
  color: var(--dusty-mauve);
}
.ph svg { width: 24px; height: 24px; opacity: .7; margin-bottom: .1rem; }
.ph__label { font-size: .61rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.ph__name  { font-size: .76rem; line-height: 1.4; color: var(--ink-soft); max-width: 92%; }
.ph__size  { font-size: .6rem; letter-spacing: .12em; color: var(--antique-rose); }

/* compact variant for small boxes (gallery thumbnails) */
.ph--sm { gap: .15rem; padding: .4rem; }
.ph--sm svg { width: 15px; height: 15px; margin: 0; }
.ph--sm .ph__label { font-size: .52rem; letter-spacing: .1em; }

/* Generic stock photography standing in for real product shots (no visible
   "stock photo" label, by site owner's request). */
.stock-photo { position: absolute; inset: 0; }
.stock-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); }

/* hero: sits over the video area so the landing-page slot is obvious */
.hero__ph {
  position: absolute; right: var(--gutter); top: 24%; z-index: 2;
  width: min(330px, 32vw); aspect-ratio: 4/3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1.2rem; text-align: center;
  border: 2px dashed rgba(255,255,255,.65); border-radius: var(--radius-card);
  background: rgba(20,16,16,.42); color: #fff;
}
.hero__ph svg { width: 28px; height: 28px; opacity: .85; }
.hero__ph .ph__name { color: rgba(255,255,255,.82); }
.hero__ph .ph__size { color: var(--tea-rose); }

/* logo slots — discreet so the header still reads as designed */
.brand__mark { border: 1px dashed var(--dusty-mauve); }
.footer .brand__mark { border-color: rgba(252,249,246,.5); }

@media (max-width: 900px) {
  .hero__ph {
    position: static; transform: none;
    width: auto; aspect-ratio: auto; margin: 1.6rem var(--gutter) 0;
    padding: 1rem;
  }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   PROMO POPUP — a single site-wide poster/video slot, admin-toggled
   (/admin → Promo popup). "Side" sits bottom-left specifically so it never
   collides with the chat launcher, which already owns bottom-right.
   ========================================================================== */
.promo-popup {
  position: fixed; z-index: 100;
  background: var(--chantilly); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: 0 30px 70px rgba(20,16,16,.26);
  overflow: hidden;
  animation: promoPopupIn .4s var(--ease);
}
.promo-popup--top { top: 16px; left: 50%; transform: translateX(-50%); }
.promo-popup--side { left: 20px; bottom: 20px; }
.promo-popup--middle { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Width is capped by BOTH the viewport width and its height (via the ratio),
   so a tall poster never runs off the bottom of a short screen. */
.promo-popup--portrait { aspect-ratio: 4/5; width: min(400px, calc(100vw - 32px), calc((100dvh - 32px) * 0.8)); }
.promo-popup--tall { aspect-ratio: 3/4; width: min(400px, calc(100vw - 32px), calc((100dvh - 32px) * 0.75)); }
.promo-popup--square { aspect-ratio: 1/1; width: min(440px, calc(100vw - 32px), calc(100dvh - 32px)); }
.promo-popup--side.promo-popup--portrait, .promo-popup--side.promo-popup--tall { width: min(280px, calc(100vw - 40px)); }
.promo-popup--side.promo-popup--square { width: min(260px, calc(100vw - 40px)); }
.promo-popup__media { position: relative; width: 100%; height: 100%; display: block; cursor: default; }
.promo-popup__media img, .promo-popup__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.promo-popup__media[data-linked] { cursor: pointer; }
.promo-popup__heading {
  position: absolute; left: 14px; right: 44px; bottom: 12px; z-index: 1;
  margin: 0; color: #fff; font-family: var(--font-body); font-weight: 500; font-size: .88rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.promo-popup__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(20,16,16,.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.promo-popup__close svg { width: 15px; height: 15px; }
@keyframes promoPopupIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  .promo-popup--side { left: 12px; bottom: 12px; }
}

/* Footer map: iframe plus a full-cover link to the real Google Maps place page. */
.footer__map-wrap { position: relative; margin-top: 1rem; }
.footer__map-wrap .footer__map { margin-top: 0; display: block; }
.footer__map-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: .6rem; }
.footer__map-link span { background: #fff; color: var(--ink); font-size: .78rem; font-weight: 500; padding: .35rem .7rem; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* Cart promo code row */
.promo-row { display: flex; gap: .5rem; }
.promo-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.cart-drawer__promo-msg { font-size: .8rem; margin: .45rem 0 0; color: #9C4A3F; }
.cart-drawer__promo-msg[data-ok="true"] { color: #2F7D4A; font-weight: 500; }