/* ============================================================
   Ayurique Herbals — Theme B
   -------------------------------------------------------------
   Built to design/theme-b/THEME-B.md (approved; it wins over
   DESIGN.md for the website). Brand colours, type, spacing and
   motion come from tokens.css (the kit's colors.css, unchanged).
   The only values not in the kit are the Theme B additions
   below, named once and used everywhere by name.
   ============================================================ */

/* ---------- Theme B additions (THEME-B.md "Colour") ---------- */
:root{
  /* herb panel tints, background only; ink on each passes AA */
  --ayqB-tint-mulethi:#F3E8DC;
  --ayqB-tint-vasaka:#E6EEE1;
  --ayqB-tint-amla:#EEF2DC;
  --ayqB-tint-tulsi:#ECE6F3;
  --ayqB-tint-beetroot:#F5E1E8;
  --ayqB-tint-turmeric:#FBEBD3;
  --ayqB-tint-pepper:#E9E4E2;
  /* hero italic on plum; dial rings */
  --ayqB-blush:#F4C8D2;
  --ayqB-dial-morning:#E09A2E;
  --ayqB-dial-evening:var(--ayq-primary);
  /* the four rules: rule colour / numeral colour */
  --ayqB-rule-green:#5E8C3A;
  --ayqB-rule-amber:#C9822E;
  --ayqB-rule-amber-ink:#A8651E;
  --ayqB-rule-blue:var(--ayq-range-jala);
  --ayqB-rule-beet:#8E2A4A;
  /* Letters eyebrow on the tulsi panel */
  --ayqB-tulsi-ink:#5E4686;
  /* film overlay and drawer veil: ink at 55% */
  --ayqB-film-veil:rgba(42,30,32,.55);
  /* the hero jar's shadow on plum (Theme B; an exception to DESIGN.md) */
  --ayqB-jar-shadow:drop-shadow(0 40px 40px rgba(23,16,18,.45));
  /* card and panel radii, layout (THEME-B.md "Layout") */
  --ayqB-radius-card:8px;
  --ayqB-radius-panel:10px;
  --ayqB-container:1320px;
  --ayqB-gutter:32px;
  --ayqB-section-y:120px;
  --ayqB-ease:var(--ayq-ease-standard);
}
@media (max-width:767px){
  :root{ --ayqB-gutter:20px; --ayqB-section-y:72px }
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--ayq-paper); color:var(--ayq-ink);
  font-family:var(--ayq-font-sans); font-size:var(--ayq-body-size); line-height:var(--ayq-body-lh);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
a{ color:var(--ayq-accent) }
a:hover{ color:var(--ayq-ink) }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0 }
:focus-visible{ outline:2px solid var(--ayq-accent); outline-offset:3px; border-radius:2px }
.site-header :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.film :focus-visible,.chat-sec :focus-visible,.card--plum :focus-visible{ outline-color:var(--ayq-paper) }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link{ position:absolute; left:var(--ayq-space-4); top:-60px; z-index:100; background:var(--ayq-paper); color:var(--ayq-ink); padding:.7rem 1rem; border-radius:var(--ayq-radius-sm); font-weight:600 }
.skip-link:focus{ top:var(--ayq-space-4) }

.container{ max-width:var(--ayqB-container); margin:0 auto; padding:0 var(--ayqB-gutter) }
.section{ padding:var(--ayqB-section-y) 0 }
.section--sand{ background:var(--ayq-neutral-100) }
.section--tight{ padding-top:0 }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ayq-accent); margin:0 0 var(--ayq-space-4); line-height:1.3;
}
.h-hero{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(46px,6vw,96px); line-height:.98; letter-spacing:-.03em }
.h-section{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.02em }
.h-section--lg{ font-size:clamp(44px,5.4vw,80px); line-height:.98 }
.h-page{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(42px,5.4vw,80px); line-height:1; letter-spacing:-.02em }
.h-card{ font-family:var(--ayq-font-display); font-weight:500; font-size:28px; line-height:1.1 }
.h-sub{ font-family:var(--ayq-font-display); font-weight:500; font-size:26px; line-height:1.2 }
.latin{ font-family:var(--ayq-font-display); font-style:italic; color:var(--ayq-neutral-600) }
.lede{ font-size:17px; line-height:1.6; color:var(--ayq-neutral-700); max-width:44ch }
.fig,.price,.amount{ font-family:var(--ayq-font-mono); font-variant-numeric:tabular-nums }
.muted{ color:var(--ayq-neutral-600) }
.small{ font-size:var(--ayq-small-size) }
.label{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-neutral-600) }
.link{ color:var(--ayq-accent); font-weight:600; text-underline-offset:3px }
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--ayq-accent); text-decoration:none }
.link-arrow:hover{ color:var(--ayq-ink); text-decoration:underline; text-underline-offset:3px }

