/* ==========================================================================
   Parul Pharmaceuticals — E-commerce demo theme
   Palette derived from the brand logo (#ED3237 red, #373435 charcoal)
   and the live site (#061144 navy, #f7f7f7 surface).
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=amulya@400,500,600,700&f[]=synonym@300,400,500,600,700&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --brand-red:#ED3237;
  --brand-red-dark:#c8252a;
  --brand-ink:#373435;
  --navy:#061144;
  --navy-deep:#020826;

  --c-primary:#061144;
  --c-primary-700:#020826;
  --c-primary-050:#eef1fb;
  --c-accent:#ED3237;
  --c-accent-050:#fdecec;

  --c-ink:#171a21;
  --c-body:#4a5568;
  --c-muted:#8a93a4;
  --c-bg:#f7f7f7;
  --c-card:#ffffff;
  --c-line:#e6e8ef;

  --c-head-bg:#ffffff;
  --c-head-fg:#171a21;
  --c-topbar-bg:#061144;
  --c-topbar-fg:#ffffff;

  --c-ok:#1f9d55;
  --c-warn:#d97706;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sh-md:0 8px 24px rgba(16,24,40,.08);
  --sh-lg:0 18px 48px rgba(6,17,68,.12);

  --ff-head:'Amulya',system-ui,sans-serif;
  --ff-body:'Synonym',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1280px;
}

/* Variant 2 — Red forward, light and retail-like */
[data-theme="red"]{
  --c-primary:#ED3237; --c-primary-700:#c8252a; --c-primary-050:#fdecec;
  --c-accent:#061144;  --c-accent-050:#eef1fb;
  --c-topbar-bg:#373435; --c-head-bg:#ffffff; --c-head-fg:#171a21;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
}

/* Variant 3 — Charcoal premium, dark header */
[data-theme="charcoal"]{
  --c-primary:#373435; --c-primary-700:#211f20; --c-primary-050:#f1efef;
  --c-accent:#ED3237;  --c-accent-050:#fdecec;
  --c-bg:#f4f3f2;
  --c-topbar-bg:#211f20; --c-head-bg:#373435; --c-head-fg:#ffffff;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
}

