/* ============================================================================
   Taksu Nusa Spa — design system
   Warm botanical luxury. Deep green, cream, sand, and brass.

   Tokens are the oklch values from the approved design, kept verbatim so the
   colours match exactly. Everything below is plain CSS driven by them, so a
   palette change is a handful of lines here and nothing else.
   ========================================================================= */

:root{
  --radius: 0.625rem;

  --background:            oklch(0.975 0.01  95);
  --foreground:            oklch(0.26  0.03 160);
  --card:                  oklch(0.99  0.005 95);
  --card-foreground:       oklch(0.26  0.03 160);
  --primary:               oklch(0.36  0.06 160);
  --primary-foreground:    oklch(0.975 0.01  95);
  --secondary:             oklch(0.93  0.02  95);
  --secondary-foreground:  oklch(0.36  0.06 160);
  --muted:                 oklch(0.93  0.015 130);
  --muted-foreground:      oklch(0.5   0.03 150);
  --accent:                oklch(0.7   0.12  80);
  --destructive:           oklch(0.55  0.18  25);
  --border:                oklch(0.88  0.02 110);
  --ring:                  oklch(0.5   0.05 160);

  --sage:   oklch(0.72 0.05 140);
  --sand:   oklch(0.92 0.02  95);
  --clay:   oklch(0.6  0.1   55);
  --brass:  oklch(0.72 0.13  80);
  --ivory:  oklch(0.98 0.005 95);
  --forest: oklch(0.3  0.05 160);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;

  --maxw: 80rem;          /* max-w-7xl */
  --gutter: 1.5rem;
  --shadow-sm: 0 1px 2px oklch(0.26 0.03 160 / .06);
  --shadow: 0 4px 16px oklch(0.26 0.03 160 / .07);
  --shadow-lg: 0 12px 32px oklch(0.26 0.03 160 / .10);
  --header-h: 4.5rem;
}

*{box-sizing:border-box;border-color:var(--border)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* Inline icons carry no width/height attributes, so they must be sized here
   or they fall back to the SVG default of 300×150. */
.ico{width:1.05em;height:1.05em;flex:none;display:inline-block;
  vertical-align:-.15em}
.cart-link .ico{width:1.25rem;height:1.25rem}
.trust-item .ico{width:1.5rem;height:1.5rem}
.area-pill .ico{width:.9rem;height:.9rem;color:var(--brass)}
.cta-meta .ico{width:1rem;height:1rem}
a{color:var(--primary);text-decoration:none}
a:hover{color:oklch(0.36 0.06 160 / .82)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.12;margin:0 0 .4em}
h1{font-size:clamp(2.75rem,7vw,6rem)}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:1.5rem}
h4{font-size:1.125rem}
p{margin:0 0 1em}

.muted{color:var(--muted-foreground)}
.small{font-size:.875rem}
.tiny{font-size:.75rem}
.right{text-align:right}
.center{text-align:center}
main{min-height:60vh}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---------------------------------------------------------------- eyebrow */
/* The small letterspaced label with a rule beside it, used above every
   section heading in the design. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  margin-bottom:1rem;
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.25em;
  color:var(--clay);
}
.eyebrow::before{content:"";display:block;height:1px;width:2rem;background:currentColor}
.eyebrow.center-rules::after{content:"";display:block;height:1px;width:2rem;background:currentColor}
.eyebrow.on-dark{color:var(--brass)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:999px;
  padding:.875rem 2rem;
  font-family:var(--font-body);
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s;
}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:oklch(0.36 0.06 160 / .9);color:var(--primary-foreground);
  box-shadow:0 10px 24px oklch(0.36 0.06 160 / .2)}
.btn-outline{border-color:oklch(0.26 0.03 160 / .2);background:oklch(0.98 0.005 95 / .6);
  color:var(--foreground);backdrop-filter:blur(4px)}
.btn-outline:hover{background:var(--ivory);color:var(--foreground)}
.btn-ivory{background:var(--ivory);color:var(--forest)}
.btn-ivory:hover{background:oklch(0.98 0.005 95 / .9);color:var(--forest);box-shadow:var(--shadow-lg)}
.btn-on-dark{border-color:oklch(0.975 0.01 95 / .2);background:oklch(0.975 0.01 95 / .07);
  color:var(--primary-foreground);backdrop-filter:blur(4px)}
.btn-on-dark:hover{background:oklch(0.975 0.01 95 / .14);color:var(--primary-foreground)}
.btn-soft{background:oklch(0.36 0.06 160 / .06);color:var(--primary);padding:.5rem 1rem}
.btn-soft:hover{background:oklch(0.36 0.06 160 / .12);color:var(--primary)}
.btn-sm{padding:.625rem 1.25rem}
.btn-lg{padding:1rem 2rem}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-block{display:flex;width:100%}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--primary);
  cursor:pointer;text-decoration:underline}
.text-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--primary);
}

/* ---------------------------------------------------------------- header */
.promo-bar{
  background:var(--brass);color:oklch(0.26 0.03 160);
  text-align:center;padding:.5rem 1rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
}
.site-header{
  position:sticky;top:0;z-index:50;
  background:oklch(0.98 0.005 95 / .85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid oklch(0.88 0.02 110 / .6);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:.875rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.6rem}
.brand:hover{color:inherit}
.brand-mark{
  width:2.25rem;height:2.25rem;flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid oklch(0.36 0.06 160 / .3);
  background:oklch(0.36 0.06 160 / .05);
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  color:var(--primary);
}
.brand-text{font-family:var(--font-display);font-size:1.125rem;font-weight:500;
  letter-spacing:.02em;color:var(--foreground)}

.mainnav{display:flex;align-items:center;gap:2rem}
.mainnav a{
  font-size:.75rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;
  color:oklch(0.26 0.03 160 / .7);
}
.mainnav a:hover,.mainnav a.on{color:var(--primary)}

.header-actions{display:flex;align-items:center;gap:.75rem}
.cart-link{
  position:relative;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--border);color:var(--foreground);
}
.cart-link .count{
  position:absolute;top:-.25rem;right:-.25rem;
  min-width:1.15rem;height:1.15rem;padding:0 .3rem;
  display:grid;place-items:center;border-radius:999px;
  background:var(--brass);color:oklch(0.26 0.03 160);
  font-size:.65rem;font-weight:700;
}
.lang-switch{display:flex;gap:.35rem;font-size:.7rem;font-weight:600;letter-spacing:.1em}
.lang-switch a{color:var(--muted-foreground)}
.lang-switch a.on{color:var(--primary)}

