/* =============================================================
   Wellness Store Australia, core stylesheet
   Mobile-first. One rule serves every section; per-section
   variation arrives as inline custom properties, never as a new
   CSS rule. That is what keeps this file flat instead of growing
   with every page the client builds.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */

:root{
  /* Brand: deep eucalyptus, warm sand and sage. Kept in the same family as
     the products' packaging without copying any one brand's palette. */
  --c-primary:      #2E5E55;
  --c-primary-600:  #285249;
  --c-primary-800:  #1F433C;
  --c-primary-900:  #16302B;
  --c-primary-050:  #EEF3F1;
  --c-primary-100:  #DCE6E2;

  /* Accent: soft gold for badges, prices on sale and small highlights */
  --c-accent:       #C29A5B;
  --c-accent-600:   #A9824A;
  --c-accent-050:   #FAF4EA;

  --c-sage:         #DCE3D9;
  --c-sand:         #F1EEE6;
  --c-success:      #3C7D5A;
  --c-sale:         #B4553A;

  /* Neutrals */
  --c-ink:          #1E1C1C;
  --c-ink-2:        #4B4846;
  --c-ink-3:        #7A7673;
  --c-line:         #E6E2DA;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F8F6F2;
  --c-bg:           #FFFFFF;

  /* Type */
  --font-head: 'Jakarta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space, radius, elevation */
  --sp-xs: .5rem;  --sp-sm: 1rem;  --sp-md: 2rem;
  --sp-lg: 3.5rem; --sp-xl: 5.5rem;
  --radius: 14px;  --radius-sm: 10px;  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(30,28,28,.06), 0 2px 8px rgba(30,28,28,.05);
  --shadow-md: 0 6px 16px rgba(30,28,28,.08), 0 2px 4px rgba(30,28,28,.04);
  --shadow-lg: 0 24px 54px rgba(30,28,28,.14);

  /* Widths */
  --w-wide: 1320px;  --w-normal: 1120px;  --w-narrow: 760px;

  /* Sticky mobile bar height, reserved so nothing is covered */
  --callbar: 0px;
}



/* ---------- 2. Reset ----------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;            /* 16px: below this iOS zooms form fields */
  line-height:1.65;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;         /* belt and braces against stray wide children */
  padding-bottom:var(--callbar);
}

img,svg,video{ max-width:100%; height:auto; display:block }
img{ background:var(--c-surface-2) }

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .55em;
  text-wrap:balance;
  color:var(--c-ink);
}
h1{ font-size:clamp(2rem, 1.35rem + 2.9vw, 3.5rem) }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem) }
h3{ font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem); font-weight:700 }
h4{ font-size:1.0625rem; font-weight:700 }

p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }

a{ color:var(--c-primary); text-underline-offset:.18em }
a:hover{ color:var(--c-primary-800) }

ul,ol{ padding-left:1.15rem }
li{ margin-bottom:.4em }

hr{ border:0; border-top:1px solid var(--c-line); margin:var(--sp-md) 0 }

:focus-visible{ outline:3px solid var(--c-accent); outline-offset:2px; border-radius:4px }

::selection{ background:var(--c-primary-100); color:var(--c-primary-900) }

.screen-reader-text{
  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:-9999px; top:0; z-index:200;
  background:var(--c-primary); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0 }

/* ---------- 3. Container & grid ------------------------------ */

.ctr-container{
  padding-block:var(--pt, var(--sp-lg)) var(--pb, var(--sp-lg));
  background:var(--bg, transparent);
  position:relative;
}
.ctr-container--bgimg{ background-image:var(--bg-img); background-size:cover; background-position:center }
.ctr-inner{ margin-inline:auto; padding-inline:16px; max-width:var(--w-normal) }
@media (min-width:600px){ .ctr-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
.ctr-container--wide   > .ctr-inner{ max-width:var(--w-wide) }
.ctr-container--narrow > .ctr-inner{ max-width:var(--w-narrow) }
.ctr-container--full   > .ctr-inner{ max-width:none; padding-inline:0 }

.ctr-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:var(--gap, var(--sp-sm));
}
@media (max-width:980px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr)) } }
@media (max-width:640px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-sm,1),minmax(0,1fr)) } }