/* Variant 4 — Clinical, airy, outline-led */
[data-theme="clinical"]{
  --c-primary:#0b2a6b; --c-primary-700:#061144; --c-primary-050:#f0f5ff;
  --c-accent:#ED3237;  --c-accent-050:#fff1f1;
  --c-bg:#ffffff; --c-card:#ffffff; --c-line:#dfe6f2;
  --c-topbar-bg:#f0f5ff; --c-topbar-fg:#0b2a6b;
  --r-sm:12px; --r-md:18px; --r-lg:28px; --r-pill:999px;
  --sh-md:0 6px 18px rgba(11,42,107,.07);
}
[data-theme="clinical"] body{background:
  radial-gradient(900px 420px at 88% -12%, #f0f5ff 0%, transparent 60%),
  radial-gradient(700px 380px at -10% 0%, #fff1f1 0%, transparent 55%), #fff;}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-body);font-family:var(--ff-body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--ff-head);color:var(--c-ink);margin:0 0 .5em;line-height:1.18;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.25rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.section{padding-block:clamp(44px,6vw,86px)}
.muted{color:var(--c-muted)}
.center{text-align:center}
.hide{display:none !important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-weight:600;font-size:.95rem;cursor:pointer;transition:.18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-700)}
.btn-accent{background:var(--c-accent);color:#fff}
.btn-accent:hover{filter:brightness(.92)}
.btn-outline{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.btn-outline:hover{background:var(--c-primary);color:#fff}
.btn-ghost{background:var(--c-card);color:var(--c-ink);border-color:var(--c-line)}
.btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary)}
.btn-block{width:100%}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-lg{padding:1rem 2rem;font-size:1.02rem}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.badge-accent{background:var(--c-accent);color:#fff}
.badge-soft{background:var(--c-primary-050);color:var(--c-primary)}
.badge-ok{background:#e8f6ee;color:var(--c-ok)}
.badge-warn{background:#fdf1e0;color:var(--c-warn)}
.eyebrow{display:inline-block;font-family:var(--ff-head);font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent);margin-bottom:.7rem}

/* ---------- Demo theme switcher ---------- */
.demo-bar{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.demo-toggle{width:52px;height:52px;border-radius:50%;border:none;background:var(--c-primary);color:#fff;
  box-shadow:var(--sh-lg);cursor:pointer;font-size:1.25rem;display:grid;place-items:center}
.demo-panel{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  padding:16px;width:264px}
.demo-panel h5{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin:0 0 .7rem}
.demo-swatches{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.swatch{border:1.5px solid var(--c-line);border-radius:var(--r-sm);padding:9px;cursor:pointer;background:#fff;text-align:left}
.swatch.active{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-050)}
.swatch span{display:block;font-size:.74rem;font-weight:600;color:var(--c-ink);margin-top:6px}
.swatch i{display:block;height:22px;border-radius:5px}
.sw-navy i{background:linear-gradient(90deg,#061144 60%,#ED3237 60%)}
.sw-red i{background:linear-gradient(90deg,#ED3237 60%,#061144 60%)}
.sw-charcoal i{background:linear-gradient(90deg,#373435 60%,#ED3237 60%)}
.sw-clinical i{background:linear-gradient(90deg,#f0f5ff 60%,#0b2a6b 60%);border:1px solid #dfe6f2}
.demo-links{margin-top:12px;border-top:1px solid var(--c-line);padding-top:10px;display:grid;gap:4px}
.demo-links a{font-size:.82rem;color:var(--c-body);padding:3px 0}
.demo-links a:hover{color:var(--c-accent)}

/* ---------- Header ---------- */
.topbar{background:var(--c-topbar-bg);color:var(--c-topbar-fg);font-size:.82rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.topbar a{opacity:.9}
.topbar a:hover{opacity:1}
.topbar-links{display:flex;gap:18px}

.site-header{background:var(--c-head-bg);color:var(--c-head-fg);position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgba(0,0,0,.06);box-shadow:var(--sh-sm)}
.header-inner{display:flex;align-items:center;gap:22px;min-height:78px}
.logo img{height:46px;width:auto}
[data-theme="charcoal"] .logo img{filter:brightness(0) invert(1)}
.main-nav{display:flex;align-items:center;gap:6px;margin-left:8px}
.main-nav > li{position:relative}
.main-nav > li > a{display:flex;align-items:center;gap:5px;padding:.6rem .7rem;border-radius:var(--r-sm);
  font-weight:500;font-size:.95rem;color:var(--c-head-fg);white-space:nowrap}
.main-nav > li > a:hover,.main-nav > li.active > a{color:var(--c-accent)}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:240px;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s ease}
.main-nav > li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:.5rem .7rem;border-radius:var(--r-sm);font-size:.9rem;color:var(--c-body)}
.dropdown a:hover{background:var(--c-primary-050);color:var(--c-primary)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-search{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.04);border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:.45rem .9rem;min-width:230px}
[data-theme="charcoal"] .header-search{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.header-search input{border:none;background:transparent;outline:none;width:100%;font-size:.9rem}
.icon-btn{position:relative;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--c-line);
  background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;transition:.18s}
.icon-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--c-accent);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center}
.burger{display:none}

/* ---------- Hero ---------- */
/* The client's hexagonal pattern, multiplied over the hero only. */
:root{--pp-texture:url("../images/texture-pattern.png")}
.hero::before,.hero-slide::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--pp-texture);background-size:cover;background-position:center;
  mix-blend-mode:multiply}

.hero{position:relative;overflow:hidden;background:
  linear-gradient(120deg,var(--c-primary) 0%,var(--c-primary-700) 100%);color:#fff}
[data-theme="clinical"] .hero{background:var(--c-primary-050);color:var(--c-ink)}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;
  background:rgba(237,50,55,.16)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-block:clamp(48px,6vw,92px);position:relative;z-index:2}
.hero h1{color:inherit;max-width:16ch}
[data-theme="clinical"] .hero h1{color:var(--c-primary)}
.hero p{font-size:1.06rem;opacity:.9;max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
[data-theme="clinical"] .hero .btn-ghost{background:#fff;color:var(--c-primary);border-color:var(--c-line)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.hero-stats b{display:block;font-family:var(--ff-head);font-size:1.9rem;color:inherit}
.hero-stats span{font-size:.85rem;opacity:.82}
.hero-visual{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);
  padding:26px;backdrop-filter:blur(6px)}
[data-theme="clinical"] .hero-visual{background:#fff;border-color:var(--c-line);box-shadow:var(--sh-md)}
/* WooCommerce prints width/height attributes on the image. Without an explicit
   height:auto both dimensions count as set and aspect-ratio is ignored, which
   let the attribute stretch the hero image to its full pixel height. */
.hero-visual>img,.hero-visual>a>img{border-radius:var(--r-md);background:#fff;width:100%;height:auto;
  aspect-ratio:1/.82;object-fit:contain;padding:14px}

/* Hero slider — every slide sits in the same grid cell, so the card takes the
   height of the tallest one and no slide needs absolute positioning. */
.hero-slider{position:relative;padding:0;overflow:hidden;background:none;border:0}
[data-theme="clinical"] .hero-slider{background:none;border:0}
.hero-slides{display:grid}

/* Each slide is the whole card: a wash of the product's own printed colour from
   top to bottom, so there is no white half. The tints arrive as custom
   properties on the article, and crossfade with the slide itself. */
.hero-slide{grid-area:1/1;display:flex;flex-direction:column;gap:0;color:#fff;
  border-radius:var(--r-lg);overflow:hidden;padding-bottom:62px;
  background-image:linear-gradient(170deg,var(--tint-top) 0%,var(--tint-bottom) 100%);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease,visibility .5s}
.hero-slide.is-active{opacity:1;visibility:visible;transform:none}

.hero-slide::before{opacity:.85}
/* Sheen at the top, and a scrim over the foot. The scrim is not decoration:
   the tints come from the packs, and 14 of them are light enough that white
   text on them fails WCAG AA — this pulls every one of them past 4.5:1 while
   leaving the product's colour recognisable. */
.hero-slide::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 62% at 50% -6%,rgba(255,255,255,.40) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.48) 100%)}

/* A product that opted out of the colour: the whole card goes white, with the
   text and controls flipped back to dark. No gradient, no scrim, no texture —
   a half-white card is what this avoids. */
.hero-slide.is-plain{background-image:none;background:var(--c-card);color:var(--c-ink);
  border:1px solid var(--c-line)}
.hero-slide.is-plain::before,.hero-slide.is-plain::after{display:none}
.hero-slide.is-plain .hero-slide-title{color:var(--c-ink)}
.hero-slide.is-plain .hero-slide-sub{color:var(--c-body)}
.hero-slide.is-plain .hero-slide-stage img{filter:none}
/* The button is white-on-colour by default, which disappears on a white card. */
.hero-slide.is-plain .hero-slide-btn{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.hero-slide.is-plain .hero-slide-btn:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.hero-slide.is-plain ~ .hero-slider-nav .hero-arrow,
.hero-slider:has(.hero-slide.is-plain.is-active) .hero-arrow{
  border-color:var(--c-line);background:var(--c-card);color:var(--c-ink)}
.hero-slider:has(.hero-slide.is-plain.is-active) .hero-arrow:hover{
  background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.hero-slider:has(.hero-slide.is-plain.is-active) .hero-dot{background:var(--c-line)}
.hero-slider:has(.hero-slide.is-plain.is-active) .hero-dot.is-active{background:var(--c-accent)}

.hero-slide-stage{position:relative;z-index:1}
.hero-slide-stage img{display:block;width:100%;height:auto;
  aspect-ratio:1/.74;object-fit:contain;padding:30px 34px 14px;background:none;
  filter:drop-shadow(0 18px 30px rgba(4,12,32,.34))}

.hero-slide-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;
  padding:4px 26px 26px}
.hero-slide-title{font-size:1.3rem;margin:0;color:#fff;line-height:1.25}
.hero-slide-sub{font-size:.9rem;margin:0;color:rgba(255,255,255,.88)}
.hero-slide-btn{align-self:flex-start;display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap;
  margin-top:4px;background:#fff;color:var(--c-primary);border-color:#fff}
.hero-slide-btn:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.hero-slide-btn del{opacity:.7;font-weight:400}

/* Nav floats over the foot of the card, so the colour runs edge to edge. */
.hero-slider-nav{position:absolute;z-index:2;left:0;right:0;bottom:0;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px}
.hero-arrow{width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);
  color:#fff;font-size:1rem;line-height:1;padding:0;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.hero-arrow:hover{background:#fff;border-color:#fff;color:var(--c-primary)}
.hero-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.hero-dot{width:9px;height:9px;padding:0;cursor:pointer;border:0;border-radius:50%;
  background:rgba(255,255,255,.45);transition:width .25s ease,background .25s ease}
.hero-dot.is-active{width:26px;border-radius:99px;background:#fff}
.hero-arrow:focus-visible,.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none;transform:none}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--c-card);border-block:1px solid var(--c-line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line)}
.trust-item{background:var(--c-card);padding:24px 20px;display:flex;gap:14px;align-items:flex-start}
.trust-item .ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--c-primary-050);color:var(--c-primary);
  display:grid;place-items:center;flex:none;font-size:1.15rem}
.trust-item b{display:block;color:var(--c-ink);font-family:var(--ff-head);font-size:.98rem}
.trust-item small{font-size:.83rem;color:var(--c-muted)}

/* ---------- Section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.sec-head p{max-width:62ch;margin:0}

/* ---------- Product card ---------- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.products.cols-3{grid-template-columns:repeat(3,1fr)}
/* WooCommerce puts "products" on the related/upsell SECTION as well as on the
   list inside it. Without this the section became the 4-column grid, the
   heading took column one, and all the cards were crushed into column two. */
.related.products,.upsells.products,.up-sells.products,.cross-sells.products{display:block;
  margin-top:clamp(40px,5vw,72px)}
.related.products>h2,.upsells.products>h2,.up-sells.products>h2{margin-bottom:22px}

.p-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s ease;position:relative}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.p-media{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:18px;
  border-bottom:1px solid var(--c-line)}
.p-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* Colour behind the pack only — the card body below stays white, so the name,
   composition and buttons keep one consistent contrast across all 47 products.
   The two tints arrive per card as custom properties. */
.p-media.is-tinted{background-image:linear-gradient(170deg,var(--tint-top) 0%,var(--tint-bottom) 100%)}
/* The pack shots are transparent PNGs, so multiply would stain their white
   faces with the tint. They need no blending here. */
.p-media.is-tinted img{mix-blend-mode:normal;position:relative;z-index:1;
  filter:drop-shadow(0 10px 16px rgba(4,12,32,.26))}
.p-media.is-tinted>a{position:relative;z-index:1;display:block;width:100%;height:100%}
.p-flags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.p-wish{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:#fff;
  border:1px solid var(--c-line);display:grid;place-items:center;cursor:pointer;color:var(--c-muted);font-size:.95rem}
.p-wish:hover,.p-wish.on{color:var(--c-accent);border-color:var(--c-accent)}
.p-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-cat{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--c-muted);font-weight:600}
.p-title{font-family:var(--ff-head);font-size:1.02rem;font-weight:600;color:var(--c-ink);line-height:1.3}
.p-card:hover .p-title{color:var(--c-primary)}
.p-desc{font-size:.87rem;color:var(--c-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stars{color:#f5a623;font-size:.82rem;display:flex;align-items:center;gap:6px}
.stars small{color:var(--c-muted)}
.p-price{display:flex;align-items:baseline;gap:9px;margin-top:auto}
.p-price b{font-family:var(--ff-head);font-size:1.22rem;color:var(--c-ink)}
.p-price del{color:var(--c-muted);font-size:.9rem}
.p-price .off{color:var(--c-ok);font-size:.82rem;font-weight:600}
.p-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.p-actions .btn{flex:1;min-width:0}
/* The "View cart" link WooCommerce injects after an AJAX add must drop onto
   its own line instead of squeezing the two buttons. */
.p-actions .added_to_cart{flex:0 0 100%;justify-content:center;order:3}

/* list view */
.products.list-view{grid-template-columns:1fr;gap:16px}
.products.list-view .p-card{flex-direction:row}
.products.list-view .p-media{width:210px;flex:none;aspect-ratio:auto;border-bottom:none;border-right:1px solid var(--c-line)}
.products.list-view .p-body{padding:22px}
.products.list-view .p-desc{-webkit-line-clamp:3}
.products.list-view .p-actions{padding:22px;max-width:260px;align-items:center;align-content:center}
.products.list-view .p-actions .btn{flex:0 1 auto;align-self:center}

/* ---------- Category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:26px 22px;
  transition:.22s;position:relative;overflow:hidden}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c-primary)}
.cat-card .ic{width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.4rem;
  background:var(--c-primary-050);color:var(--c-primary);margin-bottom:16px}
.cat-card h3{font-size:1.06rem;margin-bottom:.35rem}
.cat-card p{font-size:.87rem;margin-bottom:1rem}
.cat-card .more{font-size:.84rem;font-weight:600;color:var(--c-accent)}
/* The bare number read as a stray digit; as a pill it reads as a count. */
.cat-count{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;
  gap:4px;min-width:26px;height:24px;padding:0 9px;border-radius:99px;
  background:var(--c-primary-050);color:var(--c-primary);
  border:1px solid var(--c-primary-100,var(--c-line));
  font-size:.76rem;font-weight:700;line-height:1;justify-content:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.cat-card:hover .cat-count{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ---------- Page head / breadcrumb ---------- */
.page-head{background:var(--c-primary);color:#fff;padding-block:42px}
[data-theme="clinical"] .page-head{background:var(--c-primary-050);color:var(--c-ink)}
.page-head h1{color:inherit;margin:0}
[data-theme="clinical"] .page-head h1{color:var(--c-primary)}
.crumb{display:flex;gap:8px;font-size:.85rem;opacity:.85;margin-bottom:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--c-accent)}

/* ---------- Shop layout ---------- */
.shop-layout{display:grid;grid-template-columns:284px 1fr;gap:32px;align-items:start}
.filters{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:22px;
  position:sticky;top:98px}
.f-block{padding-block:16px;border-bottom:1px solid var(--c-line)}
.f-block:last-child{border-bottom:none;padding-bottom:0}
.f-block h4{font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);margin-bottom:12px}
.f-opt{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:.9rem}
.f-opt input{accent-color:var(--c-accent);width:16px;height:16px;cursor:pointer}
.f-opt .n{margin-left:auto;font-size:.78rem;color:var(--c-muted)}
.range-row{display:flex;align-items:center;gap:10px;font-size:.85rem;margin-top:8px}
input[type=range]{width:100%;accent-color:var(--c-accent)}
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:12px 16px}
.toolbar select,.toolbar input[type=search]{border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:.5rem .75rem;background:#fff;outline:none;font-size:.9rem}
.toolbar select:focus,.toolbar input:focus{border-color:var(--c-primary)}
.view-toggle{display:flex;gap:4px;margin-left:auto}
.view-toggle button{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--c-line);background:#fff;cursor:pointer}
.view-toggle button.on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--c-primary-050);color:var(--c-primary);
  border-radius:var(--r-pill);padding:.32rem .8rem;font-size:.82rem;font-weight:500}
.chip button{border:none;background:transparent;cursor:pointer;color:inherit;font-size:1rem;line-height:1}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:38px}
.pagination button{min-width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--c-line);background:#fff;cursor:pointer}
.pagination button.on{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.pagination button:disabled{opacity:.45;cursor:not-allowed}
.empty{background:var(--c-card);border:1px dashed var(--c-line);border-radius:var(--r-md);padding:58px 20px;text-align:center}
.filter-open{display:none}

/* ---------- Single product ---------- */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pd-gallery{position:sticky;top:98px}
.pd-main{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:28px;aspect-ratio:1/.92;
  display:grid;place-items:center}
.pd-main img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pd-thumbs{display:flex;gap:12px;margin-top:14px}
.pd-thumbs button{width:84px;height:84px;border:1.5px solid var(--c-line);border-radius:var(--r-sm);background:#fff;
  padding:8px;cursor:pointer}
.pd-thumbs button.on{border-color:var(--c-accent)}
.pd-thumbs img{width:100%;height:100%;object-fit:contain}
.pd-title{margin:.4rem 0 .5rem}
.pd-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--c-muted);margin-bottom:18px}
.pd-price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pd-price b{font-family:var(--ff-head);font-size:2.1rem;color:var(--c-ink)}
.pd-price del{color:var(--c-muted)}
.pd-bullets{display:grid;gap:9px;margin:20px 0 24px}
.pd-bullets li{display:flex;gap:10px;font-size:.94rem}
.pd-bullets i{color:var(--c-ok);flex:none}
.qty{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.qty button{width:42px;height:46px;border:none;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--c-ink)}
.qty input{width:52px;height:46px;border:none;text-align:center;outline:none;font-weight:600}
.pd-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.pd-buy .btn{flex:1;min-width:180px}
.pincode{display:flex;gap:10px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.pincode input{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.55rem .8rem;outline:none;width:150px}
.pd-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.pd-trust div{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-sm);padding:12px;
  text-align:center;font-size:.8rem}
.pd-trust i{display:block;font-size:1.2rem;color:var(--c-primary);margin-bottom:5px}

.tabs{margin-top:56px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md)}
.tab-nav{display:flex;gap:4px;border-bottom:1px solid var(--c-line);padding:8px 8px 0;overflow-x:auto}
.tab-nav button{border:none;background:transparent;padding:.85rem 1.3rem;font-weight:600;font-size:.93rem;cursor:pointer;
  color:var(--c-muted);border-bottom:3px solid transparent;white-space:nowrap}
.tab-nav button.on{color:var(--c-primary);border-bottom-color:var(--c-accent)}
.tab-body{padding:30px}
.tab-pane{display:none}
.tab-pane.on{display:block}
.spec-table{width:100%;border-collapse:collapse;font-size:.92rem}
.spec-table th,.spec-table td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--c-line)}
.spec-table th{width:240px;color:var(--c-ink);font-weight:600;background:var(--c-primary-050)}
.acc-item{border-bottom:1px solid var(--c-line)}
.acc-item:last-child{border-bottom:none}
.acc-q{width:100%;text-align:left;background:none;border:none;padding:1rem 0;font-weight:600;color:var(--c-ink);
  cursor:pointer;display:flex;justify-content:space-between;gap:16px}
.acc-a{display:none;padding-bottom:1rem;font-size:.93rem}
.acc-item.on .acc-a{display:block}
.review{border-bottom:1px solid var(--c-line);padding:16px 0}
.review:last-child{border-bottom:none}
.review b{color:var(--c-ink)}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 372px;gap:32px;align-items:start}
.panel{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:24px}
.panel h3{font-size:1.12rem;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--c-line)}
.c-row{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--c-line);align-items:center}
.c-row:last-child{border-bottom:none}
.c-thumb{width:96px;height:96px;border:1px solid var(--c-line);border-radius:var(--r-sm);background:#fff;padding:8px}
.c-thumb img{width:100%;height:100%;object-fit:contain}
.c-info b{display:block;font-family:var(--ff-head);color:var(--c-ink);font-size:1rem}
.c-info small{color:var(--c-muted);font-size:.82rem}
.c-right{text-align:right;display:grid;gap:10px;justify-items:end}
.c-remove{border:none;background:none;color:var(--c-muted);cursor:pointer;font-size:.82rem}
.c-remove:hover{color:var(--c-accent)}
.summary-row{display:flex;justify-content:space-between;padding:.55rem 0;font-size:.94rem}
.summary-row.total{border-top:1px solid var(--c-line);margin-top:10px;padding-top:16px;font-size:1.18rem;
  font-family:var(--ff-head);color:var(--c-ink);font-weight:600}
.coupon{display:flex;gap:8px;margin-top:6px}
.coupon input{flex:1;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.6rem .8rem;outline:none}
.sticky{position:sticky;top:98px}
.notice{background:var(--c-accent-050);color:var(--c-accent);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:.85rem}
.progress{height:7px;border-radius:var(--r-pill);background:var(--c-line);overflow:hidden;margin:10px 0 4px}
.progress i{display:block;height:100%;background:var(--c-ok);border-radius:var(--r-pill);transition:.3s}

/* ---------- Forms / checkout ---------- */
.steps{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:34px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--c-muted)}
.step i{width:28px;height:28px;border-radius:50%;background:var(--c-line);color:#fff;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;font-style:normal}
.step.on{color:var(--c-ink);font-weight:600}
.step.on i{background:var(--c-primary)}
.step.done i{background:var(--c-ok)}
.step-line{width:44px;height:2px;background:var(--c-line)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;font-weight:600;color:var(--c-ink)}
.field input,.field select,.field textarea{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.72rem .9rem;
  outline:none;background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-050)}