.menu-toggle{
  display:none;width:2.5rem;height:2.5rem;
  align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;
  background:transparent;cursor:pointer;color:var(--foreground);
  transition:background-color .2s,color .2s;
}
/* Open state flips to a cross on the brand green, so it is obvious the button
   closes the panel it just opened. */
.menu-toggle.is-open{background:var(--forest);color:var(--ivory);
  border-color:var(--forest)}
.menu-toggle .ico-close{display:none}
.menu-toggle.is-open .ico-menu{display:none}
.menu-toggle.is-open .ico-close{display:inline-flex}
/* The phone menu is the whole navigation on a phone, so it gets the brand's
   deep green rather than the pale header colour — it reads as a deliberate
   panel instead of the page continuing. */
.mobile-nav{display:none;background:var(--forest);color:var(--ivory);
  padding:.5rem var(--gutter) 1.5rem}
.mobile-nav.open{display:block;animation:menu-in .18s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}

.mobile-nav .nav-link{
  display:flex;align-items:center;justify-content:space-between;
  min-height:3rem;padding:.6rem 0;            /* comfortable thumb target */
  font-size:.875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--ivory);
  border-bottom:1px solid oklch(0.98 0.005 95 / .12);
}
.mobile-nav .nav-link::after{content:"›";color:var(--brass);font-size:1.25rem;
  line-height:1;opacity:.7}
.mobile-nav .nav-link:hover,.mobile-nav .nav-link.on{color:var(--brass)}
.mobile-nav .nav-link.on::after{opacity:1}

/* Without this the .mobile-nav link colour would beat .btn-primary on
   specificity and paint the Book now label dark green on dark green. */
.mobile-nav .btn{margin-top:.75rem;border-bottom:0;min-height:0}
.mobile-nav .btn-primary{background:var(--brass);color:var(--forest)}
.mobile-nav .btn-primary:hover{background:oklch(0.78 0.13 80);color:var(--forest)}
.mobile-nav .btn-outline{background:transparent;color:var(--ivory);
  border-color:oklch(0.98 0.005 95 / .35)}
.mobile-nav .btn-outline:hover{background:oklch(0.98 0.005 95 / .1);color:var(--ivory)}

.mobile-nav .lang-row{display:flex;gap:.6rem;margin-top:1.25rem}
.mobile-nav .lang-row a{
  flex:1;text-align:center;border-radius:999px;padding:.6rem 1rem;
  border:1px solid oklch(0.98 0.005 95 / .25);color:var(--ivory);
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
}
.mobile-nav .lang-row a.on{background:var(--ivory);color:var(--forest);
  border-color:var(--ivory)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:min(88vh,46rem)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, oklch(0.98 0.005 95 / .96) 0%,
                              oklch(0.98 0.005 95 / .72) 45%,
                              oklch(0.98 0.005 95 / 0) 100%),
    linear-gradient(to top,    oklch(0.98 0.005 95) 0%,
                              oklch(0.98 0.005 95 / 0) 45%,
                              oklch(0.98 0.005 95 / .3) 100%);
}
/* Without a photo the hero still has to look composed. */
.hero-bg.no-image{background:
  radial-gradient(60rem 40rem at 75% 30%, oklch(0.92 0.02 95), transparent 70%),
  linear-gradient(140deg, oklch(0.975 0.01 95), oklch(0.9 0.03 140));}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:5rem var(--gutter);width:100%}
.hero-copy{max-width:38rem}
.hero h1{color:var(--foreground);margin-bottom:0}
.hero h1 .accent{font-style:italic;color:var(--primary);display:block}
.hero-lead{margin-top:2rem;max-width:30rem;font-size:1.0625rem;line-height:1.7;
  color:oklch(0.26 0.03 160 / .8)}