.sec-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--ayq-space-5); margin-bottom:52px }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:56px; padding:0 28px; border-radius:var(--ayq-radius-sm); border:1px solid transparent;
  font-family:var(--ayq-font-sans); font-weight:600; font-size:16px; line-height:1; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--ayq-dur-fast) var(--ayqB-ease),color var(--ayq-dur-fast) var(--ayqB-ease),border-color var(--ayq-dur-fast) var(--ayqB-ease);
}
.btn .arr{ display:inline-block; transition:transform var(--ayq-dur-base) var(--ayqB-ease) }
.btn:hover .arr{ transform:translateX(4px) }
.btn--plum{ background:var(--ayq-primary); color:var(--ayq-paper); border-color:var(--ayq-primary) }
.btn--plum:hover{ background:var(--ayq-primary-600); border-color:var(--ayq-primary-600); color:var(--ayq-paper) }
.btn--cream{ background:var(--ayq-paper); color:var(--ayq-primary); border-color:var(--ayq-paper) }
.btn--cream:hover{ background:var(--ayq-primary-50); color:var(--ayq-primary) }
.btn--outline{ background:transparent; color:var(--ayq-ink); border-color:var(--ayq-ink) }
.btn--outline:hover{ background:var(--ayq-ink); color:var(--ayq-paper) }
.btn--outline-cream{ background:transparent; color:var(--ayq-paper); border-color:var(--ayq-primary-100) }
.btn--outline-cream:hover{ background:var(--ayq-paper); color:var(--ayq-primary) }
.btn--lg{ height:64px; padding:0 40px; font-size:18px; gap:14px }
.btn--sm{ height:48px; padding:0 20px; font-size:15px }
.btn--block{ width:100%; justify-content:space-between }
.btn[disabled],.btn.is-busy{ opacity:.6; cursor:progress }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px }

/* ---------- announcement + header ---------- */
.announce{ background:var(--ayq-primary-600); color:var(--ayq-paper); text-align:center; padding:9px 16px; font-size:13px; letter-spacing:.02em; line-height:1.4 }
.site-header{ background:var(--ayq-primary); color:var(--ayq-paper); position:relative; z-index:30 }
.hdr{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding-top:18px; padding-bottom:18px; border-bottom:1px solid var(--ayq-primary-400);
}
.hdr-nav{ display:flex; gap:28px; flex-wrap:wrap; font-size:15px }
.hdr-nav a{ color:var(--ayq-paper); text-decoration:none; position:relative; padding:4px 0 }
.hdr-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--ayq-dur-base) var(--ayqB-ease) }
.hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{ transform:scaleX(1) }
.hdr-logo{ display:flex; justify-content:center }
.hdr-logo img{ width:64px; height:64px }
.hdr-icons{ display:flex; justify-content:flex-end; align-items:center; gap:8px }
.icon-btn{
  width:44px; height:44px; border:0; background:transparent; color:var(--ayq-paper); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; text-decoration:none;
  transition:background-color var(--ayq-dur-fast) var(--ayqB-ease);
}
.icon-btn:hover{ background:var(--ayq-primary-600); color:var(--ayq-paper) }
.icon-btn svg{ width:22px; height:22px }
.cart-count{
  position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--ayq-paper); color:var(--ayq-primary); font-size:11px; font-weight:500; line-height:18px; text-align:center;
  font-family:var(--ayq-font-mono);
}
.menu-btn,.mnav{ display:none }

@media (max-width:899px){
  .hdr{ padding-top:12px; padding-bottom:12px; gap:8px }
  .hdr-nav{ display:none }
  .menu-btn{ display:inline-flex; justify-self:start }
  .hdr-logo img{ width:52px; height:52px }
  .hdr-icons{ gap:0 }
  .hdr-icons .icon-btn--account{ display:none }
  .mnav{ display:block; overflow:hidden; max-height:0; transition:max-height var(--ayq-dur-slow) var(--ayqB-ease) }
  .mnav.is-open{ max-height:480px }
  .mnav ul{ list-style:none; margin:0; padding:var(--ayq-space-3) var(--ayqB-gutter) var(--ayq-space-5); border-bottom:1px solid var(--ayq-primary-400) }
  .mnav a{ display:block; padding:12px 0; color:var(--ayq-paper); text-decoration:none; font-family:var(--ayq-font-display); font-size:26px; border-bottom:1px solid var(--ayq-primary-400) }
  .mnav li:last-child a{ border-bottom:0 }
}
@media (max-width:479px){ .announce{ font-size:12px } }

/* ---------- search panel ---------- */
.search-panel{ background:var(--ayq-primary); border-bottom:1px solid var(--ayq-primary-400) }
.search-panel[hidden]{ display:none }
.search-form{ display:flex; gap:10px; padding-top:var(--ayq-space-5); padding-bottom:var(--ayq-space-5); flex-wrap:wrap; align-items:end }
.search-form .field{ flex:1 1 260px }
.search-form label{ display:block; font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-primary-100); margin-bottom:8px }
.search-form input{ width:100%; height:52px; border:1px solid var(--ayq-primary-300); border-radius:var(--ayq-radius-sm); background:var(--ayq-paper); color:var(--ayq-ink); padding:0 16px; font-size:16px }
.search-form .btn{ height:52px }

