/*
Theme Name: Jiden Breast Pump, WBJ Child
Template: hello-elementor
Author: Workflows by Josh
Author URI: https://workflowsbyjosh.com
Description: Custom child theme for Jiden Nigeria. Coded page templates and WooCommerce overrides. Built by Workflows by Josh.
Version: 1.8.2
Requires PHP: 7.4
Text Domain: jiden-child
*/

/* ============================================================
   JIDEN DESIGN SYSTEM
   Merged from the twelve approved HTML designs, rule-level
   deduplicated. Do not edit page CSS in Elementor: it lives here.
   ============================================================ */

/* ============ INHERITED FROM THE PROTOTYPE. DO NOT DIVERGE ============ */
:root{
  --white:#ffffff; --ink:#0A0A0A; --navy:#001538; --blue:#003182;
  --sky:#C3EAFB; --sky-soft:#EAF6FD; --gold:#D3AA12;
  --mid:#4A4F58; --muted:#8A9099; --line:#E9EDF1;
  --grad:linear-gradient(120deg,#001538 0%,#003182 100%);
  --f:'Nobile',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);font-weight:400;overflow-x:hidden;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--f);font-weight:700;line-height:1.1;letter-spacing:-0.015em}
h2{font-size:1.9rem}
em{font-style:italic;font-weight:700;color:var(--blue)}
p{color:var(--mid)}
.tag{font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:16px}
.tag.sky{color:var(--blue)}
.rule{width:44px;height:3px;background:var(--gold);margin:0 0 26px}
.rule.c{margin:0 auto 26px}
section{padding:64px 0}
.sh{margin-bottom:34px}
.sh.center{text-align:center}
.sh h2{font-size:1.9rem}
.sh .lead{font-size:1rem;max-width:62ch;margin-top:14px}
.sh.center .lead{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;padding:15px 28px;background:var(--navy);color:#fff;border:1px solid var(--navy);cursor:pointer;transition:.2s;text-align:center}
.btn:hover{background:#fff;color:var(--navy)}
.btn.full{display:flex;width:100%}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn.gold:hover{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn.onsky{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.onsky:hover{background:#fff;color:var(--navy)}
.btn.lg{padding:18px 28px;font-size:0.74rem}
.btn.sm{padding:12px 18px;font-size:0.6rem}
.marq{background:var(--grad);color:#fff;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase}
.marq .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 22px;flex-wrap:wrap}
.marq span{color:#fff;white-space:nowrap}
.marq i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto}
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-in .logo img{height:22px;width:auto}
.nav-links{display:none}
.nav-r{display:flex;align-items:center;gap:14px}
.icon{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7}
.cart-wrap{position:relative}
.cart-n{position:absolute;top:-7px;right:-8px;background:var(--gold);color:#fff;font-size:0.56rem;font-weight:700;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.trust{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.trust i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.vals{display:grid;gap:2px;background:var(--line);grid-template-columns:1fr}
.val{background:#fff;padding:32px 24px}
.vwrap{background:var(--navy);aspect-ratio:9/16;max-width:340px;margin:0 auto;border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vwrap iframe{width:100%;height:100%;border:0;display:block}
.vwrap span{color:rgba(255,255,255,.5);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;text-align:center;padding:0 20px}
.tm{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:40px}
.tcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);padding:26px 24px}
.stars{color:var(--gold);font-size:1rem;letter-spacing:4px;margin-bottom:14px}
.tcard q{display:block;font-size:0.94rem;color:var(--ink);line-height:1.6;quotes:none}
.tcard cite{display:block;font-style:normal;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:16px;font-weight:700}
.vids{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vids figure{margin:0}
.vids figcaption{font-size:0.72rem;color:var(--muted);margin-top:8px;text-align:center}
.vids .vwrap{max-width:100%}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;display:flex;flex-direction:column}
.card .ph{position:relative;background:var(--sky-soft);aspect-ratio:1/1;overflow:hidden}
/* contain across all product imagery, v1.6.0. Same reason as the gallery: product
   shots are not all square, and cover silently crops whatever is not. Lifestyle
   photos and video stills below keep cover, where filling the frame is the point. */
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .pill{position:absolute;top:10px;left:10px;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;padding:4px 9px}
.card .pill.gold{background:var(--gold);color:var(--navy)}
.card .pill.navy{background:var(--navy);color:#fff}
.card .pill.sky{background:var(--sky);color:var(--navy)}
.card h3{font-size:0.9rem;line-height:1.3;margin:16px 0 6px}
.card .cd{font-size:0.78rem;color:var(--mid);margin-bottom:12px;flex:1}
.card .cp{font-family:var(--f);font-weight:700;font-size:1.15rem;color:var(--navy);display:block;margin-bottom:14px}
.card .cp s{font-size:0.78rem;color:var(--muted);font-weight:400;margin-right:7px}
.faq{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 34px 20px 0;position:relative;font-size:0.95rem;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:16px;color:var(--gold);font-size:1.3rem;font-weight:700}
.faq details[open] summary:after{content:"\2013"}
.faq .a{padding:0 0 22px;font-size:0.9rem}
.faq .a p{margin-bottom:10px}
.faq .a p:last-child{margin-bottom:0}
.faq .a b{color:var(--ink)}
.faq .a a{color:var(--blue);font-weight:700;border-bottom:1px solid var(--gold)}
.faqmore{text-align:center;margin-top:34px}
.cta{background:var(--grad);text-align:center}
.cta h2{color:#fff;font-size:1.9rem;max-width:20ch;margin:0 auto 18px}
.cta h2 em{color:var(--sky)}
.cta p{color:rgba(255,255,255,.78);max-width:46ch;margin:0 auto 24px;font-size:0.98rem}
.cta .btn{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.cta .btn:hover{background:transparent;color:#fff;border-color:#fff}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta .btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
footer{background:var(--grad);color:rgba(255,255,255,.62);padding:52px 0 0}
footer .logo img{height:20px;filter:brightness(0) invert(1);margin-bottom:14px}
footer p{font-size:0.84rem;color:rgba(255,255,255,.6)}
.fg{display:grid;gap:28px;padding-bottom:34px}
footer h4{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:#fff;margin-bottom:14px;font-weight:700}
footer ul{list-style:none}
footer li{margin-bottom:9px;font-size:0.84rem}
footer a:hover{color:var(--sky)}
.socials{display:flex;gap:12px;margin-bottom:14px}
.socials svg{width:17px;height:17px;fill:rgba(255,255,255,.75)}
.socials a:hover svg{fill:var(--sky)}
.fbar{border-top:1px solid rgba(255,255,255,.16);padding:18px 0 28px;font-size:0.72rem;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* ============ HOMEPAGE ONLY ============ */

/* 1. HERO. Type and colour only. No slider, no hero image, per manifest section 4 */
.hero{padding:44px 0 56px;text-align:center;border-bottom:1px solid var(--line)}
.hero .hgrid{display:flex;flex-direction:column;gap:34px}
.hero .hpic{margin:0;position:relative}
.hero .hpic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:3px;background:var(--sky-soft)}
.hero .hpic figcaption{margin-top:12px;font-size:0.74rem;color:var(--muted);line-height:1.5}
.hero .hpic figcaption strong{display:block;color:var(--navy);font-size:0.8rem;margin-bottom:2px}
.hero h1{font-size:2.4rem;line-height:1.05;max-width:15ch;margin:0 auto 16px}
.hero .under{display:inline;background:linear-gradient(transparent 62%,var(--sky) 62%)}
.hero .alone{font-size:1.2rem;font-weight:700;color:var(--navy);max-width:24ch;margin:0 auto 20px;line-height:1.3}
.hero p{font-size:1rem;max-width:54ch;margin:0 auto 12px}
.hero .hbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* 2. SHOP BY PROBLEM. Hairline cells, six routes */
.probs{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
.prob{background:#fff;padding:28px 22px;display:flex;flex-direction:column;transition:.2s}
.prob:hover{background:var(--sky-soft)}
.prob h3{font-size:1.02rem;margin-bottom:9px;color:var(--navy)}
.prob p{font-size:0.87rem;margin-bottom:18px}
.prob .go{margin-top:auto;align-self:flex-start;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:3px}
/* 3. CATEGORIES. Type and colour only. There are no category images */
.cats{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
.cat{background:#fff;padding:26px 22px;display:flex;flex-direction:column;transition:.2s}
.cat:hover{background:var(--sky-soft)}
.cat .cn{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.cat h3{font-size:1.05rem;color:var(--navy);margin-bottom:9px}
.cat p{font-size:0.85rem}
.catall{text-align:center;margin-top:34px}
/* 4. BUNDLES. Real images, all four are in the manifest */
.sizenote{font-size:0.84rem;color:var(--muted);text-align:center;margin-top:28px;max-width:52ch;margin-left:auto;margin-right:auto}
.bundall{text-align:center;margin-top:22px}
/* 5. MEET ME. White feature band, one of only two photographs on the site */
.fw .wrap{display:flex;flex-direction:column;gap:32px}
.fw .fwimg{background:var(--sky-soft);border-radius:3px;overflow:hidden;aspect-ratio:1/1}
.fw .fwimg img{width:100%;height:100%;object-fit:cover}
.fw h2{margin-bottom:20px}
.fw .fwt p{font-size:0.97rem;margin-bottom:14px}
.fw .fwlead{font-size:1.12rem;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:18px}
.fw .fwlist{list-style:none;margin:0 0 22px;border-top:1px solid var(--line)}
.fw .fwlist li{position:relative;padding:10px 0 10px 26px;font-size:0.94rem;color:var(--mid);border-bottom:1px solid var(--line)}
.fw .fwlist li:before{content:"";position:absolute;left:0;top:19px;width:13px;height:2px;background:var(--gold)}
.fw .fwquote{margin:0 0 20px;padding:20px 0 20px 22px;border-left:3px solid var(--gold);font-size:1.16rem;font-weight:700;font-style:italic;color:var(--navy);line-height:1.4}
.fw .fwbuilt{font-weight:700;color:var(--navy);margin-bottom:14px}
.fw .fwthree{list-style:none;display:grid;gap:2px;background:var(--line);margin:0 0 22px}
.fw .fwthree li{background:var(--sky-soft);padding:14px 16px;font-size:0.9rem;color:var(--navy)}
.fw .fwthree strong{font-weight:700}
.fw .sig{font-size:0.84rem;color:var(--navy);font-weight:700;margin:24px 0 26px;padding-top:20px;border-top:1px solid var(--line)}
.vlead{text-align:center;font-size:1.05rem;font-weight:700;color:var(--navy);margin:0 0 26px}
@media(min-width:768px){
  .wrap{padding:0 40px}
  section{padding:96px 0}
  h2{font-size:2.4rem}
  .nav-in{padding:16px 40px}
  .nav-links{display:flex;gap:26px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
  .nav-links a:hover{color:var(--blue)}
  .hero{padding:76px 0 80px;text-align:left}
  .hero .hgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
  .hero .htext{order:1}
  .hero .hpic{order:2}
  .hero .hpic img{aspect-ratio:4/5}
  .hero h1{font-size:3.5rem;max-width:14ch;margin:0 0 16px}
  .hero .alone{font-size:1.35rem;margin:0 0 20px}
  .hero p{margin:0 0 12px}
  .hero .hbtns{justify-content:flex-start}
  .hero .trust{justify-content:flex-start;text-align:left}
  .probs{grid-template-columns:repeat(3,1fr)}
  .prob{padding:36px 30px}
  .cats{grid-template-columns:repeat(5,1fr)}
  .cat{padding:34px 20px}
  .vals{grid-template-columns:repeat(3,1fr)}
  .val{padding:44px 32px}
  .tm{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:repeat(4,1fr);gap:16px}
  .grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .fw .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
  .fw .fwimg{position:sticky;top:92px}
  .fw .fwquote{font-size:1.3rem;padding-left:26px}
  .fw .fwthree{grid-template-columns:repeat(3,1fr)}
  .cta h2{font-size:2.6rem}
  .fg{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
}
@media(min-width:1024px){ .hero h1{font-size:4rem} }
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:root{
  --white:#ffffff; --ink:#0A0A0A; --navy:#001538; --blue:#003182;
  --sky:#C3EAFB; --sky-soft:#EAF6FD; --gold:#D3AA12;
  --mid:#4A4F58; --muted:#8A9099; --line:#E9EDF1;
  --grad:linear-gradient(120deg,#001538 0%,#003182 100%);
  --f:'Nobile',system-ui,-apple-system,sans-serif;
}
.bag{width:14px;height:14px;flex:0 0 auto}
/* marquee */
.marq{background:var(--grad);color:#fff;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase}
/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* breadcrumb */
.crumb{padding:18px 0 0;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--blue);font-weight:700}
.crumb span{margin:0 8px;color:var(--line)}
/* PRODUCT SECTION */
.prod{padding:22px 0 56px}
.prod .pgrid{display:flex;flex-direction:column;gap:34px}
/* gallery: main image, thumb strip below on mobile, strip left on desktop */
.gal{display:flex;flex-direction:column;gap:12px}
/* object-fit: CONTAIN, not cover. v1.6.0.
   "Resize", 9 September, on the sterilizer and dryer. Its file is 681x1280, so a
   square frame with cover was cropping the top and bottom off the product. contain
   letterboxes it against the sky panel instead, which shows the whole item.
   A correctly square image renders identically either way, so nothing else moves,
   and no future upload can be silently cropped. */
.gal .main{background:var(--sky-soft);border-radius:3px;overflow:hidden;aspect-ratio:1/1}
.gal .main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:0 0 68px;width:68px;height:68px;background:var(--sky-soft);border:1px solid var(--line);border-radius:3px;padding:0;overflow:hidden;cursor:pointer;transition:.2s}
.thumbs button[aria-current="true"]{border-color:var(--navy)}
.thumbs img{width:100%;height:100%;object-fit:contain}
/* info panel */
.info .cat{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);font-weight:700;display:block;margin-bottom:12px}
.info h1{font-size:2rem;line-height:1.08;margin-bottom:8px}
.info .sub{font-size:1rem;margin-bottom:20px}
.info .price{font-family:var(--f);font-weight:700;font-size:2rem;color:var(--navy);display:block;margin-bottom:4px}
.info .was{font-size:1.05rem;color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:8px}
.info .paynote{font-size:0.74rem;color:var(--muted);margin-bottom:24px}
.reassure{list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.reassure li{padding:11px 0 11px 24px;position:relative;font-size:0.88rem;color:var(--navy);border-bottom:1px solid var(--line)}
.reassure li:last-child{border-bottom:0}
.reassure li:before{content:"";position:absolute;left:0;top:19px;width:12px;height:2px;background:var(--gold)}
.reassure b{font-weight:700}
.trust{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
/* description */
.desc{border-top:1px solid var(--line)}
.desc .body{max-width:68ch}
.desc .body p{margin-bottom:16px;font-size:0.98rem}
.desc .body h3{font-size:1.05rem;margin:28px 0 12px;color:var(--ink)}
.desc .body ul{list-style:none;margin-bottom:16px}
.desc .body li{padding:8px 0 8px 24px;position:relative;font-size:0.94rem;color:var(--mid);border-bottom:1px solid var(--line)}
.desc .body li:before{content:"";position:absolute;left:0;top:17px;width:12px;height:2px;background:var(--gold)}
/* value props, three cells hairline grid */
.vals{display:grid;gap:2px;background:var(--line);grid-template-columns:1fr}
.val .n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;margin-bottom:16px}
.val h3{font-size:1rem;margin-bottom:8px}
.val p{font-size:0.88rem}
/* video blocks */
.vwrap{background:var(--navy);aspect-ratio:9/16;max-width:340px;margin:0 auto;border-radius:3px;display:flex;align-items:center;justify-content:center}
.vwrap.wide{aspect-ratio:16/9;max-width:900px}
.vstat{text-align:center;margin-top:28px}
.vstat b{font-family:var(--f);font-weight:700;font-size:2rem;color:var(--navy);display:block;line-height:1.1}
.vstat small{font-size:0.72rem;color:var(--muted);display:block;margin-top:8px}
.vrow{display:grid;gap:20px;grid-template-columns:1fr}
.vrow figure{margin:0}
.vrow figcaption{font-size:0.78rem;color:var(--muted);margin-top:10px;text-align:center}
.howto-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.support{text-align:center;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.support p{font-size:0.92rem;margin-bottom:14px}
/* complete your setup */
.setup{background:var(--sky-soft)}
.kits{display:grid;gap:16px;grid-template-columns:1fr}
.kit{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);padding:28px 24px;display:flex;flex-direction:column}
.kit h3{font-size:1.15rem;margin-bottom:14px;color:var(--navy)}
.kit ul{list-style:none;margin-bottom:20px;flex:1}
.kit li{padding:8px 0 8px 22px;position:relative;font-size:0.88rem;color:var(--mid);border-bottom:1px solid var(--line)}
.kit li:before{content:"";position:absolute;left:0;top:17px;width:11px;height:2px;background:var(--gold)}
.kit .kp{font-family:var(--f);font-weight:700;font-size:1.6rem;color:var(--navy);display:block;margin-bottom:6px}
.kit .kp s{font-size:0.95rem;color:var(--muted);font-weight:400;margin-left:8px}
.kit .save{display:inline-block;background:var(--gold);color:var(--navy);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;padding:4px 9px;margin-bottom:14px}
/* reviews */
.tm{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:40px}
/* related */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* faq */
.faq{max-width:800px;margin:0 auto}
/* gradient CTA */
.cta{background:var(--grad);text-align:center}
.cta p{color:rgba(255,255,255,.78);max-width:44ch;margin:0 auto 20px;font-size:0.98rem}
.cta .cprice{display:block;font-weight:700;font-size:1.6rem;color:#fff;margin-bottom:24px}
/* footer */
footer{background:var(--grad);color:rgba(255,255,255,.62);padding:52px 0 0}
@media(min-width:768px){
  .wrap{padding:0 40px}
  section{padding:96px 0}
  h2{font-size:2.4rem}
  .nav-in{padding:16px 40px}
  .nav-links{display:flex;gap:26px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
  .nav-links a:hover{color:var(--blue)}
  .crumb{padding:26px 0 0}
  .prod{padding:30px 0 88px}
  .prod .pgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start}
  .gal{flex-direction:row;gap:14px;position:sticky;top:90px}
  .gal .main{order:2;flex:1}
  .thumbs{flex-direction:column;order:1;flex:0 0 72px;overflow-x:visible}
  .thumbs button{flex:0 0 72px;width:72px;height:72px}
  .info h1{font-size:2.6rem}
  .vals{grid-template-columns:repeat(3,1fr)}
  .val{padding:44px 32px}
  .kits{grid-template-columns:1fr 1fr;gap:20px}
  .kit{padding:38px 34px}
  .tm{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:repeat(3,1fr);gap:18px}
  .vrow{grid-template-columns:1fr 1fr;gap:26px}
  .grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .cta h2{font-size:2.6rem}
  .fg{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
}
/* ============ SHOP PAGE ONLY ============ */

/* 1. shop hero */
.shero{padding:30px 0 24px;text-align:center;border-bottom:1px solid var(--line)}
.shero h1{font-size:2.1rem;line-height:1.06;margin:0 auto 10px}
.shero p{font-size:0.94rem;max-width:44ch;margin:0 auto;line-height:1.5}
/* 2. trust strip */
.tstrip{border-bottom:1px solid var(--line);background:var(--sky-soft)}
.tstrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,21,56,.09);padding:0}
.tcell{background:var(--sky-soft);padding:11px 8px;text-align:center}
.tcell b{display:block;font-family:var(--f);font-weight:700;font-size:0.74rem;color:var(--navy);margin-bottom:1px}
.tcell span{font-size:0.63rem;color:var(--mid);line-height:1.3;display:block;white-space:nowrap}
/* 3. category filter */
.catbar{position:sticky;top:51px;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:9px 0}
.pills{display:grid;grid-template-columns:auto repeat(3,1fr);grid-template-rows:1fr 1fr;gap:5px}
.pills button,.pills a{display:flex;align-items:center;justify-content:center;font-family:var(--f);font-size:0.53rem;letter-spacing:0.05em;text-transform:uppercase;font-weight:700;
  padding:7px 5px;border:1px solid var(--line);color:var(--navy);background:#fff;cursor:pointer;transition:.2s;
  line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pills button:first-child,.pills a:first-child{grid-column:1;grid-row:1 / span 2;font-size:0.72rem;letter-spacing:0.14em;padding:0 14px}
.pills button:hover,.pills a:hover{border-color:var(--navy)}
.pills button[aria-current="true"],.pills a[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.card[hidden]{display:none}
/* 4. featured bundles */
.bgrid{display:grid;grid-template-columns:1fr;gap:18px}
.bcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);display:flex;flex-direction:column}
.bcard .ph{background:var(--sky-soft);aspect-ratio:4/3;overflow:hidden;position:relative}
.bcard .ph img{width:100%;height:100%;object-fit:contain}
.bcard .save{position:absolute;top:12px;right:12px;background:var(--gold);color:var(--navy);
  font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;padding:5px 10px}
.bcard .bin{padding:24px;display:flex;flex-direction:column;flex:1}
.bcard h3{font-size:1.08rem;margin-bottom:8px;color:var(--navy)}
.bcard .bd{font-size:0.88rem;color:var(--mid);margin-bottom:16px}
.bcard .bp{font-family:var(--f);font-weight:700;font-size:1.5rem;color:var(--navy);display:block;margin-bottom:14px}
.bcard .bp s{font-size:0.9rem;color:var(--muted);font-weight:400;margin-left:8px}
.bcard .inc{list-style:none;margin-bottom:20px;flex:1;border-top:1px solid var(--line)}
.bcard .inc li{position:relative;padding:9px 0 9px 22px;font-size:0.86rem;color:var(--mid);border-bottom:1px solid var(--line)}
.bcard .inc li:before{content:"";position:absolute;left:0;top:18px;width:11px;height:2px;background:var(--gold)}
.bmore{text-align:center;margin-top:32px}
/* 5. product groups */
.grp{padding-top:56px;scroll-margin-top:80px}
.grp:first-of-type{padding-top:0}
.grph{margin-bottom:26px;padding-bottom:18px;border-bottom:2px solid var(--navy)}
.grph h2{font-size:1.5rem;margin-bottom:6px}
.grph p{font-size:0.92rem;max-width:56ch}
.card .cd{font-size:0.8rem;line-height:1.55}
.card .oos{font-family:var(--f);font-weight:700;font-size:0.86rem;color:var(--muted);display:block;margin-bottom:14px;
  letter-spacing:0.08em;text-transform:uppercase}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--navy)}
/* 6. find your solution */
.probs{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
.prob{background:#fff;padding:26px 24px;display:block;transition:.2s}
.prob h3{font-size:1.02rem;margin-bottom:8px;color:var(--navy)}
.prob p{font-size:0.88rem;margin-bottom:14px}
.prob .go{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--blue);
  border-bottom:2px solid var(--gold);padding-bottom:3px}
@media(min-width:768px){
  .shero{padding:72px 0 60px}
  .shero h1{font-size:3.2rem;margin-bottom:14px}
  .shero p{font-size:1rem;max-width:46ch}
  .tcell{padding:24px 24px}
  .tcell b{font-size:1rem;margin-bottom:4px}
  .tcell span{font-size:0.86rem}
  .catbar{top:53px;padding:16px 0}
  .pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .pills button,.pills a{font-size:0.66rem;letter-spacing:0.13em;padding:11px 18px;overflow:visible}
  .pills button:first-child,.pills a:first-child{grid-column:auto;grid-row:auto;font-size:0.66rem;letter-spacing:0.13em;padding:11px 18px}
  .bgrid{grid-template-columns:repeat(2,1fr);gap:24px}
  .grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .grp{padding-top:80px}
  .grph h2{font-size:1.9rem}
  .probs{grid-template-columns:repeat(3,1fr)}
  .prob{padding:34px 30px}
}
/* ============ BUNDLES PAGE ONLY ============ */

.bhero{padding:30px 0 26px;text-align:center;border-bottom:1px solid var(--line)}
.bhero h1{font-size:2.1rem;line-height:1.06;margin:0 auto 12px;max-width:16ch}
.bhero .sub{font-size:1.08rem;font-weight:700;color:var(--navy);margin:0 auto 12px;max-width:26ch;line-height:1.3}
.bhero p{font-size:0.94rem;max-width:52ch;margin:0 auto;line-height:1.55}
/* jump strip */
.jump{border-bottom:1px solid var(--line);background:var(--sky-soft);padding:12px 0}
.jump .wrap{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.jump a{font-size:0.58rem;letter-spacing:0.07em;text-transform:uppercase;font-weight:700;color:var(--navy);
  background:#fff;border:1px solid rgba(0,21,56,.1);padding:9px 6px;text-align:center;transition:.2s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump a:hover{border-color:var(--navy)}
/* one bundle */
.bun{border-bottom:1px solid var(--line);padding:44px 0}
.bun:nth-of-type(even){background:var(--sky-soft)}
.bun .wrap{display:flex;flex-direction:column;gap:26px}
.bimg{background:#fff;border-radius:3px;overflow:hidden;aspect-ratio:4/3;position:relative}
.bun:nth-of-type(even) .bimg{background:#fff}
.bimg img{width:100%;height:100%;object-fit:cover}
.bimg .save{position:absolute;top:14px;right:14px;background:var(--gold);color:var(--navy);
  font-size:0.56rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;padding:6px 11px}
.bnum{font-family:var(--f);font-weight:700;font-size:0.72rem;letter-spacing:0.24em;color:var(--gold);
  display:block;margin-bottom:10px}
.bun h2{font-size:1.5rem;margin-bottom:6px}
.bun .who{font-size:1.02rem;font-weight:700;color:var(--blue);margin-bottom:14px;line-height:1.35}
.bun .lede{font-size:0.95rem;margin-bottom:20px}
.getlab{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--muted);
  display:block;margin-bottom:10px}
.bun ul{list-style:none;margin-bottom:22px;border-top:1px solid var(--line)}
.bun:nth-of-type(even) ul{border-color:rgba(0,21,56,.12)}
.bun li{position:relative;padding:10px 0 10px 24px;font-size:0.92rem;color:var(--navy);border-bottom:1px solid var(--line)}
.bun:nth-of-type(even) li{border-color:rgba(0,21,56,.12)}
.bun li:before{content:"";position:absolute;left:0;top:19px;width:13px;height:2px;background:var(--gold)}
.bprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.bprice b{font-family:var(--f);font-weight:700;font-size:2rem;color:var(--navy);line-height:1}
.bprice s{font-size:1rem;color:var(--muted)}
.bprice em{font-style:normal;background:var(--gold);color:var(--navy);font-size:0.58rem;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:700;padding:5px 10px}
.sizenote{font-size:0.8rem;color:var(--muted);margin-top:14px}
/* which one */
.which{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line)}
.wcell{background:#fff;padding:26px 24px;display:flex;flex-direction:column}
.wcell .q{font-size:1.02rem;font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.35}
.wcell .nm{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:8px}
.wcell p{font-size:0.88rem;margin-bottom:18px;flex:1}
/* why */
.why .body{max-width:62ch}
.why .body p{font-size:0.98rem;margin-bottom:16px}
.why .pull{font-size:1.16rem;font-weight:700;color:var(--navy);line-height:1.4;
  padding:20px 0 20px 22px;border-left:3px solid var(--gold);margin:0 0 20px}
/* still not sure */
.asks{list-style:none;max-width:44ch;margin:0 auto 26px;text-align:left}
.asks li{position:relative;padding:9px 0 9px 24px;font-size:0.95rem;color:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(255,255,255,.16)}
.asks li:last-child{border-bottom:0}
.asks li:before{content:"";position:absolute;left:0;top:19px;width:13px;height:2px;background:var(--sky)}
@media(min-width:768px){
  .bhero{padding:76px 0 60px}
  .bhero h1{font-size:3.2rem;margin-bottom:16px}
  .bhero .sub{font-size:1.35rem;max-width:30ch;margin-bottom:16px}
  .bhero p{font-size:1rem}
  .jump{padding:16px 0}
  .jump .wrap{grid-template-columns:repeat(4,1fr);gap:8px}
  .jump a{font-size:0.64rem;letter-spacing:0.12em;padding:11px 14px}
  .bun{padding:88px 0}
  .bun .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .bun:nth-of-type(odd) .bimg{order:2}
  .bun:nth-of-type(odd) .btext{order:1}
  .bun:nth-of-type(even) .bimg{order:1}
  .bun:nth-of-type(even) .btext{order:2}
  .bun h2{font-size:2rem}
  .bprice b{font-size:2.4rem}
  .which{grid-template-columns:repeat(2,1fr)}
  .wcell{padding:34px 30px}
}
@media(min-width:1024px){
  .which{grid-template-columns:repeat(4,1fr)}
}
/* ============ CART PAGE ONLY ============ */
.cwrap{padding:26px 0 60px}
.ctitle{margin-bottom:22px}
.ctitle h1{font-size:1.9rem;margin-bottom:4px}
.ctitle p{font-size:0.86rem;color:var(--muted)}
.clayout{display:flex;flex-direction:column;gap:30px}
/* line items */
.items{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);position:relative}
.item .thumb{background:var(--sky-soft);border-radius:3px;overflow:hidden;aspect-ratio:1/1}
.item .thumb img{width:100%;height:100%;object-fit:contain}
.item h2{font-size:0.94rem;line-height:1.3;margin:0 26px 4px 0}
.item h2 a:hover{color:var(--blue)}
.item .meta{font-size:0.76rem;color:var(--muted);margin-bottom:2px}
.item .badge{display:inline-block;background:var(--sky);color:var(--navy);font-size:0.55rem;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;margin-bottom:6px}
.item .unit{font-size:0.82rem;color:var(--mid);margin-bottom:10px}
.item .unit s{color:var(--muted);margin-right:6px}
.itemfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:34px;height:34px;background:#fff;border:0;font-size:1rem;color:var(--navy);cursor:pointer;font-family:var(--f)}
.qty button:hover{background:var(--sky-soft)}
.qty span{min-width:34px;text-align:center;font-weight:700;font-size:0.88rem;color:var(--navy)}
.line{font-family:var(--f);font-weight:700;font-size:1.05rem;color:var(--navy)}
.rm{position:absolute;top:18px;right:0;width:24px;height:24px;border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:1.1rem;line-height:1;font-family:var(--f)}
.rm:hover{color:var(--navy)}
.keep{margin-top:20px;display:inline-block;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--blue);border-bottom:2px solid var(--gold);padding-bottom:3px}
/* cross-sell */
.xsell{margin-top:34px;border:1px solid var(--line);border-top:3px solid var(--gold);padding:22px 20px}
.xsell h2{font-size:1.05rem;margin-bottom:4px}
.xsell .xl{font-size:0.84rem;color:var(--mid);margin-bottom:18px}
.xrow{display:grid;grid-template-columns:1fr;gap:14px}
.xitem{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center}
.xitem .thumb{background:var(--sky-soft);border-radius:3px;overflow:hidden;aspect-ratio:1/1}
.xitem .thumb img{width:100%;height:100%;object-fit:contain}
.xitem h3{font-size:0.86rem;line-height:1.3;margin-bottom:3px}
.xitem p{font-size:0.74rem;color:var(--mid);margin-bottom:7px}
.xitem .xp{font-family:var(--f);font-weight:700;font-size:0.92rem;color:var(--navy);margin-right:10px}
.btn.sm{padding:9px 14px;font-size:0.6rem}
/* summary */
.sum{background:var(--sky-soft);padding:24px 20px}
.sum h2{font-size:1.05rem;margin-bottom:16px}
.srow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,21,56,.1);
  font-size:0.9rem;color:var(--mid)}
.srow b{font-weight:700;color:var(--navy)}
.stotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 4px}
.stotal span{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.stotal b{font-family:var(--f);font-weight:700;font-size:1.7rem;color:var(--navy)}
.paynote{font-size:0.76rem;color:var(--mid);margin:14px 0 16px;text-align:center}
.trust3{display:grid;gap:1px;background:rgba(0,21,56,.1);margin-top:18px}
.trust3 div{background:var(--sky-soft);padding:11px 10px;text-align:center;font-size:0.7rem;color:var(--navy)}
.trust3 b{display:block;font-weight:700;font-size:0.76rem;margin-bottom:1px}
/* empty */
.empty{text-align:center;padding:50px 0 60px;max-width:40ch;margin:0 auto}
.empty h1{font-size:1.7rem;margin-bottom:10px}
.empty p{font-size:0.95rem;margin-bottom:22px}
@media(min-width:768px){
  .cwrap{padding:44px 0 96px}
  .ctitle h1{font-size:2.6rem}
  .clayout{display:grid;grid-template-columns:1.55fr .95fr;gap:52px;align-items:start}
  .sum{position:sticky;top:90px;padding:30px 26px}
  .item{grid-template-columns:104px 1fr;gap:20px;padding:22px 0}
  .item h2{font-size:1.02rem}
  .xrow{grid-template-columns:1fr 1fr;gap:20px}
  .trust3{grid-template-columns:repeat(3,1fr)}
}
/* ============ CHECKOUT AND THANK YOU ============ */
.conav{border-bottom:1px solid var(--line);background:#fff}
.conav .nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.conav .secure{display:inline-flex;align-items:center;gap:7px;font-size:0.62rem;letter-spacing:0.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted)}
.conav .secure svg{width:15px;height:15px;stroke:var(--gold)}
/* ---- Bundle scroller. v1.6.0 ----
   "Bundle is taking up too much space. It should be on one horizontal line with
   a scroll effect." Four cards in a 2x2 grid took most of a phone screen.
   Cards snap. On a phone the fourth peeks at the right edge, which is what makes
   the scroll discoverable without arrows. Desktop keeps a normal row. */
.bscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bscroll>.card{scroll-snap-align:start}
.bscroll::-webkit-scrollbar{height:6px}
.bscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.bscroll::-webkit-scrollbar-track{background:transparent}
@media(max-width:760px){
  /* 22px matches .wrap padding at this breakpoint. Bleeding the scroller to the
     screen edge is what makes the next card visibly peek. */
  .bscroll{grid-auto-columns:82%;gap:14px;
    margin-left:-22px;margin-right:-22px;
    padding-left:22px;padding-right:22px;scroll-padding-left:22px}
}

/* ---- Bra size chart. v1.7.0 ----
   Was a typed table, now her own chart image. Full width of the panel, no
   padding around it, so it reads as large as the panel allows on a phone. */
.szchart{margin:0 0 20px;border:1px solid var(--line);border-radius:3px;background:var(--sky-soft);overflow:hidden}
.szchart summary{cursor:pointer;padding:13px 16px;font-family:var(--f);font-weight:700;
  font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);list-style:none}
.szchart summary::-webkit-details-marker{display:none}
.szchart summary::after{content:"+";float:right;font-size:1.05rem;line-height:1;color:var(--gold)}
.szchart[open] summary::after{content:"\2013"}
.szchart img{display:block;width:100%;height:auto}

/* View cart link on the checkout. v1.6.0 */
.cobk{margin:-8px 0 22px;font-size:0.86rem}
.cobk a{color:var(--mid);text-decoration:none;border-bottom:1px solid var(--line)}
.cobk a:hover{color:var(--navy);border-color:var(--navy)}
.cobk a::before{content:"\2190";margin-right:7px}

.co{padding:24px 0 60px}
.co h1{font-size:1.7rem;margin-bottom:20px}
.colayout{display:flex;flex-direction:column;gap:28px}
.step{margin-bottom:28px}
.step h2{font-size:1.02rem;padding-bottom:10px;border-bottom:2px solid var(--navy);margin-bottom:16px;
  display:flex;align-items:center;gap:10px}
.step h2 i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:0.68rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-weight:700}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  color:var(--navy);margin-bottom:6px}
.fld label i{font-style:normal;color:var(--gold)}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--f);font-size:0.94rem;color:var(--ink);
  padding:12px 12px;border:1px solid var(--line);background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.fld .hint{font-size:0.76rem;color:var(--muted);margin-top:5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ship{border:1px solid var(--line);margin-bottom:6px}
.ship label{display:flex;align-items:flex-start;gap:11px;padding:14px 14px;cursor:pointer}
.ship input{margin-top:3px;accent-color:var(--navy);flex:0 0 auto}
.ship b{display:block;font-size:0.92rem;color:var(--navy);font-weight:700}
.ship span{font-size:0.78rem;color:var(--muted)}
.ship .amt{margin-left:auto;font-family:var(--f);font-weight:700;font-size:0.98rem;color:var(--navy);white-space:nowrap}
.ship:has(input:checked){border-color:var(--navy);background:var(--sky-soft)}
.pay{border:1px solid var(--line);margin-bottom:6px}
.pay>label{display:flex;align-items:center;gap:11px;padding:15px 14px;cursor:pointer}
.pay input{accent-color:var(--navy);flex:0 0 auto}
.pay b{font-size:0.94rem;color:var(--navy);font-weight:700}
.pay .tagline{font-size:0.78rem;color:var(--muted);display:block;margin-top:2px}
.pay .detail{padding:0 14px 16px 40px;font-size:0.86rem;color:var(--mid);line-height:1.6}
.pay .detail b{font-size:0.86rem}
.pay:has(input:checked){border-color:var(--navy)}
.rev{background:var(--sky-soft);padding:22px 18px}
.rev h2{font-size:1.02rem;margin-bottom:16px}
.rline{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(0,21,56,.1)}
.rline .th{width:52px;flex:0 0 52px;background:#fff;border-radius:2px;overflow:hidden;aspect-ratio:1/1}
.rline .th img{width:100%;height:100%;object-fit:contain}
.rline .nm{flex:1;font-size:0.86rem;color:var(--navy);line-height:1.35}
.rline .nm small{display:block;font-size:0.74rem;color:var(--muted);margin-top:2px}
.rline .amt{font-family:var(--f);font-weight:700;font-size:0.9rem;color:var(--navy);white-space:nowrap}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(0,21,56,.1);
  font-size:0.9rem;color:var(--mid)}
.rrow b{color:var(--navy)}
.rtot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0 6px}
.rtot span{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.rtot b{font-family:var(--f);font-weight:700;font-size:1.7rem;color:var(--navy)}
.bump{border:2px dashed var(--gold);background:var(--sky-soft);padding:15px;margin-bottom:11px}
.bump label{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.bump input{width:19px;height:19px;margin-top:2px;accent-color:var(--navy);flex:0 0 auto}
.bump .bh{display:block;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:3px}
.bump .bb{display:block;font-size:0.83rem;color:var(--mid);line-height:1.5;margin-bottom:6px}
.bump .bp{font-size:0.88rem;color:var(--navy)}
.bump .bp s{color:var(--muted);margin-left:6px;font-weight:400}
.bump .bp em{font-style:normal;background:var(--gold);color:var(--navy);font-size:0.58rem;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:700;padding:3px 8px;margin-left:8px}
.bump img{width:56px;height:56px;object-fit:contain;border-radius:2px;flex:0 0 auto}
.bump select{margin-top:9px;font-family:var(--f);font-size:0.84rem;padding:7px 9px;border:1px solid var(--line);background:#fff}
.placenote{font-size:0.78rem;color:var(--mid);text-align:center;margin:14px 0 0;line-height:1.55}
.placenote a{color:var(--blue);font-weight:700}
.cofoot{border-top:1px solid var(--line);background:#fff;padding:20px 0 28px}
.cofoot .wrap{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.cofoot .who{font-size:0.72rem;color:var(--muted)}
.cofoot .lnk{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.cofoot .lnk a{font-size:0.72rem;color:var(--mid);font-weight:700}
.cofoot .lnk a:hover{color:var(--navy)}
@media(min-width:768px){
  .cofoot .wrap{flex-direction:row;justify-content:space-between;text-align:left}
  .co{padding:44px 0 96px}
  .co h1{font-size:2.4rem;margin-bottom:30px}
  .colayout{display:grid;grid-template-columns:1.35fr 1fr;gap:52px;align-items:start}
  .rev{position:sticky;top:24px;padding:28px 26px}
  .bump img{width:64px;height:64px}
}
/* ============ THANK YOU ============ */
.ty{padding:26px 0 60px}
.tyhead{text-align:center;margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.tick{width:52px;height:52px;border-radius:50%;background:var(--navy);display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px}
.tick svg{width:24px;height:24px;stroke:var(--sky);fill:none;stroke-width:2.4}
.tyhead h1{font-size:1.8rem;margin-bottom:8px}
.tyhead p{font-size:0.97rem;max-width:44ch;margin:0 auto}
.tygrid{display:flex;flex-direction:column;gap:28px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-bottom:26px}
.facts div{background:#fff;padding:14px 14px}
.facts span{display:block;font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:4px}
.facts b{font-size:0.92rem;color:var(--navy);font-weight:700;word-break:break-word}
.tyb{margin-bottom:30px}
.tyb h2{font-size:1.1rem;padding-bottom:11px;border-bottom:2px solid var(--navy);margin-bottom:14px}
.oline{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.oline .th{width:54px;flex:0 0 54px;background:var(--sky-soft);border-radius:2px;overflow:hidden;aspect-ratio:1/1}
.oline .th img{width:100%;height:100%;object-fit:contain}
.oline .nm{flex:1;font-size:0.88rem;color:var(--navy);line-height:1.35}
.oline .nm small{display:block;font-size:0.74rem;color:var(--muted);margin-top:2px}
.oline .amt{font-family:var(--f);font-weight:700;font-size:0.9rem;color:var(--navy);white-space:nowrap}
.orow{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:0.9rem;color:var(--mid)}
.orow b{color:var(--navy)}
.otot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 0 4px}
.otot span{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.otot b{font-family:var(--f);font-weight:700;font-size:1.6rem;color:var(--navy)}
.deliv{background:var(--sky-soft);padding:20px 20px;margin-bottom:26px}
.deliv h2{font-size:1.02rem;margin-bottom:12px;border:0;padding:0}
.deliv dl{display:grid;grid-template-columns:1fr;gap:11px}
.deliv dt{font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
.deliv dd{font-size:0.92rem;color:var(--navy);line-height:1.5}
.deliv dd b{font-weight:700}
.bank{border:2px solid var(--navy);padding:20px 20px;margin-bottom:26px}
.bank h2{font-size:1.02rem;margin-bottom:6px;border:0;padding:0}
.bank .amt{font-family:var(--f);font-weight:700;font-size:1.7rem;color:var(--navy);display:block;margin:10px 0 14px}
.bank dl{border-top:1px solid var(--line)}
.bank dt{font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-top:11px}
.bank dd{font-size:1rem;color:var(--navy);font-weight:700;padding:2px 0 11px;border-bottom:1px solid var(--line)}
.bank .after{font-size:0.88rem;color:var(--mid);line-height:1.6;margin-top:16px}
.next{list-style:none;margin-bottom:26px}
.next li{position:relative;padding:13px 0 13px 38px;border-bottom:1px solid var(--line);font-size:0.92rem;color:var(--navy);line-height:1.5}
.next li i{position:absolute;left:0;top:13px;width:24px;height:24px;border-radius:50%;background:var(--navy);
  color:#fff;font-size:0.66rem;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.next li b{display:block;font-weight:700;margin-bottom:2px}
.next li span{font-size:0.85rem;color:var(--mid)}
.tyhelp{background:var(--sky-soft);padding:22px 20px;text-align:center}
.tyhelp h2{font-size:1.02rem;margin-bottom:8px;border:0;padding:0}
.tyhelp p{font-size:0.9rem;margin-bottom:16px}
@media(min-width:768px){
  .ty{padding:52px 0 96px}
  .tyhead{margin-bottom:44px;padding-bottom:38px}
  .tyhead h1{font-size:2.6rem}
  .tygrid{display:grid;grid-template-columns:1.3fr 1fr;gap:52px;align-items:start}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{padding:18px 18px}
  .deliv dl{grid-template-columns:1fr 1fr;gap:16px}
}
/* ============ ABOUT PAGE ONLY ============ */
.ahero{padding:34px 0 30px;border-bottom:1px solid var(--line)}
.ahero .wrap{display:flex;flex-direction:column;gap:26px}
.ahero h1{font-size:1.9rem;line-height:1.12;margin-bottom:16px}
.ahero p{font-size:0.98rem;margin-bottom:12px}
.ahero .who{font-weight:700;color:var(--navy)}
.apic{margin:0;position:relative}
.apic img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:3px;background:var(--sky-soft)}
.apic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  background:linear-gradient(transparent,rgba(0,21,56,.85));color:rgba(255,255,255,.82);
  font-size:0.72rem;line-height:1.5;border-radius:0 0 3px 3px}
.apic figcaption strong{display:block;color:#fff;font-size:0.86rem;margin-bottom:2px}
.ch{padding:48px 0 0}
.ch .wrap{max-width:820px}
.ch h2{font-size:1.6rem;line-height:1.18;margin-bottom:20px;max-width:22ch}
.ch p{font-size:1rem;margin-bottom:15px;max-width:64ch}
.ch .lead{font-size:1.12rem;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:20px}
.beat{list-style:none;margin:0 0 22px;max-width:60ch}
.beat li{position:relative;padding:9px 0 9px 24px;font-size:1rem;color:var(--navy);line-height:1.5}
.beat li:before{content:"";position:absolute;left:0;top:19px;width:13px;height:2px;background:var(--gold)}
.pq{margin:0 0 24px;padding:22px 0 22px 24px;border-left:3px solid var(--gold);
  font-size:1.24rem;font-weight:700;font-style:italic;color:var(--navy);line-height:1.4;max-width:34ch}
.quiet{background:var(--sky-soft);padding:22px 22px;margin:0 0 24px;max-width:56ch}
.quiet p{margin-bottom:10px;font-size:0.98rem;color:var(--navy)}
.quiet p:last-child{margin-bottom:0}
.cert{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:16px 22px;margin-bottom:22px}
.cert b{font-size:0.94rem;font-weight:700;line-height:1.2}
.cert span{font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--sky);display:block;margin-bottom:3px}
.three{display:grid;gap:2px;background:var(--line);margin:6px 0 24px}
.three div{background:#fff;padding:22px 20px}
.three b{display:block;font-size:1.02rem;color:var(--navy);margin-bottom:6px}
.three span{font-size:0.9rem;color:var(--mid);line-height:1.55}
.eeS{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.eeS span{background:var(--navy);color:#fff;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:700;padding:10px 16px}
.stat{background:var(--grad);color:#fff;padding:30px 24px;margin:0 0 24px}
.stat b{display:block;font-family:var(--f);font-weight:700;font-size:2.6rem;line-height:1;margin-bottom:8px}
.stat p{color:rgba(255,255,255,.82);font-size:0.94rem;margin:0;max-width:44ch}
.places{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.places span{border:1px solid rgba(255,255,255,.28);color:#fff;font-size:0.64rem;letter-spacing:0.1em;
  text-transform:uppercase;padding:7px 12px}
.msgs{display:grid;gap:14px;margin:0 0 8px}
.msg{background:#fff;border:1px solid var(--line);border-left:3px solid var(--sky);padding:18px 20px;
  font-size:0.96rem;color:var(--ink);line-height:1.55}
.sig{font-size:0.86rem;color:var(--navy);font-weight:700;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.acta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
@media(min-width:768px){
  .ahero{padding:76px 0 66px}
  .ahero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .ahero h1{font-size:3rem;margin-bottom:20px}
  .ahero p{font-size:1.05rem}
  .apic img{aspect-ratio:auto;height:520px}
  .ch{padding:80px 0 0}
  .ch h2{font-size:2.2rem;margin-bottom:24px}
  .pq{font-size:1.6rem;padding-left:30px}
  .teachgrid{grid-template-columns:1.15fr .85fr!important;gap:56px!important;align-items:center}
  .teachgrid .apic img{height:480px}
  .three{grid-template-columns:repeat(3,1fr)}
  .three div{padding:28px 24px}
  .stat{padding:44px 40px}
  .stat b{font-size:3.6rem}
  .msgs{grid-template-columns:repeat(3,1fr)}
}
/* ============ FAQ PAGE ONLY ============ */
.fhero{padding:30px 0 26px;border-bottom:1px solid var(--line);text-align:center}
.fhero h1{font-size:2rem;line-height:1.08;margin:0 auto 14px;max-width:16ch}
.fhero p{font-size:0.95rem;max-width:52ch;margin:0 auto 16px;line-height:1.55}
.fasks{list-style:none;max-width:34ch;margin:0 auto 20px;text-align:left}
.fasks li{position:relative;padding:7px 0 7px 22px;font-size:0.9rem;color:var(--navy)}
.fasks li:before{content:"";position:absolute;left:0;top:16px;width:12px;height:2px;background:var(--gold)}
/* jump nav */
.fjump{position:sticky;top:51px;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:9px 0}
.fjump .wrap{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.fjump a{font-size:0.56rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;color:var(--navy);
  background:#fff;border:1px solid var(--line);padding:8px 6px;text-align:center;transition:.2s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fjump a:hover{border-color:var(--navy)}
/* groups */
.fgrp{padding:38px 0 0;scroll-margin-top:110px}
.fgrp .wrap{max-width:860px}
.fgrp h2{font-size:1.3rem;padding-bottom:14px;border-bottom:2px solid var(--navy);margin-bottom:6px}
.fq details{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-size:0.94rem;font-weight:700;color:var(--ink);line-height:1.4}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"+";position:absolute;right:0;top:15px;color:var(--gold);font-size:1.3rem;font-weight:700}
.fq details[open] summary:after{content:"\2013"}
.fq .a{padding:0 0 22px;font-size:0.92rem;color:var(--mid);line-height:1.6}
.fq .a p{margin-bottom:10px}
.fq .a p:last-child{margin-bottom:0}
.fq .a .v{font-weight:700;color:var(--navy);font-size:1rem}
.fq .a ul{list-style:none;margin:10px 0}
.fq .a li{position:relative;padding:6px 0 6px 22px;color:var(--navy)}
.fq .a li:before{content:"";position:absolute;left:0;top:15px;width:12px;height:2px;background:var(--gold)}
.fq .a a{color:var(--blue);font-weight:700;border-bottom:1px solid var(--gold)}
.fq .a .btn{margin-top:12px;border-bottom:0}
.fq .a .btn:hover{color:#fff}
.signoff{display:block;font-size:0.72rem;color:var(--muted);margin-top:10px}
@media(min-width:768px){
  .fhero{padding:76px 0 56px}
  .fhero h1{font-size:3rem;margin-bottom:18px}
  .fhero p{font-size:1rem}
  .fjump{top:53px;padding:14px 0}
  .fjump .wrap{grid-template-columns:repeat(7,1fr);gap:7px}
  .fjump a{font-size:0.6rem;letter-spacing:0.1em;padding:10px 8px}
  .fgrp{padding:64px 0 0}
  .fgrp h2{font-size:1.8rem}
  .fq summary{font-size:1rem;padding:22px 40px 22px 0}
  .fq .a{font-size:0.96rem}
}
/* ============ SIMPLE PAGES: contact, shipping, warranty, 404 ============ */
.phero{padding:30px 0 26px;border-bottom:1px solid var(--line)}
.phero h1{font-size:2rem;line-height:1.08;margin-bottom:12px;max-width:18ch}
.phero p{font-size:0.97rem;max-width:56ch;line-height:1.55}
.pbody{padding:40px 0 60px}
.pbody .wrap{max-width:840px}
.pblock{margin-bottom:40px}
.pblock h2{font-size:1.35rem;padding-bottom:12px;border-bottom:2px solid var(--navy);margin-bottom:18px}
.pblock h3{font-size:1.02rem;color:var(--navy);margin:22px 0 8px}
.pblock p{font-size:0.97rem;margin-bottom:14px;line-height:1.6}
.pblock .lead{font-size:1.1rem;font-weight:700;color:var(--navy);line-height:1.45;margin-bottom:16px}
.plist{list-style:none;margin:0 0 18px}
.plist li{position:relative;padding:10px 0 10px 24px;font-size:0.95rem;color:var(--navy);border-bottom:1px solid var(--line)}
.plist li:before{content:"";position:absolute;left:0;top:20px;width:13px;height:2px;background:var(--gold)}
.plist li b{display:block;font-weight:700;margin-bottom:2px}
.plist li span{font-size:0.86rem;color:var(--mid)}
.note{background:var(--sky-soft);padding:18px 20px;margin:0 0 20px;font-size:0.93rem;color:var(--navy);line-height:1.6}
.note b{font-weight:700}
.rtable{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:0.86rem}
.rtable th{text-align:left;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 10px 10px 0;border-bottom:2px solid var(--navy)}
.rtable td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);color:var(--navy);vertical-align:top}
.rtable td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-right:0}
.rtable td span{display:block;font-size:0.78rem;color:var(--mid);font-weight:400;margin-top:2px}
.ccards{display:grid;grid-template-columns:1fr;gap:2px;background:var(--line);margin-bottom:26px}
.ccard{background:#fff;padding:24px 22px}
.ccard .lab{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--gold);display:block;margin-bottom:8px}
.ccard b{display:block;font-size:1.02rem;color:var(--navy);margin-bottom:6px;line-height:1.35}
.ccard p{font-size:0.88rem;margin-bottom:14px}
.e404{text-align:center;padding:60px 0 70px;max-width:46ch;margin:0 auto}
.e404 .big{font-family:var(--f);font-weight:700;font-size:4.6rem;line-height:1;color:var(--sky);margin-bottom:6px}
.e404 h1{font-size:1.8rem;margin-bottom:12px}
.e404 p{font-size:0.97rem;margin-bottom:24px}
.e404 .links{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);margin-top:30px;text-align:left}
.e404 .links a{background:#fff;padding:16px 16px;font-size:0.8rem;font-weight:700;color:var(--navy);transition:.2s}
.e404 .links a:hover{background:var(--sky-soft)}
.e404 .links a span{display:block;font-size:0.72rem;color:var(--mid);font-weight:400;margin-top:3px}
@media(min-width:768px){
  .phero{padding:72px 0 56px}
  .phero h1{font-size:3rem;margin-bottom:16px}
  .pbody{padding:64px 0 96px}
  .pblock h2{font-size:1.7rem}
  .ccards{grid-template-columns:repeat(3,1fr)}
  .e404{padding:100px 0 110px}
  .e404 .big{font-size:7rem}
  .e404 h1{font-size:2.4rem}
  .e404 .links{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   WOOCOMMERCE DEFAULTS, MAPPED ONTO THE DESIGN SYSTEM
   Added v1.1.0. WooCommerce prints its own classes on the
   add-to-cart button, the upsell grid and the notices. Without
   this they render in the parent theme's purple.
   ============================================================ */

/* --- every WooCommerce button becomes a Jiden button --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; padding: 15px 28px; background: var(--navy); color: #fff;
  border: 1px solid var(--navy); border-radius: 0; cursor: pointer; transition: .2s;
  text-align: center; line-height: 1.2; text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover {
  background: #fff; color: var(--navy); border-color: var(--navy);
}
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce .checkout-button { width: 100%; padding: 18px 28px; font-size: .74rem; }

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--line); color: var(--muted); border-color: var(--line); opacity: 1;
}

/* --- variation form --- */
.woocommerce div.product form.cart { margin: 0 0 18px; }
.woocommerce div.product form.cart .variations { margin-bottom: 16px; border: 0; width: 100%; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: 0 0 8px; border: 0; display: block; text-align: left; }
.woocommerce div.product form.cart .variations label {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--navy); margin: 0;
}
.woocommerce div.product form.cart .variations select {
  width: 100%; font-family: var(--f); font-size: .94rem; color: var(--ink);
  padding: 12px; border: 1px solid var(--line); background: #fff; margin: 0;
}
.woocommerce div.product form.cart .reset_variations { font-size: .74rem; color: var(--muted); }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: 12px; }
.woocommerce div.product .woocommerce-variation-price .price {
  font-family: var(--f); font-weight: 700; font-size: 1.5rem; color: var(--navy);
}

/* --- quantity --- */
.woocommerce .quantity { display: inline-flex; border: 1px solid var(--line); margin-right: 10px; }
.woocommerce .quantity .qty {
  width: 56px; height: 52px; text-align: center; font-family: var(--f); font-weight: 700;
  font-size: .95rem; color: var(--navy); border: 0; background: #fff; -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .single_add_to_cart_button { width: calc(100% - 70px); }

/* --- WooCommerce notices --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 3px solid var(--gold); background: var(--sky-soft); color: var(--navy);
  padding: 16px 18px; margin: 0 0 20px; list-style: none; font-size: .92rem;
}
.woocommerce-error { border-top-color: #B3261E; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message .button { float: right; padding: 9px 14px; font-size: .6rem; }

/* --- upsell / related headings --- */
.woocommerce .up-sells > h2, .woocommerce .related > h2, .woocommerce .cross-sells > h2 { display: none; }

/* ============================================================
   HEADER SIZING. v1.1.0 fix.
   the_custom_logo() prints its own markup with .custom-logo, which
   the original rule did not reach, so the logo rendered at its
   natural 420px. The manifest rule stands: never above 40px.
   ============================================================ */

.nav-in .logo img,
.nav-in .custom-logo-link img,
.nav-in img.custom-logo,
.conav .logo img,
.conav .custom-logo-link img,
.conav img.custom-logo {
  height: 26px !important;
  width: auto !important;
  max-width: 150px;
  display: block;
}
.nav-in .custom-logo-link, .conav .custom-logo-link { display: block; line-height: 0; }
nav .nav-in { padding-top: 10px; padding-bottom: 10px; }

/* marquee on one line, always */
.marq .wrap { flex-wrap: nowrap; gap: 10px; padding: 9px 22px; }
.marq span { font-size: .58rem; letter-spacing: .08em; }
@media (min-width: 768px) {
  .marq span { font-size: .7rem; letter-spacing: .12em; }
  .nav-in .logo img, .nav-in img.custom-logo { height: 30px !important; max-width: 190px; }
  nav .nav-in { padding-top: 12px; padding-bottom: 12px; }
}

/* ============================================================
   ADDED TO CART FEEDBACK. v1.1.0.
   The journey had no acknowledgement at all: you pressed Add to
   cart and the page did nothing visible. This is the drawer.
   ============================================================ */

.jd-toast {
  position: fixed; z-index: 200; left: 12px; right: 12px; bottom: 12px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  box-shadow: 0 12px 40px rgba(0,21,56,.18); padding: 16px;
  transform: translateY(140%); transition: transform .28s ease; will-change: transform;
}
.jd-toast.is-open { transform: translateY(0); }
.jd-toast .top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.jd-toast img { width: 54px; height: 54px; object-fit: cover; flex: 0 0 auto; background: var(--sky-soft); }
.jd-toast .txt { flex: 1; min-width: 0; }
.jd-toast .ok {
  display: block; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold); margin-bottom: 3px;
}
.jd-toast .nm { display: block; font-weight: 700; color: var(--navy); font-size: .92rem; line-height: 1.3; }
.jd-toast .ct { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.jd-toast .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jd-toast .acts .btn { padding: 13px 10px; font-size: .62rem; }
.jd-toast .close {
  position: absolute; top: 8px; right: 10px; border: 0; background: none; cursor: pointer;
  font-family: var(--f); font-size: 1.2rem; line-height: 1; color: var(--muted);
}
.jd-toast .close:hover { color: var(--navy); }
@media (min-width: 768px) {
  .jd-toast { left: auto; right: 24px; bottom: 24px; width: 380px; }
}
@media (prefers-reduced-motion: reduce) { .jd-toast { transition: none; } }

/* the cart count pulses so the change is not silent */
.cart-n.is-bump { animation: jdbump .45s ease; }
@keyframes jdbump { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce) { .cart-n.is-bump { animation: none; } }

/* a card whose button is mid-request */
.card .btn.loading, .woocommerce .button.loading { opacity: .6; pointer-events: none; }

/* ============================================================
   v1.2.0
   ============================================================ */

/* --- quick add on the shop card --- */
.qa { display: block; }
.qa-lab {
  display: block; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 5px;
}
.qa-sel {
  width: 100%; font-family: var(--f); font-size: .88rem; font-weight: 700; color: var(--navy);
  padding: 10px; border: 1px solid var(--line); background: #fff; margin-bottom: 8px; cursor: pointer;
}
.qa-sel:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.qa .btn { border: 1px solid var(--navy); }

/* WooCommerce prints its own "View cart" link after an AJAX add. The drawer
   already offers it, and the stray link breaks the card's alignment. */
.woocommerce a.added_to_cart, a.added_to_cart { display: none !important; }

/* --- the drawer becomes a centred dialog --- */
.jd-veil {
  position: fixed; inset: 0; z-index: 199; background: rgba(0,21,56,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.jd-veil.is-open { opacity: 1; pointer-events: auto; }

.jd-toast {
  position: fixed; z-index: 200;
  left: 50%; top: 50%; right: auto; bottom: auto;
  width: min(400px, calc(100vw - 32px));
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0; pointer-events: none;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  box-shadow: 0 24px 70px rgba(0,21,56,.28); padding: 24px 20px 20px;
  transition: opacity .2s ease, transform .2s ease;
}
.jd-toast.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.jd-toast .top { flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 18px; }
.jd-toast img { width: 84px; height: 84px; }
.jd-toast .ok { font-size: .62rem; }
.jd-toast .nm { font-size: 1.02rem; }
.jd-toast .acts .btn { padding: 15px 10px; font-size: .64rem; }
@media (min-width: 768px) {
  .jd-toast { left: 50%; right: auto; bottom: auto; width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-toast, .jd-veil { transition: none; }
  .jd-toast { transform: translate(-50%, -50%); }
}

/* ============================================================
   v1.2.1
   ============================================================ */

/* --- footer logo. inverted to white on the gradient --- */
footer .logo img, footer img.jiden-footer-logo {
  height: 22px !important; width: auto !important; max-width: 130px;
  filter: brightness(0) invert(1); display: block; margin-bottom: 14px;
}

/* --- quick add, unchosen state is loud on purpose --- */
.qa .qa-lab { color: var(--navy); display: flex; align-items: center; gap: 6px; }
.qa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.qa.is-empty .qa-sel {
  border: 2px solid var(--gold); background: #FFFBF0; color: var(--navy);
}
.qa.is-empty .qa-lab { color: #8A6D08; }
.qa.is-chosen .qa-sel { border: 1px solid var(--navy); background: #fff; }
.qa.is-chosen .qa-dot { background: var(--navy); }
.qa .btn:disabled {
  background: #fff; color: var(--muted); border: 1px dashed var(--line);
  cursor: not-allowed; pointer-events: none;
}
.qa-sel { appearance: auto; }

/* ============================================================
   v1.2.2  THE GRID WAS OVERFLOWING SIDEWAYS ON MOBILE

   Grid and flex items default to min-width:auto, which means they
   refuse to shrink below their content. A button reading "CHOOSE
   A SIZE FIRST" at .7rem with .14em letter-spacing is wider than
   half a phone screen, so the whole grid grew and the page
   scrolled horizontally. min-width:0 lets the column shrink and
   the text wrap instead.
   ============================================================ */

.grid > *, .bgrid > *, .probs > *, .vals > *, .three > *, .which > * { min-width: 0; }
.card, .card * { min-width: 0; }
.card .btn { white-space: normal; word-break: normal; hyphens: none; }

/* --- quick add, compact --- */
.qa { margin-top: 2px; }
.qa-lab {
  font-size: .54rem; letter-spacing: .1em; margin-bottom: 4px; gap: 5px;
}
.qa-dot { width: 6px; height: 6px; }
.qa-sel {
  font-size: .82rem; padding: 8px 6px; margin-bottom: 6px;
  text-overflow: ellipsis;
}
.qa .btn { padding: 12px 8px; font-size: .6rem; letter-spacing: .1em; }
.qa.is-empty .qa-sel { border-width: 2px; }

/* --- cards a little tighter on a phone --- */
@media (max-width: 767px) {
  .grid { gap: 12px; }
  .card h3 { font-size: .86rem; margin: 12px 0 5px; }
  .card .cd {
    font-size: .74rem; line-height: 1.45; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card .cp { font-size: 1rem; margin-bottom: 10px; }
  .card .btn { padding: 12px 8px; font-size: .6rem; letter-spacing: .1em; }
  .card .oos { font-size: .74rem; }
}

/* nothing on the site may scroll the page sideways */
html, body { overflow-x: hidden; max-width: 100%; }

/* ============================================================
   v1.3.0  CHECKOUT
   ============================================================ */

/* the order review heading carries a step number like the others */
.rev h2 { display: flex; align-items: center; gap: 10px; }
.rev h2 i {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* WooCommerce's review table, made to read like the rest of the site */
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  border: 0; border-bottom: 1px solid rgba(0,21,56,.1); padding: 12px 0;
  font-size: .9rem; color: var(--mid); text-align: left; vertical-align: top;
}
.woocommerce-checkout-review-order-table td { text-align: right; color: var(--navy); font-weight: 700; }
.woocommerce-checkout-review-order-table .product-name { color: var(--navy); font-weight: 400; }
.woocommerce-checkout-review-order-table .product-name .variation,
.woocommerce-checkout-review-order-table .product-name dl { font-size: .76rem; color: var(--muted); margin: 3px 0 0; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0; padding-top: 16px; font-size: 1rem;
}
.woocommerce-checkout-review-order-table .order-total td .amount {
  font-family: var(--f); font-weight: 700; font-size: 1.6rem; color: var(--navy);
}

/* shipping choices as real options, not a nested table cell */
.woocommerce-checkout-review-order-table .shipping th { padding-bottom: 6px; }
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 0;
  border-bottom: 1px solid rgba(0,21,56,.08); text-align: left;
}
#shipping_method li:last-child { border-bottom: 0; }
#shipping_method input { margin-top: 3px; accent-color: var(--navy); flex: 0 0 auto; }
#shipping_method label { font-size: .88rem; color: var(--navy); font-weight: 400; line-height: 1.4; }
#shipping_method label .amount { font-weight: 700; }

/* payment box */
.woocommerce-checkout-payment { background: transparent !important; }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  border: 0; padding: 0; margin: 0 0 14px; list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid rgba(0,21,56,.15); background: #fff; padding: 14px; margin-bottom: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 700; color: var(--navy); font-size: .94rem; display: inline;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--sky-soft); color: var(--mid); font-size: .86rem; line-height: 1.6;
  margin: 10px 0 0; padding: 12px 14px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: 0; }


/* ============================================================
   v1.4.0  REVIEWS AND BLOG
   Merged from the approved designs, rule-level deduplicated
   against everything already here.
   ============================================================ */

/* hero, 8.1 */
.hero{text-align:center;padding:64px 0 60px}
.hero h1{font-size:2.6rem;line-height:1.04;max-width:16ch;margin:0 auto 18px}
.hero .sub{font-size:1.05rem;max-width:52ch;margin:0 auto 28px}
.hero .chip{display:inline-block;background:var(--sky);color:var(--navy);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;padding:7px 16px;border-radius:100px;margin-bottom:20px}
.hero .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* video reviews, 8.9 */
.lead{max-width:62ch;margin:0 auto 34px;text-align:center}
.lead p{font-size:0.98rem;margin-bottom:14px}
.lead p:last-child{margin-bottom:0}
.vwrap{position:relative;display:block;width:100%;background:var(--navy);aspect-ratio:9/16;border-radius:3px;overflow:hidden}
.vwrap img{width:100%;height:100%;object-fit:cover;opacity:.94;transition:.2s}
.vwrap:hover img{opacity:1}
.vwrap .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;pointer-events:none}
.vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vnote{text-align:center;font-size:0.72rem;color:var(--muted);margin-top:22px}
/* sky band, 8.8 */
.band{background:var(--sky);text-align:center}
.band h2{color:var(--navy);max-width:20ch;margin:0 auto 22px}
.band p{color:rgba(0,21,56,.82);max-width:56ch;margin:0 auto 14px;font-size:0.98rem}
.band .close{font-weight:700;color:var(--navy);font-size:1.15rem;margin-top:26px;max-width:none}
/* gradient CTA, 8.11 */
.cta{background:var(--grad);text-align:center}
.cta p{color:rgba(255,255,255,.78);max-width:44ch;margin:0 auto 24px;font-size:0.98rem}
.cta .helper{margin:30px auto 0;max-width:40ch;font-size:0.9rem;color:rgba(255,255,255,.78)}
.cta .helper a{color:#fff;font-weight:700;border-bottom:1px solid var(--gold)}
@media(min-width:768px){
  .wrap{padding:0 40px}
  section{padding:96px 0}
  h2{font-size:2.4rem}
  .nav-in{padding:16px 40px}
  .nav-links{display:flex;gap:26px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
  .nav-links a:hover{color:var(--blue)}
  .hero{padding:96px 0 84px}
  .hero h1{font-size:4rem}
  .vids{grid-template-columns:repeat(3,1fr);gap:18px}
  .band h2{font-size:2.6rem}
  .cta h2{font-size:2.6rem}
  .fg{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
}
@media(min-width:1024px){ .hero h1{font-size:4.6rem} }
/* hero, 8.1 */
.hero{text-align:center;padding:64px 0 56px}
.hero h1{font-size:2.6rem;line-height:1.04;max-width:15ch;margin:0 auto 18px}
.hero .sub{font-size:1.05rem;max-width:52ch;margin:0 auto}
/* post cards */
.pgrid{display:grid;gap:16px;grid-template-columns:1fr}
.pcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);padding:30px 26px;display:flex;flex-direction:column;transition:.2s}
.pcard:hover{border-top-color:var(--gold)}
.pcard .c{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:14px;display:block}
.pcard h2{font-size:1.3rem;line-height:1.22;margin-bottom:12px;color:var(--ink)}
.pcard p{font-size:0.94rem;flex:1;margin-bottom:20px}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700}
.pcard .foot .t{color:var(--muted)}
.pcard .foot .go{color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:2px}
.cta .helper{margin:30px auto 0;max-width:42ch;font-size:0.9rem;color:rgba(255,255,255,.78)}
@media(min-width:768px){
  .wrap{padding:0 40px}
  section{padding:96px 0}
  h2{font-size:2.4rem}
  .nav-in{padding:16px 40px}
  .nav-links{display:flex;gap:26px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
  .nav-links a:hover{color:var(--blue)}
  .hero{padding:96px 0 80px}
  .hero h1{font-size:4rem}
  .pgrid{grid-template-columns:1fr 1fr;gap:20px}
  .pcard{padding:38px 34px}
  .pcard h2{font-size:1.5rem}
  .cta h2{font-size:2.6rem}
  .fg{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
}
/* post head */
.phead{padding:26px 0 34px}
.phead .in{max-width:70ch;margin:0 auto}
.phead h1{font-size:2.2rem;line-height:1.08;margin-bottom:16px}
.phead .stand{font-size:1.1rem;color:var(--mid);margin-bottom:22px}
.pmeta{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.pmeta i{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto}
/* article body */
.art{max-width:70ch;margin:0 auto;padding-bottom:20px}
.art p{font-size:1.02rem;margin-bottom:18px}
.art h2{font-size:1.5rem;color:var(--ink);margin:46px 0 16px}
.art h3{font-size:1.08rem;color:var(--navy);margin:32px 0 12px}
.art ul{list-style:none;margin:0 0 22px}
.art li{padding:9px 0 9px 24px;position:relative;font-size:0.98rem;color:var(--mid);border-bottom:1px solid var(--line)}
.art li:before{content:"";position:absolute;left:0;top:18px;width:12px;height:2px;background:var(--gold)}
.art strong{color:var(--ink);font-weight:700}
.art a{color:var(--blue);font-weight:700;border-bottom:1px solid var(--gold)}
.art .ask{font-size:1.2rem;font-weight:700;font-style:italic;color:var(--navy);margin:0 0 12px;line-height:1.35}
.art .asks{margin:22px 0 26px;padding-left:18px;border-left:3px solid var(--sky)}
.art .asks p{margin-bottom:8px;font-weight:700;color:var(--navy);font-size:1.02rem}
.art .asks p:last-child{margin-bottom:0}
.art .key{background:var(--sky-soft);border-top:3px solid var(--gold);padding:26px 24px;margin:34px 0}
.art .key p{margin-bottom:0;color:var(--navy);font-weight:700;font-size:1.05rem}
.art .key p+p{margin-top:10px;font-weight:400;color:var(--mid);font-size:0.96rem}
/* inline CTA */
.incta{background:var(--sky);padding:32px 26px;margin:40px 0;text-align:center}
.incta h3{font-size:1.2rem;color:var(--navy);margin:0 0 8px}
.incta p{color:rgba(0,21,56,.82);font-size:0.96rem;margin-bottom:20px}
/* end CTA, gradient, 8.11 */
.cta{background:var(--grad);text-align:center}
/* related */
.rel{background:var(--sky-soft)}
.rgrid{display:grid;gap:16px;grid-template-columns:1fr}
.rcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);padding:26px 24px;display:flex;flex-direction:column}
.rcard .c{font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:12px;display:block}
.rcard h3{font-size:1.05rem;margin-bottom:10px;line-height:1.25}
.rcard p{font-size:0.88rem;flex:1;margin-bottom:16px}
.rcard .go{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gold);align-self:flex-start;padding-bottom:2px}
@media(min-width:768px){
  .wrap{padding:0 40px}
  section{padding:96px 0}
  h2{font-size:2.4rem}
  .nav-in{padding:16px 40px}
  .nav-links{display:flex;gap:26px;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500}
  .nav-links a:hover{color:var(--blue)}
  .crumb{padding:26px 0 0}
  .phead{padding:34px 0 44px}
  .phead h1{font-size:3rem}
  .art p{font-size:1.06rem}
  .art h2{font-size:1.8rem}
  .cta h2{font-size:2.6rem}
  .rgrid{grid-template-columns:repeat(3,1fr);gap:20px}
  .fg{grid-template-columns:1.7fr 1fr 1fr 1.2fr}
}

/* v1.4.1  no pagination on product archives */
.woocommerce-pagination, .woocommerce nav.woocommerce-pagination { display: none; }

/* ---- Checkout, no red. v1.8.0 ----
   Her team, 21 September: "they already know all questions are compulsory, let's
   remove the red aesthetics". WooCommerce's own stylesheet paints the required
   asterisks red, invalid fields red, valid fields green, and puts a red rule on
   its notices. All of it reads as an error before the buyer has done anything.

   Asterisks are hidden, not removed, so screen readers still announce required.
   An empty field is still flagged when she tries to place the order, in the
   site's gold rather than alarm red, so nothing silently fails. */
.woocommerce form .form-row .required,
.woocommerce-checkout .form-row abbr.required{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-selection{border-color:var(--line)!important}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection{border-color:var(--gold)!important}
.woocommerce form .form-row.woocommerce-invalid label{color:inherit!important}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{border-top-color:var(--navy)!important}
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before{color:var(--navy)!important}
/* the hidden country field must take no space at all */
.jiden-hidden-country{display:none!important}

/* ---- The naira sign never sits alone on a line. v1.8.1 ----
   On the thank you page the Total cell is narrow, and "N44,000" broke between
   the sign and the number, leaving the sign on its own line. Site-wide, since
   the same break could happen in any narrow price. */
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi{white-space:nowrap}