/* ==========================================================================
   GETGLOW Clinic - theme stylesheet
   Mobile-first. Hand-written. No framework.
   Token source of truth: design/_ds/getglow-acne-design-system/tokens/*.css
   ========================================================================== */

/* ---------- 1. Fonts ---------------------------------------------------- */
/* DB Heavent - licensed binaries supplied by THE SAI CO., LTD. (GETGLOW's
   outsourced brand agency).
   Web-embedding rights must be confirmed before launch (see README).
   Disable with the `getglow_load_brand_fonts` filter and the fallback stack
   below takes over cleanly. */
@font-face{font-family:"DB Heavent";src:url(../fonts/DBHeavent-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DB Heavent";src:url(../fonts/DBHeavent-Medium.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"DB Heavent";src:url(../fonts/DBHeavent-Bold.woff2) format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"DB Heavent";src:url(../fonts/DBHeavent-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- 2. Tokens --------------------------------------------------- */
:root{
  /* Brand CI - do not introduce a colour outside this list. */
  --gg-peach:#FBD4C6;
  --gg-white:#FBFAF8;
  --gg-cream:#FFFBF3;
  --gg-turquoise:#5BDBD7;
  --gg-orange:#FF542F;
  --gg-mint:#D6FFE1;
  --gg-yellow:#E1FD72;
  --gg-coffee:#5F3F30;

  /* Derived / utility */
  --gg-shell:#F1F1F2;
  --gg-sundown:#FFBDA4;
  --gg-reddish:#EF3D16;
  --gg-orange-press:#E8431F;
  --gg-coffee-soft:#7A5747;
  --gg-dot:#FDBBAA;
  --gg-kraft:#5F401E;

  /* Accessibility-derived shade of the CI orange.
     #FF542F on cream measures 3.10:1 - fine for >=19px/700 (WCAG "large text",
     3:1) but short of the 4.5:1 body-text bar. --gg-orange-ink is the same hue
     darkened until it clears 4.5:1 on every ground the site actually sets text
     on: 4.87 on white, 4.93 on cream, 4.50 on shell. It is used for inline text
     links and any orange text under 19px. Fills, buttons and display numerals
     keep the true CI --gg-orange.
     On the peach dot field it measures 3.71, so orange text there must stay at
     19px/700 or larger (the large-text bar) - which is what the design does. */
  --gg-orange-ink:#CB3824;

  /* Footer tints (the .48 small-print tint was lightened from #C3A791 (4.13:1)
     to #D9BFA9 (5.35:1) so the licence line clears AA). */
  /* Footer tints on the orange ground (design v2, GETGLOW-Footer.dc.html). */
  --gg-foot-text:#FFFFFF;
  --gg-foot-body:#FFEFE9;
  --gg-foot-muted:#FFE6DD;

  /* Compatibility alias for the earlier prototype's variable name. */
  --color-primary:var(--gg-orange);

  --font-display:"DB Heavent","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-text:var(--font-display);

  --gg-shadow-card:0 6px 16px rgba(95,63,48,.12);
  --gg-shadow-card-lift:0 10px 22px rgba(95,63,48,.16);
  --gg-shadow-drop:0 12px 28px rgba(95,63,48,.22);
  --gg-hairline:1px solid rgba(95,63,48,.12);

  --gg-pad-x:clamp(14px,4vw,32px);
  --gg-pad-y:clamp(30px,5.5vw,64px);
  --gg-gap:clamp(14px,2.2vw,22px);

  /* Height reserved for the mobile sticky CTA bar. Set to 0 on desktop. */
  --gg-sticky-h:0px;
}

/* ---------- 3. Reset / base -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{scroll-padding-top:84px}
body{
  margin:0;
  background:var(--gg-cream);
  color:var(--gg-coffee);
  font-family:var(--font-text);
  font-size:19px;          /* minimum body size on this site - by design */
  line-height:1.8;
  padding-bottom:var(--gg-sticky-h);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
a{color:var(--gg-orange-ink);text-decoration:none}
a:hover{color:var(--gg-reddish)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gg-turquoise);
  outline-offset:2px;
  border-radius:4px;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;color:var(--gg-coffee);text-wrap:balance}
p{text-wrap:pretty}
ul,ol{padding-left:1.3em}
address{font-style:normal}
.gg-visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.gg-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gg-orange);color:#fff;padding:12px 20px;border-radius:0 0 14px 0;
  font-size:19px;font-weight:700;
}
.gg-skip-link:focus{left:0;color:#fff}

/* ---------- 4. Layout --------------------------------------------------- */
.gg-container{max-width:1120px;margin:0 auto;padding-left:var(--gg-pad-x);padding-right:var(--gg-pad-x)}
.gg-container--narrow{max-width:1000px}
.gg-container--reading{max-width:900px}
.gg-container--tight{max-width:760px}
.gg-section{padding-top:var(--gg-pad-y);padding-bottom:var(--gg-pad-y)}
.gg-section--white{background:var(--gg-white)}
.gg-section--cream{background:var(--gg-cream)}
.gg-section--peach{background:var(--gg-peach)}
.gg-section--turquoise{background:var(--gg-turquoise)}
.gg-section--hairline-top{border-top:1px solid rgba(95,63,48,.10)}
.gg-section--hairline-bottom{border-bottom:1px solid rgba(95,63,48,.10)}

/* The brand's signature polka-dot field. The dots stand for acne spots. */
.gg-dots{
  background-image:radial-gradient(var(--gg-dot) 3.2px,transparent 3.3px);
  background-size:32px 32px;
}
.gg-section--turquoise.gg-dots{
  background-image:radial-gradient(rgba(255,255,255,.5) 3.2px,transparent 3.3px);
}

/* Every multi-column area collapses on its own via auto-fit - no breakpoints
   needed for the grid itself. The min track width is what sets the tablet /
   mobile column count. */
.gg-grid{display:grid;gap:var(--gg-gap)}
.gg-grid--210{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.gg-grid--240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gg-grid--230{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gg-grid--250{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.gg-grid--270{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.gg-grid--280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gg-grid--300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gg-grid--wide-gap{gap:clamp(18px,3vw,32px)}
.gg-grid--hero{gap:clamp(22px,4vw,48px);align-items:center}
.gg-stack{display:flex;flex-direction:column;gap:var(--gg-gap)}
.gg-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Tablet 768-1024: service / doctor grids settle at two columns.
   (auto-fit already gets close; this pins it so a 3-up never becomes a
   cramped 3 across on a narrow tablet.) */
@media (min-width:768px) and (max-width:1024px){
  .gg-grid--210,.gg-grid--230,.gg-grid--240,.gg-grid--250,
  .gg-grid--270,.gg-grid--280{grid-template-columns:repeat(2,1fr)}
}
/* Mobile <768: one column everywhere. */
@media (max-width:767px){
  .gg-grid{grid-template-columns:1fr!important}
}

/* ---------- 5. Type ----------------------------------------------------- */
/* Thai vowels and tone marks stack above and below the baseline: line-height
   never drops under 1.3 on headings or 1.75 on body. */
.gg-h1{margin:16px 0 18px;font-size:clamp(32px,6vw,66px);line-height:1.3;letter-spacing:-.03em}
.gg-h1--sm{font-size:clamp(32px,5vw,52px)}
.gg-h2{margin:14px 0 10px;font-size:clamp(26px,4.4vw,46px);line-height:1.3}
.gg-h2--sm{font-size:clamp(26px,4.2vw,40px)}
.gg-h3{margin:0 0 8px;font-size:clamp(21px,2.4vw,26px);line-height:1.35}
.gg-lead{margin:0 0 14px;font-size:clamp(21px,2.2vw,25px);line-height:1.75;max-width:44ch}
.gg-lead--wide{max-width:62ch}
.gg-lead--xl{font-size:clamp(23px,2.4vw,28px);line-height:1.8;max-width:56ch}
.gg-body{margin:0 0 16px;font-size:20px;line-height:1.8;max-width:66ch;color:var(--gg-coffee-soft)}
.gg-body--ink{color:var(--gg-coffee)}
.gg-meta{margin:0;font-size:18px;line-height:1.6;color:var(--gg-coffee-soft)}
/* Both were --gg-orange in the design, but that misses even the 3:1 large-text
   bar on the grounds they actually sit on: 2.34:1 for the accent word on the
   peach dot field, 2.84:1 for the numerals on shell. --gg-orange-ink is the
   same hue one step darker and clears it (3.71 / 4.50). */
.gg-accent{color:var(--gg-orange-ink)}
.gg-num{font-family:var(--font-display);font-weight:900;color:var(--gg-orange-ink);line-height:1;display:block}
.gg-num--36{font-size:36px}
.gg-num--42{font-size:clamp(34px,4vw,42px)}
.gg-link-lg{font-size:21px;font-weight:700}

/* ---------- 6. Pill ----------------------------------------------------- */
.gg-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
  color:var(--gg-coffee);background:var(--gg-white);
  border:1px solid rgba(95,63,48,.10);
}
.gg-pill--md{font-size:19px;padding:7px 18px}
.gg-pill--thai{text-transform:none;letter-spacing:0}
.gg-pill--white{background:var(--gg-white)}
.gg-pill--peach{background:var(--gg-peach);border-color:rgba(95,63,48,.10)}
.gg-pill--mint{background:var(--gg-mint)}
.gg-pill--yellow{background:var(--gg-yellow)}
.gg-pill--turquoise{background:var(--gg-turquoise)}
/* White on --gg-orange is 3.20:1 - large-text AA only, and 17px/700 is below
   the 18.66px large-text threshold. The orange tone therefore sets 19px, which
   is still inside the design's 17-19px pill range. */
.gg-pill--orange{background:var(--gg-orange);color:#fff;border-color:transparent;font-size:19px}
.gg-pill--coffee{background:var(--gg-coffee);color:var(--gg-cream);border-color:transparent}

/* ---------- 7. Button --------------------------------------------------- */
/* White on --gg-orange measures 3.07:1. That clears WCAG AA for large text
   (3:1), and every button label here is >=19px at weight 700 (= 14.25pt bold,
   above the 14pt-bold large-text threshold), so the AA bar is met. Do not drop
   a button label below 19px or the contrast claim stops holding. */
.gg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;
  font-size:19px;line-height:1.3;
  min-height:44px;padding:11px 22px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--gg-orange);color:#fff;
  text-align:center;
  transition:background .18s ease,transform .1s ease,box-shadow .18s ease;
}
.gg-btn:hover{background:var(--gg-orange-press);color:#fff}
.gg-btn:active{transform:scale(.97)}
.gg-btn--sm{font-size:19px;padding:9px 18px;min-height:44px}
.gg-btn--lg{font-size:22px;padding:14px 30px;min-height:54px}
.gg-btn--block{display:flex;width:100%}

/* ---------- 8. Card ----------------------------------------------------- */
.gg-card{
  background:var(--gg-white);
  border-radius:24px;
  padding:clamp(16px,2.4vw,22px);
  box-shadow:var(--gg-shadow-card);
  border:1px solid rgba(95,63,48,.06);
}
.gg-card--shell{background:var(--gg-shell)}
.gg-card--peach{background:var(--gg-peach)}
.gg-card--mint{background:var(--gg-mint)}
.gg-card--flat{box-shadow:none}
.gg-card--pad-lg{padding:clamp(18px,3vw,26px)}
.gg-card > :last-child{margin-bottom:0}
.gg-card-link{display:block;color:inherit;height:100%}
.gg-card-link .gg-card{height:100%;display:flex;flex-direction:column}
.gg-card-link:hover .gg-card{box-shadow:var(--gg-shadow-card-lift);transform:translateY(-1px)}
.gg-card-link .gg-card{transition:box-shadow .18s ease,transform .18s ease}
.gg-card-cta{margin-top:auto;font-size:20px;font-weight:700;color:var(--gg-orange-ink)}

.gg-panel{
  background:var(--gg-white);
  border-radius:26px;
  padding:clamp(18px,3vw,26px);
  box-shadow:var(--gg-shadow-card);
}

/* ---------- 9. Image placeholder (no photography supplied yet) ---------- */
/* Diagonal-stripe empty state. Every slot keeps its SEO alt text so swapping
   in the real photograph is a one-line change in the template. */
.gg-img-drop{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:120px;
  border-radius:14px;
  border:2px dashed rgba(95,63,48,.28);
  background-color:var(--gg-shell);
  background-image:repeating-linear-gradient(
    45deg,
    rgba(95,63,48,.06) 0 10px,
    rgba(95,63,48,0) 10px 20px
  );
  color:var(--gg-coffee-soft);
  text-align:center;
  padding:14px;
  overflow:hidden;
}
.gg-img-drop .gg-placeholder{
  font-size:17px;line-height:1.5;font-weight:600;
  max-width:22ch;
}
.gg-img-drop .gg-placeholder small{display:block;font-weight:400;opacity:.8;margin-top:4px}
.gg-img-frame{width:100%;overflow:hidden;border-radius:16px}
.gg-img-frame img{width:100%;height:100%;object-fit:cover}
/* A frame with a declared ratio owns its height; the placeholder inside
   stretches to it instead of falling back to its own min-height. */
.gg-img-frame[class*="gg-ratio-"] > .gg-img-drop{min-height:0}
.gg-ratio-1-1{aspect-ratio:1/1}
.gg-ratio-4-3{aspect-ratio:4/3}
.gg-ratio-16-10{aspect-ratio:16/10}
.gg-ratio-4-5{aspect-ratio:4/5}

/* ---------- 10. Polaroid ------------------------------------------------ */
.gg-polaroid{
  background:var(--gg-white);
  padding:12px 12px 0;
  border-radius:6px;
  box-shadow:var(--gg-shadow-card);
  width:min(100%,var(--gg-polaroid-w,340px));
  margin-inline:auto;
}
.gg-polaroid__img{border-radius:8px;overflow:hidden;aspect-ratio:var(--gg-polaroid-ratio,4/5)}
/* The slot inside a polaroid fills the frame's ratio box rather than
   collapsing to the placeholder's min-height. */
.gg-polaroid__img > .gg-img-frame{height:100%}
.gg-polaroid__img .gg-img-drop{border-radius:8px;min-height:0}
.gg-polaroid__img img{width:100%;height:100%;object-fit:cover}
.gg-polaroid__cap{
  font-family:var(--font-display);font-size:18px;line-height:1.5;
  color:var(--gg-coffee-soft);padding:10px 4px 16px;margin:0;text-align:center;
}
.gg-polaroid-wrap{display:flex;flex-direction:column;align-items:center}

/* ---------- 11. Doodle stickers ---------------------------------------- */
.gg-stickers{position:absolute;inset:0;pointer-events:none;z-index:1}
.gg-stickers img{
  position:absolute;height:auto;
  width:calc(var(--gg-sticker-size,72px) * var(--gg-sticker-scale,1));
  transform:rotate(var(--gg-sticker-rotate,0deg));
}
/* On a phone the hero is much taller than it is wide, so a sticker placed at
   the design's percentage lands over the headline. Scaling the layer keeps the
   brand's doodle layer without letting it sit on the H1. */
@media (max-width:767px){
  .gg-stickers{--gg-sticker-scale:.62}
}
.gg-hero{position:relative;overflow:hidden}
.gg-hero__inner{position:relative;z-index:2}

/* ---------- 12. Anchor chips ------------------------------------------- */
.gg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gg-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:8px 18px;border-radius:999px;
  background:var(--gg-peach);color:var(--gg-coffee);
  font-size:19px;font-weight:700;
  transition:background .18s ease;
}
.gg-chip:hover{background:var(--gg-sundown);color:var(--gg-coffee)}

/* ---------- 13. Price rows (the brand's dashed-rule table) -------------- */
.gg-prices{margin-top:18px}
.gg-price-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:6px 16px;padding:14px 0;
  border-bottom:2px dashed rgba(255,84,47,.35);
}
.gg-price-row:last-child{border-bottom:0}
.gg-price-row__name{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1.35;margin:0}
.gg-price-row__desc{font-size:19px;line-height:1.7;color:var(--gg-coffee-soft);margin:4px 0 0;max-width:52ch}
.gg-price-row__price{
  font-weight:700;color:var(--gg-orange-ink);white-space:nowrap;
  font-size:20px;align-self:center;
}
.gg-price-row__badge{margin-left:8px}

/* Highlighted / featured row + card */
.gg-featured{
  border:2px solid var(--gg-orange);
  box-shadow:0 8px 20px rgba(255,84,47,.18);
  position:relative;
}
.gg-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:700;font-size:19px;
  padding:4px 12px;border-radius:999px;
  background:var(--gg-orange);color:#fff;letter-spacing:.02em;
}
.gg-tag{
  display:inline-flex;align-items:center;
  font-size:18px;font-weight:700;color:var(--gg-orange-ink);
}

/* ---------- 14. Accordions (native <details>) --------------------------- */
.gg-details{
  background:var(--gg-shell);
  border-radius:20px;
  padding:16px 18px;
  margin-bottom:10px;
}
.gg-details--white{background:var(--gg-white);box-shadow:var(--gg-shadow-card)}
.gg-details > summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;
  min-height:44px;
}
.gg-details > summary::-webkit-details-marker{display:none}
.gg-details__title{
  font-family:var(--font-display);font-weight:900;font-size:23px;line-height:1.35;
  color:var(--gg-coffee);
}
.gg-chev{
  flex:none;font-size:20px;color:var(--gg-orange);
  transition:transform .2s ease;
}
.gg-details[open] > summary .gg-chev{transform:rotate(180deg)}
.gg-details__body{padding-top:10px}
.gg-details__body p{font-size:20px;line-height:1.8;margin:0 0 10px}
.gg-details__body > :last-child{margin-bottom:0}

