/* ==========================================================================
   Pharmacy Shop UK — apothecary green, warm paper, capsule motif.
   Typography is Outfit throughout at restrained sizes (see :root scale).
   ========================================================================== */

:root{
  /* Palette sampled directly from the supplied logo:
     navy #012c5b (wordmark + cross), green #34a939 (UK + leaf),
     blue #0b79d0 (capsule), red #d20f34 (flag). */
  --ink:#0e1b2b;
  --ink-soft:#51637a;
  --ink-faint:#8496aa;

  --green:#012c5b;        /* brand navy - links, icons, headings accent */
  --green-deep:#01203f;   /* navy hover */
  --green-bright:#0b79d0; /* capsule blue - highlights */
  --cta:#34a939;          /* logo green - primary buttons */
  --cta-deep:#2a8a2e;
  --blue-mid:#01478f;

  --mint:#eaf1f9;         /* pale navy tint */
  --mint-deep:#cbdcef;
  --paper:#f7f9fc;
  --paper-deep:#edf2f8;
  --white:#ffffff;

  --coral:#d20f34;        /* flag red - offers only */
  --coral-soft:#fdeaee;
  --amber:#d98b0a;
  --line:#dfe6ef;
  --line-soft:#eef2f7;

  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(1,44,91,.05);
  --shadow-sm:0 2px 8px rgba(1,44,91,.07);
  --shadow-md:0 10px 30px rgba(1,44,91,.10);
  --shadow-lg:0 24px 60px rgba(1,44,91,.15);

  --wrap:1220px;
  --gut:clamp(16px,3.2vw,30px);
  --sec:clamp(52px,6vw,86px);

  --t:.22s cubic-bezier(.4,0,.2,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-deep)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;border-radius:4px}

h1,h2,h3,h4,h5{margin:0 0 .5em;font-weight:600;line-height:1.18;letter-spacing:-.012em;color:var(--ink)}
h1{font-size:clamp(2.05rem,3.5vw,3.15rem)}
h2{font-size:clamp(1.55rem,2.4vw,2.2rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(.98rem,1.05vw,1.08rem);color:var(--ink-soft);line-height:1.68;max-width:62ch}
small,.small{font-size:.85rem}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--mint{background:var(--mint)}
.section--paper{background:var(--paper-deep)}
.section--white{background:var(--white)}
.sec-head{margin-bottom:clamp(26px,3.4vw,42px);max-width:66ch}
.sec-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
}
.eyebrow::before{
  content:"";width:22px;height:8px;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--green) 50%,var(--mint-deep) 50%);
}
.sec-head--center .eyebrow{justify-content:center}

/* screen reader */
.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:-9999px;top:0;z-index:999;background:var(--green);color:#fff;padding:10px 18px;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0;color:#fff}

/* ---------- buttons — always hug their text, never full width ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  width:auto;max-width:100%;
  padding:12px 22px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  font-size:.95rem;font-weight:600;line-height:1.2;
  cursor:pointer;text-align:center;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--cta);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--cta-deep);color:#fff;box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;color:var(--green);border-color:var(--mint-deep)}
.btn--ghost:hover{background:var(--mint);color:var(--green-deep);border-color:var(--green)}
.btn--light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--light:hover{background:var(--mint);color:var(--green-deep);border-color:var(--mint-deep)}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral:hover{background:#c2513c;color:#fff}
.btn--sm{padding:9px 16px;font-size:.87rem}
.btn--lg{padding:14px 28px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* icon chip inside a button (agency house style) */
.btn .chip{
  display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.18);
}
.btn--ghost .chip,.btn--light .chip{background:var(--mint)}

/* ---------- the capsule motif ---------- */
.capsule{
  display:inline-block;width:40px;height:15px;border-radius:var(--radius-pill);
  background:linear-gradient(105deg,var(--green) 0 50%,var(--mint-deep) 50% 100%);
  flex:none;
}
.capsule--sm{width:26px;height:10px}

/* ---------- badges / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:.75rem;font-weight:600;letter-spacing:.01em;
  background:var(--mint);color:var(--green-deep);
}
.pill--coral{background:var(--coral-soft);color:#b8452f}
.pill--amber{background:#fdf2dd;color:#9a6408}
.pill--pom{background:#eaf0f6;color:#2d5878}
.pill svg{width:13px;height:13px}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  background:var(--green-deep);color:#d9ece3;
  font-size:.8rem;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px}
.topbar a{color:#d9ece3}
.topbar a:hover{color:#fff}
.topbar__list{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.topbar__list li{display:flex;align-items:center;gap:7px}
.topbar__list svg{width:14px;height:14px;opacity:.85;flex:none}
@media(max-width:900px){.topbar__list li:nth-child(n+3){display:none}}
@media(max-width:560px){.topbar{font-size:.74rem}.topbar__list{gap:12px}}

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);min-height:84px}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:44px;height:44px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-size:1.16rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.brand__sub{font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
@media(max-width:420px){.brand__sub{display:none}.brand__mark{width:38px;height:38px}}

/* --- primary nav. Reset the UL ITSELF: wp_nav_menu makes the nav a <ul>, so a
   global `ul{margin:0 0 1em}` would centre the margin box and float links. --- */
.nav{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:2px;flex:1 1 auto}
.nav li{margin:0;padding:0;position:relative}
.nav > li > a{
  display:flex;align-items:center;gap:6px;
  padding:11px 13px;border-radius:var(--radius-pill);
  font-size:.94rem;font-weight:500;color:var(--ink);
  transition:background var(--t),color var(--t);
}
.nav > li > a:hover,.nav > li.is-open > a,
.nav > li.current-menu-item > a,.nav > li.current_page_item > a{background:var(--mint);color:var(--green-deep)}
.nav > li.menu-item-has-children > a::after,
.nav > li.has-mega > a::after{
  content:"";width:7px;height:7px;flex:none;margin-left:1px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform var(--t);
}
.nav > li.is-open > a::after{transform:rotate(-135deg) translateY(-1px)}

.header__actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.icon-btn{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;color:var(--ink);cursor:pointer;position:relative;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.icon-btn:hover{background:var(--mint);border-color:var(--mint-deep);color:var(--green-deep)}
.icon-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--radius-pill);
  background:var(--coral);color:#fff;font-size:.68rem;font-weight:700;line-height:1;
  border:2px solid #fff;
}
.cart-count:empty,.cart-count[data-count="0"]{display:none}
.nav-toggle{display:none}
@media(max-width:1024px){
  .nav{display:none}
  .nav-toggle{display:grid}
  .header__inner{min-height:70px}
}

/* --- mega menu --- */
.mega{
  position:absolute;top:calc(100% + 14px);left:0;z-index:70;
  width:min(760px,calc(100vw - 2*var(--gut)));
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.nav > li.is-open .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* the hover bridge — without it the pointer crosses a 14px dead gap and the
   menu closes on its way down */
.nav > li.has-mega::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.mega__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px}
.mega__item{display:flex;align-items:flex-start;gap:12px;padding:11px;border-radius:var(--radius);transition:background var(--t)}
.mega__item:hover{background:var(--mint)}
.mega__ico{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:var(--mint);color:var(--green);
}
.mega__item:hover .mega__ico{background:#fff}
.mega__ico svg{width:19px;height:19px}
.mega__t{display:block;font-weight:600;font-size:.93rem;color:var(--ink);line-height:1.3}
.mega__d{display:block;font-size:.79rem;color:var(--ink-soft);line-height:1.45;margin-top:2px}
.mega__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft);
}
.mega__note{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-soft)}

/* --- mobile drawer --- */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(19,34,30,.45);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);
}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(410px,92vw);background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--line);flex:none;
}
.drawer__title{font-size:1.02rem;font-weight:600;margin:0}
.drawer__body{flex:1 1 auto;overflow-y:auto;padding:16px 20px;-webkit-overflow-scrolling:touch}
.drawer__foot{padding:18px 20px;border-top:1px solid var(--line);background:var(--paper);flex:none}

.mnav{list-style:none;margin:0;padding:0}
.mnav li{border-bottom:1px solid var(--line-soft)}
.mnav > li > a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 2px;font-size:1rem;font-weight:500;color:var(--ink)}
.mnav > li > a:hover{color:var(--green)}
.mnav .sub{list-style:none;margin:0 0 10px;padding:0 0 0 14px;border-left:2px solid var(--mint-deep)}
.mnav .sub a{display:block;padding:8px 2px;font-size:.9rem;color:var(--ink-soft)}
.mnav .sub a:hover{color:var(--green)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--mint);isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(14,111,82,.16) 1px,transparent 0);
  background-size:26px 26px;
}
.hero::after{
  content:"";position:absolute;z-index:-1;
  width:min(46vw,620px);aspect-ratio:1;border-radius:50%;
  right:-13vw;top:-22%;
  background:radial-gradient(circle,rgba(23,163,119,.20),transparent 68%);
}
.hero__inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;padding-block:clamp(44px,5.6vw,80px);
}
.hero__title{margin-bottom:.42em}
.hero__title em{font-style:normal;color:var(--green);position:relative;white-space:nowrap}
.hero__title em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.3em;
  background:rgba(23,163,119,.20);border-radius:var(--radius-pill);z-index:-1;
}
.hero .btn-row{margin-top:26px}

