/* =============================================================
   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: forest green #21412E and terracotta #BD6746, from the logo. */
  --c-primary:      #21412E;
  --c-primary-600:  #1D3A29;
  --c-primary-800:  #183022;
  --c-primary-900:  #112218;
  --c-primary-050:  #EEF3EF;
  --c-primary-100:  #DCE6DF;

  /* Accent: terracotta from the logo (Tasmania). Text on light uses -600. */
  --c-accent:       #BD6746;
  --c-accent-600:   #A4553A;
  --c-accent-300:   #D98A6A;
  --c-accent-050:   #FBF1EC;

  --c-sage:         #DFE7E1;
  --c-sand:         #F3EFE8;
  --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-300) }
.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:#fff; box-shadow:var(--shadow-sm) }
.ctr-btn--accent:hover{ background:var(--c-accent-600); color:#fff; 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{ height:42px; width:auto }
@media (min-width:861px){ .site-brand img{ 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:#fff }
@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(189,103,70,.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:#fff;
  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{ height:56px; width:auto; margin-bottom:1rem }
.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:#fff }

.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:#fff; 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; display:block }
.wsa-sig{ display:inline-flex; background:#fff; border-radius:8px; padding:6px 10px; opacity:.92; transition:opacity .2s }
.wsa-sig:hover{ opacity: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-300) }
.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 }
.wsa-blog-hero .wsa-eyebrow{ color:var(--c-accent-300) }
.wsa-blog-hero .wsa-lead{ color:rgba(255,255,255,.86) }

/* ---------- 24. Landing pages -------------------------------- */
.wsa-lp-buy{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:var(--sp-sm) }
.wsa-lp-price{ display:flex; flex-direction:column; line-height:1.1 }
.wsa-lp-price strong{ font-family:var(--font-head); font-size:2.2rem; color:#fff }
.wsa-lp-price span{ font-size:.85rem; color:rgba(255,255,255,.75) }
.wsa-lp-buy .ctr-btn{ min-height:56px; padding-inline:2rem; font-size:1.05rem }
.wsa-feature-grid{ display:grid; gap:var(--sp-sm); grid-template-columns:repeat(4,minmax(0,1fr)) }
.wsa-feature-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:980px){ .wsa-feature-grid,.wsa-feature-grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .wsa-feature-grid,.wsa-feature-grid--3{ grid-template-columns:1fr } }
.wsa-feature-grid > div{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:1.4rem }
.wsa-feature-grid h3{ font-size:1.08rem; margin-bottom:.35rem; color:var(--c-primary-900) }
.wsa-feature-grid p{ margin:0; color:var(--c-ink-2); font-size:.95rem }
.wsa-pair{ max-width:760px; margin-inline:auto; text-align:center }
.wsa-pair .wsa-btn-row{ justify-content:center }
.wsa-table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--c-line); background:var(--c-surface) }
.wsa-table{ width:100%; border-collapse:collapse; min-width:720px; font-size:.93rem }
.wsa-table th,.wsa-table td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--c-line); vertical-align:top }
.wsa-table th{ background:var(--c-primary-050); font-family:var(--font-head); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--c-primary-900) }
.wsa-table td:first-child a{ font-weight:700 }
.wsa-table tr:last-child td{ border-bottom:0 }
.wsa-lp-note{ font-size:.8rem; color:var(--c-ink-3); text-align:center; margin-top:var(--sp-sm) }

/* ---------- 25. Journal, magazine layout (v1.0.6) ------------- */

.wsa-tint-sand{ background:var(--c-sand) }

/* Masthead: centred, spaced title, search, topics */
.wsa-mag-head{ background:var(--c-sand); border-bottom:1px solid var(--c-line) }
.wsa-mag-head-inner{
  max-width:var(--w-normal); margin-inline:auto; text-align:center;
  padding:clamp(2.5rem,6vw,4.75rem) 16px clamp(2rem,4vw,3rem);
}
.wsa-mag-head .wsa-crumbs ol{ justify-content:center; margin-bottom:1rem }
.wsa-mag-head .wsa-eyebrow{ color:var(--c-accent-600) }
.wsa-mag-title{
  font-size:clamp(2rem,5.2vw,3.6rem); font-weight:800; line-height:1.05;
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary-900);
  margin:.35rem 0 0;
}
.wsa-mag-lead{ max-width:58ch; margin:1rem auto 0; color:var(--c-ink-2); font-size:1.08rem }

