/* Happy Cappy — Shop page (V2).
   File: assets/css/shop-v2.css

   Page-specific styles for the curated /shop/ landing (rendered by
   woocommerce/archive-product.php → template-parts/shop-v2/shop-main.php).
   Loaded ONLY on is_shop() (inc/shop-v2/enqueue.php), after tokens + fonts +
   chrome CSS. Colours/fonts/radii come from tokens.css via var(--*) so the body
   matches the shared header/footer chrome; the mockup's own palette is NOT
   hardcoded here. The only literal colours are the concern-router category
   accents (a scoped component scheme) and retailer brand colours (Amazon etc.),
   which can't be token-ised.

   Source: Claude Design "Shop-Page.html" export (shop-page style block). */

/* ===== BASE RESET =====
   product-v2.css carries the global reset for the PDP, but that sheet is not
   loaded on the shop (parent style.css is dropped here too), so the shop must
   supply its own. Kept byte-identical to product-v2.css so the two pages share
   one baseline. Everything is tokenised → dark mode remaps automatically. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body),system-ui,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:var(--body-size); line-height:var(--body-lh); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display),var(--font-body),sans-serif;font-weight:600;line-height:1.08;letter-spacing:-.012em;color:var(--teal-ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}

/* ===== DARK MODE TOKEN REMAP =====
   The site's dark-mode token overrides live in product-v2.css, which the shop
   doesn't load — so without this the chrome would darken but the shop body
   would stay light. Byte-identical to product-v2.css so both pages share one
   dark palette. The chrome's own dark component rules ship in hc-header.css. */
html[data-theme="dark"]{
  --cream:#121821 !important;          /* page background */
  --card:#19222e;           /* primary surface */
  --card-2:#212c3a !important;         /* secondary surface / hovers */
  --surf:#19222e;           /* color-mix tint base (was #fff) */
  --ink:#e9eff0;            /* primary text */
  --body:#c3d1d3;           /* body copy */
  --muted:#93a7ab;          /* muted text */
  --line:#2c3845 !important;           /* borders */
  --line-2:#26303c;
  --teal-ink:#ebf4f5 !important;       /* flipped: headings/labels now light */
  --teal:#62a6e0 !important;           /* brand blue, brightened for dark */
  --teal-deep:#4f93cf !important;
  --accent:#dc8d55 !important;         /* softened coral */
  --accent-deep:#ecac76 !important;    /* lighter so it reads as text on dark */
  --amber:#dc8d55;
  --green:#62a6e0 !important;
  --green-bg:#16263a !important;
  --gold:#e9b63f;
  --ink-surface:#11283f !important;    /* navy bands (promo, trust, footer, cart head) */
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.66);
  --shadow-lg:0 30px 60px -24px rgba(0,0,0,.78);
  color-scheme:dark;
}

/* ===== SHOP PAGE ===== */
.shop-main{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Intro / crawler content */
.shop-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:46px;align-items:start;padding:34px 0 14px}
.shop-intro .eyebrow{margin-bottom:13px}
.shop-intro h1{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.6vw,50px);line-height:1.04;letter-spacing:-.02em;color:var(--teal-ink);margin:0 0 16px;max-width:15ch}
.shop-intro .lede{font-size:17px;line-height:1.62;color:var(--muted);max-width:52ch;margin:0}
.shop-intro .lede b{color:var(--teal-ink);font-weight:600}
.si-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.si-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--teal-ink);background:color-mix(in srgb,var(--teal) 9%,var(--surf));border:1px solid color-mix(in srgb,var(--teal) 22%,var(--line));padding:7px 13px;border-radius:999px}
.si-chip svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:1.9}

/* Concern router — editorial split tiles, colour-keyed by destination product.
   --med maps to the brand teal / card-2 tokens; --day (amber) + --cr (slate)
   are a scoped category scheme with no token equivalent. */
.concern-wrap{padding:40px 28px 8px}
.concern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;
  --med:var(--teal); --med-soft:var(--card-2); --day:#c0732f; --day-soft:#fbeee2; --cr:#5d83a8; --cr-soft:#eef3f8;}