/* ---------- cart drawer ---------- */
.drawer-veil{ position:fixed; inset:0; background:var(--ayqB-film-veil); z-index:60; opacity:0; visibility:hidden; transition:opacity var(--ayq-dur-slow) var(--ayqB-ease),visibility var(--ayq-dur-slow) }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(440px,100%);
  background:var(--ayq-paper); color:var(--ayq-ink); display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden; transition:transform var(--ayq-dur-slow) var(--ayqB-ease),visibility var(--ayq-dur-slow);
  border-left:1px solid var(--ayq-neutral-200);
}
.drawer-open .drawer{ transform:none; visibility:visible }
.drawer-open .drawer-veil{ opacity:1; visibility:visible }
.drawer-open{ overflow:hidden }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--ayq-neutral-200) }
.drawer-head h2{ font-family:var(--ayq-font-display); font-weight:400; font-size:30px }
.drawer-head .icon-btn{ color:var(--ayq-ink) }
.drawer-head .icon-btn:hover{ background:var(--ayq-neutral-100); color:var(--ayq-ink) }
.drawer-body{ flex:1; overflow:auto; display:flex; flex-direction:column }
.drawer-body .widget_shopping_cart_content{ flex:1; display:flex; flex-direction:column }
.mini-list{ list-style:none; margin:0; padding:8px 24px; flex:1 }
.mini-item{ display:grid; grid-template-columns:72px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--ayq-neutral-200) }
.mini-thumb{ width:72px; aspect-ratio:1; border-radius:6px; background:var(--tint,var(--ayqB-tint-vasaka)); display:flex; align-items:center; justify-content:center; overflow:hidden }
.mini-thumb img{ width:auto; height:84% }
.mini-name{ font-family:var(--ayq-font-display); font-size:20px; font-weight:500; line-height:1.2; color:var(--ayq-ink); text-decoration:none }
.mini-name:hover{ text-decoration:underline; text-underline-offset:3px }
.mini-meta{ font-family:var(--ayq-font-mono); font-size:13px; color:var(--ayq-neutral-600); margin-top:4px }
.mini-remove{ width:36px; height:36px; border-radius:50%; border:1px solid var(--ayq-neutral-300); display:inline-flex; align-items:center; justify-content:center; color:var(--ayq-neutral-700); text-decoration:none }
.mini-remove:hover{ border-color:var(--ayq-ink); color:var(--ayq-ink) }
.mini-remove svg{ width:14px; height:14px }
.mini-foot{ padding:20px 24px 24px; border-top:1px solid var(--ayq-neutral-200); background:var(--ayq-white); display:grid; gap:12px }
.mini-total{ display:flex; justify-content:space-between; align-items:baseline }
.mini-total .amount{ font-size:20px }
.mini-note{ font-size:13px; color:var(--ayq-neutral-600) }
.mini-empty{ padding:48px 24px; display:grid; gap:20px; justify-items:start }
.mini-empty p{ font-family:var(--ayq-font-display); font-size:26px; line-height:1.2 }
.is-updating{ opacity:.55; pointer-events:none; transition:opacity var(--ayq-dur-fast) }

/* ---------- hero ---------- */
.hero{ background:var(--ayq-primary); color:var(--ayq-paper); position:relative; overflow:hidden }
.hero-inner{ display:flex; flex-wrap:wrap; gap:24px; padding-top:56px; position:relative; z-index:1 }
.hero-copy{ flex:1 1 600px; min-width:0; padding-bottom:96px }
.hero-copy em{ color:var(--ayqB-blush) }
.hero-copy .lede{ margin-top:36px; font-size:20px; line-height:1.55; max-width:46ch; color:var(--ayq-primary-50) }
.hero-copy .cta-row{ margin-top:40px }
.hero-art{ flex:1 1 460px; min-width:0; position:relative; min-height:600px }
.hero-art .herb-line{ position:absolute; opacity:.3 }
.hero-art .herb-line--faint{ opacity:.22 }
.hero-jar{ position:absolute; left:16%; bottom:9%; width:54%; height:auto; filter:var(--ayqB-jar-shadow) }
.badge{ position:absolute; right:0; top:0; width:150px; height:150px; color:var(--ayq-paper) }
.badge svg{ position:absolute; inset:0; width:100%; height:100% }
.badge text{ font-family:var(--ayq-font-mono); font-size:14px; letter-spacing:3px; fill:currentColor }
.badge-n{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--ayq-font-display); font-size:38px; line-height:1; text-align:center }
.badge-n span{ display:block; font-family:var(--ayq-font-mono); font-size:14px; margin-top:4px }
@media (max-width:767px){
  .hero-inner{ padding-top:36px }
  .hero-copy{ padding-bottom:16px }
  .hero-copy .lede{ font-size:18px; margin-top:24px }
  .hero-copy .cta-row{ margin-top:28px }
  .hero-art{ min-height:440px }
  .badge{ width:112px; height:112px }
  .badge-n{ font-size:30px }
}