.wsa-tint      { background:var(--c-surface-2) }
.wsa-tint-brand{ background:var(--c-primary-050) }
.wsa-dark{ background:var(--c-primary-900); color:#fff }
.wsa-dark h1,.wsa-dark h2,.wsa-dark h3,.wsa-dark h4{ color:#fff }
.wsa-dark a{ color:#fff }
.wsa-dark p{ color:rgba(255,255,255,.86) }

/* ---------- 4. Typographic helpers --------------------------- */

.wsa-eyebrow{
  display:inline-block; font-family:var(--font-head);
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-primary); margin:0 0 .75rem;
}
.wsa-dark .wsa-eyebrow{ color:var(--c-accent) }
.wsa-lead{ font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--c-ink-2); max-width:62ch }
.wsa-dark .wsa-lead{ color:rgba(255,255,255,.88) }
.wsa-center{ text-align:center }
.wsa-center .wsa-lead{ margin-inline:auto }
.wsa-section-head{ max-width:70ch; margin-bottom:var(--sp-md) }
.wsa-section-head.wsa-center{ margin-inline:auto }

/* ---------- 5. Buttons --------------------------------------- */

.ctr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px;                    /* comfortable touch target */
  padding:.8rem 1.5rem;
  border-radius:999px;
  font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.2;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ctr-btn:active{ transform:translateY(1px) }
.ctr-btn svg{ width:20px; height:20px; flex:none }

.ctr-btn--primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-sm) }
.ctr-btn--primary:hover{ background:var(--c-primary-800); color:#fff; box-shadow:var(--shadow-md) }

.ctr-btn--accent{ background:var(--c-accent); color:var(--c-primary-900); box-shadow:var(--shadow-sm) }
.ctr-btn--accent:hover{ background:var(--c-accent-600); color:var(--c-primary-900); box-shadow:var(--shadow-md) }

.ctr-btn--ghost{ border-color:var(--c-line); color:var(--c-ink); background:var(--c-surface) }
.ctr-btn--ghost:hover{ border-color:var(--c-primary); color:var(--c-primary) }

.ctr-btn--ghost-light{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent }
.ctr-btn--ghost-light:hover{ background:rgba(255,255,255,.12); color:#fff }

.wsa-btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-sm) }
@media (max-width:420px){ .wsa-btn-row .ctr-btn{ width:100% } }

/* ---------- 6. Header ---------------------------------------- */

/* The logo PNG carries its own #F7F8FC plate, so the header band uses the
   same value. On pure white the logo reads as a visible grey rectangle. */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--c-surface-2);
  border-bottom:1px solid var(--c-line);
}
.wsa-topbar{
  background:var(--c-primary-900); color:#fff;
  font-size:.82rem; letter-spacing:.01em;
}
.wsa-topbar-inner{
  max-width:var(--w-wide); margin-inline:auto;
  padding:.45rem clamp(1rem,4vw,2.5rem);
  display:flex; gap:1.25rem; align-items:center; justify-content:space-between;
}
.wsa-topbar a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem }
.wsa-topbar a:hover{ text-decoration:underline }
.wsa-topbar svg{ width:15px; height:15px; opacity:.85 }
@media (max-width:860px){ .wsa-topbar{ display:none } }

.site-header-inner{
  max-width:var(--w-wide); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 16px;
  min-height:64px;
}
@media (min-width:600px){ .site-header-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }

.site-brand{ display:flex; align-items:center; text-decoration:none; color:inherit; flex:none }
.site-brand img{ max-height:44px; width:auto }
@media (min-width:861px){ .site-brand img{ max-height:52px } }
.site-brand-text{ font-family:var(--font-head); font-weight:800; font-size:1.15rem; letter-spacing:-.02em }

