/* ===========================================================================
   Personal Wellness Store, design system
   Ships as pw-core/assets/pw.css. Mockups load the same file, so what you
   review here is literally what goes live.

   Body type uses the system stack on purpose: on Android that resolves to
   Roboto, already on the device. One webfont family (Montserrat, headings only)
   keeps the page light on Ghanaian mobile data.
   =========================================================================== */


:root{
  --navy:#061A3A;
  --blue:#0B3FA8;
  --blue-ink:#082E7A;
  --cta:#15803D;          /* 5.02:1 on white, passes WCAG AA at any size */
  --cta-dark:#116B33;
  --amber:#F59E0B;
  --amber-bg:#FEF3C7;
  --amber-ink:#92400E;

  --ink:#0F172A;
  --body:#475569;
  --soft:#64748B;
  --line:#E4E9F0;
  --bg:#F7F9FC;
  --white:#fff;

  --sh-sm:0 1px 2px rgba(15,23,42,.05),0 4px 12px rgba(15,23,42,.05);
  --sh:0 2px 4px rgba(15,23,42,.04),0 12px 28px rgba(15,23,42,.08);
  --sh-lg:0 8px 16px rgba(15,23,42,.07),0 24px 48px rgba(15,23,42,.14);

  --r-sm:10px; --r:14px; --r-lg:20px;
  --wrap:1200px;
  --hdr:64px;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'Montserrat',var(--sans);
}

/* Element rules are scoped to .pw-body so this stylesheet can never reach a
   page it was not loaded for. Inside .pw-woo they are handed back to
   WooCommerce, see the compatibility block at the end of this file. */
.pw-body *,.pw-body *::before,.pw-body *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pw-body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
.pw-body img{max-width:100%;display:block}
.pw-body a{color:inherit}
.pw-body h1,.pw-body h2,.pw-body h3,.pw-body h4{font-family:var(--display);
  font-weight:800;line-height:1.16;margin:0;letter-spacing:-.02em}
.pw-body h1{font-size:clamp(29px,4.4vw,45px)}
.pw-body h2{font-size:clamp(25px,3.4vw,35px)}
.pw-body h3{font-size:clamp(19px,2vw,22px);font-weight:700}
/* :where() drops this reset to 0,1,0. Written as `.pw-body p` (0,1,1) it
   silently beat every single-class paragraph rule after it. Measured on the
   live product page: .paynote, .helpline, .card__cat, .card__desc and .price
   all computed margin 0. At 0,1,0 those later class rules win on source order,
   and the reset still beats the theme's bare `p` (0,0,1).
   Deliberately NOT done for `a`: the theme's `a:hover` is 0,1,1 and would then
   start recolouring links on hover. */
.pw-body :where(p){margin:0}
.pw-body :focus-visible{outline:3px solid #7FB0FF;outline-offset:2px;border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px;width:100%}
.sec{padding-block:clamp(40px,5.5vw,68px)}
.sec--bg{background:var(--bg)}
.sec__head{text-align:center;max-width:660px;margin:0 auto clamp(26px,3vw,38px)}
.sec__head p{color:var(--body);font-size:clamp(16px,1.6vw,19px);margin-top:12px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue)}

/* ---------- buttons ---------- */
/* Every button colour is written as `.pw-body .btn…` on purpose.
   `.pw-body a{color:inherit}` has specificity 0,1,1 and would otherwise beat a
   bare `.btn--ghost` at 0,1,0. Inside `.band`, which sets color:#fff, that made
   the ghost button white text on a white background: invisible. */
.pw-body .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:17px;line-height:1;
  padding:15px 28px;border-radius:var(--r-sm);border:1.5px solid transparent;
  background:var(--cta);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .16s,transform .16s,box-shadow .16s}