.hero-rating{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.stars{display:inline-flex;gap:.2rem;color:var(--brass)}
.stars svg{width:1rem;height:1rem;fill:currentColor}
.hero-rating span{font-size:.875rem;font-weight:500;color:oklch(0.26 0.03 160 / .8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}

/* ---------------------------------------------------------------- trustbar */
.trustbar{border-block:1px solid var(--border);background:var(--ivory)}
.trustbar-grid{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:2rem 1rem;text-align:center;border-left:1px solid var(--border);
}
.trust-item:first-child{border-left:0}
.trust-item svg{width:1.5rem;height:1.5rem;color:var(--primary)}
.trust-item span{font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.15em;color:oklch(0.26 0.03 160 / .7)}

/* ---------------------------------------------------------------- sections */
.section{padding:6rem 0}
.section-ivory{background:var(--ivory)}
.section-sand{background:var(--sand)}
.section-primary{background:var(--primary);color:var(--primary-foreground)}
.section-forest{background:var(--forest);color:var(--ivory)}
.section-primary h2,.section-forest h2{color:inherit}
.section-head{max-width:42rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{margin-top:1.25rem;color:oklch(0.26 0.03 160 / .7)}
.section-primary .section-head p,.section-forest .section-head p{
  color:oklch(0.975 0.01 95 / .7)}
.section-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
/* Rides down beside a much longer list instead of leaving it stranded at the
   top with a screen of blank page underneath. 5.5rem clears the sticky header. */
.split-sticky{position:sticky;top:5.5rem}

.travel-card{
  margin-top:2.5rem;padding:1.5rem;
  border:1px solid var(--border);border-radius:1rem;background:var(--card);
}
.travel-card h3{display:flex;align-items:center;gap:.5rem;
  font-size:1.125rem;margin-bottom:.4rem}
.travel-card h3 .ico{width:1.05rem;height:1.05rem;color:var(--brass)}
.travel-card p{margin-bottom:1rem}
.travel-links{display:flex;flex-wrap:wrap;gap:.5rem}
.travel-links a{
  display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid var(--border);border-radius:999px;
  padding:.35rem .85rem;font-size:.8125rem;color:var(--foreground);
}
.travel-links a:hover{background:var(--secondary)}
.travel-links a.all{border-color:var(--primary);color:var(--primary);font-weight:500}
.travel-links a.all .ico{width:.85rem;height:.85rem}
.section-topbar{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap}

.page-head{padding:3rem 0 0}
.crumbs{font-size:.8rem;color:var(--muted-foreground);margin-bottom:.75rem}
.crumbs a{color:var(--muted-foreground)}
.crumbs a:hover{color:var(--primary)}
.lead{font-size:1.0625rem;line-height:1.7;color:oklch(0.26 0.03 160 / .75);max-width:40rem}
.prose{max-width:42rem}
.prose h2{margin-top:1.5em}

.flash{
  max-width:var(--maxw);margin:1rem auto;padding:.875rem 1.25rem;
  background:var(--secondary);border-left:3px solid var(--primary);
  border-radius:var(--radius);font-size:.9rem;
}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:2rem}
/* auto-fit rather than a fixed count, so three products fill the row evenly
   instead of leaving a fourth column empty — and a fourth product slots in
   with no layout change.

   The minimums are chosen so the widest row is exactly 2, 3 or 4 across at
   the 80rem content width (1232px inside the gutters, 2rem gaps): any larger
   and a fifth card would squeeze in and break the four-up design. They also
   make the rows step down on narrower screens without separate breakpoints. */
/* min(..., 100%) matters: a bare minmax(30rem,1fr) keeps a 480px track even
   on a 390px phone, which pushed the whole home page sideways. */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(30rem,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(23rem,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(17.5rem,100%),1fr))}

.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:1rem;overflow:hidden;color:inherit;
  transition:box-shadow .25s,transform .25s;
}
a.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);color:inherit}
.card-img{position:relative;aspect-ratio:1/1;background:var(--secondary);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
a.card:hover .card-img img{transform:scale(1.05)}
/* Column layout with the price pushed to the bottom, so prices sit on one
   line across a row even when a product name wraps onto two. */
.card{display:flex;flex-direction:column}
.card-body{padding:1.25rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.25rem;margin-bottom:.25rem}
.card-body .price{margin-top:auto;padding-top:.75rem}
/* Shown wherever a photo has not been uploaded yet. A 4rem emoji faded to 35%
   on flat grey reads as a broken image; this reads as the brand's own tile, so
   a half-filled photo library looks deliberate rather than unfinished. */
.img-ph{
  display:grid;place-items:center;align-content:center;gap:.5rem;
  width:100%;height:100%;font-size:1.5rem;opacity:1;
  color:oklch(0.36 0.06 160 / .55);
  background:
    radial-gradient(ellipse at 28% 22%, oklch(0.93 0.035 95 / .85), transparent 62%),
    linear-gradient(155deg, var(--secondary), oklch(0.92 0.022 112));
}
.img-ph::after{
  content:"TAKSU NUSA";
  font-family:var(--font-body);font-size:.5rem;font-weight:600;
  letter-spacing:.24em;color:oklch(0.26 0.03 160 / .32);
}
.img-ph.big{aspect-ratio:4/3;font-size:2.75rem;border-radius:1rem}
.img-ph.big::after{font-size:.65rem}
/* Too small for a wordmark — the mark alone. */
.treatment-thumb .img-ph::after,.card-img .img-ph.tiny::after{content:none}

/* treatment rows: name, blurb, and a chip per duration */
.treatment-row{
  border:1px solid var(--border);background:var(--card);
  border-radius:1rem;padding:1.5rem;transition:box-shadow .25s;
}
.treatment-row:hover{box-shadow:var(--shadow)}

/* On the menu page each row carries its own photo; the placeholder keeps the
   rows aligned before any photos have been uploaded. */
.treatment-row.has-media{display:grid;grid-template-columns:10rem 1fr;gap:1.25rem;
  align-items:start}
.treatment-media{display:block;aspect-ratio:1/1;border-radius:.75rem;
  overflow:hidden;background:var(--secondary)}
.treatment-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.treatment-row:hover .treatment-media img{transform:scale(1.04)}
.treatment-media .img-ph{display:grid;place-items:center;width:100%;height:100%;
  font-size:2.25rem;opacity:.35}
.treatment-body{min-width:0}

/* Home page: the rows sit in a narrow column beside the section photo, so the
   thumbnail is small and tucked into the corner rather than leading the row. */
.treatment-row.has-thumb{display:grid;grid-template-columns:1fr 5.5rem;
  gap:1.25rem;align-items:start}
.treatment-thumb{display:block;aspect-ratio:1/1;border-radius:.75rem;
  overflow:hidden;background:var(--secondary)}
.treatment-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.treatment-row:hover .treatment-thumb img{transform:scale(1.05)}
.treatment-thumb .img-ph{display:grid;place-items:center;width:100%;height:100%;
  font-size:1.6rem;opacity:.35}
.treatment-row.has-thumb .treatment-body h3{margin-bottom:.35rem}
.treatment-row.has-thumb .treatment-body p{margin:0 0 1rem;font-size:.875rem;
  line-height:1.6;color:var(--muted-foreground)}
.treatment-row-head{display:flex;gap:1rem;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap}
.treatment-row-head h3{font-family:var(--font-display);font-size:1.5rem;margin:0}
.treatment-row-head p{margin:.5rem 0 0;max-width:24rem;font-size:.875rem;
  line-height:1.6;color:var(--muted-foreground)}
/* Grid, not flex: a discounted chip carries both the old and new price and
   grows wide enough that two would miss fitting by a few pixels and drop to
   one per line. Sharing the row keeps them side by side and equal width. */
/* Flex with a basis rather than fixed grid tracks: the chips grow to share
   whatever width the card has and wrap only when they would fall below the
   basis. Grid tracks had to be tuned per container and kept landing a couple
   of pixels the wrong side of fitting two per row. The max-width stops a
   treatment with a single duration stretching one chip across the card. */
.duration-chips{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.duration-chip{
  flex:1 1 8.5rem;max-width:14rem;
  background:var(--secondary);border-radius:.75rem;
  padding:.75rem .9rem;text-align:center;border:1px solid transparent;
}
.duration-chip .mins{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted-foreground)}
.duration-chip .amounts{display:flex;align-items:baseline;gap:.4rem;margin-top:.25rem;
  justify-content:center;flex-wrap:wrap}
/* nowrap keeps "Rp 300.000" together: without it the chip breaks after "Rp"
   and the amount lands on the next line. */
.duration-chip .was{font-size:.8rem;color:var(--muted-foreground);
  text-decoration:line-through;white-space:nowrap}
.duration-chip .now{font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--foreground);white-space:nowrap}
a.duration-chip:hover{border-color:var(--primary);color:inherit}