.wsa-mag-search{
  position:relative; max-width:560px; margin:1.75rem auto 0;
  display:flex; align-items:center;
}
.wsa-mag-search svg{ position:absolute; left:1.1rem; width:18px; height:18px; color:var(--c-ink-3); pointer-events:none }
.wsa-mag-search input[type=search]{
  width:100%; height:54px; padding:0 1.25rem 0 3rem; font:inherit; font-size:1rem;
  border:1px solid var(--c-line); border-radius:999px; background:#fff; color:var(--c-ink);
  box-shadow:var(--shadow-sm); transition:border-color .2s, box-shadow .2s;
}
.wsa-mag-search input[type=search]:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 4px var(--c-primary-100) }

.wsa-pills{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1.5rem 0 0 }
.wsa-mag-topics{ justify-content:center }
.wsa-pills li{ margin:0 }
.wsa-pills a{
  display:inline-block; padding:.45rem 1rem; border-radius:999px; text-decoration:none;
  font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.02em;
  color:var(--c-primary-900); background:#fff; border:1px solid var(--c-line);
  transition:background .2s, color .2s, border-color .2s;
}
.wsa-pills a:hover{ border-color:var(--c-primary); color:var(--c-primary) }
.wsa-pills a[aria-current]{ background:var(--c-primary); border-color:var(--c-primary); color:#fff }

/* Kicker: category and reading time */
.wsa-kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 .6rem;
  font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-3);
}
.wsa-kicker a{ color:var(--c-accent-600); text-decoration:none }
.wsa-kicker a:hover{ text-decoration:underline }
.wsa-kicker.is-light{ color:rgba(255,255,255,.75) }
.wsa-kicker.is-light a{ color:var(--c-accent-300) }

/* Lead story */
.wsa-mag-lead-story{
  display:grid; gap:var(--sp-md); align-items:center;
  padding-bottom:var(--sp-lg); margin-bottom:var(--sp-lg); border-bottom:1px solid var(--c-line);
}
@media (min-width:900px){ .wsa-mag-lead-story{ grid-template-columns:1.25fr 1fr; gap:var(--sp-lg) } }
.wsa-mag-lead-img{ display:block; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:var(--c-surface-2) }
.wsa-mag-lead-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.wsa-mag-lead-story:hover .wsa-mag-lead-img img{ transform:scale(1.03) }
.wsa-mag-lead-body h2{ font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.15; margin:0 0 .9rem }
.wsa-mag-lead-body h2 a{ color:var(--c-primary-900); text-decoration:none }
.wsa-mag-lead-body h2 a:hover{ color:var(--c-primary) }
.wsa-mag-lead-body p{ color:var(--c-ink-2); font-size:1.05rem; margin:0 0 1.4rem }