/* ---------- herb ticker ---------- */
.ticker{ background:var(--ayq-paper); border-bottom:1px solid var(--ayq-neutral-200); height:64px; display:flex; align-items:center; overflow:hidden }
.ticker-track{ display:flex; width:max-content; align-items:center; font-family:var(--ayq-font-display); font-size:22px; color:var(--ayq-neutral-700) }
.ticker-item{ display:inline-flex; align-items:center; gap:12px; padding-right:56px; white-space:nowrap; flex:none }
.ticker-item img{ width:34px; height:auto }

/* ---------- film ---------- */
.film{ position:relative; min-height:720px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--ayq-ink) }
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.film::after{ content:""; position:absolute; inset:0; background:var(--ayqB-film-veil) }
.film-copy{ position:relative; z-index:1; text-align:center; color:var(--ayq-paper); padding:96px var(--ayqB-gutter); max-width:760px }
.film-copy .eyebrow{ color:var(--ayq-neutral-100); margin-bottom:18px }
.film-copy h2{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(60px,8vw,120px); line-height:.92; letter-spacing:-.03em }
.film-copy .lede{ margin:24px auto 0; font-size:19px; max-width:50ch; color:var(--ayq-primary-50) }
.film-copy .btn{ margin-top:36px; height:58px; padding:0 34px; font-size:17px }
@media (max-width:767px){ .film{ min-height:560px } }

/* ---------- herb cards (formula + product cards) ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px }
.card{
  background:var(--ayq-white); border:1px solid var(--ayq-neutral-200); border-radius:var(--ayqB-radius-card);
  overflow:hidden; display:flex; flex-direction:column; color:var(--ayq-ink);
  transition:transform .35s var(--ayqB-ease);
}
.card:hover{ transform:translateY(-6px) }
.card-pan{ background:var(--tint,var(--ayq-neutral-100)); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; transition:background-color .3s }
.card-art{ width:52%; max-width:170px; height:auto; transform-origin:50% 85% }
.card-jar{ height:84%; width:auto; transition:transform .35s var(--ayqB-ease) }
.card:hover .card-jar{ transform:translateY(-4px) }
.card-tag{ position:absolute; left:14px; top:14px; font-family:var(--ayq-font-mono); font-size:12px; color:var(--ayq-neutral-700); background:var(--ayq-paper); padding:4px 8px; border-radius:3px; transition:transform .35s var(--ayqB-ease) }
.card:hover .card-tag{ transform:translateY(-3px) }
.card-body{ padding:22px 22px 26px; flex:1; display:flex; flex-direction:column }
.card-body .latin{ margin-top:4px }
.card-desc{ margin-top:14px; font-size:15px; line-height:1.55; color:var(--ayq-neutral-700) }
.card-buy{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.card-buy .price{ font-size:20px; color:var(--ayq-ink) }
.card-buy .pack{ display:block; font-family:var(--ayq-font-mono); font-size:12px; color:var(--ayq-neutral-600); margin-top:2px }
.card-buy form{ margin:0 }
.card-link{ color:inherit; text-decoration:none }
.card-link:hover{ color:inherit }
.card-link:hover .h-card{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }
.card--plum{ background:var(--ayq-primary); color:var(--ayq-paper); border-color:var(--ayq-primary); padding:28px; justify-content:space-between; gap:24px; min-height:420px }
.card--plum:hover{ transform:none }
.card-no{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-neutral-100) }
.card--plum p{ font-family:var(--ayq-font-display); font-size:34px; line-height:1.12 }
.card--plum .btn{ height:50px; padding:0 22px }
@media (max-width:767px){ .card--plum{ min-height:0 } .card--plum p{ font-size:28px } }

/* ---------- four rules ---------- */
.rules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px }
.rule-col{ border-top:4px solid var(--c); padding-top:22px }
.rule-n{ font-family:var(--ayq-font-display); font-size:56px; line-height:1; color:var(--n,var(--c)); display:block }
.rule-col h3{ margin:16px 0 8px; font-family:var(--ayq-font-display); font-weight:500; font-size:26px }
.rule-col p{ color:var(--ayq-neutral-700); line-height:1.6 }
.rule-col--1{ --c:var(--ayqB-rule-green) }
.rule-col--2{ --c:var(--ayqB-rule-amber); --n:var(--ayqB-rule-amber-ink) }
.rule-col--3{ --c:var(--ayqB-rule-blue) }
.rule-col--4{ --c:var(--ayqB-rule-beet) }