/* ---------------------------------------------------------------- price */
.price{display:inline-flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.price-was{color:var(--muted-foreground);text-decoration:line-through;font-size:.875rem}
.price-now{font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  color:var(--foreground)}
.price-off{background:oklch(0.55 0.18 25 / .1);color:var(--destructive);
  border-radius:.375rem;padding:.05rem .4rem;font-size:.7rem;font-weight:700}
.price.big .price-now{font-size:2rem}
.price.big .price-was{font-size:1rem}
.save-line{color:var(--destructive);font-weight:600;font-size:.9rem}
.sale-badge{
  position:absolute;top:.75rem;left:.75rem;
  background:var(--destructive);color:var(--ivory);
  padding:.25rem .7rem;border-radius:999px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.stock-badge{
  position:absolute;bottom:.75rem;left:.75rem;
  background:oklch(0.26 0.03 160 / .8);color:var(--ivory);
  padding:.2rem .7rem;border-radius:999px;font-size:.7rem;
}

/* ---------------------------------------------------------------- pills */
.pill-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.pill-nav a{
  padding:.6rem 1.25rem;border:1px solid var(--border);border-radius:999px;
  background:var(--card);color:var(--foreground);
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
}
.pill-nav a:hover{border-color:var(--primary);color:var(--primary)}
.pill-nav a.on{background:var(--primary);color:var(--primary-foreground);
  border-color:var(--primary)}

.tag{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;
  background:oklch(0.72 0.05 140 / .2);color:var(--forest);
  padding:.25rem .75rem;font-size:.65rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em}
.tag .dot{width:.35rem;height:.35rem;border-radius:50%;background:var(--forest)}

/* ---------------------------------------------------------------- feature tiles */
.tile{
  border:1px solid oklch(0.975 0.01 95 / .12);
  background:oklch(0.975 0.01 95 / .06);
  border-radius:1rem;padding:2rem;backdrop-filter:blur(4px);
}
.tile .tile-icon{font-size:1.5rem;line-height:1;color:var(--brass)}
.tile h3{margin-top:1.25rem;font-size:1.25rem;color:inherit}
.tile p{margin:.75rem 0 0;font-size:.875rem;line-height:1.7;
  color:oklch(0.975 0.01 95 / .7)}

/* ---------------------------------------------------------------- therapists */
.therapist-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  border:1px solid var(--border);border-radius:1rem;background:var(--card)}
.therapist-card .photo{aspect-ratio:3/4;overflow:hidden;background:var(--secondary)}
.therapist-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.therapist-card:hover .photo img{transform:scale(1.05)}
.therapist-card .info{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.therapist-card h3{margin-top:1rem;font-size:1.5rem}

/* ---------------------------------------------------------------- gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.gallery-grid figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:1rem;
  background:var(--secondary)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.gallery-grid figure:hover img{transform:scale(1.05)}

/* ---------------------------------------------------------------- areas */
.area-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:3rem}
.area-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid oklch(0.98 0.005 95 / .12);
  background:oklch(0.98 0.005 95 / .06);
  border-radius:999px;padding:.7rem 1.5rem;
  font-size:.875rem;font-weight:500;color:var(--ivory);
}
.area-pill:hover{background:oklch(0.98 0.005 95 / .12);color:var(--ivory)}
.area-pill svg{width:.9rem;height:.9rem;color:var(--brass)}