.field small{font-size:.78rem;color:var(--c-muted)}
.field.err input{border-color:var(--c-accent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;cursor:pointer}
.check input{accent-color:var(--c-accent);margin-top:3px}

.pay-list{display:grid;gap:12px}
.pay{border:1.5px solid var(--c-line);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:.18s}
.pay:hover{border-color:var(--c-primary)}
.pay.on{border-color:var(--c-accent);background:var(--c-accent-050)}
.pay-head{display:flex;align-items:center;gap:12px}
.pay-head input{accent-color:var(--c-accent);width:18px;height:18px}
.pay-head b{font-family:var(--ff-head);color:var(--c-ink);font-size:.98rem}
.pay-head .tag{margin-left:auto;font-size:.72rem;background:var(--c-primary-050);color:var(--c-primary);
  padding:.22rem .6rem;border-radius:var(--r-pill);font-weight:600}
.pay-body{display:none;padding:14px 0 2px 30px;font-size:.88rem;color:var(--c-body)}
.pay.on .pay-body{display:block}
.pay-logos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pay-logos span{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.3rem .65rem;font-size:.75rem;
  background:#fff;font-weight:600;color:var(--c-body)}
.mini-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:.9rem}
.mini-row:last-of-type{border-bottom:none}
.mini-row img{width:48px;height:48px;object-fit:contain;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:4px;background:#fff}
.mini-row b{display:block;color:var(--c-ink);font-size:.9rem}

/* ---------- Success ---------- */
.success-card{max-width:760px;margin-inline:auto;text-align:center;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:52px 34px;box-shadow:var(--sh-md)}
.success-card .tick{width:84px;height:84px;border-radius:50%;background:#e8f6ee;color:var(--c-ok);
  display:grid;place-items:center;font-size:2.3rem;margin:0 auto 22px}

/* ---------- Toast / drawer ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120%);background:var(--c-ink);color:#fff;
  padding:.85rem 1.4rem;border-radius:var(--r-pill);font-size:.9rem;z-index:200;transition:.28s;box-shadow:var(--sh-lg)}
.toast.on{transform:translate(-50%,0)}
.drawer-back{position:fixed;inset:0;background:rgba(3,7,18,.45);opacity:0;visibility:hidden;transition:.24s;z-index:130}
.drawer-back.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;z-index:140;
  transform:translateX(100%);transition:.28s;display:flex;flex-direction:column}
.drawer.on{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--c-line)}
.drawer-head h3{margin:0;font-size:1.05rem}
.drawer-body{flex:1;overflow:auto;padding:20px}
.drawer-foot{border-top:1px solid var(--c-line);padding:20px;display:grid;gap:10px}
.x-btn{border:none;background:none;font-size:1.4rem;cursor:pointer;color:var(--c-muted);line-height:1}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#cfd4e6;margin-top:auto}
[data-theme="charcoal"] .site-footer{background:#211f20}
[data-theme="red"] .site-footer{background:#373435}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px;padding-block:58px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:1.1rem}
.site-footer a:hover{color:var(--brand-red)}
.site-footer li{padding:.3rem 0;font-size:.9rem}
.footer-logo img{height:52px;filter:brightness(0) invert(1);margin-bottom:16px}
.news{display:flex;gap:8px;margin-top:12px}
.news input{flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:var(--r-sm);
  padding:.65rem .85rem;color:#fff;outline:none}
.news input::placeholder{color:#8f97b5}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.83rem}
.pay-strip{display:flex;gap:8px;flex-wrap:wrap}
.pay-strip span{border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:.2rem .55rem;font-size:.72rem}
.disclaimer{font-size:.78rem;color:#8f97b5;padding-bottom:24px;line-height:1.6}

/* ---------- Responsive ---------- */
@media(max-width:1280px){
  .main-nav > li > a{padding:.6rem .5rem;font-size:.9rem}
  .header-search{min-width:170px}
}
@media(max-width:1100px){
  .products{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .header-search{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .hero-slide-stage img{padding:22px 22px 8px}
  .hero-slide-body{padding:2px 20px 22px}
  .hero-slider-nav{padding:0 18px}
  .hero-slide-title{font-size:1.15rem}
  .pd-grid{grid-template-columns:1fr;gap:30px}
  .pd-gallery{position:static}
  .cart-layout{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 auto 0 0;width:320px;max-width:88vw;z-index:140;border-radius:0;overflow:auto;
    transform:translateX(-100%);transition:.26s}
  .filters.on{transform:translateX(0)}
  .filter-open{display:inline-flex}
  .trust-grid{grid-template-columns:1fr 1fr}
  .sticky{position:static}
}
@media(max-width:720px){
  .main-nav,.topbar-links{display:none}
  .main-nav.mobile-on{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:var(--c-head-bg);border-bottom:1px solid var(--c-line);box-shadow:var(--sh-md);padding:10px 20px;margin:0;z-index:99}
  .main-nav.mobile-on .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:10px}
  .burger{display:grid}
  .products,.products.cols-3{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .products.list-view .p-card{flex-direction:column}
  .products.list-view .p-media{width:100%;border-right:none;border-bottom:1px solid var(--c-line)}
  .c-row{grid-template-columns:72px 1fr;gap:12px}
  .c-thumb{width:72px;height:72px}
  .c-right{grid-column:1/-1;justify-items:stretch;text-align:left}
  .footer-top{grid-template-columns:1fr}
  .p-actions{flex-direction:column}
  .mobile-nav{display:block}
}
@media(max-width:480px){
  /* Two columns still read well at 360px and stop the pack shots towering. */
  .products,.products.cols-3{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .p-body{padding:12px;gap:6px}
  .p-actions{padding:0 12px 12px}
  .p-title{font-size:.92rem}
  .p-desc{font-size:.8rem;-webkit-line-clamp:2}
  .p-cat{font-size:.66rem}
  .p-price b{font-size:1.05rem}
  .p-price del,.p-price .off{font-size:.78rem}
  .p-media{padding:10px}
  .p-flags .badge{font-size:.6rem;padding:.22rem .45rem}
  .pd-trust{grid-template-columns:1fr}
}
@media(max-width:360px){
  .products,.products.cols-3{grid-template-columns:1fr}
}

/* ==========================================================================
   Corporate page components (About / Career / Contact / Gallery / News)
   ========================================================================== */

/* section intro with a rule */
.lead{font-size:1.06rem;max-width:80ch}
.rule{width:64px;height:3px;background:var(--c-accent);border-radius:2px;margin-bottom:18px}

/* anchor offset so sticky header does not cover headings */
[id]{scroll-margin-top:110px}

/* split content + media */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split.rev > :first-child{order:2}
.split img{border-radius:var(--r-lg);box-shadow:var(--sh-md)}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:34px}
.stat{text-align:center}
.stat b{display:block;font-family:var(--ff-head);font-size:2.3rem;color:var(--c-primary);line-height:1.1}
.stat span{font-size:.88rem;color:var(--c-muted)}

/* value / feature cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.v-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:26px;
  transition:.2s;position:relative;overflow:hidden}
.v-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c-primary)}
.v-card .ic{width:50px;height:50px;border-radius:var(--r-md);background:var(--c-primary-050);color:var(--c-primary);
  display:grid;place-items:center;font-size:1.3rem;margin-bottom:15px}
.v-card h3{font-size:1.05rem;margin-bottom:.4rem}
.v-card p{font-size:.9rem;margin:0}
.v-card .num{position:absolute;right:18px;top:12px;font-family:var(--ff-head);font-size:2.4rem;
  color:var(--c-primary-050);line-height:1;font-weight:700}

/* director / chairman message */
.msg{display:grid;gap:44px;align-items:start;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-lg);padding:38px}
/* Two columns only when there is actually a portrait, otherwise the quote
   was being squeezed into a 300px column. */
.msg:has(.msg-portrait){grid-template-columns:300px 1fr}
.msg-portrait{background:var(--c-primary-050);border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1.15}
.msg-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.msg blockquote{margin:0;font-size:1.05rem}
.msg blockquote::before{content:"“";font-family:var(--ff-head);font-size:3.4rem;color:var(--c-accent);
  line-height:.6;display:block;margin-bottom:8px}
.msg cite{display:block;margin-top:18px;font-style:normal}
.msg cite b{font-family:var(--ff-head);font-size:1.05rem;color:var(--c-ink);display:block}

/* vision / mission */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vm-card{border-radius:var(--r-lg);padding:38px;color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700))}
.vm-card:last-child{background:linear-gradient(135deg,var(--brand-red),var(--brand-red-dark))}
.vm-card h3{color:#fff;font-size:1.35rem}
.vm-card p{margin:0;opacity:.94}
.vm-card .ic{width:56px;height:56px;border-radius:var(--r-md);background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px}

/* department pills */
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:.55rem 1.2rem;font-size:.92rem;font-weight:500;color:var(--c-ink)}

/* capability cards with real svg icons */
.cap{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:26px;text-align:center}
.cap img{height:64px;width:auto;margin:0 auto 16px;object-fit:contain}
.cap h3{font-size:1rem}
.cap p{font-size:.88rem;margin:0}

/* news cards */
.news-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.news-card .thumb{aspect-ratio:16/10;background:var(--c-primary-050);overflow:hidden;flex:none}
/* Placeholder so a post without a featured image keeps the card height */
.news-card .thumb.is-empty{display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-primary-050),var(--c-accent-050))}
.news-card .thumb.is-empty i{font-size:1.9rem;color:var(--c-primary);opacity:.45}
.news-card .thumb img{width:100%;height:100%;object-fit:cover}
.news-card .in{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.news-card .date{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);font-weight:600}
.news-card h3{font-size:1.06rem;margin:0}
.news-card p{font-size:.9rem;margin:0}
.news-card .more{margin-top:auto;font-size:.86rem;font-weight:600;color:var(--c-primary)}