/* Grid of cards */
.wsa-mag-grid{ display:grid; gap:clamp(2rem,4vw,3rem) clamp(1.25rem,3vw,2.25rem); grid-template-columns:1fr }
@media (min-width:640px){ .wsa-mag-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .wsa-mag-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.wsa-mag-card{ display:flex; flex-direction:column; min-width:0 }
.wsa-mag-card-img{
  display:block; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:var(--c-sage); margin-bottom:1.1rem;
}
.wsa-mag-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.wsa-mag-card:hover .wsa-mag-card-img img{ transform:scale(1.04) }
.wsa-mag-card-title{ font-size:1.22rem; line-height:1.3; margin:0 0 .6rem }
.wsa-mag-card-title a{ color:var(--c-primary-900); text-decoration:none }
.wsa-mag-card-title a:hover{ color:var(--c-primary) }
.wsa-mag-card-excerpt{ color:var(--c-ink-2); font-size:.96rem; margin:0 0 1rem }
.wsa-mag-more{
  margin-top:auto; align-self:flex-start; font-family:var(--font-head); font-weight:700; font-size:.88rem;
  color:var(--c-primary); text-decoration:none; padding-bottom:2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat; transition:background-size .3s ease;
}
.wsa-mag-more:hover, .wsa-mag-card:hover .wsa-mag-more{ background-size:100% 2px }
.wsa-tint-sand .wsa-mag-card-img{ background:#fff }

/* Single article */
.wsa-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; pointer-events:none }
.wsa-progress span{ display:block; height:100%; width:100%; background:var(--c-accent); transform:scaleX(0); transform-origin:0 50% }
.wsa-article-crumbs{ max-width:var(--w-wide); margin-inline:auto; padding:1rem 16px }

.wsa-article-hero{
  position:relative; color:#fff; text-align:center;
  background:linear-gradient(150deg,var(--c-primary-900),var(--c-primary));
}
.wsa-article-hero.has-img{
  background:linear-gradient(180deg,rgba(17,34,24,.55),rgba(17,34,24,.85)), var(--hero-img) center/cover no-repeat;
}
.wsa-article-hero-inner{ max-width:900px; margin-inline:auto; padding:clamp(3.5rem,9vw,7rem) 16px clamp(2.5rem,6vw,4.5rem) }
.wsa-article-hero .wsa-kicker{ justify-content:center }
.wsa-article-hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.1; margin:0 }
.wsa-article-hero .wsa-lead{ color:rgba(255,255,255,.86); max-width:62ch; margin:1.1rem auto 0 }
.wsa-article-meta{ margin:1.25rem 0 0; font-size:.88rem; color:rgba(255,255,255,.72) }
.wsa-article-body{ margin-inline:auto; font-size:1.075rem }
.wsa-article-body > p:first-of-type::first-letter{
  float:left; font-family:var(--font-head); font-weight:800; font-size:3.6em; line-height:.85;
  margin:.08em .12em 0 0; color:var(--c-primary);
}
.wsa-article-body img{ border-radius:var(--radius) }

/* ---------- 26. AutoPost articles inside the theme (v1.0.7) ---- */

/* The AutoPost markup was built for a boxed page: the hero, image strips,
   CTA band and marquee break out to 100vw on their own, the rest follows
   the container width. */
.wsa-article--autopost{ overflow-x:clip }
.wsa-autopost{ max-width:var(--w-wide); margin-inline:auto; padding-inline:16px }
@media (min-width:768px){ .wsa-autopost{ padding-inline:40px } }
.wsa-autopost .bpWrap{ margin-top:0 }
@media (min-width:768px){ .wsa-article-crumbs{ padding-inline:40px } }

/* Hero: photo with a dark overlay and white type, like a magazine cover */
.wsa-autopost .bpWrap .bpHero.bpHeroPhoto{ min-height:clamp(380px,58vh,560px) }
.wsa-autopost .bpWrap .bpHeroPhoto::after{
  content:''; display:block !important; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,27,19,.35) 0%,rgba(13,27,19,.62) 55%,rgba(13,27,19,.82) 100%);
}
.wsa-autopost .bpWrap .bpHeroPhoto .bpHeroInner{ z-index:2 }
.wsa-autopost .bpWrap .bpHeroPhoto h1,
.wsa-autopost .bpWrap .bpHeroPhoto h1 em{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:0 2px 24px rgba(0,0,0,.25) !important }
.wsa-autopost .bpWrap .bpHeroPhoto .bpMeta,
.wsa-autopost .bpWrap .bpHeroPhoto .bpMeta *{ color:rgba(255,255,255,.85) !important }