.site-nav{ margin-left:auto }
.site-nav .menu{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; align-items:center }
.site-nav .menu li{ margin:0; position:relative }
.site-nav .menu a{
  text-decoration:none; color:var(--c-ink); font-weight:600; font-size:.95rem;
  padding:.5rem 0; display:inline-block; position:relative;
}
.site-nav .menu a::after{
  content:''; position:absolute; left:0; right:100%; bottom:.15rem; height:2px;
  background:var(--c-accent); transition:right .2s ease;
}
.site-nav .menu a:hover::after,
.site-nav .menu .current-menu-item > a::after{ right:0 }

/* Dropdowns */
.site-nav .sub-menu{
  position:absolute; left:0; top:100%; min-width:250px;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); padding:.5rem; list-style:none; margin:.5rem 0 0;
  display:none; flex-direction:column; gap:0; z-index:70;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu{ display:flex }
.site-nav .sub-menu a{ padding:.55rem .75rem; border-radius:8px; width:100%; font-weight:500 }
.site-nav .sub-menu a::after{ display:none }
.site-nav .sub-menu a:hover{ background:var(--c-primary-050); color:var(--c-primary) }

.wsa-header-cta{ display:none; margin-left:1rem }
@media (min-width:1080px){ .wsa-header-cta{ display:inline-flex } }

.nav-toggle{
  display:none; background:none; border:0; margin-left:auto;
  width:48px; height:48px; padding:12px; cursor:pointer; color:var(--c-ink);
}
.nav-toggle span{ display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition:transform .22s ease, opacity .15s ease }
.nav-toggle span + span{ margin-top:6px }

@media (max-width:1079px){
  .nav-toggle{ display:block }
  .site-nav{ margin-left:0 }
  .site-nav .menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--c-surface-2); flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem 16px 1.25rem; border-bottom:1px solid var(--c-line);
    box-shadow:var(--shadow-lg); max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .site-nav.is-open .menu{ display:flex }
  .site-nav .menu > li{ border-bottom:1px solid var(--c-line) }
  .site-nav .menu > li:last-child{ border-bottom:0 }
  .site-nav .menu a{ padding:.9rem .25rem; font-size:1.05rem; min-height:48px }
  .site-nav .menu a::after{ display:none }
  .site-nav .sub-menu{
    position:static; display:flex; box-shadow:none; border:0; border-radius:0;
    margin:0 0 .5rem .75rem; padding:0; background:transparent;
  }
  .site-nav .sub-menu a{ font-size:.95rem; color:var(--c-ink-2); padding:.6rem .25rem }
  .site-nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
  .site-nav.is-open .nav-toggle span:nth-child(2){ opacity:0 }
  .site-nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }
}

/* Header phone shortcut, visible on small screens next to the burger */
.wsa-header-tel{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:var(--c-primary-050); color:var(--c-primary); margin-left:auto; flex:none;
}
@media (min-width:1080px){ .wsa-header-tel{ display:none } }

/* ---------- 7. Mobile sticky call bar ------------------------ */

.wsa-callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; gap:1px; background:var(--c-line);
  box-shadow:0 -4px 20px rgba(11,16,32,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.wsa-callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:62px; font-family:var(--font-head); font-weight:700; font-size:.98rem;
  text-decoration:none;
}
.wsa-callbar .wsa-cb-call{ background:var(--c-primary); color:#fff }
.wsa-callbar .wsa-cb-quote{ background:var(--c-accent); color:var(--c-primary-900) }
@media (max-width:860px){ .wsa-callbar{ display:flex } }

/* ---------- 8. Hero ------------------------------------------ */

.wsa-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--c-primary-900) 0%,var(--c-primary) 78%);
  color:#fff;
}
.wsa-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 500px at 82% 12%, rgba(194,154,91,.22), transparent 62%);
}
.wsa-hero > .ctr-inner{ position:relative; z-index:1 }
.wsa-hero h1{ color:#fff }
.wsa-hero-grid{ display:grid; gap:var(--sp-md); align-items:center }
@media (min-width:980px){ .wsa-hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--sp-lg) } }