.concern-card{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.concern-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.concern-card .cc-ic{width:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin:0}
.concern-card .cc-ic svg{width:24px;height:24px;fill:none;stroke-width:1.8}
.concern-card .cc-bd{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:13px 16px;min-width:0}
.concern-card .cc-name{font-size:14.5px;font-weight:700;color:var(--teal-ink);line-height:1.2}
.concern-card .cc-to{font-size:11.5px;margin-top:4px;display:flex;align-items:center;gap:4px;font-weight:600}
.concern-card .cc-to svg{width:12px;height:12px;fill:none;stroke-width:2}
.concern-card.med .cc-ic{background:var(--med-soft)} .concern-card.med .cc-ic svg{stroke:var(--med)} .concern-card.med .cc-to{color:var(--med)} .concern-card.med .cc-to svg{stroke:var(--med)} .concern-card.med:hover{border-color:color-mix(in srgb,var(--med) 45%,var(--line))}
.concern-card.day .cc-ic{background:var(--day-soft)} .concern-card.day .cc-ic svg{stroke:var(--day)} .concern-card.day .cc-to{color:var(--day)} .concern-card.day .cc-to svg{stroke:var(--day)} .concern-card.day:hover{border-color:color-mix(in srgb,var(--day) 45%,var(--line))}
.concern-card.cr .cc-ic{background:var(--cr-soft)} .concern-card.cr .cc-ic svg{stroke:var(--cr)} .concern-card.cr .cc-to{color:var(--cr)} .concern-card.cr .cc-to svg{stroke:var(--cr)} .concern-card.cr:hover{border-color:color-mix(in srgb,var(--cr) 45%,var(--line))}

/* Catalog sections */
.shop-sec{padding:46px 0}
.shop-sec.tint{background:var(--card-2)}
/* Section heads: left edge = product grid edge; count pill on the right. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;text-align:left;margin-bottom:30px}
.sec-head .sh-left{flex:1 1 auto;min-width:0;max-width:64ch;margin:0}
.sec-head .eyebrow{margin-bottom:9px}
.sec-head h2{font-family:var(--font-display);font-weight:600;font-size:29px;line-height:1.06;letter-spacing:-.018em;color:var(--teal-ink);margin:0}
.sec-head p{font-size:17px;color:var(--muted);line-height:1.55;margin:14px 0 0;max-width:60ch}
.sec-head .sh-count{display:inline-block;flex-shrink:0;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);background:var(--card-2);border:1px solid color-mix(in srgb,var(--teal) 18%,var(--line));border-radius:999px;padding:6px 14px;margin:0 0 2px}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.shop-grid.cols-3{grid-template-columns:repeat(3,1fr)}

.shop-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;scroll-margin-top:96px}
.shop-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.shop-card.flash{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 26%,transparent);animation:fpulse 1.3s ease-out 2}
@keyframes fpulse{0%{box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 50%,transparent)}70%{box-shadow:0 0 0 13px color-mix(in srgb,var(--teal) 0%,transparent)}100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 26%,transparent)}}
/* Card image: the product photo on a rounded white card, framed inside a
   light-blue tile (no more blue-on-blue). #fff = the product photos' own
   background, so it stays white in dark mode too. */
.sc-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;margin:10px 10px 0;padding:10px;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--teal) 8%,var(--surf))}
.sc-media img{width:100%;height:100%;object-fit:contain;padding:10px;background:#fff;border-radius:11px;box-shadow:0 1px 2px rgba(16,58,69,.06),0 6px 16px -10px rgba(16,58,69,.3)}
.sc-badge{position:absolute;top:11px;left:11px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.01em}
.sc-badge.loved,.sc-badge.save{background:var(--amber);color:#fff}
.sc-body{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.sc-title{font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--teal-ink);line-height:1.28;margin:0}
/* WC product names can be long SEO titles — clamp so cards stay uniform. */
.sc-title a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sc-title a:hover{color:var(--teal)}
.sc-role{font-size:12.5px;color:var(--muted);line-height:1.45;margin:7px 0 0}
.sc-inside{font-size:12px;color:var(--muted);line-height:1.45;margin:10px 0 0;padding:9px 0 0;border-top:1px solid var(--line);display:flex;gap:7px;align-items:baseline}
.sc-inside b{color:var(--teal);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10px;white-space:nowrap}
.sc-tags{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0}
.sc-tags span{font-size:10.5px;font-weight:600;color:var(--teal);background:color-mix(in srgb,var(--teal) 9%,var(--surf));border:1px solid color-mix(in srgb,var(--teal) 18%,var(--line));padding:3px 8px;border-radius:999px;line-height:1.2}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.sc-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.sc-price b{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--teal-ink)}
.sc-price .from{font-size:11px;font-weight:600;color:var(--muted);margin-right:-3px}
.sc-price s,.sc-price del{font-size:12.5px;color:var(--muted)}
/* WC price_html markup: normalise its amount/ins/del to the card price style. */
.sc-price .woocommerce-Price-amount{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--teal-ink)}
.sc-price ins{text-decoration:none}
.sc-offer{flex-basis:100%;display:flex;flex-direction:column;gap:1px;font-family:var(--font-body);font-size:11.5px;font-weight:500;line-height:1.35;color:var(--muted)}
.sc-offer .sc-sub{color:var(--teal);font-weight:600}
.sc-price del .woocommerce-Price-amount{font-size:12.5px;font-weight:600;color:var(--muted)}
/* Admin price override ("From <b>$10.00</b>"): plain text (e.g. "From") reads
   small + muted like the design's .from; <b> is the big teal price. */