/* gallery */
.gal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.gal-tabs button{border:1.5px solid var(--c-line);background:var(--c-card);border-radius:var(--r-pill);
  padding:.55rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--c-body)}
.gal-tabs button.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal-item{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;cursor:pointer;
  background:var(--c-primary-050);border:1px solid var(--c-line)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:.3s}
.gal-item:hover img{transform:scale(1.06)}
.gal-item.tall{aspect-ratio:3/4}
.gal-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(2,8,38,.82));
  color:#fff;padding:26px 14px 12px;font-size:.84rem;font-weight:500}
.lightbox{position:fixed;inset:0;background:rgba(2,8,38,.92);z-index:200;display:none;place-items:center;padding:30px}
.lightbox.on{display:grid}
.lightbox img{max-width:min(1000px,92vw);max-height:84vh;border-radius:var(--r-md)}
.lightbox .x-btn{position:absolute;top:22px;right:26px;color:#fff;font-size:2rem}
.lightbox p{color:#fff;text-align:center;margin-top:14px}

/* contact */
.office{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:26px;height:100%}
.office .tag{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);font-weight:700}
.office h3{font-size:1.05rem;margin:.6rem 0 .5rem}
.office p{font-size:.92rem;margin:0 0 .6rem}
.office a{color:var(--c-primary);font-weight:500}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-line);height:420px;background:var(--c-primary-050)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* job list */
.job{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:24px;
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;transition:.2s}
.job:hover{border-color:var(--c-primary);box-shadow:var(--sh-sm)}
.job h3{font-size:1.06rem;margin:0 0 .3rem}
.job .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--c-muted)}

/* policy tabs reuse .tabs */
.policy-body h3{margin-top:26px}
.policy-body h3:first-child{margin-top:0}
.policy-body p,.policy-body li{font-size:.94rem}
.policy-body ul{list-style:disc;padding-left:22px;margin-bottom:1rem}
.policy-body li{padding:.2rem 0}