/* ---------- 21-day course ---------- */
.course{ display:flex; flex-wrap:wrap; gap:64px; align-items:center }
.course-copy{ flex:1 1 480px; min-width:0 }
.course-copy .lede{ margin-top:18px; font-size:18px }
.legend{ list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--ayq-neutral-200) }
.legend li{ display:flex; gap:18px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--ayq-neutral-200) }
.legend .key{ flex:none; width:14px; height:14px; border-radius:3px; transform:translateY(2px) }
.legend .key--am{ background:var(--ayqB-dial-morning) }
.legend .key--pm{ background:var(--ayqB-dial-evening) }
.legend .key--keep{ border:1.5px solid var(--ayq-neutral-400) }
.legend .when{ flex:none; width:96px; font-family:var(--ayq-font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase }
.legend .what{ color:var(--ayq-neutral-700); line-height:1.55 }
.course-dial{ flex:1 1 400px; min-width:0 }
.dial{ width:100%; max-width:440px; height:auto; margin:0 auto }
.dial .seg{ fill:none; stroke-width:24; opacity:.18; animation:ayqB-seg 9s ease-in-out infinite }
.dial .seg--am{ stroke:var(--ayqB-dial-morning) }
.dial .seg--pm{ stroke:var(--ayqB-dial-evening) }
.dial-day{ font-family:var(--ayq-font-mono); font-size:12px; fill:var(--ayq-neutral-600) }
.dial-n{ font-family:var(--ayq-font-display); font-size:108px; fill:var(--ayq-ink) }
.dial-sub{ font-family:var(--ayq-font-mono); font-size:14px; letter-spacing:2px; fill:var(--ayq-neutral-600) }
.dial-caption{ margin-top:16px; text-align:center; font-family:var(--ayq-font-mono); font-size:12px; color:var(--ayq-neutral-600) }
@media (max-width:767px){ .course{ gap:40px } .legend li{ flex-wrap:wrap; gap:6px 14px } .legend .what{ flex:1 1 100% } }

/* ---------- our story band ---------- */
.story-band{ border-top:1px solid var(--ayq-ink); border-bottom:1px solid var(--ayq-ink) }
.story-inner{ padding-top:100px; padding-bottom:100px; display:flex; flex-wrap:wrap; gap:48px; align-items:center }
.story-label{ flex:0 0 auto; font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ayq-accent); writing-mode:vertical-rl; transform:rotate(180deg) }
.story-copy{ flex:1 1 640px; min-width:0 }
.story-copy h2{ margin:0 0 22px; font-family:var(--ayq-font-mono); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ayq-neutral-600) }
.story-copy blockquote{ font-family:var(--ayq-font-display); font-size:clamp(30px,3.8vw,54px); line-height:1.14 }
.story-copy blockquote em{ color:var(--ayq-primary) }
.story-by{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:30px }
.story-art{ flex:0 1 220px; position:relative; height:240px }
.story-art img{ position:absolute }
@media (max-width:767px){ .story-label{ writing-mode:horizontal-tb; transform:none } .story-inner{ gap:24px; padding-top:72px; padding-bottom:72px } .story-art{ display:none } }

/* ---------- chat FAQ ---------- */
.chat-sec{ background:var(--ayq-ink); color:var(--ayq-paper); padding:var(--ayqB-section-y) 0 }
.chat-wrap{ display:flex; flex-wrap:wrap; gap:64px; align-items:flex-start }
.chat-intro{ flex:1 1 340px; min-width:0 }
.chat-intro .eyebrow{ color:var(--ayq-neutral-300) }
.chat-intro h2{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(40px,4.6vw,64px); line-height:1.02 }
.chat-intro p{ margin-top:22px; color:var(--ayq-neutral-200); line-height:1.6; max-width:40ch }
.chat-intro .btn{ margin-top:32px; height:54px; padding:0 24px }
.chat-intro .btn--cream{ color:var(--ayq-ink) }
.chat{ flex:1 1 520px; min-width:0; background:var(--ayq-neutral-700); border-radius:var(--ayqB-radius-panel); padding:28px; display:flex; flex-direction:column; gap:14px }
.bubble{ margin:0; padding:12px 16px; font-size:16px; line-height:1.5 }
.bubble--q{ align-self:flex-end; max-width:78%; background:var(--ayq-paper); color:var(--ayq-ink); border-radius:10px 10px 2px 10px }
.bubble--a{ align-self:flex-start; max-width:84%; background:var(--ayq-primary); color:var(--ayq-paper); border-radius:10px 10px 10px 2px }
@media (max-width:767px){ .chat{ padding:18px } .bubble--q,.bubble--a{ max-width:92% } .chat-wrap{ gap:40px } }