/* Box icons: the inline SVGs did not survive the migration, so draw them */
.wsa-autopost .bpWrap .bpBoxIcon:empty::before{
  content:''; width:26px; height:26px; background:var(--c-primary);
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6'/%3E%3C/svg%3E");
}
.wsa-autopost .bpWrap .bpBox:nth-child(3n+2) .bpBoxIcon:empty::before{
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.wsa-autopost .bpWrap .bpBox:nth-child(3n) .bpBoxIcon:empty::before{
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Reading bar sits under the WordPress toolbar when logged in */
.admin-bar .wsa-progress{ top:var(--wp-admin--admin-bar--height,32px) }

/* No white gap between the last tinted section and the footer */
.single-post .site-footer, .blog .site-footer, .archive .site-footer, .search .site-footer{ margin-top:0 }
.blog main > .ctr-container:last-child, .single-post .wsa-article > section:last-child{ margin-bottom:0 }

/* CTA band with a photo: dark overlay so the white type reads */
.wsa-autopost .bpWrap .bpCtaBand.bpCtaPhoto::before{
  background:linear-gradient(180deg,rgba(13,27,19,.55) 0%,rgba(13,27,19,.72) 60%,rgba(13,27,19,.85) 100%) !important;
}
.wsa-autopost .bpWrap .bpCtaBand.bpCtaPhoto h2,
.wsa-autopost .bpWrap .bpCtaBand.bpCtaPhoto h3{ text-shadow:0 2px 20px rgba(0,0,0,.25) }

/* FAQ: the answer opens with a smooth height change */
.wsa-autopost .bpWrap .bpFaqQ{ cursor:pointer }
.wsa-autopost .bpWrap .bpFaqItem.bpOpen .bpFaqTog{ transform:rotate(45deg); background:var(--c-primary-900); color:#fff; border-color:var(--c-primary-900) }

/* Browse the range: same grid as the header, real products, no fades */
.wsa-autopost .bpWrap .wsa-mq .bpMqInner{ max-width:var(--w-wide); padding-inline:16px }
@media (min-width:768px){ .wsa-autopost .bpWrap .wsa-mq .bpMqInner{ padding-inline:40px } }
.wsa-autopost .bpWrap .wsa-mq .bpMqHead{ text-align:center; margin-bottom:34px }
.wsa-autopost .bpWrap .wsa-mq .bpMqHead h3{ font-family:var(--font-head); color:#fff !important }
.wsa-autopost .bpWrap .wsa-mq .bpMqViewport{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.wsa-autopost .bpWrap .wsa-mq .bpMqTrack{ animation:wsaMq 60s linear infinite !important }
@keyframes wsaMq{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - 11px)) } }
.wsa-autopost .bpWrap .wsa-mq .bpMqCard{ display:flex !important; flex-direction:column; color:var(--c-ink) }
.wsa-autopost .bpWrap .wsa-mq .bpMqImg{ display:block; aspect-ratio:1/1; background:#fff; padding:14px; overflow:hidden }
.wsa-autopost .bpWrap .wsa-mq .bpMqImg img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease }
.wsa-autopost .bpWrap .wsa-mq .bpMqCard:hover .bpMqImg img{ transform:scale(1.05) }
.wsa-autopost .bpWrap .wsa-mq .bpMqMeta{ display:flex; flex-direction:column; gap:.35rem; padding:16px 18px 18px; border-top:1px solid var(--c-line); flex:1 }
.wsa-autopost .bpWrap .wsa-mq .bpMqType{ font-family:var(--font-head); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent-600) }
.wsa-autopost .bpWrap .wsa-mq .bpMqName{ font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.3; color:var(--c-primary-900) }
.wsa-autopost .bpWrap .wsa-mq .bpMqPrice{ font-weight:600; color:var(--c-ink-2); font-size:.95rem }
.wsa-autopost .bpWrap .wsa-mq .bpMqPrice del{ color:var(--c-ink-3); margin-right:.35rem }
.wsa-autopost .bpWrap .wsa-mq .bpMqLink{ margin-top:auto; padding-top:.5rem; font-family:var(--font-head); font-weight:700; font-size:.86rem; color:var(--c-primary) }
@media (prefers-reduced-motion:reduce){ .wsa-autopost .bpWrap .wsa-mq .bpMqTrack{ animation:none !important } .wsa-autopost .bpWrap .wsa-mq .bpMqViewport{ overflow-x:auto } }
.wsa-autopost .bpWrap .wsa-mq .bpMqPill{ color:#fff !important; background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.28) !important }

/* ---------- 27. Featured product box and text hero (v1.0.13) ---- */

.wsa-autopost .wsa-feature{
  display:grid; gap:clamp(1.25rem,3vw,2.5rem); align-items:center;
  margin:clamp(2.5rem,5vw,4rem) 0; padding:clamp(1.25rem,3vw,2.25rem);
  background:var(--c-sand); border-radius:var(--radius-lg);
}
@media (min-width:820px){ .wsa-autopost .wsa-feature{ grid-template-columns:minmax(0,5fr) minmax(0,7fr) } }
.wsa-autopost .wsa-feature-media{
  display:block; aspect-ratio:1/1; background:#fff; border-radius:var(--radius); overflow:hidden; padding:clamp(1rem,3vw,2rem);
}
.wsa-autopost .wsa-feature-media img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease }
.wsa-autopost .wsa-feature:hover .wsa-feature-media img{ transform:scale(1.04) }
.wsa-autopost .wsa-feature-eyebrow{
  margin:0 0 .6rem; font-family:var(--font-head); font-weight:700; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent-600);
}
.wsa-autopost .wsa-feature-title{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; margin:0 0 .8rem }
.wsa-autopost .wsa-feature-title a{ color:var(--c-primary-900) !important; text-decoration:none }
.wsa-autopost .wsa-feature-desc{ color:var(--c-ink-2); font-size:1rem; line-height:1.65; margin:0 0 1rem }
.wsa-autopost .wsa-feature-price{ font-family:var(--font-head); font-weight:800; font-size:1.35rem; color:var(--c-primary-900); margin:0 0 1.2rem }
.wsa-autopost .wsa-feature-price del{ color:var(--c-ink-3); font-weight:500; font-size:1rem; margin-right:.4rem }
.wsa-autopost .wsa-feature-price ins{ text-decoration:none }
.wsa-autopost .wsa-feature-actions{ display:flex; flex-wrap:wrap; gap:.75rem }
.wsa-autopost .wsa-feature-actions .ctr-btn{ text-decoration:none }
.wsa-autopost .wsa-feature-note{ margin:1rem 0 0; font-size:.8rem; color:var(--c-ink-3) }