@media(max-width:1000px){
  .grid-4,.stat-band,.gal-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .split,.split.rev{grid-template-columns:1fr;gap:30px}
  .split.rev > :first-child{order:0}
  /* The :has() rule above is more specific than a bare .msg, so it has to be
     restated here or the 300px portrait column survives onto phones. */
  .msg,.msg:has(.msg-portrait){grid-template-columns:1fr;gap:26px}
  .msg-portrait{max-width:280px}
  .vm{grid-template-columns:1fr}
  .job{grid-template-columns:1fr}
}
@media(max-width:600px){
  /* Two across, not one: a single column made every page a long scroll of
     half-empty rows. */
  .grid-3,.grid-2,.grid-4,.stat-band{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Except a card carrying a paragraph — at 163px its body wraps to two words
     a line, so those take the full width and only compact cards pair up.
     Not inside a slider: there a full-width card collapses the whole track
     into one column and there is nothing left to scroll. */
  .grid-3:not(.pp-slider)>*:has(p),
  .grid-2:not(.pp-slider)>*:has(p),
  .grid-4:not(.pp-slider)>*:has(p){grid-column:1/-1}
  /* Rows with their own column setting keep it — the editor chose that count. */
  .pp-slider-wrap > .pp-cols > *{grid-column:auto}
  .gal-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   WooCommerce glue — maps WooCommerce's own class names onto the tokens above.
   Required because the three WooCommerce stylesheets are dequeued; nothing new
   is introduced here, every rule reuses an existing variable or component.
   ========================================================================== */

/* Buttons WooCommerce prints itself */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
a.button, button.button, input.button, .added_to_cart{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid var(--c-primary);
  background:var(--c-primary);color:#fff;font-weight:600;font-size:.95rem;cursor:pointer;
  transition:.18s ease;text-decoration:none;line-height:1.2}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
a.button:hover, button.button:hover, .added_to_cart:hover{background:var(--c-primary-700);border-color:var(--c-primary-700);color:#fff}
.button.alt, button.alt{background:var(--c-accent);border-color:var(--c-accent)}
.button.alt:hover, button.alt:hover{filter:brightness(.92)}
.button:disabled, .button.disabled{opacity:.55;cursor:not-allowed}
.checkout-button{width:100%}
.added_to_cart{margin-top:10px;padding:0;background:none;border:none;color:var(--c-primary);
  font-size:.84rem;font-weight:600;gap:.4rem;text-decoration:none;border-radius:0}
.added_to_cart:hover{background:none;border:none;color:var(--c-accent)}
.added_to_cart::after{content:"\f138";font-family:"bootstrap-icons";font-size:.9rem;line-height:1}
/* the loop button shows its own spinner state while the AJAX call runs */
.p-actions .button.loading{opacity:.7;pointer-events:none}
.woocommerce .p-actions a.button.added,.p-actions .button.added{
  background:var(--c-ok);border-color:var(--c-ok);color:#fff}
.woocommerce .p-actions a.button.added:hover{background:#18824a;border-color:#18824a}
/* buttons that already carry a .btn class must not be double-styled */
.btn.button{border-radius:var(--r-pill)}
.p-actions .button{width:100%;padding:.5rem 1rem;font-size:.85rem}

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,
ul.woocommerce-error{list-style:none;border-radius:var(--r-md);padding:1rem 1.2rem;margin:0 0 20px;
  font-size:.92rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.woocommerce-message{background:#e8f6ee;color:#12693b;border:1px solid #bde5cd}
.woocommerce-info{background:var(--c-primary-050);color:var(--c-primary);border:1px solid var(--c-line)}
.woocommerce-error,ul.woocommerce-error{background:var(--c-accent-050);color:var(--brand-red-dark);border:1px solid #f6c9ca;
  flex-direction:column;align-items:flex-start}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;padding:.5rem 1rem;font-size:.85rem}
.woocommerce-notices-wrapper:not(:empty){margin-bottom:8px}

/* Forms WooCommerce prints (checkout, account, tracking, reviews) */
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.woocommerce form .form-row label,.woocommerce-input-wrapper label{font-size:.85rem;font-weight:600;color:var(--c-ink)}
.woocommerce form .form-row .required{color:var(--c-accent);text-decoration:none}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form input[type=text],.woocommerce-page form input[type=email],
.woocommerce-page form input[type=tel],.woocommerce-page form input[type=password],
.woocommerce-page form input[type=number]{
  border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.72rem .9rem;outline:none;
  background:#fff;transition:.15s;width:100%;height:auto;font-family:var(--ff-body)}
.woocommerce input[type=hidden]{display:none!important}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-050)}
/* The 50/50 split belongs to checkout and address forms only — it must not
   narrow the login, reset-password or order-tracking fields. */
.woocommerce form.checkout .form-row-first,.woocommerce form.checkout .form-row-last,
.woocommerce form.edit-account .form-row-first,.woocommerce form.edit-account .form-row-last,
.woocommerce .woocommerce-address-fields .form-row-first,
.woocommerce .woocommerce-address-fields .form-row-last{
  width:calc(50% - 8px);display:inline-flex;vertical-align:top}
.woocommerce form.checkout .form-row-first,
.woocommerce form.edit-account .form-row-first,
.woocommerce .woocommerce-address-fields .form-row-first{margin-right:16px}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.5;padding:0;color:var(--c-ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:12px;right:8px}
.woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--c-accent)}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,.woocommerce-additional-fields h3,
#order_review_heading{font-size:1.12rem;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--c-line);
  font-family:var(--ff-head);color:var(--c-ink)}
.woocommerce-shipping-fields h3 label,.woocommerce-form__label-for-checkbox{display:flex;gap:10px;align-items:center;
  font-size:.95rem;border:none;padding:0}
.woocommerce form .form-row input[type=checkbox],.woocommerce form .form-row input[type=radio]{width:auto;accent-color:var(--c-accent)}
.woocommerce-form-login,.woocommerce-form-coupon{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:20px;margin-bottom:20px}

/* Price output */
.woocommerce .price,.p-price .price{display:inline-flex;align-items:baseline;gap:9px}
.woocommerce .price del,.p-price del{color:var(--c-muted);font-size:.9rem;opacity:1}
.woocommerce .price ins,.p-price ins{text-decoration:none;background:none}
.p-price .price{font-family:var(--ff-head);font-size:1.22rem;color:var(--c-ink);font-weight:600}
.entry-summary .price{font-family:var(--ff-head);font-size:2.1rem;color:var(--c-ink);font-weight:600;
  display:flex;align-items:baseline;gap:12px;margin:.4rem 0 .5rem}
.entry-summary .price del{font-size:1.1rem}
.entry-summary .woocommerce-product-details__short-description{font-size:1.03rem;margin-bottom:14px}
.entry-summary .product_meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--c-muted);
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--c-line)}
.entry-summary .product_meta a{color:var(--c-primary)}
.entry-summary h1.product_title{margin:.4rem 0 .5rem}

/* Star rating */
.star-rating{overflow:hidden;position:relative;height:1.1em;line-height:1;font-size:.95em;width:5.4em;
  font-family:star;color:#f5a623;flex:none}
.star-rating::before{content:"\73\73\73\73\73";opacity:.3;float:left;top:0;left:0;position:absolute}
.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}
.star-rating span::before{content:"\53\53\53\53\53";top:0;position:absolute;left:0}
.woocommerce-product-rating{display:flex;align-items:center;gap:10px;font-size:.88rem;margin-bottom:10px}
.woocommerce-review-link{color:var(--c-muted)}

/* Product gallery */
.woocommerce-product-gallery{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:28px;position:relative}
.woocommerce-product-gallery__wrapper{display:grid;place-items:center}

/* Tinted gallery: the pack floats on its own colour, matching the boxes and the
   home slider. Controlled by the same switches, so a product set to plain white
   keeps a white gallery. */
.pd-gallery.is-tinted .woocommerce-product-gallery{border-color:transparent;
  background-image:linear-gradient(170deg,var(--tint-top) 0%,var(--tint-bottom) 100%)}
.pd-gallery.is-tinted .woocommerce-product-gallery__image img{border-radius:0;
  filter:drop-shadow(0 16px 26px rgba(4,12,32,.3))}
/* Controls sat on white before; on colour they need the reverse treatment. */
.pd-gallery.is-tinted .woocommerce-product-gallery__trigger{background:rgba(255,255,255,.9);
  border-color:transparent;color:var(--c-primary)}
.pd-gallery.is-tinted .flex-control-thumbs img{background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.5)}
.pd-gallery.is-tinted .flex-control-thumbs img.flex-active{border-color:#fff}
.pd-gallery.is-tinted .flex-direction-nav a{background:rgba(255,255,255,.9);color:var(--c-primary)}
.woocommerce-product-gallery__image img{border-radius:var(--r-sm);width:100%;height:auto;
  max-height:440px;object-fit:contain}
.woocommerce-product-gallery .flex-control-thumbs{display:flex;gap:12px;margin:14px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.woocommerce-product-gallery .flex-control-thumbs li{width:84px}
.woocommerce-product-gallery .flex-control-thumbs img{width:84px;height:84px;object-fit:contain;
  border:1.5px solid var(--c-line);border-radius:var(--r-sm);padding:8px;cursor:pointer;background:#fff}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{border-color:var(--c-accent)}
.woocommerce-product-gallery__trigger{position:absolute;top:16px;right:16px;z-index:9;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-ink);font-size:1rem}

/* Tabs */
.woocommerce-tabs{margin-top:56px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md)}
.woocommerce-tabs ul.tabs{display:flex;gap:4px;border-bottom:1px solid var(--c-line);padding:8px 8px 0;
  overflow-x:auto;margin:0;list-style:none}
.woocommerce-tabs ul.tabs li a{display:block;padding:.85rem 1.3rem;font-weight:600;font-size:.93rem;
  color:var(--c-muted);border-bottom:3px solid transparent;white-space:nowrap}
.woocommerce-tabs ul.tabs li.active a{color:var(--c-primary);border-bottom-color:var(--c-accent)}
.woocommerce-tabs .wc-tab{padding:30px;background:none;border:none;border-radius:0}
.woocommerce-tabs .wc-tab h2:first-child{display:none}

/* Reviews */
#reviews .commentlist{list-style:none;padding:0;margin:0}
#reviews .comment_container{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
#reviews .avatar{border-radius:50%;width:48px;height:48px}
#reviews .comment-text{flex:1}
#reviews .meta{font-size:.85rem;color:var(--c-muted)}
#review_form .comment-form-rating p.stars a{color:#f5a623}
#respond .comment-reply-title{font-family:var(--ff-head);font-size:1.1rem;color:var(--c-ink);display:block;margin-bottom:12px}
#respond textarea{width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.72rem .9rem;outline:none}

/* Tables WooCommerce prints (order details, my account, tracking) */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;font-size:.93rem;margin-bottom:24px}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  padding:.85rem 1rem;border-bottom:1px solid var(--c-line);text-align:left}
.woocommerce table.shop_table thead th{background:var(--c-primary-050);color:var(--c-ink);font-family:var(--ff-head)}
.woocommerce table.shop_table tfoot th{color:var(--c-ink);font-weight:600}
.woocommerce table.shop_table tr:last-child td{border-bottom:none}
.woocommerce-order-details__title,.woocommerce-column__title,.woocommerce-customer-details h2{
  font-family:var(--ff-head);color:var(--c-ink);font-size:1.12rem;margin:26px 0 14px}