/* The pills above sit on the forest band; on a light page they need the
   ordinary border and ink instead. */
.area-pill.light{border-color:var(--border);background:var(--card);
  color:var(--foreground)}
.area-pill.light:hover{background:var(--secondary);color:var(--foreground)}

.area-card{
  display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--border);background:var(--card);
  border-radius:1rem;padding:1.75rem;color:inherit;
  transition:box-shadow .25s,transform .25s;
}
a.area-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);
  color:inherit}
.area-card-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:999px;background:var(--secondary);margin-bottom:.5rem}
.area-card-icon .ico{width:1.25rem;height:1.25rem;color:var(--primary)}
.area-card h3{margin:0;font-size:1.375rem}
.area-fee{
  display:inline-block;margin-top:auto;padding-top:.75rem;
  font-size:.875rem;font-weight:500;color:var(--foreground);
}
.area-fee.free{color:var(--primary)}
/* In a page head there is no card around it, so it needs its own outline. */
.page-head .area-fee{
  margin-top:0;padding:.4rem 1rem;border-radius:999px;
  border:1px solid var(--border);background:var(--card);
}

.no-slots{
  border:1px solid var(--border);border-radius:1rem;
  background:var(--secondary);padding:1.75rem;text-align:center;
}
.no-slots p{margin:0 0 .5rem}
.no-slots .btn{margin-top:1rem}

/* ------------------------------------------------- manage your booking */
.panel-card{
  border:1px solid var(--border);background:var(--card);
  border-radius:1rem;padding:1.75rem;
}
.panel-card h3{font-size:1.375rem;margin-bottom:.75rem}
.panel-card + .panel-card{margin-top:2rem}
.status-pill{
  display:inline-block;padding:.3rem .9rem;border-radius:999px;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  background:var(--secondary);color:var(--foreground);
}
.status-confirmed{background:oklch(0.36 0.06 160 / .12);color:var(--primary)}
.status-requested{background:oklch(0.72 0.13 80 / .2);color:var(--clay)}
.status-cancelled{background:oklch(0.55 0.18 25 / .12);color:var(--destructive)}
.btn-danger{border-color:oklch(0.55 0.18 25 / .4);color:var(--destructive)}
.btn-danger:hover{background:oklch(0.55 0.18 25 / .08);color:var(--destructive)}

/* WhatsApp is how guests actually book, so on the contact page it gets a
   panel of its own rather than sitting in a list of numbers. */
.wa-card{
  padding:1.75rem;border-radius:1rem;
  border:1px solid var(--border);border-left:3px solid var(--primary);
  background:var(--card);
}
.wa-card h3{display:flex;align-items:center;gap:.6rem;font-size:1.375rem;
  margin-bottom:.4rem}
.wa-card h3 .ico{width:1.2rem;height:1.2rem;color:var(--primary)}

/* "we made this ourselves" on a product page — the reason to buy it here */
.made-card{
  margin-top:2rem;padding:1.25rem 1.5rem;
  border:1px solid var(--border);border-left:3px solid var(--brass);
  border-radius:.75rem;background:var(--card);
}
.made-card h3{font-size:1.0625rem;margin-bottom:.35rem}
.made-card p{margin:0}
.made-card p + p{margin-top:.35rem}

/* ------------------------------------------------------------ how it works */
.steps .step{position:relative;padding-top:.5rem}
.step-no{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:999px;background:var(--primary);color:var(--ivory);
  font-family:var(--font-display);font-size:1.25rem;margin-bottom:1rem;
}
.steps .step h3{font-size:1.375rem}

/* ---------------------------------------------------------------- reviews */
.review{border:1px solid var(--border);background:var(--card);
  border-radius:1rem;padding:2rem}