.sc-price--custom{font-size:11px;font-weight:600;color:var(--muted)}
.sc-price--custom b{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--teal-ink)}
.sp-foot .sc-price--custom b{font-size:24px}
.sc-cta{background:var(--cta);border:1.5px solid var(--cta);color:#fff;font-weight:700;font-size:13px;padding:8px 15px;border-radius:var(--radius-sm);white-space:nowrap;transition:background .15s,border-color .15s}
.sc-cta:hover{background:var(--cta-deep);border-color:var(--cta-deep)}

/* Where to buy */
.retail-band{padding:40px 28px 64px}
.retail-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.retail-card .rc-text h2{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--teal-ink);margin:0 0 6px;letter-spacing:-.01em}
.retail-card .rc-text p{font-size:14px;color:var(--muted);margin:0;max-width:46ch;line-height:1.5}
.retail-links{display:flex;flex-wrap:wrap;gap:10px}
.retail-links a{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:#fff;border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 18px;transition:background .15s,box-shadow .15s,transform .15s}
.retail-links a:hover{transform:translateY(-2px)}
.retail-links a.amz{background:#ff9900;border-color:#ff9900}
.retail-links a.amz:hover{background:#e08600;border-color:#e08600;box-shadow:0 4px 12px -4px rgba(255,153,0,.5)}
.retail-links a.wmt{background:#0071ce;border-color:#0071ce}
.retail-links a.wmt:hover{background:#005cb0;border-color:#005cb0;box-shadow:0 4px 12px -4px rgba(0,113,206,.5)}
.retail-links a.cvs{background:#cc0000;border-color:#cc0000}
.retail-links a.cvs:hover{background:#ad0000;border-color:#ad0000;box-shadow:0 4px 12px -4px rgba(204,0,0,.5)}
.retail-links a.wgn{background:#e31837;border-color:#e31837}
.retail-links a.wgn:hover{background:#c01230;border-color:#c01230;box-shadow:0 4px 12px -4px rgba(227,24,55,.5)}

@media(max-width:1000px){
  .concern-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .shop-grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .concern-grid{grid-template-columns:1fr}
  .shop-grid,.shop-grid.cols-3{grid-template-columns:1fr 1fr}
  .sec-head{margin-bottom:24px;flex-wrap:wrap;align-items:flex-start;gap:12px}
  .sec-head .sh-count{margin:0}
  .retail-card{flex-direction:column;align-items:flex-start}
}

/* ===== Intro hero (design option 3a): copy left, lineup photo right =====
   Left edge = .shop-main padding = the product grid edge. The photo frame
   crops (object-fit:cover); the per-breakpoint aspect ratios + object-positions
   are tuned so the lineup photo's baked-in logo/tagline (left ~540px) never
   shows. --si-pos (admin "crop focus", set inline on the figure) overrides
   all three. hc_shop_hero_image() computes the img `sizes` from these frame
   ratios — keep the two in sync. */
.shop-intro.hero-3a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;text-align:left;max-width:none;margin:0;padding:40px 0 44px}
.hero-3a .si-left{display:flex;flex-direction:column;min-width:0}
.hero-3a .eyebrow{margin-bottom:18px}
.hero-3a h1{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,4.4vw,56px);line-height:1;letter-spacing:-.026em;color:var(--teal-ink);margin:0 0 24px;max-width:none}
.hero-3a h1 span{color:var(--teal)}
.hero-3a .si-sub{font-size:19px;line-height:1.4;font-weight:500;color:var(--teal-ink);margin:0 0 12px}
.hero-3a .lede{font-size:15px;line-height:1.66;color:var(--muted);max-width:50ch;margin:0;text-wrap:pretty}
.hero-3a .lede b{color:var(--teal-ink);font-weight:600}
/* Perks: icon-in-circle row, divided, above a hairline (no pill backgrounds). */
.hero-3a .si-chips{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:0;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.hero-3a .si-chip{display:flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0 22px;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--teal-ink);max-width:20ch}
.hero-3a .si-chip:first-child{padding-left:0}
.hero-3a .si-chip + .si-chip{border-left:1px solid var(--line)}
.hero-3a .si-chip svg{width:34px;height:34px;flex-shrink:0;padding:8.5px;border-radius:50%;background:var(--card-2);stroke:var(--teal);fill:none;stroke-width:1.9;box-sizing:border-box}
/* Photo */
.hero-3a .si-media{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:1.12/1;background:var(--card-2);box-shadow:var(--shadow-lg)}
.hero-3a .si-media img{width:100%;height:100%;object-fit:cover;object-position:var(--si-pos,74% 60%);display:block}
/* Card-surface label (white-on-amber fails contrast at 12px). */
.hero-3a .si-badge{position:absolute;top:18px;left:18px;background:var(--card);color:var(--teal-ink);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;box-shadow:0 1px 2px rgba(16,58,69,.12)}
/* No photo set → one left-aligned text column. */
.shop-intro.hero-3a--text{grid-template-columns:minmax(0,1fr)}
.hero-3a--text .lede{max-width:64ch}

/* Narrow desktop: the copy column is too tight for a 3-across perks row —
   stack each perk (icon above text) like the phone layout. */
@media(min-width:1001px) and (max-width:1200px){
  .hero-3a .si-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hero-3a .si-chip{flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 0 12px;max-width:none}
  .hero-3a .si-chip:first-child{padding-left:0}
}
@media(max-width:1000px){
  .shop-intro.hero-3a{grid-template-columns:1fr;gap:32px;padding:32px 0 28px}
  .hero-3a .si-media{aspect-ratio:1.35/1}
  .hero-3a .si-media img{object-position:var(--si-pos,100% 60%)}
  .hero-3a .si-chip{max-width:none;white-space:nowrap}
}
@media(max-width:620px){
  .hero-3a .si-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hero-3a .si-chip{flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 0 12px;max-width:none;white-space:normal}
  .hero-3a .si-chip:first-child{padding-left:0}
  .hero-3a .si-media{aspect-ratio:1.15/1;border-radius:18px}
  .hero-3a .si-media img{object-position:var(--si-pos,76% 60%)}
}

/* Spotlight */
.spotlight-wrap{padding:26px 28px 6px}
.spotlight{display:grid;grid-template-columns:1fr 1fr;background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.sp-media{position:relative;display:flex;align-items:center;justify-content:center;background:var(--card);padding:20px;border-right:1px solid var(--line)}
.sp-media img{height:500px;max-width:100%;width:auto;object-fit:contain}
.sp-badge{position:absolute;top:16px;left:16px;background:var(--amber);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.sp-body{padding:34px 40px;display:flex;flex-direction:column;justify-content:center}
.sp-body .eyebrow{margin-bottom:11px}
/* 29px to match the approved design: the mockup renders in will-mode, where
   `html.will section h2{font-size:29px}` overrode the base clamp. The live site
   baked will-mode in as the default but without that section-h2 rule, so the
   spotlight was rendering at the old 36px. Pin it to the design value. */
.sp-body h2{font-family:var(--font-display);font-weight:600;font-size:29px;line-height:1.05;letter-spacing:-.02em;color:var(--teal-ink);margin:0 0 14px}
.sp-lede{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 18px;max-width:48ch}
.sp-points{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.sp-points li{position:relative;padding-left:28px;font-size:14px;color:var(--teal-ink);line-height:1.4}
.sp-points li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:color-mix(in srgb,var(--teal) 14%,var(--surf));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232f6fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.sp-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto}
.sp-foot .sc-price b,.sp-foot .sc-price .woocommerce-Price-amount{font-size:24px}
.sp-cta{background:var(--cta);color:#fff;font-weight:700;font-size:15px;padding:13px 26px;border-radius:var(--radius-sm);transition:background .15s}
.sp-cta:hover{background:var(--cta-deep)}
.sp-rating{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.sp-rating b{color:var(--teal-ink)}
.sp-stars{color:var(--amber);letter-spacing:1px}
.canon-band{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 24px;display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}
.canon-band svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.9;flex-shrink:0;margin-top:2px}
.canon-band p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.canon-band p b{color:var(--teal-ink);font-weight:600}
@media(max-width:1000px){.spotlight{grid-template-columns:1fr}.sp-media{border-right:none;border-bottom:1px solid var(--line)}.sp-media img{height:340px}}

/* ===== Mobile pass (≤620px) — approved by Dr. Eddie 2026-09-28 =====
   Tighter gutters + type, shorter two-column product cards with framed
   images, 2-up concern tiles, 2×2 retailer buttons. The two-column product
   grid and both offer lines (pack + subscribe) stay. Placed last so it wins
   over the ≤1000px spotlight/grid rules above. */
@media(max-width:620px){
  /* Page gutters (every band keeps the same 16px left edge). */
  .shop-main{padding:0 16px}
  .concern-wrap{padding:28px 16px 4px}
  .spotlight-wrap{padding:18px 16px 4px}
  .retail-band{padding:28px 16px 44px}
  .shop-sec{padding:32px 0}

  /* Hero */
  .shop-intro.hero-3a{padding:24px 0 8px;gap:24px}
  .hero-3a .eyebrow{margin-bottom:12px}
  .hero-3a h1{font-size:clamp(28px,9vw,34px);line-height:1.04;margin-bottom:16px}
  .hero-3a .si-sub{font-size:16.5px;margin-bottom:8px}
  .hero-3a .lede{font-size:14.5px;line-height:1.6}
  .hero-3a .si-chips{margin-top:20px;padding-top:16px}
  .hero-3a .si-chip{font-size:12px;gap:7px}
  .hero-3a .si-chip svg{width:30px;height:30px;padding:7px}
  .hero-3a .si-badge{top:12px;left:12px;font-size:11px;padding:4px 10px}

  /* Canonical note + spotlight */
  .canon-band{padding:14px 16px;gap:11px;margin-bottom:12px}
  .canon-band svg{width:19px;height:19px}
  .canon-band p{font-size:13.5px;line-height:1.5}
  .sp-media{padding:14px}
  .sp-media img{height:240px}
  .sp-badge{top:12px;left:12px;font-size:11px;padding:4px 10px}
  .sp-body{padding:22px 18px}
  .sp-body h2{font-size:24px;margin-bottom:10px}
  .sp-lede{font-size:14.5px;line-height:1.58;margin-bottom:16px}
  .sp-points{gap:8px;margin-bottom:20px}
  .sp-points li{font-size:13.5px;padding-left:26px}
  .sp-foot{gap:12px}
  .sp-cta{flex:1 1 100%;text-align:center;padding:13px 20px}

  /* Section heads */
  .sec-head{margin-bottom:18px}
  .sec-head .eyebrow{margin-bottom:7px}
  .sec-head h2{font-size:24px}
  .sec-head p{font-size:14.5px;line-height:1.5;margin-top:8px}
  .sec-head .sh-count{font-size:11px;padding:5px 11px}

  /* Concern router: 2-up compact tiles instead of one long column */
  .concern-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .concern-card{flex-direction:column}
  .concern-card .cc-ic{width:100%;height:40px;justify-content:flex-start;padding-left:12px}
  .concern-card .cc-ic svg{width:20px;height:20px}
  .concern-card .cc-bd{padding:10px 12px 12px;justify-content:flex-start}
  .concern-card .cc-name{font-size:13px}
  .concern-card .cc-to{font-size:11px;margin-top:3px;align-items:flex-start}
  .concern-card .cc-to svg{margin-top:1px;flex-shrink:0}

  /* Product cards (two-column grid kept) */
  .shop-grid,.shop-grid.cols-3{gap:10px}
  .shop-card{box-shadow:none;border-radius:16px}
  .shop-card:hover{transform:none}
  .sc-badge{top:7px;left:7px;font-size:10px;padding:3px 8px}
  .sc-body{padding:10px 11px 12px}
  .sc-title{font-size:13.5px;line-height:1.3}
  .sc-title a{-webkit-line-clamp:3}
  .sc-role{font-size:12px;line-height:1.4;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sc-tags{margin-top:8px;gap:4px}
  .sc-tags span{font-size:10px;padding:3px 7px}
  .sc-inside{font-size:11px;margin-top:8px;padding-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .sc-inside b{display:block;font-size:9.5px}
  .sc-foot{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px}
  .sc-price{gap:5px;row-gap:2px}
  .sc-price b,.sc-price .woocommerce-Price-amount,.sc-price--custom b{font-size:17px}
  .sc-offer{font-size:10.5px;line-height:1.3}
  .sc-cta{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;font-size:13.5px;width:100%;border-radius:12px}

  /* Card image frame: tighter on phones (base style above). */
  .sc-media{margin:8px 8px 0;padding:8px;border-radius:12px}
  .sc-media img{padding:0;border-radius:10px}

  /* Retailers: tidy 2×2 */
  .retail-card{padding:20px 18px;gap:16px}
  .retail-card .rc-text h2{font-size:19px}
  .retail-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .retail-links a{justify-content:center;min-height:46px;padding:0 12px}
}