.woocommerce ul.order_details{list-style:none;display:flex;gap:26px;flex-wrap:wrap;padding:0;margin:0 0 24px}
.woocommerce ul.order_details li{font-size:.82rem;color:var(--c-muted)}
.woocommerce ul.order_details li strong{display:block;font-family:var(--ff-head);font-size:1rem;color:var(--c-ink)}

/* Shipping method rows inside the totals panels */
.woocommerce-shipping-totals,.summary-row.shipping,tr.shipping{display:flex;justify-content:space-between;
  padding:.55rem 0;font-size:.94rem;gap:16px}
.woocommerce-shipping-totals th,tr.shipping th{font-weight:400;color:var(--c-body)}
#shipping_method{list-style:none;margin:0;padding:0;text-align:right}
#shipping_method li{padding:3px 0;display:flex;gap:8px;align-items:center;justify-content:flex-end}
#shipping_method input{accent-color:var(--c-accent)}
.woocommerce-shipping-destination{font-size:.82rem;color:var(--c-muted);text-align:right}
.shipping-calculator-button{font-size:.82rem;color:var(--c-primary)}

/* My account */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation li a{display:block;padding:.6rem .9rem;border-radius:var(--r-sm);
  font-size:.92rem;color:var(--c-body)}
.woocommerce-MyAccount-navigation li.is-active a,.woocommerce-MyAccount-navigation li a:hover{
  background:var(--c-primary-050);color:var(--c-primary);font-weight:600}
/* Only the logged-in account screens have a sidebar; the login form must not
   be dropped into a 240px grid column. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){
  display:block;max-width:520px;margin-inline:auto}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul{display:flex;gap:6px;justify-content:center;list-style:none;
  padding:0;margin:38px 0 0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  min-width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--c-line);background:#fff;
  display:grid;place-items:center;padding:0 10px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.navigation.pagination .nav-links{display:flex;gap:6px;justify-content:center}
.navigation.pagination .page-numbers{min-width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--c-line);
  background:#fff;display:grid;place-items:center;padding:0 10px}
.navigation.pagination .page-numbers.current{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* Order tracking form */
.woocommerce form.track_order .form-row{margin-bottom:16px}
.woocommerce form.track_order .form-row-first,.woocommerce form.track_order .form-row-last{width:100%;margin-right:0}

/* Accessibility helper used by the templates */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--c-primary);color:#fff;padding:12px 20px}
.skip-link:focus{left:0}

@media(max-width:720px){
  .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%;margin-right:0}
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
}

/* ==========================================================================
   Account, auth and order tables — WooCommerce screens that the classic
   templates render inside page.php.
   ========================================================================== */

/* Orders / downloads tables: keep action buttons on one line with real gaps */
.woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions,
.woocommerce table.shop_table td.order-actions,
.woocommerce table.shop_table td.download-actions{white-space:nowrap;text-align:right}
.woocommerce table.shop_table td .button,
.woocommerce table.shop_table td a.button{padding:.42rem 1.05rem;font-size:.82rem;
  margin:3px 0 3px 8px;border-radius:var(--r-pill)}
.woocommerce table.shop_table td .button:first-child{margin-left:0}
.woocommerce table.shop_table td .button.pay{background:var(--c-accent);border-color:var(--c-accent)}
.woocommerce table.shop_table td .button.cancel{background:transparent;color:var(--c-body);border-color:var(--c-line)}
.woocommerce table.shop_table td .button.cancel:hover{border-color:var(--c-accent);color:var(--c-accent);background:transparent}
.woocommerce table.shop_table .woocommerce-orders-table__cell-order-status{font-weight:600;color:var(--c-ink)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{vertical-align:middle}

/* Login, register and lost-password forms */
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,
.woocommerce form.lost_reset_password{max-width:460px;margin-inline:auto;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);
  padding:30px;box-shadow:var(--sh-sm)}
.woocommerce-form-login .form-row,.woocommerce-form-register .form-row{margin-bottom:16px}
.woocommerce-form-login .button,.woocommerce-form-register .button,
.woocommerce form.lost_reset_password .button{width:100%;margin-top:4px}
.woocommerce-form-login__rememberme,.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:8px;font-size:.88rem;margin-bottom:14px}
.woocommerce-LostPassword{margin:14px 0 0;text-align:center;font-size:.86rem}
.woocommerce-LostPassword a{color:var(--c-primary);font-weight:500}
.woocommerce h2.woocommerce-h2,.woocommerce-account h2{font-family:var(--ff-head);color:var(--c-ink);
  font-size:1.25rem;text-align:center;margin-bottom:18px}
.u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.u-columns.col2-set .col-1,.u-columns.col2-set .col-2{min-width:0}

/* Account dashboard panel */
.woocommerce-MyAccount-content{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:26px;min-width:0}
.woocommerce-MyAccount-navigation{background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:14px}
.woocommerce-MyAccount-content > p:first-child{margin-top:0}
.woocommerce-Address{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-sm);padding:18px}
.woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.woocommerce-Address-title h3{font-size:1rem;margin:0}

/* Order-received and order detail tables on the account screens */
.woocommerce-order .woocommerce-order-overview{list-style:none;display:flex;flex-wrap:wrap;
  gap:24px;padding:0;margin:0 0 24px}

@media(max-width:820px){
  .u-columns.col2-set{grid-template-columns:1fr}
}
@media(max-width:720px){
  .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions,
  .woocommerce table.shop_table td.order-actions{white-space:normal;text-align:left}
  .woocommerce table.shop_table td .button{margin:3px 8px 3px 0}
  .woocommerce-form-login,.woocommerce-form-register{padding:22px}
}

/* ==========================================================================
   Order received
   ========================================================================== */
.order-hero{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:34px;box-shadow:var(--sh-sm);margin-bottom:24px}
.order-hero h1{font-size:1.9rem;margin:0 0 .4rem}
.order-hero p{margin:0;font-size:1.02rem}
.order-hero-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  font-size:2rem;background:#e8f6ee;color:var(--c-ok);flex:none}
.order-hero.is-failed .order-hero-mark{background:var(--c-accent-050);color:var(--c-accent)}
.order-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

.order-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.order-layout .summary-row span.muted{flex:none}
.order-layout .summary-row b{text-align:right;min-width:0}

/* Failed step in the progress bar */
.step.fail i{background:var(--c-accent)}
.step.fail{color:var(--c-accent);font-weight:600}

/* WooCommerce prints its address block with <br>; keep it readable */
.order-layout .office p{font-size:.94rem;line-height:1.6}

@media(max-width:900px){
  .order-layout{grid-template-columns:1fr}
  .order-hero{grid-template-columns:1fr;text-align:center;padding:28px 22px}
  .order-hero-mark{margin-inline:auto}
  .order-hero-actions{justify-content:center}
}

/* ==========================================================================
   WooCommerce components that ship with no markup of their own.
   Because the WooCommerce stylesheets are dequeued, every widget it prints
   needs an explicit style here or the browser renders it raw.
   ========================================================================== */

/* Show/hide password toggle inside the field */
.woocommerce .password-input,.woocommerce-page .password-input{position:relative;display:block}
.woocommerce .password-input input{padding-right:46px}
.woocommerce .show-password-input{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;border:none;background:transparent;cursor:pointer;
  border-radius:var(--r-sm);opacity:.55;transition:.15s;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234a5568'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.2 8a13 13 0 0 1 1.7-2.2C4.2 4.5 5.9 3.5 8 3.5s3.8 1 5.1 2.3A13 13 0 0 1 14.8 8a13 13 0 0 1-1.7 2.2C11.8 11.5 10.1 12.5 8 12.5s-3.8-1-5.1-2.3A13 13 0 0 1 1.2 8'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:18px 18px}