/* ---------- letters ---------- */
.letters-sec{ padding:110px 0 40px }
.letters{ background:var(--ayqB-tint-tulsi); border-radius:var(--ayqB-radius-panel); padding:56px; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-end; justify-content:space-between; position:relative; overflow:hidden }
.letters-art{ position:absolute; right:-20px; top:-30px; width:180px; height:auto; opacity:.9; transform:rotate(14deg) }
.letters-copy{ flex:1 1 420px; min-width:0; position:relative }
.letters-copy .eyebrow{ color:var(--ayqB-tulsi-ink) }
.letters-copy h2{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(34px,4vw,54px); line-height:1.05 }
.letters-copy p{ margin-top:14px; color:var(--ayq-neutral-700) }
.letters-form{ flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:8px; position:relative }
.letters-form label{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-neutral-700) }
.field-row{ display:flex; gap:10px; flex-wrap:wrap }
.input{ flex:1 1 220px; min-width:0; height:52px; border:1px solid var(--ayq-neutral-300); border-radius:var(--ayq-radius-sm); background:var(--ayq-white); padding:0 16px; font-size:16px; color:var(--ayq-ink) }
.input:focus{ outline:2px solid var(--ayq-accent); outline-offset:1px; border-color:var(--ayq-accent) }
.letters-form .btn{ height:52px; padding:0 24px; font-size:15px }
.form-msg{ min-height:1.4em; font-size:14px; color:var(--ayq-neutral-700) }
.form-msg.is-error{ color:var(--ayq-error) }
@media (max-width:767px){ .letters{ padding:32px 22px } .letters-sec{ padding-top:72px } .letters-art{ width:110px; opacity:.5 } }

/* ---------- closing call to action ---------- */
.closing{ padding:110px 0 }
.closing-inner{ display:flex; flex-wrap:wrap; gap:48px; align-items:flex-end; justify-content:space-between }
.closing-copy{ flex:1 1 640px; min-width:0 }
.closing h2{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(54px,8vw,128px); line-height:.9; letter-spacing:-.03em }
.closing h2 em{ color:var(--ayq-primary) }
@media (max-width:767px){ .closing{ padding:72px 0 } .closing-inner{ gap:32px } }

/* ---------- footer ---------- */
.site-footer{ background:var(--ayq-primary); color:var(--ayq-paper) }
.site-footer a{ color:var(--ayq-paper); text-decoration:none }
.site-footer a:hover{ text-decoration:underline; text-underline-offset:3px }
.ft-top{ padding-top:80px; padding-bottom:48px; display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between }
.ft-brand{ flex:1 1 280px; max-width:340px }
.ft-brand img{ width:140px; height:auto }
.ft-brand p{ margin-top:22px; color:var(--ayq-primary-100); line-height:1.6; font-size:15px }
.ft-social{ display:flex; gap:10px; margin-top:22px }
.ft-social a{ width:42px; height:42px; border:1px solid var(--ayq-primary-300); border-radius:50%; display:flex; align-items:center; justify-content:center }
.ft-social a:hover{ background:var(--ayq-primary-600) }
.ft-social svg{ width:19px; height:19px }
.ft-cols{ flex:1 1 640px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:32px; font-size:15px; line-height:2.1 }
.ft-cols h2{ margin:0 0 10px; font-family:var(--ayq-font-mono); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ayq-primary-100); line-height:1.4 }
.ft-cols ul{ list-style:none; margin:0; padding:0 }
.ft-contact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:24px 0; border-top:1px solid var(--ayq-primary-400); border-bottom:1px solid var(--ayq-primary-400); font-size:14px; line-height:1.6 }
.ft-contact span{ display:block; font-family:var(--ayq-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ayq-primary-100) }
.ft-disclaimer{ margin-top:24px; font-size:13px; line-height:1.6; color:var(--ayq-primary-100); max-width:110ch }
.ft-legal{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; padding:22px 0 36px; font-family:var(--ayq-font-mono); font-size:12px; color:var(--ayq-primary-100) }
.ft-contact,.ft-legal,.ft-cols{ overflow-wrap:anywhere }
.has-buybar .ft-legal{ padding-bottom:110px }
@media (min-width:900px){ .has-buybar .ft-legal{ padding-bottom:36px } }

/* ---------- inner page hero ---------- */
.page-hero{ padding:72px 0 56px; border-bottom:1px solid var(--ayq-neutral-200) }
.page-hero .lede{ margin-top:22px; font-size:18px; max-width:56ch }
.crumbs{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.06em; color:var(--ayq-neutral-600); margin-bottom:28px }
.crumbs a{ color:var(--ayq-neutral-600); text-decoration:none }
.crumbs a:hover{ color:var(--ayq-ink); text-decoration:underline }
.crumbs [aria-current]{ color:var(--ayq-ink) }
@media (max-width:767px){ .page-hero{ padding:48px 0 40px } }

/* ---------- placeholder (never fake content) ---------- */
.placeholder{ border:1px dashed var(--ayq-neutral-400); border-radius:var(--ayqB-radius-card); padding:24px; background:var(--ayq-white); max-width:72ch }
.placeholder-label{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-error); margin-bottom:8px }
.placeholder p:last-child{ color:var(--ayq-neutral-700) }