/* Hero without a photo: brand colours, white type */
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto){ background:linear-gradient(150deg,var(--c-primary-900) 0%,var(--c-primary) 100%) !important; min-height:clamp(320px,46vh,460px) }
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto)::before{ display:none !important }
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto) h1,
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto) h1 em{ color:#fff !important; -webkit-text-fill-color:#fff !important }
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto) .bpMeta,
.wsa-autopost .bpWrap .bpHero:not(.bpHeroPhoto) .bpMeta *{ color:rgba(255,255,255,.85) !important }

/* Team signature: no stock photo, text only */
.wsa-autopost .bpWrap .bpSigMedia{ display:none !important }
.wsa-autopost .bpWrap .bpSigGrid{ grid-template-columns:1fr !important }

/* Logos are transparent PNG/WebP: no image placeholder plate behind them */
.site-brand img, .wsa-foot-brand img{ background:none !important; border-radius:0 }

/* Footer: larger column titles, links as bullets (v1.1.2) */
.site-footer h3{
  font-size:clamp(1.05rem,1.4vw,1.2rem); letter-spacing:.02em; text-transform:none;
  font-weight:800; margin:0 0 1.1rem; padding-bottom:.7rem; position:relative;
}
.site-footer h3::after{ content:''; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--c-accent) }
.site-footer-inner ul:not(.wsa-foot-legal) li{ position:relative; padding-left:1.1rem; margin-bottom:.6rem; line-height:1.45 }
.site-footer-inner ul:not(.wsa-foot-legal) li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--c-accent);
}

/* ---------- 28. Home hero carousel (v1.2.0) ------------------- */