.woocommerce .show-password-input:hover{opacity:1;background-color:var(--c-primary-050)}
.woocommerce .show-password-input.display-password{opacity:1;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ED3237'%3E%3Cpath d='M13.36 11.23 14.7 12.6l-.7.7-12-12 .7-.7 1.9 1.9A9.6 9.6 0 0 1 8 2.5c5 0 8 5.5 8 5.5a15 15 0 0 1-2.64 3.23M5.35 3.22A12 12 0 0 0 1.2 8a13 13 0 0 0 1.7 2.2C4.2 11.5 5.9 12.5 8 12.5c.9 0 1.7-.18 2.44-.47l-1.2-1.2a2.5 2.5 0 0 1-3.07-3.07z'/%3E%3C/svg%3E")}

/* Password strength meter */
.woocommerce-password-strength{margin-top:8px;padding:.45rem .8rem;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:600;text-align:center}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{background:var(--c-accent-050);color:var(--brand-red-dark)}
.woocommerce-password-strength.good{background:#fdf1e0;color:var(--c-warn)}
.woocommerce-password-strength.strong{background:#e8f6ee;color:var(--c-ok)}
.woocommerce-password-hint{display:block;margin-top:6px;font-size:.8rem;color:var(--c-muted)}

/* AJAX loading overlay on cart and checkout */
.blockUI.blockOverlay{position:relative}
.blockUI.blockOverlay::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);
  backdrop-filter:blur(1px)}
.blockUI.blockOverlay::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;
  margin:-15px 0 0 -15px;border:3px solid var(--c-line);border-top-color:var(--c-primary);
  border-radius:50%;animation:pp-spin .7s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}

/* Terms checkbox on checkout */
.woocommerce-terms-and-conditions-wrapper{margin:16px 0}
.woocommerce-terms-and-conditions-checkbox-text{font-size:.9rem}
.woocommerce-privacy-policy-text p{font-size:.84rem;color:var(--c-muted);margin:0 0 12px}
.validate-required.woocommerce-invalid label{color:var(--c-accent)}

/* Store notice, if ever enabled */
.woocommerce-store-notice{background:var(--c-primary);color:#fff;padding:.8rem 1.2rem;
  text-align:center;font-size:.9rem}
.woocommerce-store-notice a{text-decoration:underline}

/* Product gallery slider arrows (flexslider) */
.woocommerce-product-gallery .flex-direction-nav{list-style:none;margin:0;padding:0}
.woocommerce-product-gallery .flex-direction-nav a{position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--c-line);
  display:grid;place-items:center;text-indent:-9999px;z-index:5;box-shadow:var(--sh-sm)}
.woocommerce-product-gallery .flex-direction-nav .flex-prev{left:14px}
.woocommerce-product-gallery .flex-direction-nav .flex-next{right:14px}

/* "Order again", "Cancel" and similar secondary account buttons */
.woocommerce .button.wc-forward,.woocommerce a.button.alt.wc-forward{background:var(--c-primary);border-color:var(--c-primary)}
.woocommerce-MyAccount-content .button{margin-right:8px}
.woocommerce-Message .button{flex:none}

/* Breadcrumb WooCommerce prints on its own templates */
.woocommerce-breadcrumb{font-size:.85rem;color:var(--c-muted);margin-bottom:10px}
.woocommerce-breadcrumb a{color:var(--c-primary)}

/* Quantity input inside the cart table on small screens */
.woocommerce .quantity input.qty{-moz-appearance:textfield}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Select2 dropdown panel (country/state pickers) */
.select2-dropdown{border-color:var(--c-line)!important;border-radius:var(--r-sm)!important;
  box-shadow:var(--sh-md);overflow:hidden}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--c-primary)!important}
.select2-search--dropdown .select2-search__field{border:1px solid var(--c-line)!important;
  border-radius:var(--r-sm)!important;padding:.5rem .7rem!important}
.select2-container--default .select2-selection--single{height:auto!important;
  display:flex;align-items:center;min-height:46px}

/* ==========================================================================
   Contact Form 7 — its wrapper span is inline by default, which collapses
   every field to its natural width. CF7's own stylesheet is not loaded.
   ========================================================================== */
.wpcf7-form-control-wrap{display:block;width:100%;position:relative}
.field .wpcf7-form-control-wrap input,
.field .wpcf7-form-control-wrap select,
.field .wpcf7-form-control-wrap textarea,
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=url],.wpcf7 input[type=number],.wpcf7 input[type=date],
.wpcf7 select,.wpcf7 textarea{
  width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:.72rem .9rem;outline:none;background:#fff;transition:.15s;
  font-family:var(--ff-body);font-size:1rem;color:var(--c-ink)}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-050)}
.wpcf7 textarea{min-height:120px;resize:vertical}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--c-muted)}

/* File upload */
.wpcf7 input[type=file]{width:100%;border:1.5px dashed var(--c-line);border-radius:var(--r-sm);
  padding:.9rem;background:var(--c-bg);font-size:.9rem;cursor:pointer}
.wpcf7 input[type=file]:hover{border-color:var(--c-primary);background:var(--c-primary-050)}
.wpcf7 input[type=file]::file-selector-button{border:none;background:var(--c-primary);color:#fff;
  border-radius:var(--r-pill);padding:.45rem 1rem;margin-right:12px;font-weight:600;
  font-size:.85rem;cursor:pointer;font-family:var(--ff-body)}

/* Checkbox / radio / acceptance lists */
.wpcf7-list-item{display:inline-flex;align-items:center;gap:8px;margin:0 16px 0 0}
.wpcf7-list-item-label{font-size:.92rem}
.wpcf7 input[type=checkbox],.wpcf7 input[type=radio]{width:auto;accent-color:var(--c-accent);
  margin:0;box-shadow:none;padding:0}
.wpcf7-acceptance .wpcf7-list-item{margin:0}

/* Inside an inline checkbox row the wrapper must not take the full width,
   or the box and its label separate to opposite ends. */
.check .wpcf7-form-control-wrap,
label.check .wpcf7-form-control-wrap{display:inline-flex;width:auto;flex:none}
.check .wpcf7-list-item{margin:0}

/* Submit button keeps whatever btn-* classes the form gave it */
.wpcf7 .btn-block{width:100%}
.wpcf7-spinner{display:none;width:20px;height:20px;margin:0 0 0 10px;vertical-align:middle;
  border:2px solid var(--c-line);border-top-color:var(--c-primary);border-radius:50%;
  background:none;animation:pp-spin .7s linear infinite}
.wpcf7-spinner.is-active,form.submitting .wpcf7-spinner{display:inline-block}

/* CF7 wraps its hidden inputs in a fieldset, which the browser draws with a
   default 2px border — it appeared as an empty box above the first field. */
.wpcf7 .hidden-fields-container,.wpcf7 fieldset.hidden-fields-container{
  display:none!important;border:0;padding:0;margin:0}

/* The response box is always in the DOM; only show it once there is a message. */
.wpcf7-response-output{display:none}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{display:block}

/* Validation messages */
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:.8rem;color:var(--c-accent);font-weight:500}
.wpcf7 .wpcf7-not-valid{border-color:var(--c-accent)!important}
.wpcf7-response-output{margin:18px 0 0!important;padding:.9rem 1.1rem!important;
  border:1px solid var(--c-line)!important;border-radius:var(--r-md)!important;font-size:.92rem}
.wpcf7 form.sent .wpcf7-response-output{background:#e8f6ee;border-color:#bde5cd!important;color:#12693b}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{background:var(--c-accent-050);
  border-color:#f6c9ca!important;color:var(--brand-red-dark)}

/* ==========================================================================
   Block builder helpers — the background and spacing options each block
   exposes through its Background / Remove top spacing fields.
   ========================================================================== */
.section.bg-card{background:var(--c-card);border-block:1px solid var(--c-line)}
.section.bg-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700));color:#fff}
.section.bg-primary h2,.section.bg-primary h3{color:#fff}
.section.bg-primary .eyebrow{color:#fff;opacity:.8}
.section.bg-primary .rule{background:#fff;opacity:.6}
/* With the top padding removed the section's own top border reads as a stray
   rule floating above the content, so it goes too. */
.section.pt-0{padding-top:0;border-top:0}
@media(max-width:900px){.pp-offer-row{grid-template-columns:1fr!important}}

/* ==========================================================================
   Block grid columns.
   These live in CSS rather than inline styles on the block, otherwise the
   inline value outranks every media query and the section overflows on phones.
   ========================================================================== */
.stat-band.cols-1{grid-template-columns:1fr}
.stat-band.cols-2{grid-template-columns:repeat(2,1fr)}
.stat-band.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-band.cols-4{grid-template-columns:repeat(4,1fr)}

.pp-offer-row{display:grid;gap:24px}
.pp-offer-row.cols-1{grid-template-columns:1fr}
.pp-offer-row.cols-2{grid-template-columns:repeat(2,1fr)}
.pp-offer-row.cols-3{grid-template-columns:repeat(3,1fr)}

.cta-panel{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}

@media(max-width:1000px){
  .stat-band.cols-3,.stat-band.cols-4{grid-template-columns:repeat(2,1fr)}
  .pp-offer-row.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .pp-offer-row.cols-2,.pp-offer-row.cols-3{grid-template-columns:1fr}
}
@media(max-width:600px){
  .stat-band.cols-2,.stat-band.cols-3,.stat-band.cols-4{grid-template-columns:repeat(2,1fr)}
  /* An odd count leaves a lone tile; let the last one span both columns. */
  .stat-band.cols-3 .stat:last-child{grid-column:1/-1}
  .cta-panel{grid-template-columns:1fr;text-align:center}
  .cta-panel .btn{justify-self:center}
}

/* ==========================================================================
   Category cards — a real image when one is set, the icon only as fallback.
   ========================================================================== */
.cat-card .ic.has-img{width:64px;height:64px;padding:0;overflow:hidden;
  background:var(--c-primary-050);border:1px solid var(--c-line)}
.cat-card .ic.has-img img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit}
.cat-card:hover .ic.has-img img{transform:scale(1.05);transition:transform .25s ease}

/* ==========================================================================
   Split block: image matches the copy height, and a full-width variant for
   when no image is set.
   ========================================================================== */
.split.split-stretch{align-items:stretch}
.split.split-stretch > div{min-width:0}
.split.split-stretch img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.split-none{max-width:820px}
.split-none .lead{max-width:none}

/* Footer social icons, in place of the old payment labels */
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);color:#cfd4e6;font-size:1rem;transition:.18s ease}
.footer-social a:hover{background:var(--brand-red);border-color:var(--brand-red);color:#fff;
  transform:translateY(-2px)}

@media(max-width:820px){
  .split.split-stretch{align-items:start}
  .split.split-stretch img{height:auto}
}

/* ==========================================================================
   Counter / stats band styles
   ========================================================================== */
.stat-band{position:relative;overflow:hidden}
.stat-band .stat{position:relative;padding:8px 18px}
.stat-band .stat b{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.02em;line-height:1.05}
.stat-band .stat span{display:block;margin-top:6px;font-size:.86rem;letter-spacing:.02em}

/* Divider between stats, never after the last one or at the start of a row */
.stat-band .stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;
  width:1px;background:currentColor;opacity:.16}