/* ---------- panels and figures tables ---------- */
.panel{ background:var(--ayq-white); border:1px solid var(--ayq-neutral-200); border-radius:var(--ayqB-radius-card); padding:28px }
.panel + .panel{ margin-top:20px }
.panel-title{ font-family:var(--ayq-font-display); font-weight:500; font-size:24px; margin-bottom:16px }
.figures{ width:100%; border-collapse:collapse; font-size:15px }
.figures th,.figures td{ padding:13px 0; border-bottom:1px solid var(--ayq-neutral-200); text-align:left; vertical-align:top; font-weight:400 }
.figures thead th{ font-family:var(--ayq-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ayq-neutral-600); border-bottom:1px solid var(--ayq-ink); padding-top:0 }
.figures td{ font-family:var(--ayq-font-mono); text-align:right; white-space:nowrap; padding-left:16px }
.figures thead th:last-child{ text-align:right }
.figures tbody tr:last-child > *{ border-bottom:0 }
.table-note{ margin-top:14px; font-size:14px; color:var(--ayq-neutral-600); line-height:1.55 }
.split{ display:flex; flex-wrap:wrap; gap:64px; align-items:flex-start }
.split > *{ min-width:0 }
.split-copy{ flex:1 1 380px }
.split-copy .lede{ margin-top:18px }
.split-copy .cta-row{ margin-top:28px }
.split-side{ flex:1 1 520px }
@media (max-width:767px){ .split{ gap:36px } .panel{ padding:20px } .figures td{ white-space:normal } }

/* ---------- shop ---------- */
.shop-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px }
.chip{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border:1px solid var(--ayq-neutral-300); border-radius:var(--ayq-radius-sm); font-size:14px; color:var(--ayq-ink); text-decoration:none; background:var(--ayq-white) }
.chip:hover{ border-color:var(--ayq-ink); color:var(--ayq-ink) }
.chip[aria-current="page"]{ background:var(--ayq-ink); border-color:var(--ayq-ink); color:var(--ayq-paper) }
.shop-count{ font-family:var(--ayq-font-mono); font-size:13px; color:var(--ayq-neutral-600) }
.shop-empty{ display:grid; gap:20px; justify-items:start }
.shop-empty p{ font-family:var(--ayq-font-display); font-size:28px; line-height:1.2 }
.woocommerce-pagination{ margin-top:48px }
.woocommerce-pagination ul{ list-style:none; padding:0; margin:0; display:flex; gap:8px }
.woocommerce-pagination a,.woocommerce-pagination span{ display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--ayq-neutral-300); border-radius:var(--ayq-radius-sm); font-family:var(--ayq-font-mono); text-decoration:none; color:var(--ayq-ink) }
.woocommerce-pagination .current{ background:var(--ayq-ink); color:var(--ayq-paper); border-color:var(--ayq-ink) }

/* ---------- product page ---------- */
.pdp{ padding:40px 0 var(--ayqB-section-y) }
.pdp-grid{ display:flex; flex-wrap:wrap; gap:56px; align-items:flex-start }
.gallery{ flex:1 1 520px; min-width:0 }
.gallery-main{ background:var(--tint,var(--ayqB-tint-vasaka)); border-radius:var(--ayqB-radius-panel); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative }
.gallery-main img{ width:100%; height:100%; object-fit:cover }
.gallery-main img.is-cutout{ width:auto; height:82%; object-fit:contain }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
.gallery-thumb{ width:84px; aspect-ratio:1; border-radius:6px; border:1px solid var(--ayq-neutral-200); background:var(--tint,var(--ayq-white)); padding:0; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover }
.gallery-thumb img.is-cutout{ width:auto; height:84%; object-fit:contain }
.gallery-thumb[aria-pressed="true"]{ border-color:var(--ayq-ink); outline:1px solid var(--ayq-ink) }
.buybox{ flex:1 1 420px; min-width:0; position:sticky; top:24px }
.buybox h1{ font-family:var(--ayq-font-display); font-weight:400; font-size:clamp(44px,5vw,72px); line-height:1; letter-spacing:-.02em }
.buybox .lede{ margin-top:18px; font-size:18px }
.buybox-price{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px }
.buybox-price .price{ font-size:32px; color:var(--ayq-ink) }
.buybox-price .pack{ font-family:var(--ayq-font-mono); font-size:13px; color:var(--ayq-neutral-600) }
.buy-form{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; align-items:stretch }
.buy-form .btn{ flex:1 1 160px }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--ayq-neutral-300); border-radius:var(--ayq-radius-sm); background:var(--ayq-white); height:56px }
.qty-btn{ width:44px; height:100%; border:0; background:transparent; font-size:20px; cursor:pointer; color:var(--ayq-ink) }
.qty-btn:hover{ background:var(--ayq-neutral-100) }
.qty input{ width:48px; height:100%; border:0; background:transparent; text-align:center; font-family:var(--ayq-font-mono); font-size:16px; -moz-appearance:textfield; appearance:textfield }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.buybox-facts{ list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--ayq-neutral-200) }
.buybox-facts li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--ayq-neutral-200); font-size:15px }
.buybox-facts li span:first-child{ color:var(--ayq-neutral-600) }
.buybox-facts li span:last-child{ font-family:var(--ayq-font-mono); text-align:right }
.buybox-note{ margin-top:18px; font-size:14px; color:var(--ayq-neutral-600); line-height:1.55 }
.stock-out{ margin-top:24px; font-weight:600 }
@media (max-width:899px){ .buybox{ position:static } .pdp-grid{ gap:36px } }