.pw-body .btn:hover{background:var(--cta-dark);color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(21,128,61,.26)}
.pw-body .btn:active{transform:translateY(0)}
.pw-body .btn--lg{font-size:19px;padding:18px 34px}
.pw-body .btn--block{width:100%}
/* On the dark green band, white fill with dark green text: 8.6:1. */
.pw-body .btn--ghost{background:#fff;color:var(--cta-dark);border-color:transparent}
.pw-body .btn--ghost:hover{background:#EAF3EC;color:var(--cta-dark);box-shadow:var(--sh-sm)}
.pw-body .btn--wa{background:#1EA855;color:#fff}
.pw-body .btn--wa:hover{background:#17823F;color:#fff}
.pw-body .btn--quiet{background:transparent;color:var(--body);border-color:var(--line)}
.pw-body .btn--quiet:hover{background:var(--bg);color:var(--ink);box-shadow:none}

/* ---------- announcement + header ---------- */
.topbar{background:var(--navy);color:#C3D3EC;font-size:14.5px;text-align:center;
  padding:9px 16px}
.topbar strong{color:#fff}
@media(max-width:600px){.topbar{font-size:13px}}

.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.hdr.is-stuck{box-shadow:0 2px 16px rgba(15,23,42,.09)}
.hdr__in{display:flex;align-items:center;gap:20px;height:var(--hdr);
  max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand img{width:36px;height:36px;border-radius:9px}
.brand b{font-family:var(--display);font-size:19px;color:var(--ink);white-space:nowrap}
.nav{display:flex;gap:24px;margin-inline:auto}
.nav a{font-weight:600;font-size:16px;color:var(--body);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--cta)}
.hdr__act{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr__tel{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:16px;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.hdr__tel span{color:var(--soft);font-weight:500;font-size:13px;display:block}
.burger{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;color:var(--ink)}
.burger .pw-i{font-size:22px;display:block;line-height:1}

/* ---------- header cart ----------
   Buy Now jumps people past the cart page, so the badge is how a shopper
   notices a second item went in, and the panel is where they check the order
   before paying. */
.pw-cart{position:relative;flex:0 0 auto}
.pw-cart__btn{position:relative;display:grid;place-items:center;width:42px;height:42px;
  background:none;border:1.5px solid var(--line);border-radius:11px;cursor:pointer;
  color:var(--ink);transition:border-color .15s,background .15s}
.pw-cart__btn:hover{border-color:#C7D3E5;background:var(--bg)}
.pw-cart__btn .pw-i{font-size:18px;line-height:1;color:var(--ink)}
.pw-cart__n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  background:var(--cta);color:#fff;border-radius:999px;font-size:12px;font-weight:800;
  display:grid;place-items:center;line-height:1;border:2px solid #fff}

.pw-cart__panel{position:absolute;right:0;top:calc(100% + 12px);width:min(92vw,340px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:16px;z-index:96}
.pw-cart__panel[hidden]{display:none}
.pw-cart__head{font-family:var(--display);font-weight:800;font-size:16px;margin-bottom:12px}
.pw-cart__empty{color:var(--soft);font-size:15px;margin-bottom:14px}
.pw-cart__items{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px;
  max-height:min(46vh,300px);overflow-y:auto}
.pw-cart__items li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.pw-cart__items img{width:44px;height:44px;object-fit:contain;background:#F2F6FB;
  border-radius:8px;mix-blend-mode:multiply}
.pw-cart__items b{display:block;font-size:14px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-cart__items span{font-size:13px;color:var(--soft)}
.pw-cart__items em{font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.pw-cart__tot{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--line);padding-top:12px;font-size:15px}
.pw-cart__tot b{font-family:var(--display);font-size:20px}
.pw-cart__note{font-size:13px;color:var(--soft);margin:6px 0 12px}
.pw-cart__link{display:block;text-align:center;margin-top:10px;font-size:14px;
  color:var(--body);text-decoration:underline}
.pw-cart__link:hover{color:var(--cta)}
@media(max-width:520px){
  .pw-cart__panel{position:fixed;right:10px;left:10px;width:auto;top:auto;
    bottom:10px;max-height:76vh;overflow-y:auto}
}

/* ---------- back bar (cart <-> checkout) ---------- */
.pw-backbar{border-bottom:1px solid var(--line);background:var(--bg)}
.pw-backbar .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-block:12px}
.pw-back{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;
  color:var(--ink);text-decoration:none}
.pw-back .pw-i{font-size:13px;line-height:1}
.pw-back:hover{color:var(--cta)}
.pw-back--quiet{margin-left:auto;font-weight:500;color:var(--soft)}

@media(max-width:920px){
  /* closed = display:none, never a transform off-screen: a parked panel widens
     the document and causes sideways scroll on phones */
  .nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;
    flex-direction:column;gap:0;margin:0;padding:80px 22px 22px;z-index:95;
    box-shadow:-10px 0 44px rgba(15,23,42,.2);display:none}
  .nav.is-open{display:flex;animation:fade .2s ease}
  .nav a{font-size:18px;padding:14px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hdr__tel span{display:none}
}
@media(max-width:520px){.hdr__tel{font-size:0}.hdr__tel .pw-i{font-size:18px}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.scrim{position:fixed;inset:0;background:rgba(6,26,58,.5);z-index:90;
  opacity:0;visibility:hidden;transition:opacity .22s}
.scrim.is-open{opacity:1;visibility:visible}

/* ---------- hero with background video ----------
   Layers, bottom to top: the poster still (paints instantly), the video, the
   brand gradient as a tint, then the text. The tint is the same navy to blue
   gradient the hero always had, laid over the video.

   Tint strength comes from measuring the video, not guessing: across all 145
   frames the brightest 10% of pixels peak at luma 218 of 235, near white
   (sunlit wall and sky). Over that, the lightest corner of the tint (76% blue)
   still gives the headline 5.4:1, the lede 4.9:1 and the small print 4.6:1,
   all above the 4.5:1 AA line. Any lighter and the small print fails.

   The clip is portrait (448x672), so a wide desktop hero shows only a
   horizontal slice of it. 38% from the top keeps the faces and the parcel in
   that slice; plain centre lands on the box and cuts the smiles off. The
   poster uses the same position so nothing jumps when the video fades in. */
.pw-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background-color:var(--navy);background-size:cover;background-position:center 38%;
  padding-block:clamp(56px,8vw,112px)}
.pw-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;z-index:-2;opacity:0;transition:opacity .7s ease}
.pw-hero__media.is-playing{opacity:1}
.pw-hero__tint{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(155deg,rgba(6,26,58,.86) 0%,rgba(11,63,168,.76) 100%)}
.pw-hero h1,.pw-hero__lede{text-shadow:0 1px 14px rgba(6,26,58,.35)}
.pw-hero__content{position:relative;text-align:center;max-width:820px}
.pw-hero .eyebrow{color:#9CC0FF}
.pw-hero h1{color:#fff;margin:14px 0 0;text-wrap:balance}
/* Written as `.pw-body .pw-hero__…` on purpose. `.pw-body p{margin:0}` is 0,1,1
   and beat the bare classes (0,1,0): the lede lost its auto margins, so it sat
   left of the centred headline, and the spacing between headline, lede, button
   and small print collapsed. This still works under older builds of pw.css,
   where that reset has the higher specificity. */
.pw-body .pw-hero__lede{color:#F1F5FC;font-size:clamp(16px,1.8vw,20px);
  margin:16px auto 26px;max-width:620px;text-wrap:pretty}
.pw-body .pw-hero__lede strong{color:#fff}
.pw-body .pw-hero__fine{color:#E6EEFA;font-size:14.5px;margin:18px 0 0}
@media(prefers-reduced-motion:reduce){.pw-hero__media{display:none}}

/* ---------- bundle discount ----------
   Green because it is a saving, matching the "sold" tag. #14532D on #DCFCE7
   measures 8.3:1. Paragraph rules are written `.pw-body .x` so they hold under
   older builds of the `p` reset too. */
.pw-body .pw-offer{display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;
  padding:11px 14px;border-radius:var(--r-sm);background:#DCFCE7;color:#14532D;
  font-size:15px;font-weight:600;line-height:1.45}
.pw-offer .pw-i{font-size:15px;margin-top:3px;flex:0 0 auto}
/* Under a section heading: pulled up into the heading's bottom margin so it
   reads as part of the heading, not as a separate block. */
.pw-body .pw-offer--center{width:fit-content;max-width:100%;
  margin:calc(-1 * clamp(8px,1.4vw,16px)) auto clamp(22px,2.6vw,32px)}
.pw-offerbar{background:#DCFCE7;color:#14532D;border-bottom:1px solid #BBF7D0}
.pw-offerbar .wrap{display:flex;align-items:center;justify-content:center;gap:9px;
  padding-block:11px;font-size:15px;font-weight:600;text-align:center}
.pw-offerbar strong{font-weight:800}
.pw-cart__tot--save{border-top:0;padding-top:6px;color:#14532D}
.pw-cart__tot--save b{font-size:17px;color:#14532D}
.pw-cart__tot--total b{font-size:20px}
.pw-body .pw-cart__nudge{display:flex;gap:7px;align-items:center;margin:8px 0 0;
  padding:8px 10px;border-radius:8px;background:#F0FDF4;color:#14532D;
  font-size:13px;font-weight:600}

/* ---------- trust bar ---------- */
.trust{background:var(--blue-ink);color:#fff}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  list-style:none;margin:0;padding:18px 0}
.trust li{display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:left;font-size:15.5px;font-weight:600;padding:8px}
.trust .pw-i{font-size:21px;flex:0 0 auto;color:#8FB6FF;width:24px;text-align:center}
.trust small{display:block;font-weight:400;color:#A9C4EC;font-size:13.5px}
@media(max-width:860px){
  .trust ul{grid-template-columns:repeat(2,1fr);gap:4px}
  .trust li{font-size:14px}
  .trust small{display:none}
}

/* ---------- product cards ---------- */
/* auto-fit, not auto-fill: with 3 products auto-fill reserves a 4th empty
   column and the row stops short of the container. */
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid--cap{max-width:1060px;margin-inline:auto}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:#D3DCEA}
.card__media{position:relative;display:block;background:#F2F6FB;padding:18px}
.card__media img{aspect-ratio:1;object-fit:contain;width:100%;mix-blend-mode:multiply}
.tag{position:absolute;top:12px;left:12px;background:var(--amber-bg);color:var(--amber-ink);
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px}
.tag--sold{left:auto;right:12px;background:#DCFCE7;color:#14532D}
.card__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card__cat{font-size:13px;font-weight:600;color:var(--soft);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:6px}
.card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em}
.card__desc{color:var(--body);font-size:15.5px;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3em}
.card__foot{margin-top:auto;padding-top:16px}
.price--ask{font-size:20px;color:var(--soft);font-family:var(--sans);font-weight:700}

.price{font-family:var(--display);font-weight:800;font-size:29px;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.price small{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--soft)}
.card__link{display:block;text-align:center;margin-top:10px;font-size:14.5px;
  color:var(--soft);text-decoration:none}
.card__link:hover{color:var(--cta);text-decoration:underline}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:28px}
.chip{font:600 15px/1 var(--sans);padding:11px 18px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--body);cursor:pointer;
  transition:all .15s}
.chip:hover{border-color:#C7D3E5;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- product hero (single product / landing) ---------- */
.ph{padding-block:clamp(22px,3vw,40px)}
.ph__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.5vw,52px);align-items:start}
@media(max-width:960px){.ph__in{grid-template-columns:1fr;gap:26px}}

.gal__main{background:#F2F6FB;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;position:relative}
.gal__main img{aspect-ratio:1;object-fit:contain;width:100%;mix-blend-mode:multiply}
.gal__thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:11px}
.gal__thumbs button{background:#F2F6FB;border:2px solid transparent;border-radius:var(--r-sm);
  padding:5px;cursor:pointer;transition:border-color .15s}
.gal__thumbs button[aria-current="true"]{border-color:var(--cta)}
.gal__thumbs img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;width:100%}
/* A grid or flex track will not shrink below its content's intrinsic width
   unless told to, and an image's intrinsic width is its pixel width. Without
   these the six thumbnails push the page sideways on a phone. */
.ph__in,.ph__in>*,.gal,.gal__main,.gal__thumbs,.gal__thumbs button{min-width:0}
.gal__main img{max-width:100%}
@media(max-width:520px){.gal__thumbs{grid-template-columns:repeat(5,1fr)}}

.buybox{position:sticky;top:calc(var(--hdr) + 16px)}
@media(max-width:960px){.buybox{position:static}}
.rating{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--body);margin-bottom:12px}
.stars{color:var(--amber);letter-spacing:1px}
.ph h1{margin-bottom:12px}
.ph__sub{color:var(--body);font-size:17.5px;margin-bottom:18px}
.pricebox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.pricebox b{font-family:var(--display);font-size:clamp(33px,4vw,43px);color:var(--ink)}
.pricebox span{font-size:15px;font-weight:600;color:var(--cta);background:#DCFCE7;
  padding:5px 10px;border-radius:999px}
.paynote{color:var(--soft);font-size:15px;margin-bottom:20px}
.bullets{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.bullets li{display:flex;gap:10px;font-size:16.5px;color:var(--body);line-height:1.5}
.bullets .pw-i{font-size:15px;flex:0 0 auto;margin-top:4px;color:var(--cta);width:18px;text-align:center}
.bullets strong{color:var(--ink)}
.buyrow{display:grid;gap:10px;margin-bottom:14px}
.assure{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:var(--soft);
  border-top:1px solid var(--line);padding-top:16px}
.assure span{display:inline-flex;align-items:center;gap:6px}
/* WhatsApp is a support channel, never an ordering one, so it appears as a
   quiet text link here, not as a second button competing with Buy Now. */
/* Left aligned to match the price, bullets and button it sits under. Centring
   one line in a left aligned column reads as a mistake. */
.helpline{font-size:15px;color:var(--soft);margin:12px 0 18px;text-align:left}
.helpline a{color:var(--body);font-weight:600;text-decoration:underline}
.helpline a:hover{color:var(--cta)}

/* ---------- content blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split img,.split video{border-radius:var(--r-lg);background:#F2F6FB;width:100%}
/* product shots are cut-outs on white, multiply drops the white box out and
   the fixed ratio stops a tall infographic dominating the row */
.split img{aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;padding:14px}
.prose{color:var(--body);font-size:17.5px}
/* Headings carry margin:0 globally, which leaves product descriptions with
   their subheadings jammed onto the following sentence. */
.prose h2{font-size:clamp(22px,2.6vw,28px);color:var(--ink);margin:34px 0 12px}
.prose h3{font-size:20px;color:var(--ink);margin:28px 0 10px}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0 0;padding-left:20px}
.prose li{margin-bottom:9px}

.feats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.feat__ico{font-size:25px;margin-bottom:10px}
.feat h3{font-size:18px;margin-bottom:7px}
.feat p{color:var(--body);font-size:15.5px}

.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.step b{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);
  font-size:18px;margin-bottom:12px}
.step p{color:var(--body);font-size:16px;margin-top:6px}

/* ---------- how it works video ---------- */
.pw-video{max-width:840px;margin-inline:auto}
.pw-video video{width:100%;border-radius:var(--r-lg);background:#000;display:block}
.pw-video__embed{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#000}
/* oEmbed returns a fixed-size iframe; this makes it responsive. */
.pw-video__embed iframe,
.pw-video__embed object,
.pw-video__embed embed{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
.pw-video__embed .wp-video,
.pw-video__embed .wp-video-shortcode{width:100%!important;max-width:100%!important}

.specs{width:100%;border-collapse:collapse;font-size:16px}
.specs th,.specs td{text-align:left;padding:13px 4px;border-bottom:1px solid var(--line)}
.specs th{color:var(--soft);font-weight:600;width:45%}
.specs td{color:var(--ink);font-weight:600}

/* ---------- reviews ---------- */
.quotes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column}
.quote blockquote{margin:10px 0 0;font-size:16px;color:var(--ink)}
.quote cite{margin-top:auto;padding-top:14px;font-style:normal;font-size:14.5px}
.quote cite b{display:block;color:var(--ink)}
.quote cite span{color:var(--soft)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:#14532D;background:#DCFCE7;padding:4px 8px;border-radius:999px;margin-top:10px;
  align-self:flex-start}

/* ---------- faq ---------- */
.faq{max-width:780px;margin-inline:auto}
.q{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.q summary{font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink);
  padding:17px 52px 17px 18px;cursor:pointer;list-style:none;position:relative}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:25px;font-weight:400;color:var(--cta);line-height:1}
.q[open] summary::after{content:"\2212"}
.q__a{padding:0 18px 18px;color:var(--body);font-size:16.5px}

/* ---------- cta band ---------- */
.band{background:linear-gradient(155deg,var(--navy),var(--blue));color:#fff;text-align:center}
.band h2{color:#fff}
.band p{color:#C3D3EC;max-width:600px;margin:14px auto 24px;font-size:clamp(16px,1.7vw,19px)}
.band .btn--ghost{background:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--navy);color:#9FB6D6;font-size:15.5px;padding:52px 0 24px}
.ftr__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
@media(max-width:880px){.ftr__cols{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:480px){.ftr__cols{grid-template-columns:1fr}}
.ftr img{width:38px;height:38px;border-radius:9px;margin-bottom:12px}
.ftr b.ftr__name{display:block;color:#fff;font-family:var(--display);font-size:18px;margin-bottom:8px}
.ftr h4{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:#7FA8E0;margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr a{color:#C3D3EC;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__bot{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#7E97BC;font-size:14.5px}
@media(max-width:600px){.ftr__bot{justify-content:center;text-align:center}}

/* ---------- sticky mobile buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:85;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(15,23,42,.13);
  padding:10px 14px;display:none;gap:12px;align-items:center;
  transform:translateY(115%);transition:transform .24s ease;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.buybar.is-on{transform:none}
.buybar__p{flex:0 0 auto;line-height:1.15}
.buybar__p b{font-family:var(--display);font-size:20px;display:block;color:var(--ink)}
.buybar__p span{font-size:12.5px;color:var(--soft)}
.buybar .btn{flex:1}
@media(max-width:860px){.buybar{display:flex}}

/* ---------- motion (JS-gated so a script failure never hides content) ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pw-body *{transition:none!important;animation:none!important}
  .js .rv{opacity:1;transform:none}
}

/* ===========================================================================
   WooCommerce compatibility
   ---------------------------------------------------------------------------
   Cart, checkout and My Account keep the site header and footer, but the
   markup between them belongs to WooCommerce. Everything inside .pw-woo hands
   the generic rules back so Woo renders exactly as it designed itself, the
   chrome is ours, the commerce markup is theirs.

   `revert` returns a property to the browser/user-agent value rather than to
   `initial`, so Woo's own stylesheet still applies normally on top.
   =========================================================================== */
.pw-woo{max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,4vw,48px) 20px}
.pw-woo a{color:revert}
.pw-woo p{margin:revert}
.pw-woo img{display:revert}
.pw-woo h1,.pw-woo h2,.pw-woo h3,.pw-woo h4{
  font-family:revert;font-weight:revert;line-height:revert;letter-spacing:revert;margin:revert}
/* Only the page title keeps our display face, so the page still feels ours. */
.pw-woo > h1:first-child{font-family:var(--display);font-weight:800;letter-spacing:-.02em}

/* Class names we share with WooCommerce. Ours must not win inside Woo markup. */
.pw-woo .price,
.pw-woo .btn,
.pw-woo .card,
.pw-woo .grid,
.pw-woo .wrap,
.pw-woo .nav,
.pw-woo .tag,
.pw-woo .quote,
.pw-woo .stars,
.pw-woo .chip{all:revert}

/* ---------------------------------------------------------------------------
   WooCommerce block styling.

   These class names were read off the rendered cart, not guessed: this store
   runs the BLOCK cart and checkout, where buttons are .wp-block-button__link
   rather than the classic .button, and the product price carries a bare .price
   that the revert rule above would otherwise strip back to browser defaults.
   --------------------------------------------------------------------------- */

/* Buttons. Without this they inherit a dark pill with blue link text, which is
   close to unreadable. */
.pw-woo .wp-block-button__link,
.pw-woo .button,
.pw-woo button.wc-block-components-checkout-place-order-button,
.pw-woo .wc-block-components-button:not(.is-link){
  background:var(--cta)!important;color:#fff!important;border:0;
  border-radius:var(--r-sm)!important;font-family:var(--sans);font-weight:700;
  font-size:16px;padding:14px 26px;line-height:1.2;text-decoration:none;
  box-shadow:none;transition:background .16s}
.pw-woo .wp-block-button__link:hover,
.pw-woo .button:hover,
.pw-woo button.wc-block-components-checkout-place-order-button:hover,
.pw-woo .wc-block-components-button:not(.is-link):hover{
  background:var(--cta-dark)!important;color:#fff!important}

/* Links. Browser blue on a storefront reads as unstyled. */
.pw-woo a{color:var(--cta);text-decoration:none}
.pw-woo a:hover{color:var(--cta-dark);text-decoration:underline}

/* Product tiles in Woo's own grids, matched to our cards. */
.pw-woo .wc-block-grid__products{gap:24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));list-style:none;margin:0;padding:0}
.pw-woo .wc-block-grid__product{background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;margin:0;max-width:none;text-align:center;
  box-shadow:var(--sh-sm);transition:transform .2s,box-shadow .2s}
.pw-woo .wc-block-grid__product:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pw-woo .wc-block-grid__product-image img{aspect-ratio:1;object-fit:contain;
  mix-blend-mode:multiply;width:100%}
.pw-woo .wc-block-grid__product-title{font-family:var(--display);font-weight:700;
  font-size:17px;line-height:1.3;color:var(--ink);margin:12px 0 6px}
.pw-woo .wc-block-grid__product-title a{color:var(--ink)}
.pw-woo .wc-block-grid__product-price{font-family:var(--display);font-weight:800;
  font-size:21px;color:var(--ink);display:block;margin-bottom:12px}

/* ---- cart and checkout on small screens ----
   WooCommerce's block cart is already responsive, and an earlier attempt here
   to re-lay-out the line item rows broke it: forcing the row to a grid dropped
   the total on top of the product name, and the wider-than-viewport row was
   then centred by the wrapper's auto margins, clipping text off BOTH edges.
   Woo owns this layout. We only set the things it cannot know about. */
.pw-woo{padding-inline:16px}
@media(max-width:600px){ .pw-woo{padding-inline:12px} }

/* WooCommerce's cart and checkout blocks carry .alignwide, a Gutenberg class
   that uses negative margins to break a block out of its container. Inside our
   wrapper that dragged the whole cart 66px off the left edge, clipping text
   without ever making the page wider, which is why a width-only check missed
   it. The wrapper already handles width, so the break-out is cancelled. */
.pw-woo .alignwide,
.pw-woo .alignfull,
.pw-woo .wp-block-woocommerce-cart,
.pw-woo .wp-block-woocommerce-checkout{
  margin-left:0!important;margin-right:0!important;
  width:auto!important;max-width:100%!important;left:auto!important}

/* Nothing inside may exceed the viewport. min-width:0 lets grid and flex
   children actually shrink, which max-width alone does not do. */
.pw-woo,.pw-woo *{min-width:0}
.pw-woo img,.pw-woo table,.pw-woo iframe{max-width:100%}
.pw-woo table{width:100%}

/* 16px stops iOS Safari zooming the page in when a field takes focus. */
.pw-woo input,.pw-woo select,.pw-woo textarea{font-size:16px;max-width:100%}

@media(max-width:781px){
  /* Full width actions read better than half width ones on a phone. */
  .pw-woo .wp-block-button__link,
  .pw-woo .wc-block-cart__submit-button,
  .pw-woo .wc-block-components-checkout-place-order-button{width:100%;text-align:center}
  /* Woo's own product grid, two up rather than four. */
  .pw-woo .wc-block-grid__products{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px}
  .pw-woo .wc-block-grid__product{padding:12px}
  .pw-woo .wc-block-grid__product-title{font-size:15px}
  .pw-woo .wc-block-grid__product-price{font-size:18px}
}

/* The empty cart illustration is enormous by default. */
.pw-woo .wc-block-cart__empty-cart__title{font-family:var(--display);font-size:24px}
.pw-woo .with-empty-cart-icon::before,
.pw-woo .wc-block-cart__empty-cart__title::before{max-width:96px;margin-inline:auto}
.pw-woo .wc-block-cart__empty-cart__title img,
.pw-woo .wc-block-cart__empty-cart__title svg{max-width:96px;height:auto;margin-inline:auto}

/* A reassurance strip under the checkout: the last thing read before paying. */
.pw-cod{max-width:var(--wrap);margin:0 auto clamp(20px,4vw,40px);padding:0 20px}
.pw-cod ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
  list-style:none;margin:0;padding:0}
.pw-cod li{display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  font-size:15.5px;font-weight:600;color:var(--ink)}
.pw-cod .pw-i{font-size:18px;flex:0 0 auto;color:var(--cta);width:22px;text-align:center}