/* Tinted panel with red numbers — the default */
.stat-band.is-tint{background:linear-gradient(135deg,var(--c-primary-050),var(--c-accent-050));
  border-color:transparent}
.stat-band.is-tint .stat b{color:var(--c-accent)}
.stat-band.is-tint .stat span{color:var(--c-primary);opacity:.75;font-weight:500}
.stat-band.is-tint .stat{color:var(--c-primary)}

/* Navy band with white numbers */
.stat-band.is-primary{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700));
  border-color:transparent;color:#fff}
.stat-band.is-primary .stat b{color:#fff}
.stat-band.is-primary .stat b::after{content:"";display:block;width:34px;height:3px;margin:10px auto 0;
  border-radius:2px;background:var(--brand-red)}
.stat-band.is-primary .stat span{color:#fff;opacity:.72}
.stat-band.is-primary .stat{color:#fff}

/* Plain white card, navy numbers */
.stat-band.is-plain{background:var(--c-card)}
.stat-band.is-plain .stat b{color:var(--c-primary)}
.stat-band.is-plain .stat span{color:var(--c-muted)}
.stat-band.is-plain .stat{color:var(--c-primary)}

@media(max-width:600px){
  .stat-band .stat + .stat::before{left:14%;top:0;height:1px;width:72%}
  .stat-band .stat{padding:16px 12px}
}

/* Centred variant of the split block when it carries no image */
.split-none-center{text-align:center}
.split-none-center .rule{margin-inline:auto}
.split-none-center .lead,.split-none-center p{margin-inline:auto}
.split-none-center > div > div[style*="display:flex"]{justify-content:center}

.hero::before{opacity:.4}
.hero-inner{position:relative;z-index:1}

/* ==========================================================================
   Row slider — opt-in per block (Flagship, Trending, News & events).
   Built on scroll-snap rather than a JS slide engine: the row stays a real
   scroll container, so touch, trackpad and keyboard all work natively and the
   script only has to drive the arrows and dots.

   The track is addressed as `.pp-slider-wrap > .pp-slider` throughout. A bare
   `.pp-slider` loses to `.products.cols-3` and friends, which set
   grid-template-columns at several breakpoints — that left Flagship and News
   as wrapped grids with nothing to scroll instead of sliders.
   ========================================================================== */
.pp-slider-wrap{position:relative}

/* Column counts come from the block as --cd / --ct / --cm, with --pm for the
   slider's mobile per-view. They drive the row whether it is a grid or a
   slider, so exactly one of the two sets of rules below applies at any width:
   the :not(.slide-*) guard is what keeps them from fighting each other. */
.pp-slider-wrap > .pp-cols{display:grid;gap:24px}

/* --- grid mode ------------------------------------------------------------ */
@media(min-width:901px){
  .pp-slider-wrap > .pp-cols:not(.slide-desktop){grid-auto-flow:row;overflow:visible;
    scroll-snap-type:none;grid-template-columns:repeat(var(--cd,4),1fr)}
}
@media(max-width:900px){
  .pp-slider-wrap > .pp-cols{gap:16px}
  .pp-slider-wrap > .pp-cols:not(.slide-mobile){grid-auto-flow:row;overflow:visible;
    scroll-snap-type:none;grid-template-columns:repeat(var(--ct,2),1fr)}
}
@media(max-width:600px){
  .pp-slider-wrap > .pp-cols{gap:12px}
  .pp-slider-wrap > .pp-cols:not(.slide-mobile){grid-template-columns:repeat(var(--cm,2),1fr)}
}

/* --- slider mode ---------------------------------------------------------- */
.pp-slider-wrap > .pp-slider{--per:var(--cd,4);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap,24px)) / var(--per));
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.pp-slider-wrap > .pp-slider::-webkit-scrollbar{display:none}
.pp-slider-wrap > .pp-slider > *{scroll-snap-align:start}
/* A lifted card would be clipped by the scroll container. */
.pp-slider-wrap > .pp-slider .p-card:hover{transform:none}

@media(min-width:901px){
  .pp-slider-wrap > .pp-slider.slide-desktop{--gap:24px}
  .pp-slider-nav:not(.slide-desktop){display:none}
}
@media(max-width:900px){
  .pp-slider-wrap > .pp-slider{--per:var(--ct,2);--gap:16px}
  .pp-slider-nav:not(.slide-mobile){display:none}
}
@media(max-width:600px){
  /* --pm, not --cm: a single-column slider carries a fractional per-view so a
     sliver of the next card shows and the row reads as swipeable. */
  .pp-slider-wrap > .pp-slider.slide-mobile{--per:var(--pm,2);--gap:12px}
}

.pp-slider-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.pp-slider-nav[hidden]{display:none}
.pp-slider-arrow{width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid var(--c-line);background:var(--c-card);color:var(--c-ink);
  font-size:1rem;line-height:1;padding:0;transition:background .2s ease,color .2s ease,border-color .2s ease}
.pp-slider-arrow:hover:not(:disabled){background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.pp-slider-arrow:disabled{opacity:.35;cursor:default}
.pp-slider-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.pp-slider-dot{width:9px;height:9px;padding:0;cursor:pointer;border:0;border-radius:50%;
  background:var(--c-line);transition:width .25s ease,background .25s ease}
.pp-slider-dot.is-active{width:26px;border-radius:99px;background:var(--c-accent)}
.pp-slider-arrow:focus-visible,.pp-slider-dot:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .pp-slider-wrap > .pp-slider{scroll-behavior:auto}
}

/* ==========================================================================
   Mobile density — the hero and the footer each ran to 1.7 screens on a phone,
   which pushed everything else far down the page. Nothing is removed here,
   only tightened: the same content in roughly two thirds of the height.
   ========================================================================== */
@media(max-width:600px){
  /* ---- Hero ---- */
  .hero-inner{gap:26px;padding-block:26px}
  .hero h1{font-size:1.72rem;line-height:1.16;max-width:none}
  .hero p{font-size:.95rem;line-height:1.5;margin-top:10px}

  /* Two buttons stacked cost more height than the paragraph above them. */
  .hero-cta{gap:10px;margin-top:18px}
  .hero-cta .btn{flex:1 1 0;min-width:0;justify-content:center;
    padding-inline:14px;font-size:.88rem;white-space:nowrap}

  .hero-stats{gap:12px 14px;margin-top:22px}
  .hero-stats b{font-size:1.45rem}
  .hero-stats span{font-size:.8rem;line-height:1.3}

  /* The pack sits on a tall card; trimming its padding shortens the whole
     slide without shrinking the product itself. */
  .hero-slide-stage img{aspect-ratio:1/.56;padding:12px 16px 2px}
  .hero-slide-body{padding:0 16px 16px;gap:6px}
  .hero-slide-title{font-size:1.05rem}
  .hero-slide-sub{font-size:.82rem}
  .hero-slide{padding-bottom:52px}
  .hero-slider-nav{height:52px;padding:0 14px}

  /* ---- Footer ---- */
  /* The two link menus pair up; the brand block and the address keep the full
     width because their lines are long. */
  .footer-top{grid-template-columns:repeat(2,1fr);gap:24px 18px}
  .footer-top > *:first-child,
  .footer-top > *:last-child{grid-column:1/-1}
  .footer-top h4{font-size:.9rem;margin-bottom:.45rem}
  .footer-top a{font-size:.85rem;line-height:1.5}
  .footer-top p{font-size:.85rem;line-height:1.5}
  .footer-top img{max-height:34px;width:auto}
  .footer-bot{font-size:.76rem;line-height:1.5}
}

/* ==========================================================================
   Trust strip — on a phone the four boxes show two at a time, crossfading
   between pairs.

   The pair that is off is display:none rather than transparent, and the fade
   is applied to the whole strip. That way the swap itself never depends on
   opacity: if the fade is ignored the content still changes correctly, just
   without the transition — where an opacity-only approach would leave all four
   stacked on top of each other and unreadable. The script pins a min-height so
   a taller pair cannot make the page jump.
   ========================================================================== */
@media(max-width:600px){
  .trust-grid.is-rotating{transition:opacity .3s ease}
  .trust-grid.is-rotating.is-fading{opacity:0}
  .trust-grid.is-rotating .trust-item{display:none}
  .trust-grid.is-rotating .trust-item.is-on{display:flex}
}