.wsa-hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-sm); padding:0; list-style:none }
.wsa-hero-badges li{
  margin:0; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:.35rem .8rem; border-radius:999px; font-size:.85rem; font-weight:600;
}
.wsa-hero-badges svg{ width:16px; height:16px; color:var(--c-accent) }

.wsa-hero-media{ position:relative }
.wsa-hero-media img{
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; object-fit:cover; width:100%;
}
.wsa-hero-stat{
  position:absolute; left:-8px; bottom:-18px;
  background:var(--c-surface); color:var(--c-ink);
  border-radius:var(--radius); padding:.85rem 1.1rem; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.7rem; max-width:85%;
}
.wsa-hero-stat strong{ font-family:var(--font-head); font-size:1.5rem; line-height:1; color:var(--c-primary) }
.wsa-hero-stat span{ font-size:.82rem; color:var(--c-ink-2); line-height:1.3 }
@media (max-width:979px){ .wsa-hero-media{ margin-top:var(--sp-sm) } .wsa-hero-stat{ left:8px } }

/* ---------- 9. Trust bar ------------------------------------- */

.wsa-trust{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; justify-content:center;
  list-style:none; margin:0; padding:0;
}
.wsa-trust li{
  margin:0; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; font-weight:600; color:var(--c-ink-2);
}
.wsa-trust svg{ width:19px; height:19px; color:var(--c-success); flex:none }
.wsa-dark .wsa-trust li{ color:rgba(255,255,255,.9) }
.wsa-dark .wsa-trust svg{ color:var(--c-accent) }
@media (max-width:640px){
  .wsa-trust{ justify-content:flex-start; gap:.55rem 1.1rem }
  .wsa-trust li{ font-size:.85rem }
}

/* ---------- 10. Service cards -------------------------------- */

.wsa-service-card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:1.5rem 1.35rem; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wsa-service-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--c-primary-100); color:inherit;
}
.wsa-service-icon{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  background:var(--c-primary-050); color:var(--c-primary); margin-bottom:.35rem;
}
.wsa-service-icon svg{ width:26px; height:26px }
.wsa-service-name{ margin:0; font-size:1.12rem }
.wsa-service-text{ margin:0; font-size:.94rem; color:var(--c-ink-2); flex:1 }
.wsa-service-more{ font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--c-primary); margin-top:.35rem }
.wsa-service-card:hover .wsa-service-more span{ margin-left:.2rem }

/* ---------- 11. City list ------------------------------------ */

.wsa-cities-title{ margin-bottom:var(--sp-sm) }
.wsa-cities-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:.5rem; list-style:none; margin:0; padding:0;
}
.wsa-cities-list li{ margin:0 }
.wsa-cities-list a{
  display:flex; align-items:center; gap:.5rem; min-height:48px;
  padding:.65rem .9rem; border-radius:var(--radius-sm);
  background:var(--c-surface); border:1px solid var(--c-line);
  text-decoration:none; color:var(--c-ink); font-weight:600; font-size:.94rem;
  transition:border-color .15s ease, background-color .15s ease;
}
.wsa-cities-list a:hover{ border-color:var(--c-primary); background:var(--c-primary-050); color:var(--c-primary) }
.wsa-city-pin svg{ width:17px; height:17px; color:var(--c-accent) }
.wsa-dark .wsa-cities-list a{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff }
.wsa-dark .wsa-cities-list a:hover{ background:rgba(255,255,255,.14); color:#fff }

/* ---------- 12. Steps ---------------------------------------- */

.wsa-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-sm); list-style:none; margin:0; padding:0; counter-reset:step;
}
.wsa-steps li{ margin:0; position:relative; padding-top:.5rem }
.wsa-step-n{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--c-accent); color:var(--c-primary-900);
  font-family:var(--font-head); font-weight:800; font-size:1.1rem; margin-bottom:.75rem;
}
.wsa-steps h3{ font-size:1.05rem; margin-bottom:.35rem }
.wsa-steps p{ font-size:.94rem; color:var(--c-ink-2); margin:0 }
.wsa-dark .wsa-steps p{ color:rgba(255,255,255,.82) }