.review blockquote{margin:1.5rem 0 0;font-size:1rem;line-height:1.7;
  color:oklch(0.26 0.03 160 / .8)}
.review .who{margin-top:1.5rem;font-size:.875rem;font-weight:500}

/* ---------------------------------------------------------------- final CTA */
.cta-band{position:relative;overflow:hidden;background:var(--primary);
  color:var(--primary-foreground);padding:6rem 0}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;width:24rem;height:24rem;border-radius:50%;
  background:oklch(0.72 0.13 80 / .1);filter:blur(60px);
}
.cta-band::before{top:-6rem;right:-6rem}
.cta-band::after{bottom:-6rem;left:-6rem}
.cta-inner{position:relative;z-index:1;max-width:48rem;margin:0 auto;
  padding-inline:var(--gutter);text-align:center}
.cta-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2rem;
  font-size:.8rem;color:oklch(0.975 0.01 95 / .6)}
.cta-meta span{display:inline-flex;align-items:center;gap:.5rem}

/* ---------------------------------------------------------------- detail */
/* align-items:start matters. Stretched columns make the placeholder's
   height:100% resolve against a row whose own height depends on the text
   beside it, and Chromium settles that circle by leaving the grid taller than
   the box that holds it — the text then spills over the next section. */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:2rem 0 4rem;
  align-items:start}
.detail-media img{border-radius:1rem;width:100%;object-fit:cover}
.thumbs{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.thumbs img{width:4.5rem;height:4.5rem;object-fit:cover;border-radius:.5rem}
.stock{font-weight:600;font-size:.9rem}
.stock.ok{color:var(--primary)}
.stock.no{color:var(--destructive)}
.buybox{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin:1.5rem 0}
.buybox input[type=number]{width:5.5rem}

/* ---------------------------------------------------------------- forms */
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:1rem;
  text-transform:uppercase;letter-spacing:.08em;color:oklch(0.26 0.03 160 / .75)}
input[type=text],input[type=tel],input[type=email],input[type=password],
input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%;margin-top:.4rem;padding:.75rem .9rem;
  border:1px solid var(--border);border-radius:.625rem;
  background:var(--card);color:var(--foreground);
  font:inherit;font-size:.95rem;font-weight:400;text-transform:none;letter-spacing:0;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ring);outline-offset:1px}
textarea{resize:vertical}
.stackform{max-width:34rem}
.gridform{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.gridform .wide{grid-column:1 / -1}
.gridform .check,.check{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 1rem;
  text-transform:none;letter-spacing:0;font-weight:500}
.check input{width:auto;margin:0}
.inline{display:inline}

/* ---------------------------------------------------------------- booking */
.booking-panel{background:var(--card);border:1px solid var(--border);
  border-radius:1rem;padding:2rem}
.daypicker{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-end}
.daypicker label{flex:1;min-width:12rem;margin-bottom:0}
.option-picker{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}
.option-picker input{position:absolute;opacity:0;width:0;height:0}
.option-picker .opt{
  display:block;border:1px solid var(--border);border-radius:.75rem;
  padding:.75rem 1.25rem;cursor:pointer;background:var(--card);text-align:center;
}
.option-picker input:checked + .opt{border-color:var(--primary);
  background:oklch(0.36 0.06 160 / .06)}
.option-picker input:focus-visible + .opt{outline:2px solid var(--ring);outline-offset:2px}
.option-picker .opt .mins{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted-foreground)}
.option-picker .opt .amounts{display:flex;gap:.4rem;align-items:baseline;
  justify-content:center;margin-top:.2rem}
.slots{border:0;padding:0;margin:1.5rem 0}
.slots legend{font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;color:var(--muted-foreground);margin-bottom:.75rem}
.slot-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.slot input{position:absolute;opacity:0;width:0;height:0}
.slot span{
  display:inline-block;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid var(--border);background:var(--card);cursor:pointer;
  font-size:.875rem;font-weight:500;
}
.slot input:checked + span{background:var(--primary);color:var(--primary-foreground);
  border-color:var(--primary)}
.slot input:focus-visible + span{outline:2px solid var(--ring);outline-offset:2px}
.bookfields{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;margin-top:1rem}
.bookfields .wide{grid-column:1 / -1}

/* ---------------------------------------------------------------- tables */
.table{width:100%;border-collapse:collapse;font-size:.925rem}
.table th,.table td{padding:.75rem .9rem;border-bottom:1px solid var(--border);
  text-align:left;vertical-align:top}
.table th{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted-foreground)}
.table tr.grand td{font-weight:700;font-size:1.05rem;
  border-top:2px solid var(--foreground)}
.table tr.unread{background:var(--secondary)}
.hours{width:100%;max-width:24rem;border-collapse:collapse;font-size:.925rem}
.hours td{padding:.5rem 0;border-bottom:1px solid var(--border)}
.hours td:last-child{text-align:right;color:var(--muted-foreground)}

/* ---------------------------------------------------------------- cart */
.cart-foot{display:grid;grid-template-columns:1fr 22rem;gap:2rem;margin-top:2rem}
.cart-tools{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-end}
.totals-box{background:var(--secondary);padding:1.5rem;border-radius:1rem;height:fit-content}
.totals-box div{display:flex;justify-content:space-between;margin-bottom:.5rem;
  font-size:.925rem}