/* ---------- 15. Do / Don't lists ---------------------------------------- */
.gg-list{margin:0;padding-left:1.25em;font-size:20px;line-height:1.85}
.gg-list li{margin-bottom:6px}

/* ---------- 16. Map frame ---------------------------------------------- */
.gg-map{
  border-radius:24px;overflow:hidden;
  border:5px solid var(--gg-white);
  box-shadow:var(--gg-shadow-card);
}
.gg-map iframe{width:100%;height:320px;border:0;display:block}
.gg-map--tall iframe{height:360px}

/* ---------- 17. Header / nav -------------------------------------------- */
/* Design v2 (GETGLOW-Nav.dc.html): orange bar, white links, mint accents.
   Link weight is 700 rather than the prototype's 600 - white on the CI orange
   is 3.07:1, which passes WCAG AA only as "large text" (>=18.66px bold). */
.gg-header{
  background:var(--gg-orange);
  border-bottom:1px solid rgba(255,255,255,.28);
  position:relative;z-index:40;
}
.gg-header__inner{
  max-width:1180px;margin:0 auto;
  padding:12px var(--gg-pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.gg-brand{display:flex;align-items:center;gap:10px;flex:none;color:#fff}
.gg-brand img{height:32px;width:auto;flex:none}
.gg-brand__loc{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:.14em;color:#fff;text-transform:uppercase;
}
.gg-nav{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;font-size:19px}
.gg-nav > a:not(.gg-nav__cta){color:#fff;font-weight:700}
.gg-nav > a:not(.gg-nav__cta):hover{color:var(--gg-mint)}
.gg-nav__item{position:relative;display:flex;align-items:center}
.gg-nav__toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;
  font-family:var(--font-text);font-size:19px;font-weight:700;
  color:#fff;cursor:pointer;min-height:44px;
}
.gg-nav__toggle:hover{color:var(--gg-mint)}
.gg-nav__brandword{letter-spacing:.04em}
.gg-nav__caret{font-size:15px;color:var(--gg-mint);transition:transform .2s ease}
.gg-nav__toggle[aria-expanded="true"] .gg-nav__caret{transform:rotate(180deg)}
.gg-nav__cta{
  display:inline-flex;align-items:center;min-height:44px;
  background:#fff;color:var(--gg-orange-ink);
  font-family:var(--font-display);font-weight:900;font-size:19px;
  padding:9px 22px;border-radius:999px;
  box-shadow:0 3px 0 rgba(95,63,48,.28);
}
.gg-nav__cta:hover{background:var(--gg-mint);color:var(--gg-coffee)}
.gg-dropdown{
  position:absolute;top:calc(100% + 12px);left:0;
  width:min(88vw,300px);
  background:var(--gg-white);border-radius:20px;
  box-shadow:var(--gg-shadow-drop);
  padding:10px;display:flex;flex-direction:column;gap:2px;z-index:60;
}
.gg-dropdown[hidden]{display:none}
.gg-dropdown a{
  padding:10px 14px;border-radius:14px;
  color:var(--gg-coffee);font-size:19px;font-weight:600;
  min-height:44px;display:flex;align-items:center;
}
.gg-dropdown a:hover{background:var(--gg-peach);color:var(--gg-coffee)}
.gg-dropdown--glow a:hover{background:var(--gg-mint)}
.gg-dropdown .gg-dropdown__rich{flex-direction:column;align-items:flex-start;font-weight:700}
.gg-dropdown__title{display:flex;align-items:center;gap:10px}
.gg-dropdown__title img{width:26px;height:26px;flex:none}
.gg-dropdown__desc{display:block;font-size:17px;font-weight:400;color:var(--gg-coffee-soft)}
.gg-dropdown .gg-dropdown__all{color:var(--gg-orange-ink);font-weight:700;margin-top:4px}
.gg-nav__burger{display:none}

/* Mobile drawer below 900px (the prototype only wraps). The drawer is a white
   panel, so its links switch back to coffee. */
@media (max-width:899px){
  .gg-nav{
    position:fixed;inset:0 0 0 auto;
    width:min(86vw,360px);
    background:var(--gg-white);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    gap:4px;padding:84px 20px 32px;
    box-shadow:var(--gg-shadow-drop);
    overflow-y:auto;z-index:90;
    transform:translateX(100%);
    transition:transform .24s ease;
  }
  .gg-nav[data-open="true"]{transform:translateX(0)}
  .gg-nav > a:not(.gg-nav__cta),.gg-nav__toggle{
    min-height:48px;display:flex;align-items:center;
    padding:6px 4px;font-size:21px;
    color:var(--gg-coffee);
    border-bottom:1px solid rgba(95,63,48,.08);
    width:100%;
  }
  .gg-nav > a:not(.gg-nav__cta):hover,.gg-nav__toggle:hover{color:var(--gg-orange-ink)}
  .gg-nav__caret{color:var(--gg-orange-ink)}
  .gg-nav__item{display:block;width:100%}
  .gg-nav__toggle{justify-content:space-between}
  .gg-dropdown{
    position:static;width:auto;box-shadow:none;
    background:var(--gg-shell);padding:6px;margin:6px 0 10px;
  }
  .gg-nav__cta{
    margin-top:16px;justify-content:center;
    background:var(--gg-orange);color:#fff;box-shadow:none;
  }
  .gg-nav__burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:none;
    background:none;border:0;padding:0;cursor:pointer;color:#fff;
  }
  .gg-nav__burger span{
    position:relative;display:block;width:24px;height:2px;
    background:currentColor;border-radius:2px;
  }
  .gg-nav__burger span::before,.gg-nav__burger span::after{
    content:"";position:absolute;left:0;width:24px;height:2px;
    background:currentColor;border-radius:2px;transition:transform .2s ease,top .2s ease;
  }
  .gg-nav__burger span::before{top:-7px}
  .gg-nav__burger span::after{top:7px}
  /* Open state: the burger sits above the white drawer, so it turns coffee. */
  .gg-nav__burger[aria-expanded="true"]{color:var(--gg-coffee);position:relative;z-index:95}
  .gg-nav__burger[aria-expanded="true"] span{background:transparent}
  .gg-nav__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .gg-nav__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  /* The drawer lives inside .gg-header, whose z-index:40 makes it a stacking
     context - the drawer's own z-index only counts inside that context. The
     scrim is outside it, so it must sit below 40 or it covers the drawer and
     swallows every tap on it. */
  .gg-nav-scrim{
    position:fixed;inset:0;background:rgba(95,63,48,.4);z-index:35;
    opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;
  }
  .gg-nav-scrim[data-open="true"]{opacity:1;visibility:visible}
}
@media (min-width:900px){
  .gg-nav-scrim{display:none}
}
@media (max-width:479px){
  .gg-brand__loc{display:none}
}

/* ---------- 18. Sticky mobile CTA bar ----------------------------------- */
.gg-sticky-cta{display:none}
@media (max-width:899px){
  :root{--gg-sticky-h:74px}
  .gg-sticky-cta{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px var(--gg-pad-x) calc(10px + env(safe-area-inset-bottom));
    background:var(--gg-white);
    border-top:var(--gg-hairline);
    box-shadow:0 -6px 18px rgba(95,63,48,.14);
  }
  .gg-sticky-cta .gg-btn{flex:1}
  .gg-sticky-cta__tel{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:52px;height:48px;border-radius:999px;
    background:var(--gg-peach);color:var(--gg-coffee);
    font-size:22px;
  }
}

/* ---------- 19. Footer -------------------------------------------------- */
/* Design v2 moved the footer from kraft to the CI orange. Body copy on this
   ground measures under 4.5:1 - it is the design's call, kept as drawn. */
.gg-footer{background:var(--gg-orange);color:var(--gg-foot-text);font-family:var(--font-text)}
.gg-footer__inner{max-width:1120px;margin:0 auto;padding:clamp(30px,5vw,56px) var(--gg-pad-x)}
.gg-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,40px)}
.gg-footer h2{
  margin:0 0 10px;font-family:var(--font-display);font-weight:900;font-size:21px;
  letter-spacing:.1em;color:var(--gg-mint);
}
.gg-footer p{margin:0;font-size:19px;line-height:1.75;color:var(--gg-foot-body)}
.gg-footer__name{margin:14px 0 0!important;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--gg-foot-text)!important}
.gg-footer a{color:var(--gg-foot-text)}
.gg-footer a:hover{color:var(--gg-mint)}
.gg-footer__logo{height:48px;width:auto;margin-bottom:0}
.gg-footer__links{display:flex;flex-direction:column;gap:8px;font-size:19px}
.gg-footer__links a{min-height:32px;display:inline-flex;align-items:center}
.gg-footer__social{display:flex;flex-wrap:wrap;gap:8px}
.gg-footer__social a{display:inline-flex}
.gg-footer__bottom{
  margin-top:28px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.34);
  display:flex;flex-direction:column;gap:8px;
}
.gg-footer__bottom p{font-size:18px;line-height:1.7;color:var(--gg-foot-muted)}
.gg-footer__bottom p + p{font-size:17px}
.gg-footer__phone{color:#fff!important;font-weight:700}

/* ---------- 20. Breadcrumb ---------------------------------------------- */
.gg-crumb{font-size:18px;color:var(--gg-coffee-soft);margin:0 0 10px}
.gg-crumb a{color:var(--gg-coffee-soft)}
.gg-crumb a:hover{color:var(--gg-orange-ink)}
.gg-crumb span[aria-current]{color:var(--gg-coffee);font-weight:700}

/* ---------- 21. Step badge ---------------------------------------------- */
.gg-step{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:var(--gg-orange);color:#fff;
  font-family:var(--font-display);font-weight:900;font-size:19px;
  margin-bottom:8px;
}

/* ---------- 22. Notice (compliance / pending content) ------------------- */
.gg-notice{
  background:var(--gg-white);
  border:1px dashed rgba(95,63,48,.28);
  border-radius:20px;padding:16px 18px;
  font-size:19px;line-height:1.75;color:var(--gg-coffee-soft);
}
.gg-notice strong{color:var(--gg-coffee)}

/* ---------- 23. Motion budget ------------------------------------------- */
/* No parallax, no scroll animation, no autoplay video. Stickers may pop;
   content may fade+rise 8px. Nothing else. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- 24. WordPress admin bar ------------------------------------- */
.admin-bar .gg-nav{padding-top:116px}

/* ---------- 25. Editor prose (pages added later in wp-admin) ------------ */
.gg-prose{font-size:20px;line-height:1.85}
.gg-prose > * + *{margin-top:1em}
.gg-prose h2{font-size:clamp(26px,4vw,38px);line-height:1.3;margin-top:1.4em}
.gg-prose h3{font-size:clamp(21px,2.4vw,26px);line-height:1.35;margin-top:1.2em}
.gg-prose ul,.gg-prose ol{line-height:1.85}
.gg-prose li + li{margin-top:.4em}
.gg-prose img{border-radius:16px}
.gg-prose table{width:100%;border-collapse:collapse}
.gg-prose td,.gg-prose th{padding:10px 12px;border-bottom:1px solid rgba(95,63,48,.14);text-align:left}
.gg-prose blockquote{
  margin:0;padding:14px 18px;border-radius:18px;
  background:var(--gg-shell);color:var(--gg-coffee);
}
/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.gg-prose table,.gg-prose pre{display:block;overflow-x:auto}

/* ---------- 26. Inline links on the tinted grounds ---------------------- */
/* No shade of the CI orange reaches 4.5:1 on peach - getting there means a
   maroon that is off-brand. Inline links on a tinted ground are therefore set
   at weight 700, which puts them over the 18.66px large-text threshold (body
   copy here never drops below 19px) where the bar is 3:1 and --gg-orange-ink
   measures 3.71. It also makes them easier to spot in a paragraph, which is
   the point of a link. */
.gg-section--peach :is(p,li,address,blockquote,figcaption) a,
.gg-section--turquoise :is(p,li,address,blockquote,figcaption) a,
.gg-card--peach :is(p,li) a,
.gg-card--mint :is(p,li) a,
.gg-pill--peach a,
.gg-chip{font-weight:700}

/* ---------- 27. Touch targets on mobile -------------------------------- */
/* The handoff asks for >=44px hit targets on a phone. Links that sit inside a
   sentence are exempt (WCAG 2.5.8 makes that exception, and padding them would
   break the line box), so this only grows the standalone ones: the footer's
   sitemap and social links and the site's arrow CTAs. */
@media (max-width:767px){
  .gg-footer__links a,
  .gg-footer__social a,
  a.gg-link-lg{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .gg-brand{min-height:44px}
}

/* ---------- 28. Glow Guide articles ------------------------------------- */
/* Date / reading-time line under an article title, and the cards that list
   articles on the Guide hub and every archive. Meta text follows the existing
   .gg-meta convention (18px, --gg-coffee-soft); everything that reads as body
   copy stays at the site's 19px floor. */

.gg-post-meta{
  margin:14px 0 0;
  font-size:18px;
  line-height:1.6;
  color:var(--gg-coffee-soft);
}
.gg-post-meta__dot{margin:0 8px}

.gg-post-card{gap:0}
.gg-post-card__img{margin-bottom:14px}
.gg-post-card__topic{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  color:var(--gg-orange-ink);
}
.gg-post-card__excerpt{
  margin:10px 0 0;
  font-size:19px;
  line-height:1.75;
  color:var(--gg-coffee);
}
.gg-post-card__meta{
  margin:14px 0 0;
  font-size:18px;
  line-height:1.6;
  color:var(--gg-coffee-soft);
}
/* Pushes the date to the bottom edge so cards of different text lengths still
   line their dates up across a row. */
.gg-card-link .gg-post-card__meta{margin-top:auto;padding-top:14px}

/* Pagination on the Guide hub and archives. WordPress prints these classes. */
.gg-pagination{margin-top:30px}
.gg-pagination .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gg-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 12px;
  border-radius:999px;
  background:var(--gg-shell);
  color:var(--gg-coffee);
  font-size:19px;
  font-weight:700;
  line-height:1;
}
.gg-pagination .page-numbers.current{background:var(--gg-orange);color:#fff}
.gg-pagination .page-numbers.dots{background:none;min-width:0;padding:0 4px}
.gg-pagination a.page-numbers:hover{background:var(--gg-peach)}

/* ---------- 29. Standalone landing page --------------------------------- */
/* template-landing.php prints no theme sticky bar, so no room is reserved. */
body.gg-landing{padding-bottom:0}

/* The article stream sits inside the Guide's design page, whose base styles
   colour every heading CI orange - on the shell cards that is under 3:1. Keep
   the cards on the theme's own heading colour. */
.gd-page #articles h2,.gd-page #articles h3{color:var(--gg-coffee);font-family:var(--font-display);font-weight:900}
.gd-page #articles h3{font-size:clamp(21px,2.4vw,25px);line-height:1.35}
.gd-page #articles h2{font-size:clamp(26px,4.2vw,40px);line-height:1.3}

/* ---------- 30. Extra pictures added on top of the design --------------- */
/* inc/design.php getglow_design_extras(): the clinic's own infographics. */
.gd-extra{margin:26px auto;max-width:540px}
.gd-extra--wide{max-width:100%}
.gd-extra img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 6px 16px rgba(95,63,48,.12)}

/* ---------- 31. Slots with a 30/60-minute switch ------------------------- */
/* The design frames each GLOWRAPIST formula photo in a fixed 4:5 box. With a
   tab row above the photo the box has to grow, so its crop is released. */
div:has(> .gd-duo){aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important}
.gd-duo__tabs{display:flex;gap:8px;margin-bottom:10px}
.gd-duo__tabs button{
  min-height:44px;padding:8px 20px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--gg-coffee);background:#fff;color:var(--gg-coffee);
  font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1;
}
.gd-duo__tabs button[aria-selected="true"]{background:var(--gg-coffee);color:#fff}
.gd-duo [role="tabpanel"]{aspect-ratio:4/5}
.gd-duo [role="tabpanel"][hidden]{display:none}