/* mobile buy bar */
.buybar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--ayq-paper); border-top:1px solid var(--ayq-neutral-200); transform:translateY(100%); visibility:hidden; transition:transform var(--ayq-dur-slow) var(--ayqB-ease),visibility var(--ayq-dur-slow) }
.buybar.is-on{ transform:none; visibility:visible }
.buybar-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--ayqB-gutter) }
.buybar .price{ font-size:20px }
.buybar-figs{ display:block; font-family:var(--ayq-font-mono); font-size:12px; color:var(--ayq-neutral-600) }
.buybar form{ margin:0 }
.buybar .btn{ height:48px }
@media (min-width:900px){ .buybar{ display:none } }

/* ---------- prose pages (policies, story) ---------- */
.prose{ max-width:68ch; font-size:17px; line-height:1.7; color:var(--ayq-neutral-700) }
.prose p + p,.prose p + h2,.prose h2 + p{ margin-top:1.1em }
.prose h2{ font-family:var(--ayq-font-display); font-weight:500; font-size:26px; line-height:1.2; color:var(--ayq-ink); margin-top:1.8em }
.prose strong{ color:var(--ayq-ink) }
.prose .lead{ font-family:var(--ayq-font-display); font-size:clamp(24px,2.4vw,30px); line-height:1.3; color:var(--ayq-ink) }
.prose a{ color:var(--ayq-accent); font-weight:600 }
.policy-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start }
.policy-nav{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ayq-neutral-200); position:sticky; top:24px }
.policy-nav a{ display:block; padding:12px 0; border-bottom:1px solid var(--ayq-neutral-200); color:var(--ayq-ink); text-decoration:none; font-size:15px }
.policy-nav a:hover{ color:var(--ayq-accent) }
.policy-nav a[aria-current="page"]{ font-weight:600; color:var(--ayq-primary) }
@media (max-width:899px){ .policy-grid{ grid-template-columns:1fr; gap:36px } .policy-nav{ position:static } }

.signature{ margin-top:40px; padding-top:18px; border-top:1px solid var(--ayq-neutral-200); max-width:68ch }
.signature .label{ margin-top:6px }

/* contact cards */
.contact-card .card-pan{ aspect-ratio:auto; height:120px }
.contact-card .card-pan img{ width:64px; height:auto }
.contact-card .card-body > * + *{ margin-top:10px }
.contact-card .h-card{ font-size:24px; overflow-wrap:anywhere }

/* ---------- motion: slow, calm, off under reduced motion ---------- */
@keyframes ayqB-mq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes ayqB-spin{ to{ transform:rotate(-360deg) } }
@keyframes ayqB-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes ayqB-drift{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)) } 50%{ transform:translateY(-8px) rotate(calc(var(--r,0deg) + 4deg)) } }
@keyframes ayqB-sway{ 0%,100%{ transform:rotate(-3deg) translateY(0) } 50%{ transform:rotate(3deg) translateY(-6px) } }
@keyframes ayqB-seg{ 0%,4%{ opacity:.18 } 10%,88%{ opacity:1 } 100%{ opacity:.18 } }
.ticker-track{ animation:ayqB-mq 70s linear infinite }
.badge svg{ animation:ayqB-spin 26s linear infinite }
.hero-jar{ animation:ayqB-float 5s ease-in-out infinite }
.drift{ animation:ayqB-drift 6s ease-in-out infinite; transform:rotate(var(--r,0deg)) }
.card-art{ animation:ayqB-sway 5.5s ease-in-out infinite }
.card:hover .card-art{ animation-duration:2.2s }

/* gentle scroll reveal; only when JS is running */
.js [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity var(--ayq-dur-reveal) var(--ayqB-ease),transform var(--ayq-dur-reveal) var(--ayqB-ease); transition-delay:calc(var(--i,0) * 90ms) }
.js [data-reveal].in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .ticker-track,.badge svg,.hero-jar,.drift,.card-art{ animation:none }
  .dial .seg{ animation:none; opacity:1 }
  .card,.card:hover,.card-tag,.card-jar,.card:hover .card-tag,.card:hover .card-jar{ transform:none; transition:none }
  .js [data-reveal]{ opacity:1; transform:none; transition:none }
  .drawer,.drawer-veil,.buybar,.mnav,.btn .arr,.hdr-nav a::after{ transition:none }
}