.totals-box .grand{font-weight:700;font-size:1.1rem;padding-top:.75rem;
  border-top:1px solid var(--border);margin-top:.75rem}
.totals-box .off{color:var(--destructive)}
.checkout{display:grid;grid-template-columns:1fr 23rem;gap:2.5rem}
.pay-options{display:grid;gap:.75rem;margin-bottom:1.5rem}
.pay-opt{display:flex;gap:.9rem;align-items:flex-start;margin:0;
  border:1px solid var(--border);border-radius:.75rem;padding:1rem;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400}
.pay-opt input{width:auto;margin:.2rem 0 0}
.pay-opt strong{font-weight:600}
.pay-opt:has(input:checked){border-color:var(--primary);background:var(--secondary)}
.qty-input{width:5rem}

/* ---------------------------------------------------------------- confirm */
.confirm{display:grid;place-items:center;padding:4rem 0}
.confirm-card{max-width:38rem;width:100%;background:var(--card);
  border:1px solid var(--border);border-radius:1rem;padding:2.5rem;text-align:center}
.confirm-card .table{text-align:left;margin:1.5rem 0}
.tick{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--primary);
  color:var(--primary-foreground);font-size:1.75rem;display:grid;place-items:center;
  margin:0 auto 1rem}
.code{font-size:1.05rem}
.bank-box{background:var(--secondary);padding:1rem;border-radius:.75rem;
  text-align:left;margin:1rem 0;font-size:.9rem}

/* ---------------------------------------------------------------- faq */
.faq details{border-bottom:1px solid var(--border);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:600;font-family:var(--font-display);
  font-size:1.125rem}
.faq details[open] summary{color:var(--primary)}
.faq details > div{padding-top:.75rem;color:var(--muted-foreground)}

/* ---------------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--border);background:var(--ivory);padding:4rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.1fr 1.2fr;gap:2.5rem}
.site-footer h4{font-family:var(--font-body);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;color:var(--foreground)}
.foot-link{display:block;padding:.35rem 0;font-size:.875rem;color:var(--muted-foreground)}
.foot-link:hover{color:var(--primary)}
.foot-bottom{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--muted-foreground)}

.wa-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:40;
  width:3.4rem;height:3.4rem;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow-lg);
}
.wa-float:hover{color:#fff}

/* ---------------------------------------------------------------- tab bar */
/* Phone-only bottom navigation. Hidden by default and switched on in the
   phone media query, so desktop never pays for it. */
.tabbar{display:none}
@media (max-width:720px){
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--forest);
    border-top:1px solid oklch(0.98 0.005 95 / .12);
    /* Sits above the iPhone home indicator instead of under it. */
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -6px 20px oklch(0.26 0.03 160 / .18);
  }
  .tabbar .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.2rem;padding:.55rem .25rem .5rem;min-height:3.5rem;
    color:oklch(0.98 0.005 95 / .72);
    font-size:.62rem;font-weight:600;letter-spacing:.04em;
    text-align:center;line-height:1.2;
  }
  .tabbar .tab .ico,.tabbar .tab svg{width:1.35rem;height:1.35rem}
  .tabbar .tab.on{color:var(--brass)}
  .tabbar .tab:active{background:oklch(0.98 0.005 95 / .08)}

  /* The booking tab is raised and brass — the one action worth interrupting
     the row for. */
  .tabbar .tab-cta{color:var(--ivory);justify-content:flex-end}
  .tabbar .tab-cta-circle{
    position:absolute;top:-1.4rem;
    width:3.25rem;height:3.25rem;border-radius:50%;
    display:grid;place-items:center;
    background:var(--brass);color:var(--forest);
    border:3px solid var(--forest);
    box-shadow:0 6px 16px oklch(0.26 0.03 160 / .3);
  }
  .tabbar .tab-cta{position:relative;padding-top:1.9rem}
  .tabbar .tab-cta .ico{width:1.5rem;height:1.5rem}

  /* Two across on a phone instead of one full-width card each. Four
     treatments used to mean four screens of scrolling. */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .grid-4 .card-body{padding:.9rem 1rem 1.25rem}
  .grid-4 .card-body h3{font-size:1.05rem}
  .grid-4 .area-card{padding:1.25rem}
  .grid-4 .area-card h3{font-size:1.15rem}

  /* Room for the bar, so nothing at the bottom of a page is unreachable. */
  body{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}
  /* WhatsApp lives in the bar now; a floating button as well is clutter. */
  .wa-float{display:none}
}