.wsa-slider{
  position:relative; color:#fff;
  background:radial-gradient(1100px 520px at 85% 0%, rgba(189,103,70,.18), transparent 60%), linear-gradient(150deg,var(--c-primary-900) 0%,var(--c-primary) 100%);
}
.wsa-slider-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; outline:none;
}
.wsa-slider-track::-webkit-scrollbar{ display:none }
.wsa-slide{ scroll-snap-align:start; scroll-snap-stop:always; min-width:0 }
.wsa-slide-inner{
  max-width:var(--w-wide); margin-inline:auto; height:100%;
  display:grid; gap:1.25rem; align-content:start;
  padding:1rem 16px 4.5rem;
}
.wsa-slide-media{ order:-1; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:rgba(255,255,255,.06) }
.wsa-slide-media.is-contain{ background:#fff }
.wsa-slide-img{ width:100%; height:100%; display:block; background:none !important }
.wsa-slide-media.is-cover .wsa-slide-img{ object-fit:cover }
.wsa-slide-media.is-contain .wsa-slide-img{ object-fit:contain; padding:6% }
.wsa-slide .wsa-eyebrow{ color:var(--c-accent-300) }
.wsa-slide-title{ color:#fff; font-size:clamp(1.7rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.02em; margin:.35rem 0 .75rem }
.wsa-slide-lead{ color:rgba(255,255,255,.86); font-size:clamp(1rem,2.6vw,1.12rem); line-height:1.6; margin:0 0 1rem; max-width:52ch }
.wsa-slide-price{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; margin:0 0 1rem; color:#fff }
.wsa-slide-price del{ color:rgba(255,255,255,.55); font-weight:500; font-size:1rem; margin-right:.4rem }
.wsa-slide-price ins{ text-decoration:none }
.wsa-slide .wsa-btn-row{ margin-top:.25rem }
.wsa-slide .ctr-btn{ text-decoration:none }
@media (max-width:520px){
  .wsa-slide .wsa-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
  .wsa-slide .wsa-btn-row .ctr-btn{ width:100%; padding-inline:.75rem; justify-content:center }
}
@media (min-width:861px){
  .wsa-slide-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:clamp(2rem,5vw,4.5rem);
    padding:clamp(2.5rem,5vw,4rem) clamp(1.25rem,4vw,2.5rem) 5rem; min-height:min(640px,78vh);
  }
  .wsa-slide-media{ order:0; aspect-ratio:5/4 }
}

.wsa-slider-ui{
  position:absolute; left:0; right:0; bottom:1.1rem; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:1rem; pointer-events:none;
}
.wsa-slider-ui > *{ pointer-events:auto }
.wsa-slider-dots{ display:flex; gap:.5rem }
.wsa-slider-dot{
  width:10px; height:10px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:width .3s ease, background .3s ease;
}
.wsa-slider-dot[aria-current="true"]{ width:28px; background:var(--c-accent) }
.wsa-slider-arrow{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; transition:background .2s;
}
.wsa-slider-arrow:hover{ background:rgba(255,255,255,.18) }
.wsa-slider-dot:focus-visible,.wsa-slider-arrow:focus-visible{ outline:3px solid var(--c-accent-300); outline-offset:2px }

/* ---------- 29. Home on small screens (v1.2.0) ---------------- */

@media (max-width:760px){
  ul.products li.product .button, ul.products li.product .js-order{ min-height:44px; padding:.55rem .75rem; font-size:.9rem; border-radius:999px; line-height:1.2 }
  .woocommerce-loop-product__title{ font-size:.95rem !important }
}

/* Category tiles: product on a white card, name underneath */
.wsa-cat-grid .wsa-cat-tile{
  display:flex; flex-direction:column; justify-content:flex-start; aspect-ratio:auto; padding:0;
  background:#fff; border:1px solid var(--c-line); color:var(--c-primary-900); overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.wsa-cat-grid .wsa-cat-tile::after{ display:none }
.wsa-cat-grid .wsa-cat-tile img{
  position:static; display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
  padding:10%; background:#fff !important; border-radius:0;
}
.wsa-cat-grid .wsa-cat-name{ display:block; padding:.85rem 1rem 0; color:var(--c-primary-900); font-size:clamp(.95rem,2.6vw,1.1rem) }
.wsa-cat-grid .wsa-cat-count{ display:block; padding:.15rem 1rem 1rem; color:var(--c-ink-3); opacity:1; font-size:.82rem }
.wsa-cat-grid .wsa-cat-tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px) }
.wsa-cat-grid .wsa-cat-tile:hover img{ transform:scale(1.04) }

/* Ranges: swipe row on phones instead of a long stack */
@media (max-width:760px){
  .wsa-ranges{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:none }
  .wsa-ranges::-webkit-scrollbar{ display:none }
  .wsa-ranges a{ scroll-snap-align:start }
}

/* Steps and FAQ tighter on phones */
@media (max-width:760px){
  :root{ --sp-lg:2.5rem; --sp-xl:3.5rem }
  .wsa-section-head h2{ font-size:clamp(1.5rem,6vw,2rem) }
  .wsa-steps li{ padding:1.1rem 1.1rem 1.2rem }
}

/* No empty band before the footer */
.site-footer{ margin-top:0 }

@media (min-width:861px){
  .wsa-cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important }
  .wsa-cat-grid .wsa-cat-tile img{ aspect-ratio:4/3; padding:7% 12% }
}
#categories{ scroll-margin-top:140px }