/* ---------- 13. CTA band ------------------------------------- */

.wsa-cta{
  display:grid; gap:var(--sp-sm); align-items:center;
  background:linear-gradient(135deg,var(--c-primary-900),var(--c-primary));
  color:#fff; border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,3rem);
}
@media (min-width:900px){ .wsa-cta{ grid-template-columns:1.4fr auto; gap:var(--sp-md) } }
.wsa-cta h2{ color:#fff; margin-bottom:.4rem; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem) }
.wsa-cta p{ color:rgba(255,255,255,.88); margin:0; max-width:58ch }
.wsa-cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem }
@media (max-width:520px){ .wsa-cta-actions{ flex-direction:column } .wsa-cta-actions .ctr-btn{ width:100% } }

/* ---------- 14. Breadcrumbs ---------------------------------- */

.wsa-crumbs{ font-size:.85rem; color:var(--c-ink-3) }
.wsa-crumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:0; padding:0 }
.wsa-crumbs li{ margin:0; display:flex; align-items:center; gap:.4rem }
.wsa-crumbs li + li::before{ content:'/'; color:var(--c-line) }
.wsa-crumbs a{ color:var(--c-ink-2); text-decoration:none }
.wsa-crumbs a:hover{ color:var(--c-primary); text-decoration:underline }
.wsa-dark .wsa-crumbs, .wsa-hero .wsa-crumbs{ color:rgba(255,255,255,.7) }
.wsa-dark .wsa-crumbs a, .wsa-hero .wsa-crumbs a{ color:rgba(255,255,255,.88) }
.wsa-dark .wsa-crumbs li + li::before, .wsa-hero .wsa-crumbs li + li::before{ color:rgba(255,255,255,.35) }

/* ---------- 15. Prose (blog and long-form pages) ------------- */

.wsa-prose{ max-width:72ch }
.wsa-prose h2{ margin-top:2em }
.wsa-prose h3{ margin-top:1.6em }
.wsa-prose > :first-child{ margin-top:0 }
.wsa-prose img{ border-radius:var(--radius); margin:1.6em 0 }
.wsa-prose ul,.wsa-prose ol{ margin:0 0 1.2em; padding-left:1.3rem }
.wsa-prose li::marker{ color:var(--c-primary) }
.wsa-prose blockquote{
  margin:1.6em 0; padding:1rem 1.25rem; border-left:4px solid var(--c-accent);
  background:var(--c-surface-2); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:1.05rem; color:var(--c-ink-2);
}
.wsa-prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.95rem }
.wsa-prose th,.wsa-prose td{ padding:.7rem .85rem; border-bottom:1px solid var(--c-line); text-align:left }
.wsa-prose th{ font-family:var(--font-head); font-weight:700; background:var(--c-surface-2) }

/* Tables become stacked cards rather than a horizontal scrollbar */
@media (max-width:640px){
  .wsa-prose table,
  .wsa-prose thead,
  .wsa-prose tbody,
  .wsa-prose tr,
  .wsa-prose th,
  .wsa-prose td{ display:block; width:100% }
  .wsa-prose thead{ display:none }
  .wsa-prose tr{
    border:1px solid var(--c-line); border-radius:var(--radius-sm);
    margin-bottom:.75rem; padding:.35rem .6rem;
  }
  .wsa-prose td{ border-bottom:1px dashed var(--c-line); padding:.55rem 0 }
  .wsa-prose tr td:last-child{ border-bottom:0 }
  .wsa-prose td[data-label]::before{
    content:attr(data-label); display:block;
    font-family:var(--font-head); font-size:.74rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-3);
  }
}