/* ---------------------------------------------------------------- auth */
.auth-body{display:grid;place-items:center;min-height:100vh;background:var(--sand)}
.auth-card{background:var(--card);padding:2.5rem;border-radius:1rem;
  width:min(25rem,92vw);box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- admin */
body.admin{background:var(--sand)}
.admin-layout{display:grid;grid-template-columns:15rem 1fr;min-height:100vh}
.admin-side{background:var(--forest);color:oklch(0.9 0.02 140);padding:1.25rem .75rem;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-brand{font-family:var(--font-display);font-size:1.1rem;color:var(--ivory);
  font-weight:600;padding:.4rem .6rem 1rem}
.admin-side a{display:block;padding:.5rem .6rem;border-radius:.5rem;
  color:oklch(0.9 0.02 140);font-size:.85rem}
.admin-side a:hover{background:oklch(0.98 0.005 95 / .08);color:var(--ivory)}
.admin-side a.on{background:oklch(0.98 0.005 95 / .15);color:var(--ivory);font-weight:600}
.side-group{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--sage);padding:1rem .6rem .25rem}
.admin-content{padding:1.75rem 2rem;max-width:75rem}
.admin-content h1{font-size:2rem}
.panel{background:var(--card);border:1px solid var(--border);border-radius:1rem;
  padding:1.5rem;margin-bottom:1.5rem}
.panel h2{font-size:1.35rem}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.25rem}
.stat-n{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:600;
  color:var(--primary)}
.stat-l{font-size:.8rem;color:var(--muted-foreground)}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.tabs a{padding:.4rem 1rem;border-radius:999px;background:var(--card);
  border:1px solid var(--border);font-size:.8rem;color:var(--foreground)}
.tabs a.on{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.pill{display:inline-block;padding:.15rem .7rem;border-radius:999px;font-size:.75rem;
  background:var(--secondary)}
.pill-new{background:oklch(0.9 0.09 85)}
.pill-confirmed,.pill-packed{background:oklch(0.88 0.05 230)}
.pill-delivering{background:oklch(0.87 0.06 290)}
.pill-completed{background:oklch(0.88 0.07 150)}
.pill-cancelled,.pill-no_show{background:oklch(0.87 0.07 25)}
.pill-sale{background:oklch(0.55 0.18 25 / .12);color:var(--destructive);font-weight:700}
.mini{width:2.4rem;height:2.4rem;object-fit:cover;border-radius:.4rem}
.row-actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap}
.payout-row{display:grid;grid-template-columns:1fr auto auto;gap:1rem;
  align-items:center;padding:.9rem 0;border-bottom:1px solid var(--border)}
.payout-row:last-child{border-bottom:0}
.payout-row form{display:flex;gap:.5rem;align-items:center}
.payout-row select{margin-top:0;width:auto;padding:.4rem .5rem;font-size:.8rem}
.payout-amount{font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  color:var(--primary);white-space:nowrap}
@media (max-width:720px){
  .payout-row{grid-template-columns:1fr;gap:.5rem}
}
.photo-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.slot-card{border:1px solid var(--border);border-radius:.75rem;padding:1rem;
  background:var(--background)}
.slot-card h4{margin:.75rem 0 .25rem;font-family:var(--font-body);font-size:.9rem;
  font-weight:600;text-transform:none;letter-spacing:0}
.slot-card input[type=file]{margin:.75rem 0}
.slot-preview{aspect-ratio:16/10;border-radius:.5rem;overflow:hidden;
  background:var(--secondary);display:grid;place-items:center}
.slot-preview img{width:100%;height:100%;object-fit:cover}
.slot-empty{font-size:.8rem;color:var(--muted-foreground)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:1rem}
.media-item{margin:0;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;
  background:var(--card)}
.media-item img{aspect-ratio:1/1;object-fit:cover;width:100%}
.media-item figcaption{padding:.5rem}
.media-move{display:flex;gap:.4rem;padding:0 .5rem .4rem;align-items:center}
.media-move select{margin-top:0;padding:.35rem .4rem;font-size:.78rem}
.media-move .btn{padding:.4rem .7rem;font-size:.65rem;white-space:nowrap}
.media-actions{display:flex;gap:.75rem;padding:0 .5rem .6rem}
.cmd{background:var(--forest);color:var(--ivory);padding:1rem;border-radius:.75rem;
  overflow-x:auto;font-size:.8rem;line-height:1.6}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1024px){
  .section-split,.detail,.checkout,.cart-foot,.foot-grid,
  .therapist-card,.gallery-grid{grid-template-columns:1fr}
  /* One column now, so there is nothing to ride alongside. */
  .split-sticky{position:static}
  .therapist-card .photo{aspect-ratio:16/10}
  .mainnav{display:none}
  .menu-toggle{display:inline-flex}
  .header-actions .lang-switch{display:none}
  .header-actions .btn{display:none}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .photo-slots{grid-template-columns:1fr}
  .admin-layout{grid-template-columns:1fr}
  .admin-side{position:static;height:auto}
  .section{padding:4rem 0}
}
@media (max-width:720px){
  :root{--gutter:1rem}
  .treatment-row.has-media{grid-template-columns:1fr}
  .treatment-media{aspect-ratio:16/9}
  /* A smaller thumbnail on a phone: at 4.5rem it left too little room and the
     durations dropped to one per line, making the block four rows tall. */
  .treatment-row.has-thumb{grid-template-columns:1fr 3.25rem;gap:.75rem}
  .duration-chip{flex-basis:7rem;padding:.7rem .6rem}
  .trustbar-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(3){border-left:0}
  .gridform,.bookfields{grid-template-columns:1fr}
  .hero-inner{padding:3.5rem var(--gutter)}
  .hero{min-height:auto}
  .admin-content{padding:1rem}
  .table{font-size:.85rem}
  .table th,.table td{padding:.5rem .4rem}
  .foot-bottom{flex-direction:column}
}