/* hero card stack */
.hero__card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:20px;
}
.hero__card--main{position:relative;z-index:2}
.hero__card--float{
  position:absolute;z-index:3;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-lg);
}
.hero__card--a{bottom:-18px;left:-14px}
.hero__card--b{top:-16px;right:-10px}
.hero__card--float .ico{
  display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--radius-pill);background:var(--mint);color:var(--green);
}
.hero__card--float svg{width:19px;height:19px}
.hero__card--float b{display:block;font-size:.9rem;line-height:1.25}
.hero__card--float small{color:var(--ink-soft);font-size:.76rem}
.hero__rx{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.hero__rx .rx{
  display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:11px;
  background:var(--green);color:#fff;font-weight:700;font-size:1rem;
}
.hero__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hero__list li{display:flex;align-items:flex-start;gap:10px;font-size:.89rem;color:var(--ink-soft);line-height:1.45}
.hero__list svg{width:16px;height:16px;color:var(--green-bright);flex:none;margin-top:2px}
@media(max-width:940px){
  .hero__inner{grid-template-columns:1fr;gap:38px}
  .hero__card--a{left:auto;right:8px;bottom:-14px}
  .hero__card--b{right:auto;left:6px}
}
@media(max-width:520px){
  .hero__card--float{position:static;margin-top:12px}
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust{background:#fff;border-block:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust__item{display:flex;align-items:center;gap:13px;padding:22px 20px;border-right:1px solid var(--line-soft)}
.trust__item:last-child{border-right:0}
.trust__ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:var(--mint);color:var(--green)}
.trust__ico svg{width:21px;height:21px}
.trust__t{font-weight:600;font-size:.92rem;line-height:1.3}
.trust__d{font-size:.79rem;color:var(--ink-soft);line-height:1.4}
@media(max-width:880px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media(max-width:480px){
  .trust__grid{grid-template-columns:1fr}
  .trust__item{border-right:0;border-bottom:1px solid var(--line-soft);padding:16px 4px}
  .trust__item:last-child{border-bottom:0}
}

/* ==========================================================================
   CATEGORY GRID
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.cat-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.cat-card:hover{border-color:var(--mint-deep);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.cat-card::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:var(--mint);opacity:.55;transition:transform var(--t);z-index:0;
}
.cat-card:hover::after{transform:scale(1.25)}
.cat-card > *{position:relative;z-index:1}
.cat-card__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mint);color:var(--green)}
.cat-card:hover .cat-card__ico{background:var(--green);color:#fff}
.cat-card__ico svg{width:24px;height:24px}
.cat-card__t{font-size:1.02rem;font-weight:600;margin:0;color:var(--ink)}
.cat-card__d{font-size:.84rem;color:var(--ink-soft);line-height:1.5;margin:0;flex:1 1 auto}
.cat-card__n{font-size:.77rem;font-weight:600;color:var(--green);display:flex;align-items:center;gap:6px}
.cat-card__n svg{width:13px;height:13px;transition:transform var(--t)}
.cat-card:hover .cat-card__n svg{transform:translateX(3px)}
@media(max-width:980px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.cat-grid{grid-template-columns:repeat(2,1fr)}.cat-card{padding:17px}}
@media(max-width:420px){.cat-grid{grid-template-columns:1fr}}

/* ==========================================================================
   PRODUCT CARDS  (Woo loop)
   ========================================================================== */
ul.products{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);
}
@media(max-width:1000px){ul.products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){ul.products{grid-template-columns:1fr}}

li.product,.product-card{
  position:relative;display:flex;flex-direction:column;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
li.product:hover,.product-card:hover{border-color:var(--mint-deep);box-shadow:var(--shadow-md);transform:translateY(-3px)}

.pcard__media{
  position:relative;display:block;aspect-ratio:1/1;
  background:linear-gradient(170deg,var(--mint) 0%,#fff 72%);
  overflow:hidden;
}
.pcard__media img{width:100%;height:100%;object-fit:contain;padding:16%;transition:transform .34s ease}
li.product:hover .pcard__media img,.product-card:hover .pcard__media img{transform:scale(1.05)}
.pcard__flags{position:absolute;top:11px;left:11px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pcard__body{display:flex;flex-direction:column;gap:7px;padding:16px;flex:1 1 auto}
.pcard__brand{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.pcard__t{font-size:.95rem;font-weight:600;line-height:1.35;margin:0;color:var(--ink)}
.pcard__t a{color:inherit}
.pcard__t a:hover{color:var(--green)}
.pcard__meta{font-size:.79rem;color:var(--ink-soft);line-height:1.45}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px}
.pcard__price{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.2}
.pcard__price del{font-size:.82rem;font-weight:500;color:var(--ink-faint);margin-right:5px}
.pcard__price ins{text-decoration:none}

/* Woo's own price/button classes inside the card */
li.product .price{font-size:1.06rem;font-weight:700;color:var(--ink)}
li.product .price del{font-size:.82rem;font-weight:500;color:var(--ink-faint);opacity:1}
li.product .price ins{text-decoration:none}
li.product .button,
.pcard__add{
  display:inline-flex;align-items:center;gap:7px;width:auto;
  padding:9px 15px;border:1px solid transparent;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background var(--t),box-shadow var(--t);
}
li.product .button:hover,.pcard__add:hover{background:var(--green-deep);color:#fff;box-shadow:var(--shadow-sm)}
li.product .added_to_cart{display:none}
li.product .button.loading{opacity:.7;pointer-events:none}

/* out of stock */
.pcard--oos .pcard__media{filter:grayscale(.45);opacity:.72}

/* ==========================================================================
   SHOP ARCHIVE
   ========================================================================== */
.page-head{background:var(--mint);padding-block:clamp(30px,4vw,52px);border-bottom:1px solid var(--mint-deep)}
.page-head h1{margin-bottom:.25em}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:.8rem;color:var(--ink-soft);margin-bottom:12px}
.crumbs a{color:var(--green)}
.crumbs svg{width:11px;height:11px;opacity:.5}

.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:clamp(20px,3vw,40px);align-items:start}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr}}
.shop-side{position:sticky;top:104px;display:grid;gap:16px}
@media(max-width:900px){.shop-side{position:static}}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.side-box h3{font-size:.92rem;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.side-box h3 .capsule{width:22px;height:9px}
.side-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side-list a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:9px;font-size:.88rem;color:var(--ink);transition:background var(--t),color var(--t);
}
.side-list a:hover,.side-list .is-active > a{background:var(--mint);color:var(--green-deep);font-weight:600}
.side-list .n{font-size:.76rem;color:var(--ink-faint)}

.shop-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.woocommerce-result-count{margin:0;font-size:.85rem;color:var(--ink-soft)}
.woocommerce-ordering select,.shop-bar select{
  padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;font-size:.86rem;cursor:pointer;
}
.woocommerce-ordering{margin:0}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.pdp{padding-block:clamp(28px,4vw,52px)}
.pdp__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:880px){.pdp__grid{grid-template-columns:1fr;gap:28px}}

.pdp__stage{position:sticky;top:104px}
@media(max-width:880px){.pdp__stage{position:static}}
.woocommerce-product-gallery{
  background:linear-gradient(170deg,var(--mint) 0%,#fff 74%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;position:relative;
}
.woocommerce-product-gallery__wrapper img{width:100%;height:auto;padding:7%;object-fit:contain}
.woocommerce-product-gallery__trigger{
  position:absolute;top:12px;right:12px;z-index:5;
  display:grid;place-items:center;width:38px;height:38px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  font-size:0;color:var(--ink);box-shadow:var(--shadow-sm);
}
.woocommerce-product-gallery__trigger::after{
  content:"";width:15px;height:15px;border:2px solid currentColor;border-radius:50%;
  box-shadow:5px 5px 0 -3px currentColor;transform:translate(-1px,-1px);
}
.flex-control-thumbs{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:12px 0 0;padding:0;
}
.flex-control-thumbs li img{
  border:1px solid var(--line);border-radius:11px;cursor:pointer;background:#fff;padding:8%;
  transition:border-color var(--t);
}
.flex-control-thumbs li img.flex-active,.flex-control-thumbs li img:hover{border-color:var(--green)}

.pdp__flags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.pdp .product_title{margin-bottom:.3em}
.pdp__brand{font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin-bottom:9px}
.pdp .price,.pdp p.price{font-size:1.75rem;font-weight:700;color:var(--ink);margin:0 0 4px;line-height:1.2}
.pdp .price del{font-size:1rem;font-weight:500;color:var(--ink-faint);opacity:1;margin-right:8px}
.pdp .price ins{text-decoration:none}
.pdp__vat{font-size:.8rem;color:var(--ink-soft);margin-bottom:18px}
.woocommerce-product-details__short-description{color:var(--ink-soft);line-height:1.65;margin-bottom:20px;font-size:.95rem}

/* add to cart row */
.pdp form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin:0 0 20px}
.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;background:#fff}
.quantity .qty{
  width:54px;padding:12px 4px;border:0;text-align:center;font-weight:600;font-size:.95rem;
  -moz-appearance:textfield;background:transparent;
}
.quantity .qty::-webkit-outer-spin-button,.quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{width:40px;height:44px;border:0;background:transparent;cursor:pointer;font-size:1.15rem;color:var(--ink-soft);line-height:1}
.qty-btn:hover{background:var(--mint);color:var(--green-deep)}
.pdp .single_add_to_cart_button{
  display:inline-flex;align-items:center;gap:9px;width:auto;
  padding:13px 26px;border:0;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-size:.97rem;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background var(--t),box-shadow var(--t);
}
.pdp .single_add_to_cart_button:hover{background:var(--green-deep);box-shadow:var(--shadow-md)}
.pdp .single_add_to_cart_button.loading{opacity:.7;pointer-events:none}

.pdp__assure{display:grid;gap:10px;padding:16px 18px;background:var(--mint);border-radius:var(--radius);margin-bottom:20px}
.pdp__assure div{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.pdp__assure svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}
.product_meta{font-size:.82rem;color:var(--ink-soft);padding-top:16px;border-top:1px solid var(--line)}
.product_meta > span{display:block;margin-bottom:5px}
.product_meta a{color:var(--green)}

/* POM notice */
.pom-note{
  display:flex;gap:13px;padding:16px 18px;margin-bottom:20px;
  background:#eaf0f6;border:1px solid #d3e0ec;border-radius:var(--radius);
}
.pom-note svg{width:20px;height:20px;color:#2d5878;flex:none;margin-top:1px}
.pom-note b{display:block;font-size:.9rem;color:#23486a;margin-bottom:3px}
.pom-note p{font-size:.84rem;color:#3d6389;line-height:1.55;margin:0}

/* tabs — Woo zeroes the panel padding, restore it */
.woocommerce-tabs{margin-top:clamp(36px,4.5vw,64px)}
ul.wc-tabs{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 -1px;padding:0;
  border-bottom:1px solid var(--line);
}
ul.wc-tabs li{margin:0}
ul.wc-tabs li a{
  display:block;padding:12px 20px;border:1px solid transparent;border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  font-size:.92rem;font-weight:600;color:var(--ink-soft);
}
ul.wc-tabs li.active a{background:#fff;border-color:var(--line);color:var(--green-deep)}
.woocommerce-Tabs-panel{
  padding:clamp(22px,3vw,34px)!important;
  background:#fff;border:1px solid var(--line);border-top:0;
  border-radius:0 var(--radius) var(--radius) var(--radius);
  color:var(--ink-soft);line-height:1.7;
}
.woocommerce-Tabs-panel h2{font-size:1.15rem;color:var(--ink)}
.woocommerce-Tabs-panel table{width:100%;border-collapse:collapse}
.woocommerce-Tabs-panel th,.woocommerce-Tabs-panel td{padding:10px 12px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:.9rem}
.woocommerce-Tabs-panel th{width:34%;font-weight:600;color:var(--ink)}

.related{margin-top:clamp(40px,5vw,72px)}
.related > h2,.up-sells > h2{font-size:clamp(1.3rem,2vw,1.65rem);margin-bottom:22px}

/* ==========================================================================
   FORMS / NOTICES / PAGINATION
   ========================================================================== */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 15px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:.93rem;transition:border-color var(--t),box-shadow var(--t);
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(23,163,119,.13)}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.form-row{margin-bottom:15px}
.required{color:var(--coral);text-decoration:none}

.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  list-style:none;margin:0 0 20px;padding:15px 18px;
  border-radius:var(--radius);border:1px solid var(--mint-deep);background:var(--mint);
  font-size:.91rem;color:var(--green-deep);
}
.woocommerce-error{background:var(--coral-soft);border-color:#f4d3cb;color:#a33c28}
.woocommerce-info{background:#eaf0f6;border-color:#d3e0ec;color:#2d5878}
.woocommerce-message .button,.woocommerce-info .button{
  margin-left:auto;padding:8px 15px;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-size:.83rem;font-weight:600;
}
.woocommerce-message .button:hover{background:var(--green-deep);color:#fff}

.woocommerce-pagination ul,.pagination{
  display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:34px 0 0;padding:0;justify-content:center;
}
.woocommerce-pagination li a,.woocommerce-pagination li span,li > a.page-numbers,li > span.page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;font-size:.88rem;font-weight:600;color:var(--ink);
}
.woocommerce-pagination li a:hover,li > a.page-numbers:hover{background:var(--mint);border-color:var(--mint-deep);color:var(--green-deep)}
.woocommerce-pagination li span.current,li > span.page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}

/* ==========================================================================
   CART
   ========================================================================== */
.cart-page{padding-block:clamp(28px,4vw,52px)}
.shop_table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.shop_table th{padding:14px 16px;background:var(--paper-deep);font-size:.79rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:left}
.shop_table td{padding:16px;border-top:1px solid var(--line-soft);vertical-align:middle;font-size:.92rem}
.shop_table .product-thumbnail img{width:64px;height:64px;object-fit:contain;background:var(--mint);border-radius:11px;padding:7px}
.shop_table .product-name a{font-weight:600;color:var(--ink)}
.shop_table .product-name a:hover{color:var(--green)}
.shop_table .product-remove a{
  display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-pill);
  background:var(--paper-deep);color:var(--ink-soft);font-size:1.05rem;line-height:1;text-decoration:none;
}
.shop_table .product-remove a:hover{background:var(--coral);color:#fff}
.cart-collaterals{display:grid;grid-template-columns:1fr 380px;gap:clamp(20px,3vw,36px);align-items:start;margin-top:26px}
@media(max-width:820px){.cart-collaterals{grid-template-columns:1fr}}
.cart_totals{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.cart_totals h2{font-size:1.1rem;margin-bottom:14px}
.cart_totals table{width:100%;border-collapse:collapse}
.cart_totals th,.cart_totals td{padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;text-align:left}
.cart_totals th{font-weight:500;color:var(--ink-soft)}
.cart_totals td{text-align:right;font-weight:600}
.cart_totals .order-total th,.cart_totals .order-total td{font-size:1.1rem;font-weight:700;border-bottom:0;padding-top:14px}
.wc-proceed-to-checkout{margin-top:16px}
.checkout-button{
  display:inline-flex!important;align-items:center;gap:9px;width:auto;
  padding:13px 26px;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-weight:600;font-size:.96rem;
}
.checkout-button:hover{background:var(--green-deep);color:#fff}
.coupon{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.coupon input{width:auto;flex:1 1 170px}

.cart-empty-box{
  text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(34px,5vw,60px);
}
.cart-empty-box .ico{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:var(--radius-pill);background:var(--mint);color:var(--green)}
.cart-empty-box .ico svg{width:32px;height:32px}
.cart-empty-box .btn-row{justify-content:center}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout-page{padding-block:clamp(28px,4vw,52px)}
form.checkout{display:grid;grid-template-columns:1fr 400px;gap:clamp(22px,3vw,40px);align-items:start}
@media(max-width:900px){form.checkout{grid-template-columns:1fr}}
#customer_details{min-width:0}
.checkout-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,26px);margin-bottom:18px}
.checkout-card > h3,#order_review_heading{font-size:1.08rem;margin:0 0 16px;display:flex;align-items:center;gap:9px}
#order_review{
  position:sticky;top:104px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,24px);min-width:0;
}
@media(max-width:900px){#order_review{position:static}}
.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-row-wide,.form-row-first,.form-row-last{grid-column:span 1}
.form-row-wide{grid-column:1/-1}
@media(max-width:560px){
  .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
  .form-row-first,.form-row-last{grid-column:1/-1}
}
.select2-container--default .select2-selection--single{height:44px;border:1px solid var(--line);border-radius:var(--radius)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px;padding-left:14px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}

/* --- payment methods ---
   Classic checkout markup puts the radio as a SIBLING of the label:
     li > input[type=radio] + label + div.payment_box
   So setting display:flex on the label stacks the radio above the text.
   Grid the li instead and place all three children explicitly. */
.woocommerce-checkout-payment{margin-top:8px}
ul.wc_payment_methods{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
ul.wc_payment_methods li.wc_payment_method{
  display:grid;grid-template-columns:auto 1fr;gap:4px 11px;align-items:center;
  margin:0;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;transition:border-color var(--t),background var(--t);
}
ul.wc_payment_methods li.wc_payment_method:hover{border-color:var(--mint-deep);background:var(--paper)}
ul.wc_payment_methods li.wc_payment_method:has(input:checked){border-color:var(--green);background:var(--mint)}
li.wc_payment_method > input[type=radio]{grid-column:1;grid-row:1;width:18px;height:18px;margin:0;accent-color:var(--green);cursor:pointer}
li.wc_payment_method > label{
  grid-column:2;grid-row:1;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.94rem;font-weight:600;cursor:pointer;
}
li.wc_payment_method > label img{max-height:22px;width:auto;display:inline-block}
li.wc_payment_method > .payment_box{
  grid-column:2;grid-row:2;margin:0;padding:11px 0 2px;
  font-size:.86rem;color:var(--ink-soft);line-height:1.6;
}
li.wc_payment_method > .payment_box p:last-child{margin-bottom:0}
.place-order{margin-top:6px}
#place_order{
  display:inline-flex;align-items:center;gap:9px;width:auto;
  padding:14px 28px;border:0;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:background var(--t),box-shadow var(--t);
}
#place_order:hover{background:var(--green-deep);box-shadow:var(--shadow-md)}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:14px;font-size:.85rem;color:var(--ink-soft)}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:.9rem;text-align:left;
}
.woocommerce-checkout-review-order-table td{text-align:right}
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{font-size:1.08rem;font-weight:700;border-bottom:0}
.woocommerce-checkout-review-order-table .product-name{font-weight:500;color:var(--ink)}

/* ==========================================================================
   MY ACCOUNT
   ========================================================================== */
.account-page{padding-block:clamp(28px,4vw,52px)}
.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:11px 14px;border-radius:var(--radius);
  font-size:.91rem;font-weight:500;color:var(--ink);transition:background var(--t),color var(--t);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--mint);color:var(--green-deep)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--green);color:#fff;font-weight:600}
.woocommerce-account .woocommerce-MyAccount-content{min-width:0}
.account-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(20px,3vw,36px);align-items:start}
@media(max-width:800px){.account-grid{grid-template-columns:1fr}}
.auth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);align-items:start}
@media(max-width:760px){.auth-grid{grid-template-columns:1fr}}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,3vw,30px)}
.auth-card h2{font-size:1.15rem;margin-bottom:6px}
.woocommerce-form__label-for-checkbox{display:flex;align-items:center;gap:8px;font-weight:500}
.woocommerce-form__input-checkbox{width:auto;accent-color:var(--green)}
.woocommerce-Button,.woocommerce-form-login__submit,.woocommerce-form-register__submit{
  display:inline-flex;align-items:center;gap:8px;width:auto;
  padding:12px 22px;border:0;border-radius:var(--radius-pill);
  background:var(--green);color:#fff;font-size:.93rem;font-weight:600;cursor:pointer;
}
.woocommerce-Button:hover{background:var(--green-deep);color:#fff}

/* ==========================================================================
   PRESCRIPTION REQUEST
   ========================================================================== */
.rx-band{background:var(--green-deep);color:#dceaf6;position:relative;overflow:hidden}
.rx-band::after{
  content:"";position:absolute;right:-8%;top:-40%;width:min(40vw,460px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(23,163,119,.35),transparent 68%);
}
.rx-band__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,52px);align-items:center;padding-block:clamp(40px,5vw,70px)}
@media(max-width:880px){.rx-band__inner{grid-template-columns:1fr}}
.rx-band h2{color:#fff}
.rx-band .lede{color:#a9c4dd}
.rx-band .eyebrow{color:#7fc9f5}
.rx-band .eyebrow::before{background:linear-gradient(90deg,#7fc9f5 50%,rgba(255,255,255,.25) 50%)}
.rx-steps{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.rx-step{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:15px 17px}
.rx-step__n{
  display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--radius-pill);
  background:#fff;color:var(--green-deep);font-weight:700;font-size:.87rem;
}
.rx-step b{display:block;color:#fff;font-size:.94rem;margin-bottom:2px}
.rx-step span{font-size:.85rem;color:#a9c4dd;line-height:1.55}

/* ==========================================================================
   ADVICE / CONTENT
   ========================================================================== */
.prose{max-width:74ch;color:var(--ink-soft);line-height:1.75}
.prose h2,.prose h3{color:var(--ink);margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:1.4em 0;padding:16px 20px;background:var(--mint);border-left:3px solid var(--green);border-radius:0 var(--radius) var(--radius) 0;color:var(--ink)}
.prose img{border-radius:var(--radius);margin:1.2em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;font-size:.92rem}
.prose th{background:var(--paper-deep);font-weight:600;color:var(--ink)}

.advice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:860px){.advice-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.advice-grid{grid-template-columns:1fr}}
.advice-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--t),transform var(--t)}
.advice-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.advice-card__media{aspect-ratio:16/10;background:var(--mint);overflow:hidden}
.advice-card__media img{width:100%;height:100%;object-fit:cover}
.advice-card__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.advice-card__t{font-size:1rem;font-weight:600;margin:0;line-height:1.35}
.advice-card__t a{color:var(--ink)}
.advice-card__t a:hover{color:var(--green)}
.advice-card__x{font-size:.84rem;color:var(--ink-soft);line-height:1.55;flex:1 1 auto}
.advice-card__m{font-size:.76rem;color:var(--ink-faint);display:flex;align-items:center;gap:8px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:#a9b8c9;font-size:.9rem;margin-top:clamp(40px,5vw,76px)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(22px,3vw,44px);padding-block:clamp(40px,5vw,64px)}
@media(max-width:940px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__top{grid-template-columns:1fr;gap:26px}}
.site-footer h4{color:#fff;font-size:.83rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:15px}
.site-footer a{color:#a9b8c9}
.site-footer a:hover{color:#fff}
.footer__menu{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer__brand .brand__name{color:#fff}
.footer__brand .brand__sub{color:var(--green-bright)}
.footer__blurb{margin:15px 0;line-height:1.65;max-width:38ch;color:#8fa2b7}
.footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer__contact li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.footer__contact svg{width:16px;height:16px;color:var(--green-bright);flex:none;margin-top:3px}
.footer__reg{
  margin-top:18px;padding:14px 16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  font-size:.79rem;line-height:1.6;color:#8fa2b7;
}
.footer__reg b{color:#fff;display:block;margin-bottom:3px;font-size:.82rem}
/* A menu assigned to "legal" renders as a second list in the Pharmacy column;
   both are grids with their own gap, so the join needs the same 9px. */
.footer__menu--legal{margin-top:9px}
.footer__bot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:20px;border-top:1px solid rgba(255,255,255,.09);font-size:.81rem;color:#8699ad;
}
.footer__bot p{margin:0}

/* ==========================================================================
   MISC
   ========================================================================== */
.demo-flag{
  display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:9px 16px;background:#fdf2dd;color:#7d5307;
  font-size:.81rem;font-weight:500;text-align:center;border-bottom:1px solid #f0dcb4;
}
.demo-flag svg{width:15px;height:15px;flex:none}
.demo-flag b{font-weight:700}

@media print{
  .site-header,.site-footer,.topbar,.demo-flag,.drawer,.scrim{display:none!important}
  body{background:#fff}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   MINI CART (drawer fragment)
   ========================================================================== */
.woocommerce-mini-cart{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.woocommerce-mini-cart-item{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.woocommerce-mini-cart-item img{width:58px;height:58px;object-fit:contain;background:var(--mint);border-radius:11px;padding:7px;order:-1}
.woocommerce-mini-cart-item a:not(.remove){font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.35;display:block}
.woocommerce-mini-cart-item a:not(.remove):hover{color:var(--green)}
.woocommerce-mini-cart-item .quantity{display:block;border:0;background:transparent;font-size:.82rem;color:var(--ink-soft);margin-top:3px}
.woocommerce-mini-cart-item a.remove{
  display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--paper-deep);color:var(--ink-soft);font-size:1rem;line-height:1;text-decoration:none;
}
.woocommerce-mini-cart-item a.remove:hover{background:var(--coral);color:#fff}
.woocommerce-mini-cart__empty-message{padding:26px 0;text-align:center;color:var(--ink-soft);font-size:.92rem}
.woocommerce-mini-cart__total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:1.02rem;font-weight:700;
}
.woocommerce-mini-cart__total strong{font-weight:500;color:var(--ink-soft);font-size:.9rem}
.woocommerce-mini-cart__buttons{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0}
.woocommerce-mini-cart__buttons a{
  display:inline-flex;align-items:center;gap:7px;width:auto;
  padding:11px 20px;border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink);
}
.woocommerce-mini-cart__buttons a:hover{background:var(--mint);border-color:var(--mint-deep);color:var(--green-deep)}
.woocommerce-mini-cart__buttons a.checkout{background:var(--green);border-color:var(--green);color:#fff}
.woocommerce-mini-cart__buttons a.checkout:hover{background:var(--green-deep);color:#fff}

/* search form inside a drawer */
.psuk-search input[type=search]{flex:1 1 auto}

/* ==========================================================================
   PDP LAYOUT FIX
   WooCommerce renders <div class="product"> holding the gallery, the summary
   and the tabs as three block-level siblings — there is no wrapper of our own
   to hook, so the grid goes on div.product itself and the full-width children
   are spanned explicitly. Styling an invented `.pdp__grid` did nothing.
   ========================================================================== */
.pdp div.product{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px) clamp(24px,4vw,56px);
  align-items:start;
}
.pdp div.product > .woocommerce-product-gallery{
  grid-column:1;grid-row:1;
  position:sticky;top:104px;
}
.pdp div.product > .summary,
.pdp div.product > .entry-summary{
  grid-column:2;grid-row:1;margin:0;min-width:0;
}
/* everything below the fold spans the full width */
.pdp div.product > .woocommerce-tabs,
.pdp div.product > .related,
.pdp div.product > .up-sells,
.pdp div.product > .product_meta,
.pdp div.product > .woocommerce-product-gallery__wrapper ~ *:not(.summary):not(.entry-summary):not(.woocommerce-product-gallery){
  grid-column:1/-1;
}
@media(max-width:880px){
  .pdp div.product{grid-template-columns:1fr;gap:28px}
  .pdp div.product > .woocommerce-product-gallery{grid-column:1;position:static}
  .pdp div.product > .summary,
  .pdp div.product > .entry-summary{grid-column:1;grid-row:2}
  .pdp div.product > .woocommerce-tabs{grid-row:3}
}

/* the gallery image was filling the column at full bleed */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper{width:100%}
.woocommerce-product-gallery__image{display:block}

/* POM listings have no price — an empty span left a gap where the price goes */
.pcard__price:empty::before{
  content:"Prescription required";
  font-size:.82rem;font-weight:600;color:var(--ink-soft);
}
.pdp .price:empty{display:none}

/* With the 262px sidebar taking its share, four columns squeezed each card to
   ~200px. Three reads properly at desktop; the sidebar collapses below 900px
   and four is fine again from there down to the tablet breakpoint. */
.shop-layout ul.products,.shop-layout .products{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.shop-layout ul.products,.shop-layout .products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.shop-layout ul.products,.shop-layout .products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.shop-layout ul.products,.shop-layout .products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.shop-layout ul.products,.shop-layout .products{grid-template-columns:1fr}}

/* the archive H1 carries newlines from the template */
.page-head h1{white-space:normal}

/* ==========================================================================
   MOBILE HEADER OVERFLOW
   Hiding `.nav` alone left `.nav-shell` in the flex row still claiming width,
   and four 42px icon buttons plus the brand then pushed the row to 443px in a
   375px viewport — 68px of sideways scroll on every page. Drop the shell
   itself, and shed the account icon on the narrowest screens (it is in the
   menu drawer regardless).
   ========================================================================== */
@media(max-width:1024px){
  .nav-shell{display:none}
}
@media(max-width:430px){
  .header__actions{gap:4px}
  .icon-btn{width:38px;height:38px}
  .icon-btn svg{width:17px;height:17px}
  .header__actions > a.icon-btn[aria-label*="account" i]{display:none}
  .header__inner{gap:8px}
}
/* belt and braces: nothing may widen the page */
html,body{max-width:100%;overflow-x:clip}

/* Topbar on a phone: four items wrapped into four-line stacks. Below 760px
   keep only the two that are actually useful on the move — delivery
   threshold and the WhatsApp link — and let them sit on one line. */
@media(max-width:760px){
  .topbar .wrap{justify-content:center}
  .topbar__list:first-child{display:none}
  .topbar__list li{white-space:nowrap}
  .topbar__list li:nth-child(n+3){display:none}
}
@media(max-width:380px){
  .topbar__list li:first-child{display:none}
}

/* Supplied logo — wide lockup (3.46:1), so it is sized by HEIGHT and allowed
   to take whatever width that needs. max-width:none defeats the global
   img{max-width:100%} which would otherwise squash it in a narrow header. */
.brand__img{height:54px;width:auto;max-width:none;display:block}
@media(max-width:1024px){.brand__img{height:46px}}
@media(max-width:560px){.brand__img{height:40px}}
@media(max-width:380px){.brand__img{height:34px}}
.footer__brand .brand__img{height:48px;filter:brightness(0) invert(1);opacity:.95}

/* ==========================================================================
   HOMEPAGE — plain. No decorative dot fields, blobs or floating badges.
   ========================================================================== */
.hero::before,.hero::after{content:none}
.hero{background:var(--mint)}

.sec-head--row{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;max-width:none;
}
.sec-head--row h2{margin:0}

/* category cards without the blurb line */
.cat-card__t{margin-bottom:auto}

/* ==========================================================================
   REVIEWS SLIDER
   ========================================================================== */
.reviews__nav{display:flex;gap:8px;flex:none}
.reviews__nav .icon-btn:disabled{opacity:.35;cursor:default}
.reviews__nav .flip{transform:rotate(180deg)}

.reviews__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:272px;
  gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;
}
.reviews__track::-webkit-scrollbar{display:none}
.reviews__track:focus-visible{outline:2px solid var(--green-bright);outline-offset:4px;border-radius:var(--radius)}
@media(min-width:900px){.reviews__track{grid-auto-columns:calc((100% - 60px) / 4)}}
@media(min-width:620px) and (max-width:899px){.reviews__track{grid-auto-columns:calc((100% - 20px) / 2)}}

.review{
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;min-width:0;
}
.review__stars{display:flex;gap:3px;color:var(--cta)}
.review__stars svg{fill:currentColor;stroke:none;width:16px;height:16px}
.review__stars--empty{color:var(--line)}
.review__text{
  font-size:.95rem;line-height:1.65;color:var(--ink);margin:0;flex:1 1 auto;
}
.review--empty .review__text{color:var(--ink-faint);font-style:italic}
.review__by{font-size:.85rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:1px}
.review__by strong{color:var(--ink);font-weight:600}
.review__by span{font-size:.78rem;color:var(--ink-faint)}
.review--empty .review__by{color:var(--ink-faint);font-size:.78rem}

.reviews__note{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin:18px 0 0;font-size:.82rem;color:var(--ink-faint);text-align:center;
}
.reviews__note svg{flex:none}

/* The global select{width:100%} was stretching the catalogue sort control
   across the row and covering the result count. */
.woocommerce-ordering{margin:0;flex:none}
.woocommerce-ordering select,
.shop-bar select{width:auto;min-width:190px;max-width:100%}
.shop-bar{gap:12px}
.shop-bar .woocommerce-result-count{margin:0}
@media(max-width:520px){
  .shop-bar{flex-direction:column;align-items:flex-start}
  .woocommerce-ordering select{width:100%;min-width:0}
}

/* P medicine badge — distinct from prescription-only */
.pill--pmed{background:#e7f2e8;color:#1f6b24}

/* ==========================================================================
   PDP GALLERY — sticky removed.
   A sticky grid item is confined to its containing block, but with
   align-items:start and an auto-placed sibling the browser treats the grid
   CONTAINER as that block, so the gallery slid out of row 1 and floated over
   the tabs panel. It only had ~158px of travel here anyway (gallery 552px,
   summary 711px) and the long copy lives in the tabs below, which are full
   width — so sticky bought nothing and cost a visible bug.
   Rows are pinned explicitly so nothing auto-places into row 1 again.
   ========================================================================== */
.pdp div.product > .woocommerce-product-gallery{
  position:static;top:auto;
  grid-column:1;grid-row:1;
}
.pdp div.product > .summary,
.pdp div.product > .entry-summary{grid-column:2;grid-row:1}
.pdp div.product > .woocommerce-tabs{grid-column:1/-1;grid-row:2}
.pdp div.product > .related,
.pdp div.product > .up-sells{grid-column:1/-1;grid-row:auto}
@media(max-width:880px){
  .pdp div.product > .woocommerce-product-gallery{grid-column:1;grid-row:1}
  .pdp div.product > .summary,
  .pdp div.product > .entry-summary{grid-column:1;grid-row:2}
  .pdp div.product > .woocommerce-tabs{grid-row:3}
}

/* ==========================================================================
   CART — rebuild
   Three faults being corrected here:
   1. Woo gives the totals table class `shop_table` too, so the line-item
      header styling (grey fill, uppercase) landed on the SUBTOTAL/TOTAL
      labels and painted a block across half the row.
   2. The coupon and Update cart controls are bare <button>s with none of the
      theme's classes, so they fell back to browser chrome.
   3. .cart-collaterals had one child in a two-column grid, so the totals
      panel sat in the wide left column instead of the narrow right one.
   ========================================================================== */

/* --- line items --- */
.woocommerce-cart-form{display:block}
.woocommerce-cart-form__contents{border-radius:var(--radius-lg);overflow:hidden}
.shop_table.woocommerce-cart-form__contents th{
  padding:15px 18px;font-size:.72rem;letter-spacing:.09em;
}
.woocommerce-cart-form__cart-item td{padding:18px}
.shop_table .product-thumbnail img{
  width:78px;height:78px;padding:9px;border-radius:14px;
  background:linear-gradient(170deg,var(--mint) 0%,#fff 72%);
  border:1px solid var(--line-soft);
}
.shop_table .product-name a{font-size:.98rem}
.shop_table .product-price,
.shop_table .product-subtotal{font-weight:600;color:var(--ink);white-space:nowrap}
.shop_table .product-remove{width:54px;text-align:center}
.shop_table .product-remove a{
  width:30px;height:30px;font-size:1.15rem;font-weight:400;
  border:1px solid var(--line);background:#fff;
}
.shop_table .product-remove a:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.woocommerce-cart-form__cart-item .quantity{border-radius:var(--radius-pill)}

/* --- the actions row: coupon left, update right --- */
.woocommerce-cart-form__contents td.actions{
  padding:16px 18px;background:var(--paper);border-top:1px solid var(--line);
}
td.actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
td.actions .coupon{display:flex;align-items:center;gap:8px;margin:0;flex:0 1 auto}
td.actions .coupon label{display:none}
td.actions .coupon input#coupon_code{
  width:auto;min-width:190px;padding:10px 16px;border-radius:var(--radius-pill);font-size:.89rem;
}
/* the bare buttons Woo emits get the theme's pill treatment */
td.actions button[name="apply_coupon"],
td.actions button[name="update_cart"],
.woocommerce-cart button.button{
  display:inline-flex;align-items:center;gap:7px;width:auto;
  padding:10px 20px;border-radius:var(--radius-pill);
  font-size:.88rem;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:background var(--t),border-color var(--t),color var(--t),opacity var(--t);
}
td.actions button[name="apply_coupon"]:hover,
td.actions button[name="update_cart"]:hover{background:var(--mint);border-color:var(--mint-deep);color:var(--green-deep)}
td.actions button[name="update_cart"]{background:var(--green);border-color:var(--green);color:#fff}
td.actions button[name="update_cart"]:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
td.actions button[disabled]{opacity:.45;cursor:default}
@media(max-width:620px){
  td.actions{flex-direction:column;align-items:stretch}
  td.actions .coupon{flex-wrap:wrap}
  td.actions .coupon input#coupon_code{flex:1 1 100%;min-width:0}
}

/* --- totals panel: right-hand column, not the wide one --- */
.cart-collaterals{display:flex;justify-content:flex-end;gap:clamp(20px,3vw,36px);margin-top:24px}
.cart_totals{width:min(420px,100%);padding:24px}
.cart-collaterals .cross-sells{flex:1 1 auto;min-width:0}
@media(max-width:820px){.cart-collaterals{display:block}.cart_totals{width:100%}}

/* the totals table must NOT inherit the line-item header styling */
.cart_totals table.shop_table{border:0;background:transparent;border-radius:0;overflow:visible}
.cart_totals table.shop_table th{
  background:transparent;text-transform:none;letter-spacing:0;
  font-size:.92rem;font-weight:500;color:var(--ink-soft);
  padding:12px 0;border-top:0;
}
.cart_totals table.shop_table td{
  background:transparent;padding:12px 0;border-top:0;
  text-align:right;font-weight:600;
}
.cart_totals .order-total th{font-size:1.02rem;font-weight:600;color:var(--ink)}
.cart_totals .order-total td{font-size:1.18rem;font-weight:700}
.cart_totals .cart-subtotal th,.cart_totals .cart-subtotal td{border-bottom:1px solid var(--line-soft)}
.cart_totals h2{font-size:1.06rem;margin-bottom:6px}
.wc-proceed-to-checkout{margin-top:18px;padding:0}
/* buttons hug their text at every breakpoint - never a full-width variant */
.wc-proceed-to-checkout .checkout-button{width:auto}

/* ==========================================================================
   CHECKOUT — rebuild
   The review table carries `shop_table` as well, so the same line-item header
   styling was painting a grey block across the Subtotal / Discount / Total
   labels. The order heading also sits OUTSIDE #order_review in Woo's markup,
   so it floated away from the panel it belongs to.
   ========================================================================== */

/* pull the heading onto the panel */
#order_review_heading{
  margin:0 0 -1px;padding:20px 24px 16px;
  background:#fff;border:1px solid var(--line);border-bottom:0;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  font-size:1.06rem;
}
#order_review{border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:0 24px 24px}
@media(max-width:900px){
  #order_review_heading{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
}

/* review table: strip the inherited header treatment */
.woocommerce-checkout-review-order-table{
  border:0;background:transparent;border-radius:0;overflow:visible;margin-bottom:20px;
}
.woocommerce-checkout-review-order-table thead th{
  background:transparent;padding:14px 0 10px;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--line);
}
.woocommerce-checkout-review-order-table tbody td{
  padding:13px 0;border-top:0;border-bottom:1px solid var(--line-soft);font-size:.92rem;
}
.woocommerce-checkout-review-order-table tbody .product-name{text-align:left;color:var(--ink);font-weight:500}
.woocommerce-checkout-review-order-table tfoot th{
  background:transparent;text-transform:none;letter-spacing:0;
  font-size:.92rem;font-weight:500;color:var(--ink-soft);
  padding:12px 0;border-top:0;border-bottom:1px solid var(--line-soft);text-align:left;
}
.woocommerce-checkout-review-order-table tfoot td{
  background:transparent;padding:12px 0;border-top:0;border-bottom:1px solid var(--line-soft);
  text-align:right;font-weight:600;
}
.woocommerce-checkout-review-order-table tfoot .order-total th{font-size:1.02rem;font-weight:600;color:var(--ink);border-bottom:0}
.woocommerce-checkout-review-order-table tfoot .order-total td{font-size:1.2rem;font-weight:700;border-bottom:0}
/* a negative fee is a discount — show it as one */
.woocommerce-checkout-review-order-table tfoot .fee td{color:var(--cta-deep);font-weight:700}
.woocommerce-checkout-review-order-table tfoot .fee th{color:var(--cta-deep)}
.product-quantity{color:var(--ink-faint);font-weight:400}

/* coupon toggle */
.woocommerce-form-coupon-toggle{margin-bottom:18px}
.woocommerce-form-coupon-toggle .woocommerce-info{
  background:#fff;border:1px dashed var(--mint-deep);color:var(--ink-soft);
  font-size:.88rem;padding:13px 18px;
}
.woocommerce-form-coupon{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;margin-bottom:18px;
}
.woocommerce-form-coupon .form-row{margin-bottom:0}

/* form rhythm */
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3{
  font-size:1.06rem;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.woocommerce-additional-fields{margin-top:26px}
.checkout .form-row{margin-bottom:16px}
.checkout .form-row label{font-size:.82rem;color:var(--ink-soft);margin-bottom:7px}
.checkout .form-row label .required{margin-left:2px}
.checkout textarea{min-height:96px;resize:vertical}
.woocommerce-input-wrapper{display:block;width:100%}

/* payment box copy */
.woocommerce-privacy-policy-text{font-size:.82rem;color:var(--ink-faint);line-height:1.6;margin:14px 0}
.woocommerce-privacy-policy-text p{margin:0}
#place_order{width:auto;margin-top:4px}

/* ==========================================================================
   Two layout corrections
   ========================================================================== */

/* 1. display:flex on a <td> takes the cell out of table layout, so the
      actions row collapsed to its content width (258px inside a 1160px
      table). Keep it a table-cell and float the two controls instead. */
.woocommerce-cart-form__contents td.actions{display:table-cell;width:auto}
.woocommerce-cart-form__contents td.actions::after{content:"";display:table;clear:both}
.woocommerce-cart-form__contents td.actions .coupon{float:left;display:flex;align-items:center;gap:8px}
.woocommerce-cart-form__contents td.actions button[name="update_cart"]{float:right}
@media(max-width:620px){
  .woocommerce-cart-form__contents td.actions .coupon,
  .woocommerce-cart-form__contents td.actions button[name="update_cart"]{float:none;width:auto}
  .woocommerce-cart-form__contents td.actions .coupon{margin-bottom:12px;flex-wrap:wrap}
}

/* 2. Woo emits three children — #customer_details, #order_review_heading and
      #order_review — into a two-column grid, so the heading took column 2 and
      the panel wrapped onto a new row in column 1, away from its own title.
      Place all three explicitly. */
form.checkout{align-items:start}
form.checkout > #customer_details{grid-column:1;grid-row:1 / span 2}
form.checkout > #order_review_heading{grid-column:2;grid-row:1}
form.checkout > #order_review{grid-column:2;grid-row:2}
@media(max-width:900px){
  form.checkout > #customer_details{grid-column:1;grid-row:1}
  form.checkout > #order_review_heading{grid-column:1;grid-row:2}
  form.checkout > #order_review{grid-column:1;grid-row:3}
}

/* The heading is styled to butt against the panel below it, so the grid's
   row gap has to go on desktop or they read as two detached boxes. The
   column gap stays; on mobile the rows stack and want their gap back. */
form.checkout{row-gap:0;column-gap:clamp(22px,3vw,40px)}
@media(max-width:900px){form.checkout{row-gap:18px}}

/* The heading now lives inside the panel (see inc/woo.php), so column two
   holds a single child and the grid is a plain two-up again. */
#order_review_heading{display:none}
form.checkout{row-gap:18px}
form.checkout > #customer_details{grid-column:1;grid-row:1}
form.checkout > #order_review{
  grid-column:2;grid-row:1;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;
}
@media(max-width:900px){
  form.checkout > #customer_details{grid-column:1;grid-row:1}
  form.checkout > #order_review{grid-column:1;grid-row:2}
}
.order-review__title{font-size:1.06rem;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}

/* ==========================================================================
   HERO — built to the supplied mockup
   Background art is a 2.16:1 banner whose subject sits in the RIGHT half and
   whose left ~45% is clear sky, so the copy column is capped and the image is
   anchored right. Below the copy breakpoint the focal point shifts and a
   scrim goes in, because cover-cropping a wide banner on a phone otherwise
   puts the bottle straight under the headline.
   ========================================================================== */

.hero{
  position:relative;
  background-color:#e8f1fa;
  background-image:url('../img/hero-v3.jpg');
  background-image:image-set(url('../img/hero-v3.webp') type('image/webp'), url('../img/hero-v3.jpg') type('image/jpeg'));
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
  border-radius:0;
  overflow:hidden;
}
.hero::before,.hero::after{content:none}

.hero__inner{
  display:block;
  padding-block:clamp(48px,7vw,104px);
  min-height:clamp(420px,42vw,560px);
}
.hero__copy{max-width:min(560px,50%)}

/* eyebrow: YOUR HEALTH • OUR PRIORITY */
.hero__eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 16px;
  font-size:.78rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__eyebrow span{color:var(--cta);font-size:1.1em;line-height:0}

/* headline, with the gradient italic on the last word */
.hero__title{
  margin:0 0 .5em;
  font-size:clamp(2.05rem,3.9vw,3.4rem);
  font-weight:700;line-height:1.1;letter-spacing:-.02em;
  color:var(--green);
}
.hero__title em{
  font-style:italic;font-weight:700;
  background:linear-gradient(95deg,var(--cta) 0%,var(--cta) 38%,var(--green-bright) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* a clipped gradient crops descenders and the italic overhang, so the box
     is given room rather than hugging the glyphs */
  padding:0 .12em .08em 0;margin-right:-.12em;
  display:inline-block;line-height:1.16;
}
.hero .lede{color:var(--ink-soft);max-width:44ch;margin-bottom:0}
.hero .btn-row{margin-top:28px}

/* buttons, per the mockup */
.btn--cta{background:linear-gradient(120deg,var(--cta) 0%,#2f9b34 100%);color:#fff;box-shadow:0 8px 22px rgba(52,169,57,.32)}
.btn--cta:hover{background:linear-gradient(120deg,var(--cta-deep) 0%,#25802a 100%);color:#fff;box-shadow:0 10px 26px rgba(52,169,57,.4)}
.btn--white{background:#fff;color:var(--green);border-color:rgba(1,44,91,.12);box-shadow:var(--shadow-sm)}
.btn--white:hover{background:#fff;color:var(--green-deep);border-color:var(--green-bright);box-shadow:var(--shadow-md)}
.btn--lg{padding:15px 30px;font-size:1rem;gap:12px}
.btn__arrow{transition:transform var(--t)}
.btn--cta:hover .btn__arrow{transform:translateX(3px)}

@media(max-width:1100px){
  .hero__copy{max-width:min(520px,58%)}
}
@media(max-width:860px){
  .hero{background-image:url('../img/hero-v3-sm.jpg');background-image:image-set(url('../img/hero-v3-sm.webp') type('image/webp'), url('../img/hero-v3-sm.jpg') type('image/jpeg'));background-position:72% center}
  /* the banner's subject would otherwise sit right under the headline */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(100deg,rgba(232,241,250,.96) 0%,rgba(232,241,250,.9) 46%,rgba(232,241,250,.35) 72%,rgba(232,241,250,0) 100%);
  }
  .hero__inner{position:relative;z-index:1}
  .hero__copy{max-width:none}
  .hero .lede{max-width:38ch}
}
@media(max-width:560px){
  .hero__inner{min-height:0;padding-block:38px 42px}
  .hero::after{background:linear-gradient(180deg,rgba(232,241,250,.95) 0%,rgba(232,241,250,.88) 62%,rgba(232,241,250,.72) 100%)}
}

/* ==========================================================================
   HEADER — floats over the hero with a rounded bottom edge, per the mockup
   ========================================================================== */
.site-header{
  background:rgba(255,255,255,.97);
  border-bottom:0;
  border-radius:0 0 26px 26px;
  box-shadow:0 2px 14px rgba(1,44,91,.07);
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(1,44,91,.12)}
/* the hero slides under the header so its art shows through the corners */
.is-home .hero{margin-top:-26px;padding-top:26px}
.header__inner{min-height:92px}
@media(max-width:1024px){
  .site-header{border-radius:0 0 20px 20px}
  .is-home .hero{margin-top:-20px;padding-top:20px}
  .header__inner{min-height:74px}
}

/* nav sizing to match */
.nav > li > a{font-size:1rem;font-weight:500;padding:11px 16px}
.icon-btn{width:46px;height:46px}
.icon-btn svg{width:20px;height:20px}
@media(max-width:430px){.icon-btn{width:40px;height:40px}}

/* ==========================================================================
   HERO — the art is a BACKDROP at every width
   The separate band under the copy is gone; a phone-shaped banner goes in
   behind the copy instead. The art div stays in the markup but never draws.
   ========================================================================== */
.hero__art{display:none!important}

@media(max-width:860px){
  .hero__copy{max-width:none}
  .hero__inner{padding-block:clamp(30px,5vw,46px)}
}
@media(max-width:560px){
  .hero__inner{min-height:0}
}

/* ==========================================================================
   HERO — fit the viewport on BOTH axes
   The banner should be wholly visible on load without scrolling, so the
   section is sized from the viewport height minus the chrome above it, and
   the type scales from whichever of vw/vh is the tighter constraint. Nothing
   is hidden to make it fit — it scales.
   `svh` rather than `vh` so a phone's collapsing address bar does not push
   the bottom of the hero out of view on first paint.
   ========================================================================== */
:root{--chrome:130px}          /* topbar + header */
@media(max-width:1024px){:root{--chrome:112px}}
@media(max-width:760px){:root{--chrome:100px}}

.hero{
  min-height:calc(100svh - var(--chrome));
  display:flex;align-items:center;
}
.hero__inner{
  width:100%;
  min-height:0;
  padding-block:clamp(24px,4vh,72px);
}

/* type scales on the tighter of the two axes */
.hero__title{font-size:clamp(1.75rem,min(3.9vw,5.4vh),3.4rem)}
.hero__eyebrow{font-size:clamp(.68rem,min(.9vw,1.4vh),.78rem);margin-bottom:clamp(8px,1.4vh,16px)}
.hero .lede{font-size:clamp(.92rem,min(1.05vw,1.8vh),1.08rem)}
.hero .btn-row{margin-top:clamp(16px,3vh,28px)}
.hero .btn--lg{padding:clamp(11px,1.7vh,15px) clamp(20px,2.2vw,30px);font-size:clamp(.9rem,min(1vw,1.7vh),1rem)}

/* the copy sits in the hero, vertically centred, at every width */
@media(max-width:860px){
  .hero{align-items:center}
  .hero__inner{padding-block:clamp(22px,3.5vh,40px)}
}

/* With three items in a two-up grid the last one is odd-numbered, so it was
   drawing a divider against empty space. */
/* ==========================================================================
   HERO — larger type, and a scrim so the copy is legible over the foliage
   The banner is not uniformly pale on the left: it carries bright green
   leaves down the edge and across the bottom-left, which is exactly where
   the trust row sits. A soft wash keeps the artwork while guaranteeing the
   text has something consistent to sit on.
   ========================================================================== */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* ::after started life as a decorative 46vw circle (see the first HERO
     block). inset:0 alone does not undo that — the explicit width and the
     50% radius survive and the scrim paints as an ellipse in the corner
     instead of covering the section. */
  width:auto;height:auto;aspect-ratio:auto;border-radius:0;
  background:linear-gradient(100deg,
    rgba(234,242,250,.94) 0%,
    rgba(234,242,250,.88) 30%,
    rgba(234,242,250,.62) 48%,
    rgba(234,242,250,.18) 62%,
    rgba(234,242,250,0) 74%);
}
.hero__inner{position:relative;z-index:1}

/* type up a step — the vh clamps were shrinking it too far */
.hero__title{font-size:clamp(2.1rem,min(4.5vw,6.6vh),4rem);line-height:1.08}
.hero__eyebrow{font-size:clamp(.74rem,min(1vw,1.6vh),.88rem);letter-spacing:.18em;margin-bottom:clamp(10px,1.8vh,20px)}
.hero .lede{font-size:clamp(1rem,min(1.25vw,2.1vh),1.22rem);line-height:1.6;max-width:46ch}
.hero .btn--lg{padding:clamp(13px,2vh,17px) clamp(24px,2.6vw,34px);font-size:clamp(.95rem,min(1.1vw,1.9vh),1.08rem)}

/* The copy column is capped only while the banner is a BACKDROP and the two
   share the width. Below 860px the art is its own band underneath, so the
   copy owns the full column — left unscoped this capped it at 54% of a
   phone screen and every line wrapped to pieces. */
@media(min-width:861px){
  .hero__copy{max-width:min(620px,54%)}
}

@media(max-width:860px){
  /* The copy sits ON the artwork, so a scrim is required — top-down here,
     because the copy spans the width rather than sitting in the left half.
     It holds across the type and then clears, so the product group in the
     lower third of the banner is seen at full strength. */
  .hero::after{
    content:"";
    background:linear-gradient(180deg,
      rgba(234,242,250,.94) 0%,
      rgba(234,242,250,.90) 40%,
      rgba(234,242,250,.62) 56%,
      rgba(234,242,250,.14) 68%,
      rgba(234,242,250,0) 78%);
  }
}

/* ==========================================================================
   HERO — contrast correction
   Measured against the actual banner pixels: the lede came out at 2.24:1 and
   the eyebrow at 4.36:1 over a darker band of sky, both short of 4.5. The
   scrim now holds its strength across the full copy column before falling
   away, and the muted greys are darkened.
   Left-to-right, so it is for the side-by-side layout ONLY — unscoped it also
   landed on the phone, where the copy spans the width and the right-hand end
   of the gradient is fully transparent over the product.
   ========================================================================== */
@media(min-width:861px){
  .hero::after{
    background:linear-gradient(100deg,
      rgba(234,242,250,.96) 0%,
      rgba(234,242,250,.94) 36%,
      rgba(234,242,250,.74) 52%,
      rgba(234,242,250,.24) 66%,
      rgba(234,242,250,0) 78%);
  }
}
.hero__eyebrow{color:#3a5675}
.hero .lede{color:#274866}

/* ==========================================================================
   HERO — the phone banner
   940x1672 (0.56:1), drawn at phone proportions: sky across the top for the
   copy, the product group sitting along the bottom. Anchored to the bottom so
   the podium stays put and any spare height is taken out of the sky, which is
   the part of the frame with nothing in it.
   ========================================================================== */
@media(max-width:560px){
  .hero{
    background-image:url('../img/hero-v3-mobile.jpg');
    background-image:image-set(url('../img/hero-v3-mobile.webp') type('image/webp'), url('../img/hero-v3-mobile.jpg') type('image/jpeg'));
    background-position:center bottom;
    background-size:cover;
    /* Copy to the TOP, not centred. The banner puts the product group in its
       bottom third; centring left 22% of empty sky above the type and pushed
       the trust row straight onto the bottle. Anchored up, the type sits on
       sky and the product has the lower third to itself. */
    align-items:flex-start;
  }
  .hero__inner{padding-block:clamp(14px,2.4vh,26px) 0}
}

/* ==========================================================================
   TRUST ROW — two placements, one per breakpoint
   Desktop keeps it inside the hero, unchanged: three items on the rule under
   the copy. On a phone that row landed on top of the product in the banner,
   so below 861px it is hidden and the .trustbar section below the hero shows
   instead. Both are in the markup; CSS picks one, so only one is ever in the
   page's accessibility tree.
   ========================================================================== */
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0;list-style:none;
  margin:clamp(20px,3.8vh,38px) 0 0;
  padding:clamp(16px,3vh,30px) 0 0;
  border-top:1px solid rgba(1,44,91,.12);
}
.hero__trust li{
  display:flex;align-items:center;gap:11px;
  padding:0 clamp(16px,1.8vw,26px);
  border-right:1px solid rgba(1,44,91,.12);
  font-size:clamp(.86rem,min(1vw,1.7vh),.98rem);
  font-weight:500;line-height:1.35;color:var(--green);
}
.hero__trust li:first-child{padding-left:0}
.hero__trust li:last-child{border-right:0;padding-right:0}
.hero__trust svg{width:clamp(19px,2.8vh,26px);height:clamp(19px,2.8vh,26px);color:var(--green);flex:none}

/* the phone band is hidden on desktop, and the in-hero row on the phone */
.trustbar{display:none}
@media(max-width:860px){
  .hero__trust{display:none}
  .trustbar{display:block}
}

.trustbar{background:#fff;border-bottom:1px solid var(--line)}
.trustbar__list{
  list-style:none;margin:0;
  padding:clamp(18px,2.4vw,26px) 0;
  /* two items, side by side at every width — a third wrapped to its own row
     on a phone and read as a mistake */
  display:grid;grid-template-columns:1fr 1fr;
}
.trustbar__list li{
  display:flex;align-items:center;gap:12px;
  padding:4px clamp(14px,2vw,26px);
  border-right:1px solid var(--line);
  font-size:clamp(.86rem,1vw,.98rem);font-weight:500;line-height:1.35;
  color:var(--green);
}
.trustbar__list li:last-child{border-right:0}
.trustbar__ico{display:flex;flex:none;color:var(--green)}
.trustbar__ico svg{width:clamp(20px,2.4vw,26px);height:clamp(20px,2.4vw,26px)}

/* With two items, left-aligning each half leaves the right of a wide screen
   empty — centred in its own half, the pair reads as a balanced band. */
@media(min-width:701px){
  .trustbar__list li{justify-content:center}
}

@media(max-width:700px){
  .trustbar__list li{padding:4px 12px;gap:10px}
  .trustbar__list li:first-child{padding-left:0}
  .trustbar__list li:last-child{padding-right:0}
}
@media(max-width:400px){
  .trustbar__list li{font-size:.82rem;padding:4px 9px}
  .trustbar__ico svg{width:19px;height:19px}
}

/* ==========================================================================
   HERO BUTTONS
   ========================================================================== */
.hero .btn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-pill);
  font-weight:600;letter-spacing:.005em;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,background .28s ease,color .28s ease,border-color .28s ease;
}
.hero .btn:hover{transform:translateY(-2px)}
.hero .btn:active{transform:translateY(0)}

/* --- primary: depth from a layered gradient, a hairline top highlight and a
       coloured shadow tinted to the button itself rather than plain black --- */
.hero .btn--cta{
  background:linear-gradient(160deg,#4cc250 0%,var(--cta) 42%,#2a8f2f 100%);
  color:#fff;border:0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 10px 22px -6px rgba(42,143,47,.55),
    0 2px 6px rgba(1,44,91,.10);
}
.hero .btn--cta:hover{
  background:linear-gradient(160deg,#57cf5b 0%,#35b03a 42%,#26802b 100%);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.16) inset,
    0 16px 30px -8px rgba(42,143,47,.6),
    0 3px 8px rgba(1,44,91,.12);
}
/* a specular sweep that crosses once on hover */
.hero .btn--cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.34) 46%,transparent 62%);
  transform:translateX(-120%);
}
.hero .btn--cta:hover::before{transform:translateX(120%);transition:transform .75s cubic-bezier(.3,.7,.3,1)}

/* --- secondary: frosted glass over the banner rather than flat white --- */
.hero .btn--white{
  background:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  color:var(--green);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -1px 0 rgba(1,44,91,.06) inset,
    0 8px 20px -8px rgba(1,44,91,.22);
}
.hero .btn--white:hover{
  background:rgba(255,255,255,.62);
  color:var(--green-deep);
  border-color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 12px 26px -8px rgba(1,44,91,.28);
}
/* no backdrop-filter (older Firefox): fall back to an opaque fill so the
   label never sits on bare photography */
@supports not (backdrop-filter:blur(2px)){
  .hero .btn--white{background:rgba(255,255,255,.92)}
}

.hero .btn svg{transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.hero .btn--cta:hover .btn__arrow{transform:translateX(4px)}
.hero .btn--white:hover svg{transform:scale(1.08)}

/* Reviews page — same card as the homepage slider, laid out as a grid */
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media(max-width:940px){.review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.review-grid{grid-template-columns:1fr}}
.review-grid .review{scroll-snap-align:none}

/* ==========================================================================
   PAGINATION FIX
   WooCommerce renders <nav class="woocommerce-pagination"><ul class="page-numbers">,
   so the bare `.page-numbers` selector was styling the LIST as well as the
   links inside it — giving the ul a white pill background, a border and a
   40px min-height stretched across the column.
   ========================================================================== */
ul.page-numbers{
  background:transparent;border:0;border-radius:0;
  min-width:0;height:auto;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  list-style:none;margin:34px 0 0;
}
ul.page-numbers li{margin:0}
.woocommerce-pagination li a.page-numbers,
.woocommerce-pagination li span.page-numbers,
li > a.page-numbers,
li > span.page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;font-size:.9rem;font-weight:600;color:var(--ink);
  transition:background var(--t),border-color var(--t),color var(--t);
}
.woocommerce-pagination li a.page-numbers:hover,
li > a.page-numbers:hover{background:var(--mint);border-color:var(--mint-deep);color:var(--green-deep)}
.woocommerce-pagination li span.current,
li > span.page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
.woocommerce-pagination{margin-top:8px}

/* The mega-menu item is hardcoded first in header.php, so a Home item added
   in Appearance → Menus landed behind it. WordPress tags the front-page item
   with `menu-item-home`, so the row can be ordered without restructuring the
   template or hardcoding any link. */
.nav > li{order:3}
.nav > li.menu-item-home{order:1}
.nav > li.has-mega{order:2}

/* ==========================================================================
   MEGA MENU — three columns
   At two columns the panel grew downward and would run off a laptop screen
   once the catalogue had a dozen categories. Three columns halves the height.
   The panel is now anchored to the header's content rails rather than to the
   nav item, so it can be wide without its right edge running off-screen when
   the item sits far along the row — which is what happens if you simply widen
   an item-anchored panel.
   ========================================================================== */
.header__inner{position:relative}
.nav > li.has-mega{position:static}

.mega{
  left:0;right:0;width:auto;
  max-width:none;
  padding:24px;
}
.mega__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px}

/* The hover bridge moves onto the panel: the nav item is no longer the
   positioning context, so its ::after would resolve against the header. */
.nav > li.has-mega::after{content:none}
/* The panel hangs off the header, not the nav item, so the dead zone a
   pointer crosses is the 14px offset PLUS the nav link's own bottom padding
   — 35px measured, not the 16px an item-anchored panel would have. The
   strip sits in that gap, below the links, so it bridges the crossing
   without covering anything clickable. The JS grace period on mouseleave
   already handles it; this is the backstop for a slow or diagonal move. */
.mega::before{
  content:"";position:absolute;left:0;right:0;top:-38px;height:38px;
}

@media(max-width:1180px){
  .mega__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Nav centred in the header. The shell takes the free space between the brand
   and the actions and centres its items inside it, so the row stays balanced
   as menu items are added or removed. */
.nav-shell{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.nav{flex:0 1 auto;justify-content:center;flex-wrap:wrap}
.header__actions{margin-left:0}

/* Belt and braces: the list itself must never take a hover state, whatever
   else matches it. */
ul.page-numbers:hover,
nav.woocommerce-pagination:hover{background:transparent;border-color:transparent}

/* WooCommerce puts BOTH classes on one element: <section class="related products">.
   A bare `.products` grid therefore laid out the section itself, making the
   "Related products" heading one grid cell and squashing the entire product
   list into the next. The grid belongs on the list; the section is a block. */
section.related,
section.up-sells,
section.cross-sells,
.related.products,
.up-sells.products{
  display:block;
  grid-template-columns:none;
  gap:0;
}
section.related > h2,
section.up-sells > h2{margin-bottom:22px}
.shop-layout section.related ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ==========================================================================
   PRODUCT CARD FOOTER — keep price and button on one row
   A variable product produces both a long price ("£510.00 – £2,200.00") and a
   long button label ("Select options") instead of a single price and "Add to
   cart". Together they overflowed the card and the flex row wrapped. The row
   no longer wraps: the button keeps its intrinsic width and the price takes
   what is left, wrapping within its own column if it must.
   ========================================================================== */
.pcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:nowrap;
}
.pcard__price{
  flex:1 1 auto;min-width:0;
  font-size:clamp(.88rem,2.6cqi,1.06rem);
  line-height:1.25;
}
/* the button must not be squeezed or broken mid-label */
li.product .button,
li.product .added_to_cart,
.pcard__add{
  flex:0 0 auto;white-space:nowrap;
}
/* a price range is two amounts and a dash — give it room to use two lines
   rather than forcing the button off the row */
.pcard__price .woocommerce-Price-amount{white-space:nowrap}
.pcard__price del,.pcard__price ins{display:inline}

/* Cards size from their own width, not the viewport, so a card in the narrow
   sidebar layout and one in the full-width grid both behave. */
li.product,.product-card{container-type:inline-size}

@container (max-width: 210px){
  .pcard__foot{gap:8px}
  li.product .button,.pcard__add{padding:8px 12px;font-size:.8rem}
}

/* ==========================================================================
   VARIABLE PRODUCT — add-to-cart row
   WooCommerce renders the attribute picker as a <table class="variations">,
   so its label and select are table cells that cannot align with the quantity
   stepper and button beside them — the two groups sat 11px out of line and
   the controls were three different heights. The table is flattened with
   display:contents so every control becomes a direct flex item on one row,
   and they are all given the same height.
   ========================================================================== */
:root{--ctl-h:50px}

.pdp form.cart,
.pdp form.variations_form{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px;margin:0 0 22px;
}

/* flatten the table into the flex row */
table.variations{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  width:auto;margin:0;border:0;background:transparent;
}
table.variations tbody,
table.variations tr{display:contents}
table.variations th,
table.variations td{
  display:flex;align-items:center;
  padding:0;border:0;background:transparent;width:auto;
}
table.variations th label{
  margin:0;white-space:nowrap;
  font-size:.86rem;font-weight:600;color:var(--ink-soft);
}

/* every control the same height, so the row reads as one object */
table.variations select,
.pdp .quantity,
.pdp .single_add_to_cart_button{height:var(--ctl-h)}

table.variations select{
  min-width:200px;width:auto;
  padding:0 42px 0 18px;
  border-radius:var(--radius-pill);border:1px solid var(--line);
  background-color:#fff;font-size:.93rem;cursor:pointer;
}
.pdp .quantity{border-radius:var(--radius-pill)}
.pdp .quantity .qty{padding:0 4px}
.pdp .qty-btn{height:calc(var(--ctl-h) - 2px)}
.pdp .single_add_to_cart_button{padding:0 28px;white-space:nowrap}

/* the wrap Woo puts the price and button in must not force a new row */
.single_variation_wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  width:auto;flex:1 1 auto;min-width:0;
}
.woocommerce-variation-add-to-cart{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;
}
/* the selected variation's own price sits above the row, not inside it */
.woocommerce-variation{flex:1 1 100%;order:-1}
.woocommerce-variation-price{margin:0 0 4px}
.woocommerce-variation-price .price{font-size:1.3rem;font-weight:700;color:var(--ink)}
.woocommerce-variation-availability{font-size:.86rem;color:var(--ink-soft)}

/* "Clear" sits under the picker rather than breaking the row */
.reset_variations{
  flex:0 0 auto;font-size:.82rem;color:var(--ink-soft);
  text-decoration:underline;margin-left:2px;
}
.reset_variations:hover{color:var(--green)}

@media(max-width:560px){
  :root{--ctl-h:46px}
  table.variations{width:100%}
  table.variations td{flex:1 1 auto}
  table.variations select{width:100%;min-width:0}
  /* buttons still hug their text — only the select stretches */
  .pdp .single_add_to_cart_button{width:auto}
}

/* The summary column is ~550px, and picker + quantity + button together
   exceed that — so the row wrapped at an arbitrary point depending on how
   long the attribute name happened to be. Give each group its own full-width
   row instead: predictable at every width, and nothing is cramped. */
.pdp form.variations_form > table.variations{flex:1 1 100%}
.pdp form.variations_form > .single_variation_wrap{flex:1 1 100%}
.pdp form.variations_form{row-gap:14px}
table.variations th{min-width:74px}

/* ==========================================================================
   SELECT CHEVRON
   The native arrow sits hard against the right edge, so the 42px of padding
   reserved for it left an obvious gap between the label text and the arrow.
   Suppress the native control and draw the chevron ourselves at a fixed
   offset, in the brand navy, consistent with the rest of the UI.
   ========================================================================== */
select,
table.variations select,
.woocommerce-ordering select,
.shop-bar select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23012c5b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  padding-right:40px;
}
/* IE/Edge legacy arrow */
select::-ms-expand{display:none}

table.variations select{padding:0 40px 0 18px}
select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(23,163,119,.13)}

/* a multi-select or a sized select still needs its own arrow suppressed but
   should not get the single-line padding */
select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:14px}

/* Safety net: a section or prose block that ends up with nothing in it
   collapses rather than reserving its padding above the footer. */
.section:empty,.prose:empty,.cart-page:empty,.account-page:empty{padding:0;margin:0;display:none}
.prose > p:empty:only-child{display:none}

/* ==========================================================================
   PRODUCT CARD IMAGE — fill the card
   The card image was object-fit:contain inside 16% padding, which letterboxed
   every photo and left a visible margin down both sides. It now covers the
   square, so the card reads as one solid block whatever shape the source
   image is. The gradient behind it still shows through a transparent PNG.
   ========================================================================== */
.pcard__media{
  aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(170deg,var(--mint) 0%,#fff 72%);
}
.pcard__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  padding:0;display:block;
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
li.product:hover .pcard__media img,
.product-card:hover .pcard__media img{transform:scale(1.06)}

/* WooCommerce's own placeholder is a line drawing on white — cropping it
   edge to edge looks like a mistake, so that one keeps breathing room. */
.pcard__media img[src*="woocommerce-placeholder"]{
  object-fit:contain;padding:14%;
}

/* ==========================================================================
   FOOTER — no top margin
   The margin showed the body background between the last section and the
   footer. Against a tinted section above and a dark footer below, that strip
   reads as an accidental white band rather than deliberate spacing. Sections
   already carry their own padding, so the footer butts straight on.
   ========================================================================== */
.site-footer{margin-top:0}
/* the last section before the footer keeps its own breathing room */
main > section:last-child,
main > .section:last-child{margin-bottom:0}