/* ---------- 16. Feature list --------------------------------- */

.wsa-checks{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
@media (min-width:760px){ .wsa-checks{ grid-template-columns:1fr 1fr; gap:.6rem 1.75rem } }
.wsa-checks li{ margin:0; position:relative; padding-left:1.9rem; color:var(--c-ink-2) }
.wsa-checks li::before{
  content:''; position:absolute; left:0; top:.42em; width:1.2rem; height:1.2rem;
  border-radius:50%; background:var(--c-success);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/76% no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.wsa-dark .wsa-checks li{ color:rgba(255,255,255,.86) }

/* ---------- 17. Footer --------------------------------------- */

.site-footer{ background:var(--c-primary-900); color:rgba(255,255,255,.78); margin-top:var(--sp-xl) }
.site-footer-inner{
  max-width:var(--w-wide); margin-inline:auto;
  padding:var(--sp-lg) 16px var(--sp-md);
  display:grid; gap:var(--sp-md);
}
@media (min-width:600px){ .site-footer-inner{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
@media (min-width:860px){ .site-footer-inner{ grid-template-columns:1.5fr 1fr 1fr } }

.wsa-foot-brand img{ max-height:52px; width:auto; margin-bottom:1rem; filter:brightness(0) invert(1) }
.site-footer h3{ color:#fff; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem }
.site-footer ul{ list-style:none; margin:0; padding:0 }
.site-footer li{ margin-bottom:.55rem }
.site-footer a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:.94rem }
.site-footer a:hover{ color:#fff; text-decoration:underline }
.wsa-foot-nap{ font-size:.94rem; line-height:1.8; font-style:normal }
.wsa-foot-nap a{ font-weight:600; color:#fff }
.wsa-foot-social{ display:flex; gap:.6rem; margin-top:1rem }
.wsa-foot-social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff;
}
.wsa-foot-social a:hover{ background:var(--c-accent); color:var(--c-primary-900) }

.wsa-foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:var(--w-wide); margin-inline:auto;
  padding:1.25rem 16px 2rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-size:.85rem;
}
@media (min-width:600px){ .wsa-foot-bottom{ padding-inline:clamp(1.25rem,4vw,2.5rem) } }
.wsa-foot-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; list-style:none; margin:0; padding:0 }
.wsa-foot-legal li{ margin:0 }
.wsa-sig{ font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.45) }

/* ---------- 18. Blog ----------------------------------------- */

.wsa-blog-hero{ background:linear-gradient(150deg,var(--c-primary-900),var(--c-primary)); color:#fff }
.wsa-blog-hero h1{ color:#fff; margin:0 }
.ctr-card-date{ font-size:.78rem; color:var(--c-ink-3); margin:0 0 .3rem; font-weight:600; letter-spacing:.03em }
.ctr-card-more{ font-family:var(--font-head); font-weight:700; text-decoration:none; font-size:.9rem }
.wsa-loadmore{ text-align:center; margin-top:var(--sp-md) }

/* ---------- 19. Utilities ------------------------------------ */

@media (max-width:640px){ .hide-mobile{ display:none!important } }
@media (min-width:641px) and (max-width:980px){ .hide-tablet{ display:none!important } }
@media (min-width:981px){ .hide-desktop{ display:none!important } }

.wsa-anim{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease }
.wsa-anim.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .wsa-anim{ opacity:1; transform:none; transition:none }
  .ctr-btn,.wsa-service-card{ transition:none }
}

/* ---------- 20. Print ---------------------------------------- */

@media print{
  .site-header,.wsa-callbar,.site-footer,.wsa-cta,.nav-toggle{ display:none!important }
  body{ padding-bottom:0; color:#000 }
  a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:.8em }
}

/* ---------- 21. Wellness Store additions --------------------- */

.ctr-inner--wide{ max-width:var(--w-wide) }

/* Text logo, used until an image logo is uploaded */
.site-brand-text{ display:inline-flex; align-items:baseline; gap:.3rem; color:var(--c-primary-900) }
.site-brand-text span{ color:var(--c-primary) }
.site-brand-text em{
  font-style:normal; font-family:var(--font-body); font-weight:600;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-ink-3);
}
.site-brand-text.is-light,.site-brand-text.is-light span{ color:#fff }
.site-brand-text.is-light em{ color:rgba(255,255,255,.6) }

/* Header: the band is white here, the topbar carries the brand colour */
.site-header{ background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(8px) }
.wsa-topbar{ background:var(--c-primary-900); color:#fff; font-size:.82rem }
.wsa-topbar-inner{
  max-width:var(--w-wide); margin-inline:auto; padding:.45rem clamp(1rem,4vw,2.5rem);
  display:flex; gap:1.25rem; align-items:center; justify-content:space-between;
}
.wsa-topbar span,.wsa-topbar a{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; text-decoration:none }
.wsa-topbar svg{ width:16px; height:16px; opacity:.85 }
@media (max-width:860px){ .wsa-topbar a{ display:none } .wsa-topbar-inner{ justify-content:center } }

.wsa-header-tools{ display:flex; align-items:center; gap:.35rem; margin-left:.5rem }
.wsa-tool{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:0; color:var(--c-ink); cursor:pointer; position:relative; text-decoration:none;
}
.wsa-tool:hover{ background:var(--c-primary-050); color:var(--c-primary) }
.wsa-tool svg{ width:22px; height:22px }
.wsa-cart-count{
  position:absolute; top:4px; right:2px; min-width:18px; height:18px; border-radius:9px;
  background:var(--c-accent); color:var(--c-primary-900); font-size:.7rem; font-weight:700;
  display:grid; place-items:center; padding:0 4px;
}
.wsa-header-cta{ display:none; margin-left:.5rem; min-height:44px; padding:.6rem 1.2rem }
@media (min-width:1080px){ .wsa-header-cta{ display:inline-flex } }
@media (max-width:1079px){ .wsa-header-tools{ margin-left:auto } .site-nav{ order:3 } }

.wsa-search-panel{ border-top:1px solid var(--c-line); background:var(--c-surface) }
.wsa-search-panel form{
  max-width:var(--w-normal); margin-inline:auto; padding:1rem clamp(1rem,4vw,2.5rem);
  display:flex; gap:.6rem;
}
.wsa-search-panel input[type=search],.wsa-404-search input[type=search]{
  flex:1; min-height:48px; border:1px solid var(--c-line); border-radius:999px;
  padding:.6rem 1.2rem; font:inherit; background:var(--c-surface-2);
}
.wsa-404-search{ display:flex; gap:.6rem; max-width:560px; margin:var(--sp-sm) auto 0 }

/* Page hero: calm sand band instead of a heavy gradient */
.wsa-page-hero{ background:var(--c-sand) }
.wsa-page-hero h1{ margin-bottom:.35em }
.wsa-page-hero .wsa-lead p{ margin:0 }

/* Footer */
@media (min-width:860px){ .site-footer-inner.wsa-foot-4{ grid-template-columns:1.6fr 1fr 1fr 1.2fr } }
.wsa-foot-about{ font-size:.94rem; max-width:36ch; margin-top:.75rem }
.wsa-foot-disclaimer{
  max-width:var(--w-wide); margin-inline:auto; padding:0 clamp(1rem,4vw,2.5rem) 1rem;
  font-size:.8rem; color:rgba(255,255,255,.55);
}
.wsa-sig img{ height:26px; width:auto; opacity:.7; filter:brightness(0) invert(1) }
.wsa-sig:hover img{ opacity:1 }

/* CTA band */
.wsa-cta{
  display:flex; flex-wrap:wrap; gap:var(--sp-sm); align-items:center; justify-content:space-between;
  background:var(--c-primary-900); color:#fff; border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,3rem);
}
.wsa-cta h2{ color:#fff; margin-bottom:.3em }
.wsa-cta p{ color:rgba(255,255,255,.82); margin:0; max-width:56ch }

/* ---------- 22. Home sections -------------------------------- */

.wsa-hero{ background:linear-gradient(155deg,var(--c-primary-900) 0%,var(--c-primary) 85%); color:#fff; overflow:hidden }
.wsa-hero h1{ color:#fff; font-size:clamp(2rem,1.3rem + 2.8vw,3.3rem) }
.wsa-hero .wsa-eyebrow{ color:var(--c-accent) }
.wsa-hero .wsa-lead{ color:rgba(255,255,255,.88) }
.wsa-hero-grid{ display:grid; gap:var(--sp-md); align-items:center }
@media (min-width:980px){ .wsa-hero-grid{ grid-template-columns:1.1fr .9fr; gap:var(--sp-lg) } }
.wsa-hero-media img{ border-radius:var(--radius-lg); aspect-ratio:1/1; object-fit:cover; width:100%; box-shadow:var(--shadow-lg); background:var(--c-sand) }
.wsa-tint-sand{ background:var(--c-sand) }

.wsa-ranges{ display:grid; gap:var(--sp-sm); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.wsa-ranges a{
  display:flex; flex-direction:column; gap:.4rem; padding:1.4rem; border-radius:var(--radius);
  background:var(--c-surface); border:1px solid var(--c-line); text-decoration:none; color:var(--c-ink-2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wsa-ranges a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md) }
.wsa-ranges strong{ font-family:var(--font-head); font-size:1.15rem; color:var(--c-primary-900) }
.wsa-ranges span{ font-size:.92rem }

.wsa-steps{ list-style:none; counter-reset:s; display:grid; gap:var(--sp-sm); padding:0; margin:0 }
@media (min-width:760px){ .wsa-steps{ grid-template-columns:repeat(3,1fr) } }
.wsa-steps li{ counter-increment:s; margin:0; padding:1.5rem; border-radius:var(--radius); background:var(--c-surface-2); display:flex; flex-direction:column; gap:.35rem }
.wsa-steps li::before{
  content:counter(s); width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-primary); color:#fff; font-weight:800; margin-bottom:.4rem;
}
.wsa-steps strong{ font-family:var(--font-head); font-size:1.08rem; color:var(--c-ink) }
.wsa-steps span{ color:var(--c-ink-2); font-size:.95rem }

.wsa-faq details{ border-bottom:1px solid var(--c-line); padding:.2rem 0 }
.wsa-faq summary{
  cursor:pointer; list-style:none; padding:1rem 2rem 1rem 0; position:relative;
  font-family:var(--font-head); font-weight:700; font-size:1.05rem;
}
.wsa-faq summary::-webkit-details-marker{ display:none }
.wsa-faq summary::after{ content:'+'; position:absolute; right:.25rem; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--c-primary) }
.wsa-faq details[open] summary::after{ content:'\2212' }
.wsa-faq details p{ color:var(--c-ink-2); margin:0 0 1rem }

/* ---------- 23. v1.0.1 fixes --------------------------------- */
.site-nav .menu{ gap:1.15rem }
.site-nav .menu a{ white-space:nowrap; font-size:.92rem }
@media (min-width:1080px) and (max-width:1240px){ .site-nav .menu{ gap:.85rem } .site-nav .menu a{ font-size:.86rem } .wsa-header-cta{ display:none } }
.wsa-contact-card{ background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:clamp(1.25rem,3vw,2rem); margin:var(--sp-md) 0 }
.wsa-contact-card h2{ margin-top:0 }
.wsa-prose{ max-width:760px }
