/* ==========================================================================
   gg_components.css — CANONICAL redesign component layer.

   This file is the SINGLE SOURCE OF TRUTH for the new design system. It is the
   <style> block of _mockups/redesign_mockups.html, extracted VERBATIM so that
   every page consumes the exact same class names, animations, logo tokens, and
   clamp() font sizes. Do NOT re-author or approximate these rules per page —
   change the mockup first, get approval, then port the change here once.

   Loaded site-wide via gg_head.php (cache-busted). Renderers + home.php emit
   these classes; legacy enhancers in java1.js are being moved onto them too.
   Palette is locked: navy #10264a / #1B3A6B, retail blue #0b5cab, white/grays.
   Fonts: Space Grotesk / Figtree / Inter (loaded in gg_head.php).
   ========================================================================== */
:root{
  --navy-900:#10264a;
  --navy-700:#1B3A6B;
  --blue:#0b5cab;
  --blue-700:#094a8c;
  --blue-300:#8fb6e6;
  --white:#ffffff;
  --surface:#f5f7fa;
  --tint:#e7edf6;
  --tint-2:#eef2f8;
  --line:#dce3ec;
  --line-dark:#c9d4e2;
  --muted:#5b6b80;
  --ink:#1a2433;
  --font-display:"Space Grotesk",sans-serif;
  --font-ui:"Figtree",sans-serif;
  --font-body:"Inter",sans-serif;
  --radius:12px;
  --logo-w:84px;
  --logo-h:46px;
  --shadow-rest:0 1px 2px rgba(16,38,74,.04);
  --shadow-hover:0 14px 34px -12px rgba(16,38,74,.28);
  --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* `overflow-x:hidden` was removed here 2026-08-09 (Lane A). It hid horizontal
   scroll rather than preventing it, so any overflow regression was invisible
   instead of obvious. It was never the cause of the mobile centering bug - the
   page did not overflow. It WAS masking one real defect: the PDP ran to 396px
   against a 375px viewport, fixed by the .product-layout minmax(0,1fr) rule in
   the mobile design layer at the end of this file. scripts/measure_mobile_alignment.js
   now gates overflow directly, so the crutch is no longer load-bearing. */
body{margin:0;font-family:var(--font-body);color:var(--ink);background:#eef1f6;line-height:1.5}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
button,input{font:inherit}

.review-bar{position:relative;background:rgba(16,38,74,.96);color:#fff;padding:12px 24px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
.review-bar h1{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0;margin:0}
.review-bar .tag{font-family:var(--font-ui);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#9fc1ec}
.legend{display:flex;gap:14px;align-items:center;margin-left:auto;flex-wrap:wrap}
.legend .swatches{display:flex;gap:6px}
.legend .sw{width:18px;height:18px;border-radius:5px;border:1px solid rgba(255,255,255,.25)}
.sw-navy-900{background:var(--navy-900)}
.sw-navy-700{background:var(--navy-700)}
.sw-blue{background:var(--blue)}
.sw-surface{background:var(--surface)}
.sw-white{background:var(--white)}
.legend small{font-family:var(--font-ui);font-size:11px;color:#c7d6ec}
.canvas{max-width:1320px;margin:0 auto;padding:40px 24px 96px}
.stack{display:flex;flex-direction:column;gap:26px}
.stack-sm{display:flex;flex-direction:column;gap:14px}
.block{margin:0 0 72px;min-width:0}
.block-head{margin:0 0 18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.block-head .n{font-family:var(--font-display);font-weight:700;font-size:13px;color:#fff;background:var(--blue);width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.block-head h2{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:0;margin:0;color:var(--navy-900)}
.block-head p{font-family:var(--font-ui);font-size:13px;color:var(--muted);margin:0}
.viewport-label{font-family:var(--font-ui);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px}
.two-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,375px);gap:24px;align-items:start}
.two-up > *{min-width:0}
.note{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin:14px 0 0;display:flex;gap:7px;align-items:flex-start}
.note svg{width:14px;height:14px;color:var(--blue);flex:none;margin-top:2px}
.inline-code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}

/* ---------- shared mock browser/page shell ---------- */
.mock-frame{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-rest);min-width:0}
.mock-toolbar{height:46px;background:#f8fafc;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 16px}
.dot{width:9px;height:9px;border-radius:50%;background:#c6d1df}
.dot:nth-child(2){background:#d6deea}
.dot:nth-child(3){background:#e5ebf3}
.mock-url{margin-left:8px;color:#718096;font-family:var(--font-ui);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-page{background:#fff;overflow:hidden;min-width:0}
.mock-nav{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:18px}
.mock-nav strong{font-family:var(--font-display);font-size:17px;color:var(--navy-900)}
.mock-nav span{font-family:var(--font-ui);font-size:12px;color:var(--muted);white-space:nowrap}
.page-pad{padding:34px;min-width:0}
.band{padding:34px;background:#fff;min-width:0}
.band-tint{background:var(--tint-2)}
.band-navy{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff}
.section-title{font-family:var(--font-display);font-size:22px;line-height:1.15;color:var(--navy-900);margin:0 0 14px}
.band-navy .section-title{color:#fff}
.section-copy{font-size:14px;color:var(--muted);margin:0;max-width:68ch}
.band-navy .section-copy{color:#dbe5f3}
.kicker{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.band-navy .kicker,.hero .eyebrow{color:var(--blue-300)}
.breadcrumb{font-family:var(--font-ui);font-size:12px;color:#6f7f94;margin:0 0 14px}
.breadcrumb a{color:var(--blue);text-decoration:none}

/* ---------- rev 4 home hero ---------- */
.hero{background:linear-gradient(150deg,var(--navy-900) 0%,#15315c 55%,var(--navy-700) 100%);color:#fff;border-radius:18px;overflow:hidden;position:relative;padding:54px 52px;min-width:0}
.hero .fx{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:34px;align-items:center;min-width:0}
.hero-inner{max-width:600px;min-width:0}
.hero .eyebrow{font-family:var(--font-ui);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.hero h1,.hero h2{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.6vw,50px);line-height:1.05;letter-spacing:0;margin:14px 0 0;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero p{font-size:16px;color:#dbe5f3;max-width:48ch;margin:16px 0 0}
.hero-cta-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:7px 7px 7px 16px;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.hero-search .si{width:18px;height:18px;color:var(--muted);flex:none}
.hero-search input{flex:1;border:0;outline:0;font-family:var(--font-body);font-size:15px;color:var(--ink);background:transparent;min-width:0}
.hero-search input::placeholder{color:#9aa7b8}
.hero-search button{font-family:var(--font-ui);font-weight:600;font-size:14px;background:var(--blue);color:#fff;border:0;border-radius:9px;padding:11px 18px;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease)}
.hero-search button:hover{background:var(--blue-700);transform:translateY(-1px)}
.trust{display:flex;gap:24px;margin-top:26px;flex-wrap:wrap;position:relative;z-index:2}
.trust div{font-family:var(--font-ui)}
.trust b{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff}
.trust span{font-size:12px;color:#9fb6d6;letter-spacing:.02em}
.fx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(143,182,230,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(143,182,230,.10) 1px,transparent 1px);background-size:38px 38px}
.fx-grid.coarse{background-image:linear-gradient(rgba(143,182,230,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(143,182,230,.16) 1px,transparent 1px);background-size:190px 190px}
.fx-trace{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.fx-trace path{fill:none;stroke:rgba(143,182,230,.35);stroke-width:1.4}
.fx-trace circle{fill:var(--blue-300)}
.fx-sweep{position:absolute;top:-30%;left:-40%;width:55%;height:160%;transform:rotate(8deg);background:linear-gradient(90deg,transparent,rgba(120,170,235,.16) 45%,rgba(160,200,245,.26) 50%,rgba(120,170,235,.16) 55%,transparent);filter:blur(6px);animation:sweep 7.5s var(--ease) infinite}
@keyframes sweep{0%{left:-50%}100%{left:130%}}
.fx-node{position:absolute;top:22%;left:42%;width:7px;height:7px;border-radius:50%;background:var(--blue-300);animation:nodepulse 3.4s ease-out infinite}
@keyframes nodepulse{0%{box-shadow:0 0 0 0 rgba(143,182,230,.45)}70%{box-shadow:0 0 0 14px rgba(143,182,230,0)}100%{box-shadow:0 0 0 0 rgba(143,182,230,0)}}
.fx-bars{position:absolute;left:0;right:0;bottom:0;height:48%;display:flex;align-items:flex-end;gap:4px;padding:0 24px;opacity:.6;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%);mask-image:linear-gradient(180deg,transparent 0,#000 62%)}
.fx-bars i{flex:1;display:block;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#3f86d6,rgba(143,182,230,.3));transform-origin:bottom;animation:eq 1.6s ease-in-out infinite;height:55%}
.fx-bars i:nth-child(3n+1){height:34%;animation-delay:-.2s}
.fx-bars i:nth-child(3n+2){height:78%;animation-delay:-.7s}
.fx-bars i:nth-child(4n){height:48%;animation-delay:-1.1s}
.fx-bars i:nth-child(5n){height:90%;animation-delay:-.5s}
@keyframes eq{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
.fx-wave{position:absolute;left:0;right:0;bottom:33%;height:96px;width:200%;opacity:.4;animation:wavemove 10s linear infinite}
.fx-wave path{fill:none;stroke:var(--blue-300);stroke-width:2}
@keyframes wavemove{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hero-anchor{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:260px;min-width:0}
.gg-nav-inline{width:100%}
.prod-float{position:relative;text-align:center;width:100%;max-width:430px;min-width:0}
.prod-float .ring{position:absolute;left:50%;top:46%;width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(143,182,230,.3);box-shadow:inset 0 0 60px rgba(11,92,171,.25)}
.prod-float .glow{position:absolute;left:50%;bottom:11%;width:82%;height:46px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(11,92,171,.7),transparent 70%);filter:blur(10px)}
.prod-float .pimg{position:relative;width:min(100%,250px);height:auto;margin:0 auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.5));animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.prod-float .ptag{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--font-ui);font-weight:600;font-size:13px;color:#fff;background:rgba(11,92,171,.55);border:1px solid rgba(143,182,230,.5);padding:8px 14px;border-radius:999px}
.prod-float .ptag b{font-family:var(--font-display)}
.hl-panel{width:100%;max-width:360px;background:rgba(255,255,255,.06);border:1px solid rgba(143,182,230,.28);border-radius:16px;padding:20px 22px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hl-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue);padding:7px 12px;border-radius:8px}
.hl-badge svg{width:14px;height:14px}
.hl-title{font-family:var(--font-ui);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue-300);margin:16px 0 8px}
.hl-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hl-lines{margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.hl-lines div{display:flex;gap:9px;align-items:center;font-family:var(--font-ui);font-size:13.5px;color:#dbe5f3}
.hl-lines svg{width:15px;height:15px;color:var(--blue-300);flex:none}

/* ---------- reusable cards and logos ---------- */
.logo-box{width:var(--logo-w);height:var(--logo-h);flex:none;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:8px;padding:4px}
.logo-box img{max-width:78px;max-height:40px;width:auto;height:auto;object-fit:contain;display:block}
.logo-box--chip{background:#fff;border:1px solid #edf1f6;padding:6px;box-shadow:0 1px 2px rgba(16,38,74,.06)}
.logo-box--dark{background:#10264a;padding:6px}
.logo-box.logo-box-large{width:188px;height:96px;padding:14px;border-radius:12px}
.logo-box.logo-box-large img{max-width:152px;max-height:74px}
.logo-box.logo-box-large.logo-box--chip{padding:16px}
.logo-box.logo-box-sm{width:var(--logo-w);height:var(--logo-h)}
.brand-grid,.logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.brand-tile,.brand-card,.path-card,.cat,.resource-card,.related-card,.result-card{background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);min-width:0}
.brand-tile:hover,.brand-card:hover,.path-card:hover,.cat:hover,.resource-card:hover,.related-card:hover,.result-card:hover{border-color:#bcd0ea;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.brand-tile:focus,.brand-card:focus,.path-card:focus,.cat:focus,.resource-card:focus,.related-card:focus,.result-card:focus,
.brand-tile:focus-visible,.brand-card:focus-visible,.path-card:focus-visible,.cat:focus-visible,.resource-card:focus-visible,.related-card:focus-visible,.result-card:focus-visible{outline:3px solid #8fb6e6;outline-offset:3px}
.brand-tile{display:flex;align-items:center;gap:14px;padding:14px 16px}
.brand-tile .bn{font-family:var(--font-ui);font-weight:600;font-size:14.5px;color:var(--navy-900);line-height:1.2;min-width:0}
.brand-card{padding:16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.brand-card .logo-box{margin-bottom:2px}
.brand-card strong,.path-card strong,.cat span,.resource-card strong,.related-card strong,.result-card strong{font-family:var(--font-ui);font-weight:700;color:var(--navy-900);line-height:1.2;overflow-wrap:anywhere}
.brand-card small,.path-card small,.cat small,.resource-card small,.related-card small,.result-card small{font-size:12px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.path-grid.dense{grid-template-columns:repeat(4,minmax(0,1fr))}
.path-card{padding:18px 16px;display:flex;flex-direction:column;gap:9px;min-height:128px}
.path-card.is-rich{min-height:205px}
.path-card .path-kicker{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.path-card .card-icon,.cat .ic{width:30px;height:30px;color:var(--blue);transition:transform .2s var(--ease);display:block}
.path-card .card-icon svg,.cat .ic svg{width:100%;height:100%}
.path-card:hover .card-icon,.cat:hover .ic,.resource-card:hover .resource-icon,.spec-box:hover .spec-icon{transform:translateY(-2px)}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.mini-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-weight:700;font-size:10px;line-height:1.2;color:var(--navy-900);background:#eaf2fb;border:1px solid #c7d8ec;border-radius:999px;padding:5px 8px}
.band-navy .mini-chip{background:rgba(255,255,255,.09);border-color:rgba(143,182,230,.28);color:#fff}
.card-bullets{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.card-bullets li{position:relative;padding-left:12px;font-size:11px;color:var(--muted);line-height:1.35}
.card-bullets li::before{content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--blue)}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--font-ui);font-size:11px;color:var(--blue);font-weight:700}
.card-foot span:first-child{color:var(--muted);font-weight:600}
.cards-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cat{padding:18px 16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tintband{background:var(--tint);border-radius:18px;padding:26px 28px;min-width:0}
.row-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:14px;flex-wrap:wrap}
.row-label h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:0;color:var(--navy-900);margin:0}
.row-label a{font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--blue);text-decoration:none}

/* ---------- inline finder and promo ---------- */
.finder{background:linear-gradient(135deg,var(--navy-900),var(--navy-700));border-radius:18px;padding:32px 36px;color:#fff;position:relative;overflow:hidden;min-width:0}
.finder::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 92% 0%,rgba(11,92,171,.45),transparent 55%)}
.finder .fwrap{position:relative;z-index:2}
.finder .eyebrow{font-family:var(--font-ui);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue-300)}
.finder h3{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.6vw,32px);letter-spacing:0;margin:8px 0 0}
.finder p{font-size:15px;color:#cfe0f4;margin:8px 0 0;max-width:54ch}
.finder-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.fchip{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:600;font-size:15px;color:#fff;background:rgba(143,182,230,.12);border:1px solid rgba(143,182,230,.45);border-radius:12px;padding:14px 18px;cursor:pointer;text-decoration:none;transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)}
.fchip:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.fchip .ic{width:22px;height:22px;color:var(--blue-300);flex:none}
.fchip:hover .ic{color:#fff}
.finder-note{font-family:var(--font-ui);font-size:12px;color:#9fb6d6;margin:14px 0 0;display:flex;align-items:center;gap:7px}
.finder-note svg{width:13px;height:13px}
.promo{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);background:linear-gradient(135deg,var(--navy-900),var(--navy-700));border-radius:18px;overflow:hidden;color:#fff;min-width:0}
.promo::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,rgba(11,92,171,.5),transparent 55%)}
.promo .pbody{padding:34px 36px;position:relative;z-index:2;min-width:0}
.deal-flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--blue);padding:6px 12px;border-radius:8px}
.promo h3{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.02;letter-spacing:0;margin:16px 0 0}
.promo h3 em{font-style:normal;color:var(--blue-300)}
.promo .psub{font-size:15px;color:#cfe0f4;margin:12px 0 0;max-width:48ch}
.promo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.promo .pbtn,.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:14px;border-radius:10px;padding:12px 18px;text-decoration:none;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.promo .pbtn,.primary-btn{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.promo .pbtn:hover,.primary-btn:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-2px)}
.secondary-btn{background:#fff;color:var(--navy-900);border:1px solid var(--line)}
.secondary-btn:hover{border-color:#bcd0ea;transform:translateY(-2px)}
.promo .pbtn{background:#fff;color:var(--navy-900);border-color:#fff}
.promo .pbtn svg,.primary-btn svg,.secondary-btn svg{width:15px;height:15px}
.promo .pphoto{position:relative;z-index:2;background:linear-gradient(160deg,#fff,#eef2f7);margin:18px;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:24px;min-width:0}
.promo .pphoto img{width:min(100%,250px);height:auto;object-fit:contain}
.promo .pnote{font-size:11px;color:#9fb6d6;margin:14px 0 0}
.promo .mobile-headline{display:none}

/* ---------- manufacturer/category/product shells ---------- */
.brand-masthead,.category-hero,.product-head,.gear-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:#fff;padding:36px 34px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.brand-masthead::before,.category-hero::before,.product-head::before,.gear-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(143,182,230,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(143,182,230,.12) 1px,transparent 1px);background-size:42px 42px;opacity:.65}
.brand-masthead > *,.category-hero > *,.product-head > *,.gear-hero > *{position:relative;z-index:1;min-width:0}
.brand-masthead.is-enhanced{grid-template-columns:auto minmax(0,1fr) minmax(250px,.72fr)}
.category-hero.is-enhanced{grid-template-columns:minmax(0,1fr) minmax(260px,.72fr)}
.product-head.is-enhanced{grid-template-columns:auto minmax(0,1fr) minmax(240px,.62fr)}
.brand-masthead h1,.category-hero h1,.product-head h1,.gear-hero h1{font-family:var(--font-display);font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:0;margin:7px 0 0}
/* Long product names step down instead of running to five lines. Tier class is set
   in gg_product_page.php, which is the only place the length is known. */
/* is-long deliberately shrinks a very long product name so it does not dominate the
   hero. The ceiling was set for a 1120px page; at ~1500px it was leaving a 32px H1
   under a headline-width measure. Raised 2026-08-11 with the page width - the intent
   (long titles smaller than short ones) is unchanged, since a short title still gets
   clamp(30px,3.4vw,46px) from the rule above. */
.product-head h1.is-long{font-size:clamp(26px,2.5vw,36px);line-height:1.16}
.product-head h1.is-xlong{font-size:clamp(20px,1.7vw,26px);line-height:1.18}
.brand-masthead p,.category-hero p,.product-head p,.gear-hero p{color:#dbe5f3;max-width:68ch;margin:12px 0 0}
.auth-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(11,92,171,.72);border:1px solid rgba(143,182,230,.5);border-radius:8px;padding:7px 10px;text-decoration:none}
.auth-badge svg{width:14px;height:14px}
.hero-proof{border:1px solid rgba(143,182,230,.32);border-radius:16px;background:rgba(255,255,255,.07);padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-proof-title{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.proof-tile{min-width:0;display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(143,182,230,.22);border-radius:10px;padding:9px;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.proof-tile:hover{background:rgba(11,92,171,.35);border-color:rgba(143,182,230,.5);transform:translateY(-1px)}
.proof-tile svg{width:25px;height:25px;color:var(--blue-300);flex:none}
.proof-tile span{font-family:var(--font-ui);font-size:11px;color:#dbe5f3;line-height:1.2}
.hero-visual{position:relative;min-height:170px;border:1px solid rgba(143,182,230,.32);border-radius:16px;background:rgba(255,255,255,.07);overflow:hidden;padding:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-visual::before{content:"";position:absolute;inset:16px;border:1px solid rgba(143,182,230,.24);border-radius:12px}
.hero-visual svg{position:absolute;color:var(--blue-300)}
.hero-visual .primary-shape{right:18px;bottom:10px;width:126px;height:126px;opacity:.9}
.hero-visual .ghost-shape{left:16px;top:18px;width:68px;height:68px;opacity:.42}
.hero-visual strong{position:relative;z-index:1;display:block;font-family:var(--font-display);font-size:20px;color:#fff;max-width:12ch;line-height:1.05}
.hero-visual small{position:relative;z-index:1;display:block;margin-top:8px;font-size:12px;color:#dbe5f3;max-width:22ch}
.product-hero-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
/* Fixed box, not width:auto/height:auto. This is the PDP's LCP element on 22k pages
   and it used to reserve no space at all, so every product page shifted the hero the
   moment the photo decoded. object-fit:contain letterboxes inside the box, so the
   photo still renders at its own aspect ratio - only the reservation changed.
   (The gallery below it never shifted: .gg-pdp-gallery-stage already has min-height
   and its images are position:absolute.) */
.product-hero-card img{width:min(100%,190px);height:150px;object-fit:contain;align-self:center;filter:drop-shadow(0 14px 24px rgba(0,0,0,.28))}
.mini-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
.mini-flow span{font-family:var(--font-ui);font-size:10px;font-weight:700;color:#dbe5f3;background:rgba(255,255,255,.08);border:1px solid rgba(143,182,230,.24);border-radius:8px;padding:7px;text-align:center}
.contact-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--tint-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 34px}
.contact-strip h3{font-family:var(--font-display);font-size:20px;margin:0;color:var(--navy-900)}
.contact-strip p{font-size:13px;color:var(--muted);margin:4px 0 0}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.anchor-strip{display:flex;gap:9px;flex-wrap:wrap;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 34px}
.anchor-strip a{font-family:var(--font-ui);font-weight:700;font-size:12px;color:var(--blue);text-decoration:none;background:#eaf2fb;border:1px solid #c7d8ec;border-radius:999px;padding:7px 11px}
.module-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.module-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.module-card svg{width:30px;height:30px;color:var(--blue)}
.module-card strong{display:block;font-family:var(--font-ui);color:var(--navy-900);margin-top:8px}
.module-card small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:4px}
.instruction{font-family:var(--font-ui);font-weight:600;color:var(--navy-900);background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 18px}
.visual-card{position:relative;min-height:124px;background:linear-gradient(135deg,#fff,#eef2f8);border:1px solid var(--line);border-radius:12px;padding:16px;overflow:hidden;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.visual-card:hover{border-color:#bcd0ea;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.visual-card svg{position:absolute;right:10px;bottom:-8px;width:112px;height:112px;opacity:.2;color:var(--blue)}
.visual-card strong{position:relative;z-index:1;font-family:var(--font-ui);color:var(--navy-900)}
.visual-card small{position:relative;z-index:1;display:block;margin-top:5px;color:var(--muted);font-size:12px}
.visual-card .chip-row,.visual-card .card-bullets{position:relative;z-index:1}
.product-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.8fr);gap:24px;align-items:start}
.product-media{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;align-items:center;justify-content:center;min-height:260px}
.product-media img{width:auto;max-width:min(100%,300px);height:auto;max-height:280px;object-fit:contain}
.buy-panel{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-rest);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.buy-panel .price-status{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--navy-900);line-height:1.05}
.gg-pdp-partnum{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin:4px 0 0;letter-spacing:.02em}
/* Order Code sits in the same slot as the part number and reads as the same class of
   information, but the label is REQUIRED to stay visible: this is G&G's ordering
   reference, not the manufacturer's part number, and the two must never be confused.
   Same size and colour as .gg-pdp-partnum so the panel keeps one rhythm; the label is
   set in small caps so the eye separates label from value without a second colour. */
.gg-card-partnum{font-family:var(--font-ui);font-size:11px;color:var(--muted);margin:4px 0 0;letter-spacing:.02em}
.buy-panel p{font-size:14px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.buy-panel .gg-buy-headline{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--navy-900);line-height:1.4;margin:12px 0 0}
.buy-panel .ship{font-family:var(--font-ui);font-weight:700;color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-top:12px}
/* Free-shipping threshold, stated in the buy panel. Sits under .ship as a quieter,
   sentence-case line so it reads as policy rather than competing with the price. */
.buy-panel .gg-ship-policy{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.buy-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
/* Sales policy under the buy button: new/sealed, warranty, all sales final. Quiet by
   design - it reassures at the point of decision without competing with the price. */
/* Sales policy band, full width and centered above the footer. Horizontal here because
   it has the whole page to sit in - the same three items in the narrow buy column wrapped
   2-then-1 and read as an accident, which is why they moved. */
.gg-buy-policy{list-style:none;margin:0;padding:22px 20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 28px;
  font-size:13px;color:var(--muted);line-height:1.5;text-align:center}
.gg-buy-policy li{position:relative}
/* Separator between items, not a bullet before each: no orphan dot when a row wraps. */
.gg-buy-policy li+li::before{content:"";position:absolute;left:-15px;top:50%;
  width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#0b5cab;opacity:.45}
.gg-buy-policy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.gg-buy-policy a:hover,.gg-buy-policy a:focus{color:#0b5cab}
@media (max-width:600px){
  .gg-buy-policy{flex-direction:column;gap:6px;padding:18px 16px}
  .gg-buy-policy li+li::before{display:none}
}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.summary-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.summary-card h2{font-family:var(--font-display);font-size:22px;margin:0;color:var(--navy-900)}
.summary-card p{color:var(--ink);font-size:14px;margin:12px 0 0}
.spec-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:700;font-size:12px;color:var(--blue);text-decoration:none;background:#eaf2fb;border:1px solid #c7d8ec;border-radius:999px;padding:7px 10px}
.summary-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.summary-fact{border:1px solid var(--line);border-radius:11px;background:#f8fafc;padding:12px}
.summary-fact strong{display:block;font-family:var(--font-ui);font-size:12px;color:var(--navy-900)}
.summary-fact span{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:4px}
.summary-bullets{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.summary-bullets li{position:relative;padding-left:15px;font-size:12px;color:var(--ink);line-height:1.45}
.summary-bullets li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.signal-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.spec-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.spec-box:hover{border-color:#bcd0ea;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.spec-icon{width:34px;height:34px;border-radius:9px;background:#eaf2fb;color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:transform .2s var(--ease)}
.spec-icon svg{width:22px;height:22px}
.spec-box h3{font-family:var(--font-ui);font-size:13px;margin:0;color:var(--navy-900)}
.spec-box p{font-size:12px;color:var(--muted);margin:7px 0 0}
.related-grid,.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* Resources cards fill the row regardless of count (1 or 2 cards, no empty column). */
.resource-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Drop the tall bottom gap under the last band on the tab-renderer product pages. */
.gg-product-renderer-page .gg-product-page{padding-bottom:0}
.related-card{padding:16px;display:flex;flex-direction:column;gap:10px}
.related-media{height:86px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border:1px solid #edf1f6;border-radius:10px;padding:10px}
.related-media img{width:auto;height:auto;max-width:min(100%,220px);max-height:64px;object-fit:contain}
/* Accessory / bundle cards get a quick add-to-cart row below the linked card. */
.related-cell{display:flex;flex-direction:column;gap:8px;min-width:0}
.related-cell .related-card{flex:1}
.related-buy{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 2px}
.related-price{font-family:var(--font-ui);font-weight:800;color:var(--navy-900,#10264a);font-size:15px}
.related-add{appearance:none;border:0;cursor:pointer;background:var(--blue,#0b5cab);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:13px;border-radius:8px;padding:8px 13px;text-decoration:none;white-space:nowrap;transition:background .15s var(--ease),transform .15s var(--ease)}
.related-add:hover{background:var(--blue-700,#094a8c);transform:translateY(-1px)}
.related-add--view{background:#eef4fb;color:#1b3a6b;border:1px solid #dbe5f3}
.related-buy:only-child,.related-buy:has(.related-add--view:only-child){justify-content:flex-end}
.resource-card{padding:16px;display:flex;flex-direction:column;gap:8px}
.resource-card .resource-icon{width:34px;height:34px;border-radius:9px;background:#eaf2fb;color:var(--blue);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)}
.resource-card svg{width:20px;height:20px}

/* ---------- gear finder full page ---------- */
.gear-hero{grid-template-columns:minmax(0,1fr) minmax(260px,.7fr)}
.gear-map{border:1px solid rgba(143,182,230,.32);border-radius:16px;background:rgba(255,255,255,.06);padding:18px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gear-map ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gear-map li{display:flex;gap:10px;align-items:center;color:#dbe5f3;font-family:var(--font-ui);font-size:13px}
.gear-map b{width:25px;height:25px;border-radius:8px;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.advisor-page{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:start}
.quiz-panel,.results-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;min-width:0}
.quiz-panel h2,.results-panel h2{font-family:var(--font-display);font-size:22px;color:var(--navy-900);margin:0}
.step-tabs{display:flex;gap:7px;margin:14px 0 18px}
.step-tabs i{height:4px;flex:1;border-radius:3px;background:#d9e2ee}
.step-tabs i.on{background:var(--blue)}
.question{font-family:var(--font-ui);font-weight:700;color:var(--navy-900);margin:0 0 12px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-option{position:relative;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--navy-900);text-align:left;padding:14px;cursor:pointer;transition:border-color .15s var(--ease),transform .15s var(--ease),background .15s var(--ease)}
.quiz-option:hover,.quiz-option.active{border-color:var(--blue);transform:translateY(-2px);background:#f8fbff}
.quiz-option.active{box-shadow:inset 0 0 0 1px var(--blue)}
.quiz-option.is-multi{padding-right:42px}
.quiz-option .option-icon{width:25px;height:25px;color:var(--blue);display:block;margin-bottom:8px}
.quiz-option .option-icon svg{width:100%;height:100%}
.quiz-option .checkmark{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:7px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#fff;background:#fff}
.quiz-option.active .checkmark{background:var(--blue);border-color:var(--blue)}
.quiz-option .checkmark svg{width:14px;height:14px}
.quiz-option strong{display:block;font-family:var(--font-ui);font-size:14px}
.quiz-option small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px}
.quiet-btn{border:0;background:none;color:var(--muted);font-family:var(--font-ui);font-weight:700;font-size:13px;cursor:pointer;padding:8px}
.quiet-btn:hover{color:var(--blue)}
.continue-btn{border:1px solid var(--blue);background:var(--blue);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:13px;border-radius:10px;padding:10px 16px;cursor:pointer}
.continue-btn:disabled{opacity:.45;cursor:not-allowed}
.selection-error{font-size:12px;color:var(--blue);margin:10px 0 0;font-family:var(--font-ui);font-weight:700}
.result-card{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-top:10px}
.result-card .result-icon{width:42px;height:42px;border-radius:11px;background:#eaf2fb;color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.result-card .result-icon svg{width:23px;height:23px}
.result-card .result-copy{min-width:0}
.result-card .result-type{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.result-card strong{display:block;margin-top:2px}
.result-card small{display:block;margin-top:3px}
.recommendation-note{font-size:12px;color:var(--muted);margin:14px 0 0}
.selection-summary{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 14px}
.selection-summary span{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--navy-900);background:#eaf2fb;border:1px solid #c7d8ec;border-radius:999px;padding:5px 9px}
.result-reason{display:block;margin-top:8px;font-family:var(--font-ui);font-size:11px;color:var(--blue);font-weight:700}
.advisor-test-matrix{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.advisor-test-matrix h3{font-family:var(--font-display);font-size:18px;line-height:1.15;color:var(--navy-900);margin:0 0 6px}
.advisor-test-matrix p{font-size:12px;color:var(--muted);margin:0 0 14px}
.matrix-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.matrix-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;min-width:0}
.matrix-card strong{display:block;font-family:var(--font-ui);font-size:12px;color:var(--navy-900)}
.matrix-card span{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.35}
.readiness-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.readiness-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.readiness-card strong{font-family:var(--font-ui);font-size:13px;color:var(--navy-900)}
.readiness-card p{font-size:12px;color:var(--muted);margin:8px 0 0}

/* ---------- forced mobile mockups ---------- */
.mobile-card{width:min(100%,375px);margin:0 auto}
.phone-frame{width:min(100%,375px);border:11px solid #0d1b30;border-radius:40px;background:#0d1b30;box-shadow:0 30px 60px -24px rgba(16,38,74,.5);overflow:hidden;margin:0 auto}
.phone-screen{background:#eef1f6;overflow:hidden;border-radius:28px}
.mobile-mock .mock-toolbar{display:none}
.mobile-mock .mock-nav{height:auto;padding:12px 16px;gap:8px;align-items:flex-start}
.mobile-mock .mock-nav span{white-space:normal;text-align:right}
.mobile-mock .page-pad,.mobile-mock .band{padding:20px 16px}
.mobile-mock .hero{border-radius:0;padding:30px 18px;text-align:center}
.mobile-mock .hero-grid,.mobile-mock .brand-masthead,.mobile-mock .category-hero,.mobile-mock .product-head,.mobile-mock .gear-hero,.mobile-mock .product-layout,.mobile-mock .advisor-page,.mobile-mock .contact-strip{grid-template-columns:1fr}
.mobile-mock .hero-anchor{display:none}
.mobile-mock .hero h2{font-size:29px}
.mobile-mock .hero p{font-size:14.5px;margin-left:auto;margin-right:auto}
.mobile-mock .hero-cta-row{flex-direction:column}
.mobile-mock .trust{justify-content:center}
.mobile-mock .finder{border-radius:0;padding:24px 16px}
.mobile-mock .finder-chips{gap:9px}
.mobile-mock .fchip{flex:1 1 44%;justify-content:center;padding:13px 10px;font-size:14px}
.mobile-mock .cards-cat,.mobile-mock .logo-grid{grid-template-columns:1fr 1fr}
.mobile-mock .brand-grid{grid-template-columns:1fr}
.mobile-mock .brand-tile{flex-direction:row;align-items:center;min-height:72px}
.mobile-mock .brand-tile .bn{font-size:13.5px;overflow-wrap:anywhere}
.mobile-mock .brand-card{align-items:flex-start;padding:14px;gap:8px}
.mobile-mock .brand-card strong{font-size:13.5px}
.mobile-mock .brand-card small{font-size:11.5px}
.mobile-mock .path-grid,.mobile-mock .path-grid.dense,.mobile-mock .spec-grid,.mobile-mock .related-grid,.mobile-mock .resource-grid,.mobile-mock .module-strip,.mobile-mock .summary-facts,.mobile-mock .summary-bullets{grid-template-columns:1fr}
.mobile-mock .promo{grid-template-columns:1fr;border-radius:14px}
.mobile-mock .promo .pphoto{margin:0;border-radius:0;order:-1;padding:18px;min-height:116px}
.mobile-mock .promo .pphoto img{width:210px}
.mobile-mock .promo .pbody{padding:20px}
.mobile-mock .promo h3{font-size:25px;line-height:1.08;margin-top:12px}
.mobile-mock .promo .desktop-headline{display:none}
.mobile-mock .promo .mobile-headline{display:block}
.mobile-mock .promo .psub{font-size:13px;line-height:1.45}
.mobile-mock .promo-actions{flex-direction:column}
.mobile-mock .promo .pbtn,.mobile-mock .promo .secondary-btn{width:100%}
.mobile-mock .hero-proof,.mobile-mock .hero-visual{margin-top:4px}
.mobile-mock .proof-grid,.mobile-mock .mini-flow{grid-template-columns:1fr 1fr}
.mobile-mock .anchor-strip{padding:12px 16px}
.mobile-mock .path-card.is-rich{min-height:0}
.mobile-mock .signal-strip,.mobile-mock .matrix-grid,.mobile-mock .readiness-grid{grid-template-columns:1fr}
.mobile-mock .brand-masthead,.mobile-mock .category-hero,.mobile-mock .product-head,.mobile-mock .gear-hero{padding:26px 18px}
.mobile-mock .brand-masthead h1,.mobile-mock .category-hero h1,.mobile-mock .product-head h1,.mobile-mock .gear-hero h1{font-size:30px}
.mobile-mock .contact-actions,.mobile-mock .buy-actions{width:100%}
.mobile-mock .primary-btn,.mobile-mock .secondary-btn{justify-content:center;width:100%}
.mobile-mock .option-grid{grid-template-columns:1fr}
.mobile-mock .product-media{min-height:180px;padding:20px}
.mobile-mock .gear-map{display:none}
.device-cap{font-family:var(--font-ui);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px;text-align:center}

@media (max-width:980px){
  .two-up,.hero-grid,.product-layout,.advisor-page,.gear-hero,.brand-masthead.is-enhanced,.category-hero.is-enhanced,.product-head.is-enhanced{grid-template-columns:1fr}
  .brand-grid,.logo-grid,.cards-cat{grid-template-columns:1fr 1fr}
  .path-grid,.path-grid.dense,.spec-grid,.related-grid,.resource-grid,.signal-strip,.matrix-grid,.readiness-grid,.module-strip,.summary-facts,.summary-bullets{grid-template-columns:1fr}
  .contact-strip{grid-template-columns:1fr}
}
@media (max-width:640px){
  .review-bar{padding:10px 14px}
  .legend{margin-left:0}
  .canvas{padding:28px 16px 80px}
  .block{margin-bottom:58px}
  .block-head h2{font-size:21px}
  .hero{border-radius:14px;padding:30px 18px}
  .hero-search{align-items:stretch;flex-direction:column;padding:12px}
  .hero-search .si{display:none}
  .hero-search button{width:100%}
  .cards-cat,.brand-grid,.logo-grid{grid-template-columns:1fr 1fr}
  .brand-tile{align-items:flex-start;flex-direction:column;gap:10px}
  .promo{grid-template-columns:1fr}
  .promo .pphoto{margin:0;border-radius:0;order:-1}
  .option-grid{grid-template-columns:1fr}
  .mock-nav{padding:12px 16px;height:auto}
  .page-pad,.band{padding:20px 16px}
}
/* ==========================================================================
   PRODUCTION HARDENING — NOT in the mockup.
   The live site also loads gg_bs.css, whose bare-tag rule
   `h1,h2,h3,h4,h5,h6{color:var(--gg-primary)}` (navy) overrides the white that
   dark-band headings only *inherit* from their band — a direct tag rule beats
   inherited color, so headings on navy turn navy-on-navy and vanish. Re-assert
   explicit light colors here (this file loads after gg_bs.css). Also pin any
   dark-band body text/links that would otherwise inherit, so the legacy theme's
   bare-tag rules can never bleed through. Do NOT edit the gg_bs.css base rule.
   ========================================================================== */
.hero h1,.hero h2,
.finder h3,.promo h3,
.brand-masthead h1,.category-hero h1,.product-head h1,.gear-hero h1,
.band-navy h1,.band-navy h2,.band-navy h3{color:#fff}
.band-navy p,.band-navy li{color:#dbe5f3}
.contact-strip h3{color:var(--navy-900)}
.contact-strip p{color:var(--muted)}

/* ---------- finder enhancement (beyond mockup baseline): make the guided
   gear finder the liveliest block on the page — animated grid + drifting sweep
   behind the copy, plus a prominent CTA with a moving arrow on hover. ---------- */
.finder-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.finder-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(143,182,230,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(143,182,230,.10) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(90% 90% at 18% 100%,#000,transparent 72%);mask-image:radial-gradient(90% 90% at 18% 100%,#000,transparent 72%)}
.finder-sweep{position:absolute;top:-40%;left:-30%;width:45%;height:180%;transform:rotate(8deg);background:linear-gradient(90deg,transparent,rgba(143,182,230,.16) 50%,transparent);filter:blur(8px);animation:sweep 8s var(--ease) infinite}
.finder-cta{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-family:var(--font-ui);font-weight:700;font-size:15px;background:#fff;color:var(--navy-900);border:1px solid #fff;border-radius:11px;padding:13px 20px;text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.finder-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(0,0,0,.55)}
.finder-cta svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.finder-cta:hover svg{transform:translateX(5px)}
/* chips fade + slide in on load (fill backwards only, so the hover translateY
   in the base .fchip rule still applies once the entrance finishes) */
.finder .fchip{animation:chipIn .5s var(--ease) backwards}
.finder .fchip:nth-child(1){animation-delay:.04s}
.finder .fchip:nth-child(2){animation-delay:.12s}
.finder .fchip:nth-child(3){animation-delay:.20s}
.finder .fchip:nth-child(4){animation-delay:.28s}
@keyframes chipIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fchip .ic{transition:transform .18s var(--ease)}
.fchip:hover .ic{transform:translateY(-1px) scale(1.08)}

/* ---------- promo enhancement (beyond mockup baseline): floating product,
   drifting panel glow, a periodic shine across the deal flag, moving CTA arrow ---------- */
.promo .pphoto img{animation:floaty 6s ease-in-out infinite}
.promo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(60% 80% at 14% 112%,rgba(143,182,230,.20),transparent 60%);animation:promoGlow 9s var(--ease) infinite alternate}
@keyframes promoGlow{0%{opacity:.45;transform:translateY(0)}100%{opacity:.9;transform:translateY(-16px)}}
.deal-flag{position:relative;overflow:hidden}
.deal-flag::after{content:"";position:absolute;top:0;left:-65%;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:dealShine 5s ease-in-out infinite}
@keyframes dealShine{0%,55%{left:-65%}100%{left:150%}}
.promo .pbtn svg{transition:transform .18s var(--ease)}
.promo .pbtn:hover svg{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .fx-sweep,.fx-wave,.finder-sweep{display:none}
  .prod-float .pimg{animation:none}
}

/* ============================================================
   H — Animated category/department hero (restored montage)
   Scoped to .gg-category-product-hero so other heroes are untouched.
   gg-fadeup keyframes already live in gg_bs.css/gg_bs2.css.
   ============================================================ */
.gg-category-product-hero > div > .gg-section-kicker { animation: gg-fadeup .55s ease-out both; }
.gg-category-product-hero > div > h1 { animation: gg-fadeup .55s ease-out .08s both; }
.gg-category-product-hero > div > p  { animation: gg-fadeup .55s ease-out .16s both; }
.gg-category-product-hero .hero-visual { animation: gg-fadeup .6s ease-out .24s both; }

@keyframes gg-hero-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(6px, -8px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes gg-hero-drift-alt {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-7px, 6px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes gg-hero-shimmer {
  0%, 100% { opacity: .45; }
  50%      { opacity: .85; }
}
.gg-category-product-hero .hero-visual .primary-shape {
  transform-origin: center; animation: gg-hero-drift 9s ease-in-out infinite;
}
.gg-category-product-hero .hero-visual .ghost-shape {
  transform-origin: center; animation: gg-hero-drift-alt 11s ease-in-out infinite;
}
.gg-category-product-hero .hero-visual::after {
  content: ""; position: absolute; inset: -40% 45% -40% -15%;
  background: radial-gradient(circle, rgba(143, 182, 230, .20), transparent 70%);
  animation: gg-hero-shimmer 7s ease-in-out infinite; pointer-events: none; z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gg-category-product-hero > div > .gg-section-kicker,
  .gg-category-product-hero > div > h1,
  .gg-category-product-hero > div > p,
  .gg-category-product-hero .hero-visual,
  .gg-category-product-hero .hero-visual .primary-shape,
  .gg-category-product-hero .hero-visual .ghost-shape,
  .gg-category-product-hero .hero-visual::after {
    animation: none !important;
  }
}

/* ============================================================
   W5 — Mobile hamburger + drawer (JS-injected, xs breakpoint only)
   ============================================================ */
.gg-nav-toggle { display: none; }
.gg-mobile-drawer, .gg-mobile-overlay { display: none; }

@media (max-width: 1199px) {
  .gg-nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 8px; left: 10px; z-index: 1200;
    width: 44px; height: 44px; padding: 10px;
    background: #10264a; border: 0; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 38, 74, .28); cursor: pointer;
  }
  .gg-nav-toggle span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(2) { opacity: 0; }
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .gg-mobile-overlay {
    display: block; position: fixed; inset: 0; z-index: 1190;
    background: rgba(8, 18, 38, .5); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  body.gg-mobile-nav-open .gg-mobile-overlay { opacity: 1; visibility: visible; }

  .gg-mobile-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 1210;
    width: 84%; max-width: 320px; height: 100%; overflow-y: auto;
    background: #fff; box-shadow: 2px 0 18px rgba(16, 38, 74, .3);
    transform: translateX(-100%); transition: transform .28s ease;
    -webkit-overflow-scrolling: touch;
    /* match the expanded desktop menu's display font (was falling back to body Inter) */
    font-family: var(--gg-display, "Hanken Grotesk", "Figtree", Arial, Helvetica, sans-serif);
  }
  body.gg-mobile-nav-open .gg-mobile-drawer { transform: translateX(0); }
  body.gg-mobile-nav-open { overflow: hidden; }

  .gg-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e6edf6; position: sticky; top: 0; background: #fff; }
  .gg-mobile-drawer-head strong { font-size: 16px; color: #10264a; }
  .gg-mobile-close { background: none; border: 0; font-size: 28px; line-height: 1; color: #607086; cursor: pointer; padding: 0 6px; }

  .gg-mobile-group { padding: 10px 16px; border-bottom: 1px solid #f0f4f9; }
  .gg-mobile-group-title { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #10264a; text-decoration: none; padding: 6px 0; }
  a.gg-mobile-group-title:hover { color: #0b5cab; }
  .gg-mobile-link { display: block; padding: 9px 0 9px 10px; font-size: 15px; color: #243c5a; text-decoration: none; }
  .gg-mobile-link:hover { color: #0b5cab; }
  .gg-mobile-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .gg-mobile-brand { font-size: 12px; font-weight: 700; color: #0b5cab; text-decoration: none; background: #eef4fb; border: 1px solid #dbe5f3; border-radius: 999px; padding: 5px 10px; }
}

/* ============================================================
   Header responsiveness: never wrap / never overflow.
   >=1200px  -> full horizontal nav, no hamburger.
   <1200px   -> horizontal nav hidden, hamburger drawer (above).
   Supersedes the older 991px overflow-x scroll rule in gg_bs.css.
   ============================================================ */
/* Header fills the viewport (generous max-width + fluid side padding) instead of
   sitting in a narrow centred island. The desktop nav stays compact so all 12
   items + search + cart fit on one line at every width from 1200 up; the brand
   wordmark (then its tagline) returns as the screen gets wider - a gradual shrink,
   collapsing to the hamburger drawer only below 1200. Never clipped, never wrapped. */
.gg-site-header--primary .gg-header-inner {
  max-width: 1720px;
  flex-wrap: nowrap;
  padding: 8px clamp(18px, 2.4vw, 48px);
}
.gg-primary-nav { overflow: hidden; }
.gg-nav-list { flex-wrap: nowrap; }

@media (min-width: 1200px) {
  .gg-nav-toggle { display: none !important; }
  .gg-nav-link { padding: 9px 7px; font-size: 13px; }
  .gg-nav-list { gap: 0; }
  .gg-header-search input.form-control { width: clamp(150px, 13vw, 220px); }
}
/* Wordmark on wider screens, full wordmark + tagline only on the widest. */
@media (max-width: 1499px) { .gg-header-wordmark { display: none; } }
@media (max-width: 1699px) { .gg-header-wordmark small { display: none; } }

/* Tightest desktop band just above the hamburger: trim side padding + search so
   all 12 items keep fitting down to 1200. */
@media (min-width: 1200px) and (max-width: 1380px) {
  .gg-site-header--primary .gg-header-inner { padding-left: 16px; padding-right: 16px; }
  .gg-nav-link { padding: 9px 6px; }
  .gg-header-search input.form-control { width: 140px; }
}

/* Collapse to the hamburger drawer. */
@media (max-width: 1199px) {
  .gg-primary-nav { display: none; }
  .gg-site-header--primary .gg-header-inner { padding-left: 62px; } /* clear the fixed toggle */
}

/* Narrow (xs) header strip: a clean WHITE bar with the menu (hamburger, fixed at
   the left), logo, phone, search, and cart all on a single row - replacing the
   old navy stacked block. */
.visible-xs-block.bgimage {
  background: #fff !important;
  border-bottom: 1px solid var(--gg-border, #e3e8ef);
  box-shadow: 0 1px 6px rgba(16, 38, 74, .06);
}
.visible-xs-block.bgimage .mobile {
  background: transparent !important;
  color: var(--gg-primary, #10264a) !important;
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap; white-space: nowrap; gap: 10px;
  margin: 0; padding: 9px 14px; /* hamburger is in-flow now, so no left gutter to reserve */
  font-family: var(--gg-display, "Hanken Grotesk", "Figtree", Arial, Helvetica, sans-serif);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
/* logo sits just right of the hamburger; phone + actions push to the right edge.
   Targeted by href, not :first-child - gg_nav.php now inserts the hamburger as
   the bar's first child, so the logo is no longer the first element. */
.visible-xs-block.bgimage .mobile > a[href="home.php"] { margin-right: auto; display: inline-flex; align-items: center; }

/* The hamburger lives inside the bar now, so it is a plain flex item. It was
   position:fixed only because gg_nav.php appended it to <body>, which laid it
   on top of the bar and crowded the logo. */
.visible-xs-block.bgimage .mobile > .gg-nav-toggle {
  position: static; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 11px;
  box-shadow: none;
}
.visible-xs-block.bgimage .mobile img:not([src*="trans"]) { height: 30px; width: auto; display: block; }
.visible-xs-block.bgimage .mobile a {
  color: var(--gg-primary, #10264a) !important; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Search + Cart become tidy navy-tinted chips */
.visible-xs-block.bgimage .mobile a[href*="search"],
.visible-xs-block.bgimage .mobile a[href*="cart"] {
  font-weight: 600; font-size: 12.5px; color: #1b3a6b !important;
  background: #eef4fb; border: 1px solid #dbe5f3; border-radius: 999px; padding: 5px 11px;
}
.visible-xs-block.bgimage .mobile .glyphicon { color: #0b5cab; font-size: 14px; }
/* drop the legacy inline spacer gifs - flex `gap` handles spacing now */
.visible-xs-block.bgimage .mobile img[src*="trans"] { display: none; }
/* hamburger reads as navy-on-white, softened corners to match the chips */
.gg-nav-toggle { background: #10264a; border-radius: 11px; }

@media (prefers-reduced-motion: reduce) {
  .gg-mobile-drawer, .gg-mobile-overlay, .gg-nav-toggle span { transition: none !important; }
}

/* ===== Collapsible "dropdown" facet groups (category + brand catalogs) ===== */
.gg-category-filter-group[data-gg-facet-group] { border: 0; padding: 0; margin: 0 0 2px; }
.gg-category-filter-group[data-gg-facet-group] > legend { display: block; padding: 0; width: 100%; }
.gg-facet-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 12px 4px; font: inherit; font-weight: 700; color: var(--gg-primary, #1B3A6B);
  text-align: left; border-bottom: 1px solid var(--gg-border, #e2e8f0);
}
.gg-facet-toggle:hover { color: #0b5cab; }
.gg-facet-toggle:focus-visible { outline: 2px solid #0b5cab; outline-offset: 2px; border-radius: 6px; }
.gg-facet-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; flex: none; margin-right: 4px; }
.gg-category-filter-group.is-open .gg-facet-caret { transform: rotate(-135deg); }
.gg-facet-options { display: none; padding: 8px 2px 12px; }
.gg-category-filter-group.is-open .gg-facet-options { display: block; }
@media (prefers-reduced-motion: reduce) { .gg-facet-caret { transition: none; } }

/* Brand catalog hero: logo sits above the authorized badge + title. */
.gg-brand-product-hero .logo-box-large { margin-bottom: 12px; }
.gg-brand-product-hero .auth-badge { display: inline-flex; margin-bottom: 6px; }

/* Header breakpoint guard: switch from desktop nav to drawer before the nav row collides. */
@media (max-width: 991px) {
  .gg-site-header--primary .gg-primary-nav { display: none !important; }
  .gg-site-header--primary .gg-header-inner {
    min-height: 64px;
    flex-wrap: nowrap;
    gap: 12px;
    padding-left: 68px;
  }
  .gg-site-header--primary .gg-header-right { margin-left: auto; min-width: 0; }
  .gg-site-header--primary .gg-header-search input.form-control { width: min(190px, 38vw); }
  .gg-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: fixed;
    top: 10px;
    left: 12px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: #10264a;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(16, 38, 74, .28);
    cursor: pointer;
  }
  .gg-nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .gg-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(8, 18, 38, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .gg-mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1210;
    width: 84%;
    max-width: 320px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    box-shadow: 2px 0 18px rgba(16, 38, 74, .3);
    transform: translateX(-100%);
    transition: transform .28s ease;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 520px) {
  .gg-site-header--primary .gg-header-search { display: none; }
}
/* Header breakpoint guard open-state rules for tablet drawer. */
@media (max-width: 991px) {
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(2) { opacity: 0; }
  body.gg-mobile-nav-open .gg-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.gg-mobile-nav-open .gg-mobile-overlay { opacity: 1; visibility: visible; }
  body.gg-mobile-nav-open .gg-mobile-drawer { transform: translateX(0); }
  body.gg-mobile-nav-open { overflow: hidden; }
}

/* =================================================================
   "Constellation Pro" hero (Engine A)
   Ported from _mockups/hero_index_v3.html (reference only). Scoped to
   .gg-hero--constellation so it wins over .gg-department-hero.gg-hero--navy
   (this file loads after gg_bs.css). Gated in gg_department_page.php to
   the audio/video/production/meetingroom/power keys (+ webinars.php).
   Canvas engine lives in java1.js; the navy gradient below is the no-JS
   / reduced-motion fallback surface. Navy/blue only - no orange, no photos.
   ================================================================= */
.gg-hero--constellation {
  --font-display: 'Clash Display', sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 44px 48px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(150deg, #10264a 0%, #15315c 55%, #1B3A6B 100%);
}
.gg-hero--constellation .gg-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gg-hero--constellation .gg-hero-fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.gg-hero--constellation .gg-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.gg-hero--constellation .gg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px;
  min-width: 0;
}
.gg-hero--constellation .gg-hero-eyebrow {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fb6e6;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gg-hero--constellation .gg-hero-eyebrow .sq {
  width: 7px;
  height: 7px;
  background: #8fb6e6;
  display: inline-block;
  box-shadow: 0 0 8px rgba(143, 182, 230, .8);
}
.gg-hero--constellation h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 10px 0 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
/* Two-tone outline headline (mockup h1.tt): solid words shimmer, payoff word
   is a white outline. Inline-flow - no .ln line-reveal blocks. */
.gg-hero-tt .out {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, .92);
  text-stroke: 1.6px rgba(255, 255, 255, .92);
  text-shadow: none;
}
.gg-hero-tt .sol {
  color: #fff;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #8fb6e6 50%, #fff 62%, #fff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ggHeroSheen 7.5s linear 1.1s infinite;
}
@keyframes ggHeroSheen {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.gg-hero--constellation .gg-hero-summary {
  font-size: 15.5px;
  color: #dbe5f3;
  max-width: 52ch;
  margin: 18px 0 0;
}
@media (max-width: 760px) {
  .gg-hero--constellation { padding: 30px 22px; }
  .gg-hero--constellation h1 { font-size: clamp(27px, 7vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Canvas paints a single static frame (java1.js); freeze the sheen. */
  .gg-hero--constellation .gg-hero-fx canvas { opacity: 1; }
  .gg-hero-tt .sol { animation: none; background-position: -40% 0; }
}

/* Hero display-font tokens (mockup .f-clash / .f-bricolage) - set --font-display
   so any `font-family: var(--font-display)` headline picks up the face. Declared
   after .gg-hero--constellation so they win the cascade for that element. */
.f-clash { --font-display: 'Clash Display', sans-serif; }
.f-bricolage { --font-display: 'Bricolage Grotesque', sans-serif; }

/* Uniform editorial card grid (categories.php) - equal columns + no feature
   tile, so every card is the same size. Scoped modifier so the shared
   .gg-wf-grid (department "Shop by workflow", asymmetric 1.4fr feature) is
   untouched. */
.gg-wf-grid.gg-wf-grid--uniform {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
/* Even-count department workflow grids: a fixed N-column uniform grid (no
   feature tile). N comes from --gg-wf-cols (6 items → 3, 4 items → 2). */
.gg-wf-grid.gg-wf-grid--even {
  grid-template-columns: repeat(var(--gg-wf-cols, 3), minmax(0, 1fr));
}
/* Signal Routing Field hero on categories.php - boxed inside .container. */
.gg-category-signal-hero { padding: 24px 0 8px; }

/* =================================================================
   Homepage hero - "Signal Routing Field" (Engine C). Reuses the
   existing .hero shell (gg_components.css :99) + shared .gg-hero-tt
   two-tone headline; swaps the decorative fx for the live Signal
   canvas + film grain. Scoped to the signal homepage hero only.
   ================================================================= */
.hero[data-gg-hero="signal"] { isolation: isolate; }
.hero[data-gg-hero="signal"] .fx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero[data-gg-hero="signal"] .fx-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero[data-gg-hero="signal"] .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 740px;
}
.hero[data-gg-hero="signal"] .mono-accent {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fb6e6;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero[data-gg-hero="signal"] .mono-accent .sq {
  width: 7px;
  height: 7px;
  background: #8fb6e6;
  display: inline-block;
  box-shadow: 0 0 8px rgba(143, 182, 230, .8);
}

/* ================================================================
   PDP tabs (Description / Specs / Videos) - replaces .summary-card
   on product pages whose $ggProduct sets a 'tabs' key.
   ================================================================= */
.gg-pdp-tabs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.gg-pdp-tab-nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gg-pdp-tab{flex:none;font-family:var(--font-ui);font-weight:700;font-size:16px;color:var(--navy-900);background:none;border:0;border-bottom:2px solid transparent;padding:12px 18px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.gg-pdp-tab:hover{background:var(--tint)}
.gg-pdp-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.gg-pdp-tab-panel{display:none}
.gg-pdp-tab-panel.active{display:block}
.gg-pdp-tab-panel p{color:var(--ink);font-size:16px;line-height:1.75;margin:0 0 14px}
.gg-pdp-tab-panel p:last-child{margin-bottom:0}
.gg-pdp-specs-table{width:100%;border-collapse:collapse}
.gg-pdp-specs-table tr:nth-child(odd){background:var(--surface)}
.gg-pdp-specs-table th,.gg-pdp-specs-table td{text-align:left;padding:11px 14px;font-size:15px;vertical-align:top}
.gg-pdp-specs-table th{width:38%;font-family:var(--font-ui);font-weight:700;color:var(--muted)}
.gg-pdp-specs-table td{color:var(--ink)}
.gg-pdp-videos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gg-pdp-video figcaption{font-family:var(--font-ui);font-weight:600;font-size:12.5px;color:var(--navy-900);margin:8px 0 0}
.gg-pdp-video-frame{position:relative;width:100%;padding-top:56.25%;background:var(--surface);border-radius:10px;overflow:hidden}
.gg-pdp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){
  .gg-pdp-videos-grid{grid-template-columns:1fr}
  .gg-pdp-specs-table th{width:44%}
}
@media (prefers-reduced-motion: reduce){
  .gg-pdp-tab{transition:none}
}
/* Typography pass (2026-07-11) - component-scoped half. See gg_premium.css. */
/* Neutralize component eyebrows (finder card, hero). */
.hero .eyebrow,
.finder .eyebrow {
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: #aebfd8 !important;       /* readable on navy, not bright blue */
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Enlarge hero + section display headlines (~58px mid-viewport). */
.hero h1, .hero h2 { font-size: clamp(40px, 4.6vw, 64px) !important; }
.gg-hero--constellation h1 { font-size: clamp(40px, 5.2vw, 68px) !important; }
.finder h3 { font-size: clamp(28px, 3vw, 40px) !important; }

/* Small-text floor pass (2026-07-11, continued): raise genuinely-undersized
   BODY/CONTENT text (card descriptions, section intros, list sentences read as
   copy, PDP body paragraphs) to a readable floor. These selectors ship on live
   pages (category hubs, brand/family pages, PDP, search). Micro-labels
   (kickers/badges/chips/flags, spec field labels, form hints, footer/nav text)
   and mockup-only classes (_mockups/*.html) are intentionally left alone. */
/* Card descriptions (category/brand/search cards). */
.brand-card small, .path-card small, .cat small,
.resource-card small, .related-card small, .result-card small { font-size: 13px; }
/* Category-hub feature bullets read as short sentences. */
.card-bullets li { font-size: 13px; }
/* Solution/hub/family module-card descriptions. */
.module-card small { font-size: 13px; }
/* Section intro copy (family / category / solution / render). */
.section-copy { font-size: 15px; }
/* PDP body copy: buy panel + summary paragraphs, fact detail, spec notes.
   Raised 2026-08-11 (owner request) because the product page went from 1120px to
   ~1500px wide and this copy was sized for the narrow column - 15px body and 13px
   detail read as fine print at the new measure. The sizes move together so the
   relationships hold; line-height rises with them or the longer line reads as a wall.

   This file is where the change belongs: gg_head.php loads gg_components.css AFTER
   gg_bs.css, and these selectors are the same specificity as a `.gg-product-page p`
   rule, so anything written in gg_bs.css loses to them silently. Verified in the
   browser - the first attempt landed there and only the one selector this file does
   not own actually took effect.
   TO REVERT: 15/15/13/13/13 with no line-heights, and delete the block below. */
.buy-panel p { font-size: 17px; line-height: 1.6; }
.summary-card p { font-size: 17px; line-height: 1.7; }
.summary-fact span { font-size: 15px; }
.summary-bullets li { font-size: 15px; line-height: 1.6; }
.spec-box p { font-size: 15px; line-height: 1.6; }

/* The rest of the product page's copy, at the same scale. Scoped to the PDP shell so
   no other surface moves. */
.gg-product-page .gg-pdp-tab-panel p,
.gg-product-page .gg-pdp-tab-panel li { font-size: 17px; line-height: 1.7; }
.gg-product-page td,
.gg-product-page th { font-size: 16px; line-height: 1.55; }
.gg-product-page .gg-buy-headline { font-size: 17px; line-height: 1.55; }
/* No `.gg-product-page h1` rule here on purpose. It ties with `.product-head h1`
   (clamp(30px,3.4vw,46px)) and, being later in the file, would win and SHRINK a
   short product title from 46px to 38px - the opposite of the request. The long-title
   case is handled at its own selector, `.product-head h1.is-long`, above. */
.gg-product-page .related-card small,
.gg-product-page .resource-card small { font-size: 13.5px; }

/* Typography pass (2026-07-11): Libre Franklin as the single typeface. Drops the
   Clash Display / Bricolage / Space Grotesk / Figtree / Inter stack (the "AI"
   set). !important custom-property redefinitions win over the scattered source
   defs regardless of load order; reversible by deleting this block + restoring
   the font <link>/@import. */
:root {
  --font-display: 'Libre Franklin', 'Segoe UI', Arial, sans-serif !important;
  --font-ui: 'Libre Franklin', 'Segoe UI', Arial, sans-serif !important;
  --gg-font-display: 'Libre Franklin', 'Segoe UI', Arial, sans-serif !important;
}
/* Scoped overrides that re-set --font-display to Clash/Bricolage. */
.f-clash, .f-bricolage, .gg-hero--constellation {
  --font-display: 'Libre Franklin', 'Segoe UI', Arial, sans-serif !important;
}
:root { --gg-display: 'Libre Franklin', 'Segoe UI', Arial, sans-serif !important; }

/* ==== Kill the entire small-uppercase "kicker" family site-wide ====
   User: these little blue-uppercase labels (PATH, CATEGORY, SHOP BY BRAND,
   BROWSE G&G, YOUR BUILD, etc.) are redundant noise - remove wherever they
   appear. The real section heading/title below each one remains. Reversible. */
.gg-section-kicker, .gg-hero-eyebrow, .gg-kit-kicker, .gg-results-eyebrow,
.gg-video-kicker, .gg-search-kicker, .gg-brand-kicker, .gg-demo-kicker,
.gg-wf-k, .path-kicker, .hero .eyebrow, .finder .eyebrow, .eyebrow {
  display: none !important;
}

/* ============================================================
   Shared cross-page CTA motion (2026-07-11, continued) - Task 4.
   ONE "label + sliding arrow" pattern for every card/footer CTA.
   The gold standard is the category card's "Shop X ->" foot
   (.gg-wf-foot .arr). On hover the arrow slides right 4px, smooth
   (.2s ease), and returns on mouse-out. Site-wide (this file loads
   on every page via gg_head.php). Reversible: delete this block.
   To add a new CTA: give it an arrow element (span.arr or an <svg>)
   and add its selector to the two lists below - it then inherits
   the motion automatically. Adopters: .gg-wf-foot (category /
   department cards), .gg-service-more (home services),
   .finder-cta (gear finder). */
.gg-wf-foot .arr,
.gg-service-more .arr,
.finder-cta svg {
  display: inline-block;
  transition: transform .2s ease;
}
.gg-wf-card:hover .gg-wf-foot .arr,
.gg-service-card:hover .gg-service-more .arr,
.finder-cta:hover svg {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .gg-wf-foot .arr,
  .gg-service-more .arr,
  .finder-cta svg { transition: none; }
  .gg-wf-card:hover .gg-wf-foot .arr,
  .gg-service-card:hover .gg-service-more .arr,
  .finder-cta:hover svg { transform: none; }
}

/* No underlines on button/card hyperlinks in ANY state (the lines that appear on
   click/focus when the whole card is an <a>). Normal inline text links unaffected. */
a.gg-service-card, a.gg-service-card *,
a.gg-wf-card, a.gg-wf-card *,
a.path-card, a.path-card *,
a.cat, a.cat *,
a.fchip, a.fchip *,
a.gg-vendor-card, a.gg-vendor-card *,
a.finder-cta, a.pbtn, a.pphoto,
.gg-service-more, .gg-wf-foot, .gg-link-more {
  text-decoration: none !important;
}

/* Level the "Shop X ->" CTAs across the workflow cards (department / category
   "Shop by workflow"). Bodies vary in length; flex-column + margin-top:auto on the
   footer lands every CTA on the same baseline (the grid already equal-heights). */
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-card { display: flex; flex-direction: column; }
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-card .gg-wf-foot { margin-top: auto; }

/* Same CTA-leveling for module cards + path cards (footer to the bottom). */
.module-card { display: flex; flex-direction: column; }
.module-card .card-foot, .module-card .gg-link-more { margin-top: auto; }
.path-card .card-foot, .path-card .gg-link-more { margin-top: auto; }

/* Keep workflow-card text clear of the top-right icon (120px, at right:-14px) so
   the title/body don't overlap it. */
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-name,
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-desc { padding-right: 92px; }
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-card.gg-wf-feature .gg-wf-name,
.gg-wf-grid:not(.gg-wf-grid--uniform) .gg-wf-card.gg-wf-feature .gg-wf-desc { padding-right: 0; }

/* ===========================================================
   Accessibility (WCAG 2.1 AA). This sheet loads AFTER gg_bs*.css
   (see gg_head.php), so the contrast overrides below win.
   =========================================================== */

/* Screen-reader-only text: available to AT, visually hidden. Used to give
   repeated "View More" links a unique accessible name. */
.gg-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks): off-screen until focused,
   then pinned visibly at the top-left. Targets #main on each page type. */
.gg-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: #10264a; color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.gg-skip-link:focus { left: 0; outline: 3px solid #0b5cab; outline-offset: 2px; }

/* Contrast (WCAG 1.4.3): raise muted grays that fell below 4.5:1 on white. */
.gg-pp-strike { color: #6b7890; }            /* was #9aa6b8 (~2.5:1) */
.gg-breadcrumb-lite a::after { color: #6b7890; } /* breadcrumb "/" was #9aa9bb */

/* Footer legal links row (Privacy / Terms / Accessibility). */
.gg-footer-legal {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 6px; padding: 0;
}
.gg-footer-legal a {
  color: inherit; opacity: .85; text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.gg-footer-legal a:hover, .gg-footer-legal a:focus { opacity: 1; text-decoration: underline; }

/* ===========================================================
   Cookie-consent banner (paired with Consent Mode in gg_head.php + java1.js)
   =========================================================== */
#gg-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  background: #10264a; color: #fff;
  box-shadow: 0 -6px 24px -12px rgba(0,0,0,.6);
}
#gg-cookie-banner .gg-cookie-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  justify-content: space-between;
}
#gg-cookie-banner .gg-cookie-text {
  margin: 0; font-size: 14px; line-height: 1.5; flex: 1 1 320px;
}
#gg-cookie-banner .gg-cookie-text a { color: #9ec3f0; text-decoration: underline; }
#gg-cookie-banner .gg-cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
#gg-cookie-banner .gg-cookie-btn {
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: 9px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: transparent; color: #fff;
}
#gg-cookie-banner .gg-cookie-accept { background: #0b5cab; border-color: #0b5cab; }
#gg-cookie-banner .gg-cookie-btn:hover { filter: brightness(1.12); }
#gg-cookie-banner .gg-cookie-btn:focus-visible { outline: 3px solid #9ec3f0; outline-offset: 2px; }

/* Recently viewed products renders as a PDP band reusing .band / .section-title /
   .related-grid / .related-card, so it matches the Related section's size exactly
   (see gg_product_page.php + java1.js). It only needs to stay hidden until JS
   fills it -- the `hidden` attribute must win over .band's display. */
#gg-recently-viewed[hidden] { display: none !important; }

/* PDP add-to-cart quantity stepper: make it fill the buy panel, the same width as
   the Add to Cart button it replaces (base style is content-width inline-flex). */
.buy-actions .gg-pdp-qty { width: 100%; align-self: stretch; max-width: none; }
.buy-actions .gg-pdp-qty .gg-pdp-qty-value { flex: 1 1 auto; }

/* Header "Newsletter" utility link (mirrors .gg-util-phone). */
.gg-util-newsletter { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .02em; }
.gg-util-newsletter .glyphicon { font-size: 12px; color: var(--gg-nav-blue-300, #8fb6e6); top: 1px; }

/* ============================================================
   Newsletter band + "Join the team" modal (home.php).
   The band reuses .finder for the navy gradient + FX; it only
   adds a white CTA, a lighter trailing tag, an inline layout,
   and the join modal. See newsletter_subscribe.php for submit.
   ============================================================ */
.nl-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--font-ui);font-weight:700;font-size:15px;
  background:#fff;color:var(--navy-900,#10264a);border:1px solid #fff;
  border-radius:11px;padding:13px 22px;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease,ease),box-shadow .18s var(--ease,ease),background-color .18s var(--ease,ease);}
.nl-cta:hover{background:#e8eef7;transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(0,0,0,.55);color:var(--navy-900,#10264a);}
.nl-cta svg{width:18px;height:18px;transition:transform .2s var(--ease,ease);}
.nl-cta:hover svg{transform:translateX(4px);}
.nl-tag{font-weight:600;color:#fff;}

.nl-card.nl-inline{padding:22px 32px;}
.nl-card.nl-inline .fwrap{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;}
.nl-card.nl-inline .nl-inline-copy h3{margin:0;font-size:clamp(21px,2.2vw,30px)!important;white-space:nowrap;}
.nl-card.nl-inline .nl-cta{margin-top:0;flex:none;white-space:nowrap;}
@media (max-width:620px){
  .nl-card.nl-inline{padding:22px 20px;}
  .nl-card.nl-inline .nl-inline-copy h3{white-space:normal;}
}

/* Join modal */
.nl-modal-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;background:rgba(8,18,38,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.nl-modal-overlay.is-open{display:flex;}
.nl-modal{position:relative;width:100%;max-width:468px;max-height:88vh;overflow:auto;background:#fff;border-radius:16px;padding:30px 32px 28px;box-shadow:0 40px 90px -30px rgba(8,18,38,.75);animation:nlPop .28s cubic-bezier(.2,.8,.24,1) both;}
@keyframes nlPop{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.nl-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:9px;border:1px solid var(--gg-border,#d7e0ea);background:#fff;color:#5a6a80;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;}
.nl-close:hover{background:#f2f5fa;color:#10264a;}
.nl-close svg{width:18px;height:18px;}
.nl-kicker{display:block;font-family:var(--font-display,inherit);font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--navy-900,#10264a);margin-bottom:2px;}
.nl-modal .nl-heading{font-family:var(--font-display,inherit);font-weight:800;font-size:26px;color:#10264a;margin:8px 0 0;letter-spacing:-.01em;}
.nl-sub{color:#5a6a80;font-size:14px;margin:8px 0 20px;line-height:1.5;}
.nl-form label{display:block;font-weight:700;font-size:13px;color:#1e2937;margin:0 0 6px;}
.nl-req{color:var(--gg-blue,#0b5cab);}
.nl-field{margin-bottom:14px;}
.nl-row2{display:flex;gap:12px;}
.nl-row2 .nl-field{flex:1;margin-bottom:14px;}
.nl-form input[type=text],.nl-form input[type=email]{width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--gg-border,#d7e0ea);border-radius:9px;background:#fff;font-size:15px;color:#10264a;transition:border-color .15s ease,box-shadow .15s ease;}
.nl-form input:focus{outline:none;border-color:var(--gg-blue,#0b5cab);box-shadow:0 0 0 3px rgba(11,92,171,.16);}
.nl-form input.nl-invalid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12);}
.nl-consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;font-size:12.5px;color:#5a6a80;line-height:1.45;}
.nl-consent input{margin-top:3px;flex:none;}
.nl-submit{width:100%;margin-top:16px;min-height:48px;border:none;border-radius:11px;background:var(--gg-blue,#0b5cab);color:#fff;font-family:var(--font-ui,system-ui);font-weight:700;font-size:16px;cursor:pointer;transition:background .15s ease,transform .15s ease;}
.nl-submit:hover{background:#0a4f93;transform:translateY(-1px);}
.nl-submit:disabled{opacity:.6;cursor:default;transform:none;}
.nl-privacy{display:block;text-align:center;margin-top:12px;font-size:12.5px;color:#8a97a8;}
.nl-privacy a{color:#5a6a80;}
.nl-errors{background:#fdecea;border:1px solid #f5c6c0;color:#8c2b20;border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:16px;display:none;}
.nl-errors.is-shown{display:block;}
.nl-errors div{margin:2px 0;}
.nl-success{display:none;text-align:center;padding:14px 4px 6px;}
.nl-success.is-shown{display:block;}
.nl-check{width:60px;height:60px;border-radius:50%;background:#e8f3ec;color:#1c7a44;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.nl-check svg{width:30px;height:30px;}
.nl-success .nl-heading{margin:0 0 6px;}
.nl-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
@media (max-width:520px){
  .nl-row2{flex-direction:column;gap:0;}
  .nl-modal{padding:26px 20px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .nl-modal{animation:none;}
  .nl-cta:hover,.nl-submit:hover{transform:none;}
}

/* Availability notice under a product title. Used when a product is still sellable
   but not in normal production (manufacturer-discontinued, remaining stock only), so
   a shopper learns before ordering rather than after. Deliberately quiet: navy text
   on a pale rule, not a red alarm, because the product IS buyable. */
.gg-availability-note {
  margin: .4rem 0 0;
  padding: .45rem .7rem;
  border-left: 3px solid var(--gg-primary, #1B3A6B);
  background: #f4f6fa;
  color: var(--gg-text, #1f2937);
  font-size: .875rem;
  line-height: 1.45;
  max-width: 46rem;
}
/* gg_product_page.php:737 only ever emits this INSIDE .product-head, and
   `.product-head p` (:255) sets color:#dbe5f3 for white-on-navy hero copy. That is
   (0,1,1) against this rule's (0,1,0), so the hero won: #dbe5f3 text on this rule's
   own #f4f6fa box, measured at 1.18:1 where AA wants 4.5:1 - a discontinued-stock
   disclosure that was legible in size and invisible in contrast, on 240 live PDPs.
   Scoped to beat it. (The same specificity loss silently drops the font-size and
   max-width above; the hero's 17px/68ch are the better values, so they stay.) */
.product-head .gg-availability-note { color: #26344d; }

/* ===== Mobile design layer (2026-08-09, Lane A) =====
   The phone is not a narrow desktop. The boxes on this site were already centered;
   what read as "the mobile design isn't centered" is that their CONTENTS inherit
   desktop's `text-align: start`. Measured at 375px before this block: 3 centered
   text blocks against 36 left-aligned on home, 1 against 74 on brand/hub/legacy.

   Deliberately CHROME-ONLY. Hero copy, section headings and CTA strips center.
   Product card titles, prices, spec bullets and footer links stay LEFT - centering
   catalogue data is the shrunk-desktop mistake inverted, and nobody sells gear that
   way on a phone. The `text-align: left` rules below are load-bearing rather than
   leftover: they pin that decision so a later blanket-centering rule cannot quietly
   undo it, and scripts/measure_mobile_alignment.js asserts both directions.

   This lives in gg_components.css, not gg_bs.css, because gg_components.css is the
   LAST stylesheet every page type loads. A rule in gg_bs.css/gg_bs2.css loses to
   this file at equal specificity, and most of the selectors below are defined here
   anyway. One file also removes the gg_bs.css/gg_bs2.css mirroring hazard entirely.
   home.php additionally loads gg_premium.css after this one; the home-only pieces
   that gg_premium.css would otherwise win are duplicated there. */
@media (max-width: 767px) {

  /* --- Chrome: hero, section headings, CTA strips. --- */
  .hero-inner,
  .gg-hero-tt,
  .gg-hero-root h1, .gg-hero-root p,
  .row-label,
  .section-title,
  .fwrap h3, .fwrap p,
  .nl-inline-copy h3, .nl-inline-copy p,
  .contact-strip h3, .contact-strip p { text-align: center; }

  /* --- Data stays left. This is the decision, not an oversight. --- */
  .gg-category-product-body, .gg-category-product-body h3,
  .gg-category-product-price,
  .gg-featured-card li,
  .gg-footer-list, .gg-footer-list li,
  .gg-pdp-tab-panel, .gg-pdp-tab-panel p, .gg-pdp-tab-panel li,
  .breadcrumb { text-align: left; }

  /* --- PDP horizontal overflow: measured 396px against a 375px viewport. ---
     `.product-layout` already collapses to a single column at 980px, but a bare
     `1fr` track keeps an automatic min-content floor, so the buy panel forced the
     grid to its own 370px min-content and pushed the document 21px wider than the
     screen. minmax(0,1fr) removes that floor. Fixed at the rule that causes it, so
     every .product-layout page benefits - not only the PDP that was measured. */
  .product-layout { grid-template-columns: minmax(0, 1fr); }

  /* --- 44px tap targets. ---
     152 of the 181 undersized targets on home were the mobile menu: .gg-mobile-brand
     at 31px, .gg-mobile-link at 41px, .gg-mobile-group-title at 32px. Inline links
     sitting inside a sentence are deliberately NOT included - WCAG 2.5.8 exempts
     links in a block of text, and forcing 44px there would break the line box. */
  .gg-mobile-brand, .gg-mobile-link, .gg-mobile-group-title,
  .gg-footer-list a, .gg-footer-legal a, .gg-link-more,
  .gg-category-product-body a,
  .row-label a, .auth-badge,
  .gg-btn-primary, .gg-btn-secondary, .primary-btn, .secondary-btn,
  .gg-header-phone, .mobile a, a.mobile {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .gg-btn-primary, .gg-btn-secondary,
  .primary-btn, .secondary-btn { justify-content: center; }

  button, input, select, textarea,
  .gg-cookie-btn, .gg-category-sort { min-height: 44px; }
}

/* ===========================================================================
   WIDE SURFACES + TYPE SCALE (2026-08-11, owner request)
   The category listings and the PDP went to min(1560px, 94vw) earlier today.
   This brings the remaining modern surfaces to the same measure and raises the
   type that was sized for the narrow column, plus the review notes that came
   back on the mockup. Legacy full-HTML pages are deliberately untouched.
   TO REVERT: delete this block. Nothing above it reads --gg-wide.
   =========================================================================== */
:root { --gg-wide: min(1560px, 94vw); }

/* ---- 1. WIDTH ------------------------------------------------------------
   Named per section wrapper, not `body.x .container`: the responsive menu
   includes also render a bare .container (the header owns its own 1720px
   measure), and .container is the shell for the ~1,100 legacy pages java1.js
   restyles at runtime - widening it globally would move all of them with no
   way to predict the result from the PHP diff.
   Cart and checkout stay narrow on purpose: a payment form at 1560px is a
   worse form, not a better one. */
.gg-hero-wrap > .container,              /* home.php:64  */
.gg-home-decision-band > .container,     /* home.php:96  */
.gg-specialist-cta > .container,         /* home.php:230 */
.gg-category-signal-hero > .container,   /* propacks + categories hero */
.gg-category-index-shell > .container,   /* propacks + categories body */
.gg-propack-shell,                       /* propack_<slug>.php - shell IS the element */
.gg-gear-shell,                          /* gearfinder.php */
.gg-search-shell,                        /* search.php     */
.gg-vendors-shell,                       /* vendors.php + quote.php - a DIV, not a main */
.gg-department-shell /* audio.php etc. */ {
  max-width: var(--gg-wide);
  width: 100%;
}
/* NOTE: `body.gg-category-hub-page main.container` was in the list above and did nothing,
   for two independent reasons. (1) The hub cap is `.gg-category-hub-page .bgimage2 >
   .container` (gg_bs.css:4004) - three classes to that selector's two, so it lost on
   specificity regardless. (2) gg_category_hub.php is dead: no page includes it any more,
   the aggregators all route through gg_category_product_page.php, which gets its own
   1560px override at gg_bs.css:7957. Dropped rather than fixed. */

/* Info pages were capped at 1120px. The shell widens, but prose keeps a measure -
   a 1560px line of body copy is harder to read, not easier. */
body.gg-info-page .gg-info-main { max-width: var(--gg-wide); }
body.gg-info-page .gg-info-main p,
body.gg-info-page .gg-info-main li { max-width: 78ch; }

/* The shared launch notice was capped at 900px against a 1560px page. */
.gg-launch-notice { max-width: 1180px; font-size: 16.5px; }

/* Fixed repeat(4) grids just grow fat cards at 1560px. One more column keeps the
   card size the reader already knows and spends the width on density instead. */
@media (min-width: 1400px) {
  .cards-cat, .brand-grid, .logo-grid,
  .path-grid.dense { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- 2. TYPE -------------------------------------------------------------
   Modern renderer surfaces only. Every value is a real current size raised for
   the wider measure - the same exercise the PDP had when it went 1120 -> 1560. */
.hero p                                    { font-size: 18px; }
.gg-hero-summary,
.gg-category-product-hero p                { font-size: 17.5px; }
.section-copy                              { font-size: 16px; }
.brand-masthead p, .category-hero p,
.product-head p, .gear-hero p              { font-size: 17px; }
.hero-search input                         { font-size: 16.5px; }
.hero-search button,
.promo .pbtn, .primary-btn, .secondary-btn { font-size: 15.5px; }
.trust span                                { font-size: 14px; }
.breadcrumb, .gg-breadcrumb                { font-size: 13.5px; }

.brand-card strong, .path-card strong, .cat span,
.resource-card strong, .related-card strong, .result-card strong { font-size: 16.5px; }
.brand-card small, .path-card small, .cat small,
.resource-card small, .related-card small, .result-card small    { font-size: 14px; }
.brand-tile .bn                            { font-size: 16px; }
.card-bullets li                           { font-size: 13px; }
.card-foot                                 { font-size: 12.5px; }
.mini-chip                                 { font-size: 11.5px; }
.module-card small, .visual-card small     { font-size: 14px; }
.row-label h3                              { font-size: 23px; }
.row-label a                               { font-size: 14.5px; }
.block-head h2                             { font-size: 27px; }
.contact-strip p                           { font-size: 15px; }
.finder p                                  { font-size: 17px; }
.fchip                                     { font-size: 16px; }
.promo .psub                               { font-size: 17px; }
.hl-lines div                              { font-size: 15px; }

/* ProPacks + ProPack detail - the card copy and the price row read small against
   the wider grid. Marked for enlargement on the mockup review. */
.gg-pp-summary                             { font-size: 15px; line-height: 1.5; }
.gg-pp-tier b                              { font-size: 11.5px; }
.gg-pp-tier i                              { font-size: 17px; }
.gg-pp-foot                                { font-size: 14px; }
.gg-category-help-module p                 { font-size: 16.5px; }

/* Gear finder - step copy, option cards and the running-build panel. */
/* Both marked "larger" on the step-panel review. Note the 24px in the mockup was a
   REGRESSION, not a raise: the base `h2` rule is 1.75rem/28px, so the mockup shrank
   the step title by 4px on the one screen the whole quiz is read through. */
.gg-quiz-panel h2                          { font-size: 30px; }
.gg-q-help                                 { font-size: 17px; }
.gg-option-card strong                     { font-size: 16.5px; }
.gg-option-card small                      { font-size: 14px; }
.gg-quiz-foot .count                       { font-size: 14px; }
.gg-kit-panel h3                           { font-size: 19px; }
.gg-kit-panel .sub                         { font-size: 14.5px; }
.gg-step-empty                             { font-size: 14px; }

/* ---- 3. HEADLINE TREATMENT ----------------------------------------------
   The home hero's h1 is Libre Franklin, the same face as everywhere else. What
   makes it read as designed is the treatment: a sheen across the solid words and
   a white outline on the payoff word. .gg-hero-tt already carries both, and
   gearfinder + propacks already use it. Category, hub and brand H1s never did.
   The .sol/.out split is emitted server-side by gg_hero_title() so it survives
   JS being off. Single-word titles get the sheen only - half an outlined word
   reads as a rendering bug, not a treatment. */
.gg-category-hero-copy h1 .sol {
  color: #fff;
  background: linear-gradient(100deg, #fff 0%, #fff 38%, #8fb6e6 50%, #fff 62%, #fff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ggHeroSheen 7.5s linear 1.1s infinite;
}
.gg-category-hero-copy h1 .out {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, .92);
  text-stroke: 1.6px rgba(255, 255, 255, .92);
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .gg-category-hero-copy h1 .sol { animation: none; background-position: -40% 0; }
}

/* ---- 4. REVIEW NOTES -----------------------------------------------------
   The ProPack audience label is the same small blue-uppercase kicker family the
   owner had removed sitewide; it was missed because it carries its own class. */
.gg-pp-kicker { display: none !important; }

/* ---- 5. HEADER -----------------------------------------------------------
   The header band was capped at 1280px. With the content below it now at
   min(1560px, 94vw), the logo and cart sat visibly inset from the page edges -
   which reads as a mistake rather than as a margin. One measure for both. */
.gg-site-header--menu .gg-header-inner { max-width: var(--gg-wide); }

/* Always-visible header search. This replaced a <details> popover whose entire
   closed state was the word "Search" and a magnifier glyph, so finding anything
   cost a click before a shopper could type a character. The field IS the
   affordance now. It shrinks with the viewport instead of collapsing back into a
   button, so there is no width at which search costs an extra click.
   min-width:0 is load-bearing: a flex item with a default input size will not
   shrink below it, and without this the header overflows around 1200px. */
.gg-search-inline { display: flex; align-items: center; margin: 0; }
.gg-search-inline input {
  min-width: 0;
  width: clamp(170px, 18vw, 300px);
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--gg-nav-navy, #10264a);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #fff;
  color: var(--gg-nav-navy, #10264a);
  font-size: 14.5px;
}
.gg-search-inline input::placeholder { color: #6b7c93; }
.gg-search-inline input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gg-nav-blue, #0b5cab);
}
.gg-search-inline button {
  flex: 0 0 auto;
  width: 46px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--gg-nav-navy, #10264a);
  border-radius: 0 8px 8px 0;
  background: var(--gg-nav-navy, #10264a);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}
.gg-search-inline button:hover { background: var(--gg-nav-blue, #0b5cab); }
.gg-search-inline button:focus-visible {
  outline: 2px solid var(--gg-nav-blue, #0b5cab);
  outline-offset: 2px;
}
.gg-search-inline .glyphicon { font-size: 15px; top: 0; }
@media (max-width: 991px) {
  .gg-search-inline input, .gg-search-inline button { height: 40px; }
}

/* ---- 6. VENDOR LOGO DENSITY ---------------------------------------------
   The vendors page had no size control at all - the review note was that it
   should get the same one the category listings have. Reuses the .gg-density
   pill group (styled in gg_bs.css/gg_bs2.css) and the ggCardDensity preference,
   so the choice carries between the two surfaces. Wired in java1.js.
   Roomy trades a row for legible marks; compact fits ~40% more brands per row. */
.gg-vendor-filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.gg-vendor-filter-foot .gg-vendor-filter-count { margin: 0; }

.gg-vendors-page .gg-vendor-grid[data-gg-density="roomy"] {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="roomy"] .gg-vendor-card {
  height: 128px;
  min-height: 128px;
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="roomy"] .gg-vendor-card img {
  max-width: 172px;
  max-height: 74px;
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] {
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px;
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] .gg-vendor-card {
  height: 78px;
  min-height: 78px;
  padding: 10px 12px;
  border-radius: 9px;
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] .gg-vendor-card img {
  max-width: 100px;
  max-height: 44px;
}
/* The 68 logo-less vendors render a monogram + wordmark instead of an image, and
   that text has to survive the shorter tile - the card clips overflow. */
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] .gg-vendor-card--mono { gap: 4px; }
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] .gg-vendor-card--mono em {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
.gg-vendors-page .gg-vendor-grid[data-gg-density="compact"] .gg-vendor-card--mono span {
  font-size: 12px;   /* was .74rem = 7.4px measured; rem is 10px-based here */
  line-height: 1.2;
}
@media (max-width: 480px) {
  /* The 2-up mobile grid is already the right density; the toggle would only
     make logos illegible on a 375px screen. */
  .gg-vendors-page .gg-vendor-grid[data-gg-density] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gg-vendor-filter-foot .gg-density { display: none; }
}

/* ---- SITE NAVIGATOR ------------------------------------------------------
   Chips route to a listing with facets applied; counts come from the generated
   navigator_facets.json, so a chip never promises stock that isn't there. */
.gg-nav-q {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}
.gg-nav-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-nav-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: #fff !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease;
}
.gg-nav-chip:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.gg-nav-chip-count { font-size: 12px; opacity: .62; }
.gg-nav-all {
  display: inline-block;
  margin-top: 12px;
  color: #cfe0f4 !important;
  font-size: 13.5px;
}

/* Popup. Bottom-left so it never covers the header or the primary CTA.
   The add-to-cart toast (gg_bs.css:6422) owns bottom-right at a higher
   z-index (12000 vs this panel's 1200), so the left corner is used instead
   and needs no offset to clear it. */
.gg-nav-launcher {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gg-nav-navy, #10264a);
  color: #fff;
  font-family: var(--gg-display);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(16, 38, 74, .6);
}
.gg-nav-launcher:hover { background: var(--gg-nav-blue, #0b5cab); }
.gg-nav-panel {
  position: fixed;
  left: 18px;
  bottom: 74px;
  z-index: 1200;
  width: min(390px, calc(100vw - 36px));
  padding: 18px;
  border-radius: 14px;
  background: var(--gg-nav-navy, #10264a);
  box-shadow: 0 26px 60px -18px rgba(16, 38, 74, .7);
}
.gg-nav-panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gg-nav-chip, .gg-nav-launcher { transition: none; }
}

/* ---- SITE ADVISOR --------------------------------------------------------
   Lives in the hero's right column. Replaces both the hero search form and the
   navigator's department chips. The comprehension chips are the point of the
   design: they show the shopper their sentence was understood. */
.gg-adv { width: 100%; color: #fff; }
.gg-adv-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.gg-adv-row { display: flex; gap: 8px; }
.gg-adv-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 15px;
}
.gg-adv-row input::placeholder { color: rgba(255, 255, 255, .55); }
.gg-adv-row input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .16);
}
.gg-adv-row button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--blue, #0b5cab);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.gg-adv-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gg-adv-examples button {
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  cursor: pointer;
}
.gg-adv-examples button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.gg-adv-out { margin-top: 14px; }
/* "Filtered by" bar for an active refinement (renderState() in gg_advisor.js).
   Sits above the "understood" chips, so it's told apart by an outline instead
   of the .gg-adv-chip fill - same light-blue tint, quieter treatment. The
   Clear control has no class in the markup (data-gg-adv-clear attribute
   only); styled by that attribute, scoped to this bar. */
.gg-adv-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.gg-adv-state-bit {
  border: 1px solid rgba(143, 182, 230, .45);
  border-radius: 6px;
  padding: 2px 8px;
  color: #dbe5f3;
  font-size: 12px;
  font-weight: 600;
}
.gg-adv-state [data-gg-adv-clear] {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.gg-adv-state [data-gg-adv-clear]:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gg-adv-state [data-gg-adv-clear]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gg-adv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gg-adv-chip {
  border-radius: 6px;
  padding: 3px 9px;
  background: rgba(143, 182, 230, .22);
  font-size: 12px;
  font-weight: 600;
}
.gg-adv-reply { margin: 0 0 10px; font-size: 14.5px; color: #dbe5f3; line-height: 1.45; }
.gg-adv-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gg-adv-product {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12.5px;
}
.gg-adv-product:hover { background: rgba(255, 255, 255, .14); }
.gg-adv-product img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 4px; }
.gg-adv-product-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-adv-product-price { opacity: .75; }
.gg-adv-dest { display: inline-block; margin-top: 10px; color: #cfe0f4 !important; font-size: 13.5px; }
/* The honest label on a relaxed result: this product does NOT meet the budget
   that was asked for. Saying so is the entire reason it is allowed on screen. */
.gg-adv-over { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #f0b429; }

@media (max-width: 640px) {
  .gg-adv-products { grid-template-columns: 1fr; }
}

/* ---- TALLY ---------------------------------------------------------------
   G&G's online expert: the hero character, and the popup he opens. The
   advisor markup above is unchanged and now lives inside .gg-tally-sheet, so
   everything here is either the character, the popup chrome, or a repaint of
   .gg-adv* from hero-navy onto the sheet's white. Palette is the site's:
   navy #10264a / #1B3A6B, retail blue #0b5cab, tint #8fb6e6, neutrals. */

/* --gg-tally-h is the canvas height, and it is read by gg_tally.js as well as
   used here: Three writes an explicit pixel height onto the canvas element, so
   the render buffer and the CSS box have to agree on one number or Tally comes
   out stretched. One custom property is that number, in one place. */
.gg-tally-stage {
  --gg-tally-h: 340px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--gg-tally-h);
  cursor: pointer;
  text-decoration: none !important;
}
.gg-tally-stage canvas { display: block; width: 100%; height: var(--gg-tally-h); }
/* No WebGL, or reduced motion: drop the canvas box entirely and let the
   greeting and the pill stack on their own. They are the working part. */
.gg-tally-stage.is-flat { height: auto; display: block; text-align: center; }
.gg-tally-stage.is-flat canvas { display: none; }

.gg-tally-talk {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; pointer-events: none;
}
.gg-tally-stage.is-flat .gg-tally-talk { position: static; }
.gg-tally-bub {
  position: relative;
  max-width: 96%;
  background: #fff;
  color: var(--navy, #10264a);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
  text-align: left;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
  animation: gg-tally-pop .3s cubic-bezier(.2, .9, .3, 1) both .3s;
}
.gg-tally-bub::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -9px;
  width: 0; height: 0; border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0;
}
.gg-tally-who {
  display: block; margin: 0 0 3px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: #8494a8;
}
@keyframes gg-tally-pop {
  from { opacity: 0; transform: translateY(7px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* Without this nobody knows the character is clickable. */
.gg-tally-poke {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 3;
  pointer-events: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #cfdff3;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 8px 16px; border-radius: 999px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.gg-tally-stage.is-flat .gg-tally-poke {
  position: static; display: inline-block; transform: none; margin-top: 14px;
}
.gg-tally-stage:hover .gg-tally-poke { background: rgba(255, 255, 255, .24); color: #fff; }
.gg-tally-stage:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .gg-tally-bub { animation: none; }
  .gg-tally-poke { transition: none; }
}

/* ---- the popup ---- */
.gg-tally-ov {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(10, 22, 44, .7);
  padding: 28px 20px; overflow-y: auto;
}
/* Centred, not top-anchored: margin:auto inside a flex container keeps it
   centred while a tall answer still scrolls instead of clipping. */
.gg-tally-ov.on { display: flex; align-items: center; justify-content: center; }
.gg-tally-sheet {
  width: min(760px, 100%); margin: auto;
  background: #fff; border-radius: 14px; border: 1px solid var(--line, #e2e8f0);
  overflow: hidden;
  box-shadow: 0 40px 90px -22px rgba(10, 22, 44, .55);
  animation: gg-tally-snap .13s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes gg-tally-snap {
  from { opacity: 0; transform: translateY(-8px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .gg-tally-sheet { animation: none; } }

.gg-tally-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #e2e8f0); background: #f6f8fb;
}
/* Tally's face as a 30px mark, so the popup is visibly the same character the
   shopper just clicked. Two pseudo-elements are the eyes - no second asset. */
.gg-tally-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 34% 30%, #31538c, #10264a 70%);
  box-shadow: inset 0 0 0 1px rgba(143, 182, 230, .6);
}
.gg-tally-dot::before, .gg-tally-dot::after {
  content: ''; position: absolute; top: 12px; width: 4px; height: 6px;
  border-radius: 1.5px; background: #eaf2ff;
}
.gg-tally-dot::before { left: 8px; }
.gg-tally-dot::after { right: 8px; }
.gg-tally-nm { font-size: 14.5px; font-weight: 800; color: #10264a; letter-spacing: -.01em; }
.gg-tally-rl { font-size: 12px; color: #5a6b85; }
.gg-tally-x {
  margin-left: auto; width: 44px; height: 44px; border: 0; background: none;
  cursor: pointer; color: #8494a8; font-size: 24px; line-height: 1; border-radius: 8px;
  transition: background .13s var(--ease), color .13s var(--ease);
}
.gg-tally-x:hover { background: #e7edf5; color: #10264a; }
.gg-tally-body { padding: 18px; }

/* Repaint of the advisor panel for a white sheet. .gg-adv* above is written
   for the navy hero (every colour is an rgba white), so each of those has to
   be restated here - not because the panel changed, but because its ground
   did. Kept as an override block rather than tokenising .gg-adv, so the hero
   version stays byte-for-byte the one the advisor tests were written against. */
.gg-tally-sheet .gg-adv { color: #14213a; }
.gg-tally-sheet .gg-adv-label { color: #10264a; }
.gg-tally-sheet .gg-adv-row input {
  height: 50px; border: 1px solid #cfd9e6; background: #fff; color: #10264a; font-size: 16px;
}
.gg-tally-sheet .gg-adv-row input::placeholder { color: #9aa9bd; }
.gg-tally-sheet .gg-adv-row input:focus {
  border-color: var(--blue, #0b5cab); background: #fff;
  box-shadow: 0 0 0 3px rgba(11, 92, 171, .16);
}
.gg-tally-sheet .gg-adv-row button { height: 50px; }
.gg-tally-sheet .gg-adv-examples button {
  background: #fff; border: 1px solid #cfd9e6; color: #10264a;
}
.gg-tally-sheet .gg-adv-examples button:hover { background: #f6f8fb; border-color: #1B3A6B; }
.gg-tally-sheet .gg-adv-state { border-bottom-color: #e2e8f0; }
.gg-tally-sheet .gg-adv-state-bit { border-color: #c3d4ea; color: #34496b; }
.gg-tally-sheet .gg-adv-state [data-gg-adv-clear] { color: #5a6b85; }
.gg-tally-sheet .gg-adv-state [data-gg-adv-clear]:hover { background: #e7edf5; color: #10264a; }
.gg-tally-sheet .gg-adv-state [data-gg-adv-clear]:focus-visible { outline-color: #0b5cab; }
.gg-tally-sheet .gg-adv-chip { background: rgba(11, 92, 171, .1); color: #14396e; }
.gg-tally-sheet .gg-adv-reply { color: #14213a; font-size: 15.5px; }
.gg-tally-sheet .gg-adv-product {
  background: #fff; border: 1px solid var(--line, #e2e8f0); color: #10264a !important;
}
.gg-tally-sheet .gg-adv-product:hover { background: #f6f8fb; border-color: var(--blue, #0b5cab); }
.gg-tally-sheet .gg-adv-product img { background: #fff; }
.gg-tally-sheet .gg-adv-product-price { opacity: 1; color: #5a6b85; }
.gg-tally-sheet .gg-adv-over { color: #8a5a00; }
.gg-tally-sheet .gg-adv-dest { color: var(--blue, #0b5cab) !important; font-weight: 600; }

/* On a phone the overlaid bubble lands squarely on Tally's head - the stage is
   90px shorter and the bubble is full-bleed, so it hid the character entirely
   and left a torso. Below 900px the three parts stack in normal flow instead:
   greeting, then Tally, then the pill. This is the mobile stacking the ledger
   had open as UNVERIFIED; it was wrong, and the mockup had it wrong too. */
@media (max-width: 900px) {
  .gg-tally-stage {
    --gg-tally-h: 210px;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  /* Explicit order, because Three APPENDS the canvas - in source order it is
     the last child, after the pill, so flow order alone reads
     greeting / button / Tally. */
  .gg-tally-talk { position: static; width: 100%; margin-bottom: 6px; order: 0; }
  .gg-tally-stage canvas { order: 1; }
  .gg-tally-poke { position: static; transform: none; margin-top: 12px; order: 2; }
  .gg-tally-bub { max-width: 100%; font-size: 15px; }
  .gg-tally-ov { padding: 0; }
  .gg-tally-sheet { border-radius: 0; min-height: 100vh; border: 0; }
  /* 16px minimum, or iOS zooms the whole page in on focus */
  .gg-tally-sheet .gg-adv-row input { font-size: 16px; }
}