/* ============================================================
   G&G Technologies - Light Brand Theme (home.php hero + extras)
   Loaded after gg_bs.css on home.php only.
   Brand: G&G blue (#1B3A6B) on white. No accent color - pure blue palette.

   Palette variables (:root) live in gg_bs.css and gg_bs2.css
   (the two universally-loaded stylesheets). This file inherits
   them and adds home-page hero, category-card and product-card
   styling. Only a local --gg-accent-dim is added here.
   ============================================================ */

:root {
  --gg-accent-dim:   #15305a;
}

/* ----------------------------------------------------------
   Base / Page
   ---------------------------------------------------------- */
body,
.bgimage,
.bgimage2 {
  background-color: var(--gg-bg);
  color: var(--gg-text);
}

.container {
  background-color: var(--gg-bg);
}

a {
  color: var(--gg-link);
}

a:hover,
a:focus {
  color: var(--gg-link-hover);
  text-decoration: underline;
}

/* ----------------------------------------------------------
   Navbar - Light
   ---------------------------------------------------------- */
.navbar-default {
  background-color: var(--gg-header-bg);
  border-color: var(--gg-border);
  border-radius: 0;
}

.navbar-default .navbar-nav > li > a {
  color: var(--gg-text);
  font-weight: 500;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--gg-primary);
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  background-color: var(--gg-surface-2);
  color: var(--gg-primary);
}

.navbar-default .navbar-toggle {
  border-color: var(--gg-border);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--gg-text);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--gg-surface-2);
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--gg-bg);
  border-color: var(--gg-border);
  box-shadow: 0 6px 24px rgba(27,58,107,.12);
}

.dropdown-menu > li > a {
  color: var(--gg-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--gg-surface-2);
  color: var(--gg-primary);
}

.dropdown-menu .divider {
  background-color: var(--gg-border);
}

/* Submenu arrows */
.dropdown-submenu > a:after {
  border-left-color: var(--gg-text-muted);
}

.dropdown-submenu:hover > a:after {
  border-left-color: var(--gg-primary);
}

/* Navbar search input */
.navbar-form .form-control {
  background-color: var(--gg-bg);
  border-color: var(--gg-border);
  color: var(--gg-text);
}

.navbar-form .form-control:focus {
  border-color: var(--gg-primary);
  box-shadow: 0 0 0 2px rgba(27,58,107,.15);
}

.navbar-form .form-control::placeholder {
  color: var(--gg-text-muted);
}

/* ----------------------------------------------------------
   Mobile header bar
   ---------------------------------------------------------- */
.mobile {
  background-color: var(--gg-header-bg);
  color: var(--gg-text);
  padding: 10px 12px;
  margin: 0;
  border-bottom: 1px solid var(--gg-border);
}

.mobile a {
  color: var(--gg-primary);
}

/* ----------------------------------------------------------
   Hero Section
   ---------------------------------------------------------- */
/* Wrapper around the canonical .hero component (see gg_components.css).
   Layout glue only - vertical rhythm + container width. Do not restyle .hero here. */
.gg-hero-wrap {
  padding: 28px 0 34px;
}

.gg-hero {
  padding: 80px 20px;
  background: linear-gradient(140deg, #ffffff 0%, #f7f9fc 60%, #eef2f8 100%);
  border-bottom: 1px solid var(--gg-border);
  text-align: center;
}

.gg-hero-badge {
  display: inline-block;
  background: rgba(27,58,107,.10);
  border: 1px solid rgba(27,58,107,.35);
  color: var(--gg-accent);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.gg-hero-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--gg-primary);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.gg-hero-sub {
  font-size: 1.1rem;
  color: var(--gg-text-muted);
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 560px;
}

.gg-hero-ctas {
  margin-bottom: 0;
}

.gg-btn-primary {
  display: inline-block;
  background: var(--gg-accent);
  color: #ffffff !important;
  padding: .75rem 2.2rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none !important;
  margin: 6px 8px;
  transition: background .2s, transform .15s;
  border: none;
}

.gg-btn-primary:hover {
  background: var(--gg-accent-dim);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.gg-btn-secondary {
  display: inline-block;
  border: 2px solid var(--gg-primary);
  color: var(--gg-primary) !important;
  padding: .72rem 2.2rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none !important;
  margin: 6px 8px;
  transition: background .2s, color .2s, transform .15s;
}

.gg-btn-secondary:hover {
  background: var(--gg-primary);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Section Titles
   ---------------------------------------------------------- */
.gg-section-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gg-text);
  text-align: center;
  padding: 36px 0 8px;
  margin: 0;
}

.gg-section-sub {
  text-align: center;
  color: var(--gg-text-muted);
  font-size: .9rem;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   Category Cards Grid
   ---------------------------------------------------------- */
.gg-categories {
  padding: 0 0 20px;
}

.gg-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 24px 16px 16px;
}

.gg-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170px;
  padding: 26px 12px 20px;
  background: var(--gg-surface-2);
  border: 1px solid var(--gg-border);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--gg-text) !important;
  transition: border-color .2s, transform .2s, box-shadow .2s, color .2s;
}

.gg-cat-card:hover {
  border-color: var(--gg-primary);
  transform: translateY(-4px);
  color: var(--gg-primary) !important;
  box-shadow: 0 6px 28px rgba(27,58,107,.14);
  text-decoration: none !important;
}

.gg-cat-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  color: var(--gg-primary);
  flex-shrink: 0;
}

.gg-cat-card:hover .gg-cat-icon {
  color: var(--gg-primary-2);
}

.gg-cat-name {
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ----------------------------------------------------------
   Image-backed Category Cards
   ---------------------------------------------------------- */
.gg-cat-card-img {
  position: relative;
  height: 210px;
  width: 210px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--gg-surface-2);
  border: 1px solid var(--gg-border);
  transition: transform .22s, border-color .22s, box-shadow .22s;
  display: flex;
  align-items: flex-end;
  text-decoration: none !important;
  flex-shrink: 0;
}

.gg-cat-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.12) 60%);
  border-radius: inherit;
  pointer-events: none;
}

.gg-cat-card-img:hover {
  transform: translateY(-5px);
  border-color: var(--gg-primary);
  box-shadow: 0 10px 36px rgba(27,58,107,.18);
  text-decoration: none !important;
}

.gg-cat-label {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  padding: 14px 16px;
  width: 100%;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ----------------------------------------------------------
   Featured Products
   ---------------------------------------------------------- */
.gg-products {
  padding-bottom: 10px;
}

.gg-product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px 16px 10px;
}

.gg-product-card {
  width: 210px;
  background: var(--gg-surface-2);
  border: 1px solid var(--gg-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
}

.gg-product-card:hover {
  border-color: var(--gg-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(27,58,107,.14);
}

.gg-product-img-wrap {
  height: 155px;
  background: var(--gg-bg);
  border-bottom: 1px solid var(--gg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gg-product-img-wrap img {
  max-height: 140px;
  max-width: 100%;
  object-fit: contain;
  padding: 8px;
}

.gg-product-info {
  padding: 12px 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gg-product-brand {
  font-size: .72rem;
  color: var(--gg-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.gg-product-name {
  color: var(--gg-text);
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: auto;
  line-height: 1.4;
}

.gg-product-cta {
  margin-top: 14px;
  display: block;
  background: var(--gg-accent);
  color: #ffffff !important;
  padding: 7px 0;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  transition: background .18s;
}

.gg-product-cta:hover {
  background: var(--gg-accent-dim);
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   Why G&G Trust Section
   ---------------------------------------------------------- */
.gg-trust {
  background: var(--gg-surface);
  border-top: 1px solid var(--gg-border);
  border-bottom: 1px solid var(--gg-border);
  padding: 8px 0;
}

.gg-trust .container {
  background: transparent;
}

.gg-trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gg-trust-item {
  text-align: center;
  padding: 28px 32px;
  flex: 1;
  min-width: 160px;
  border-right: 1px solid var(--gg-border);
}

.gg-trust-item:last-child {
  border-right: none;
}

.gg-trust-stat {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gg-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.gg-trust-label {
  font-size: .8rem;
  color: var(--gg-text-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ----------------------------------------------------------
   Top Brands Strip
   ---------------------------------------------------------- */
.gg-brands {
  padding-bottom: 30px;
}

.gg-brand-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px 16px 10px;
}

.gg-brand-card {
  background: var(--gg-surface-2);
  border: 1px solid var(--gg-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, transform .15s;
  display: block;
}

.gg-brand-card:hover {
  border-color: var(--gg-accent);
  transform: translateY(-2px);
}

.gg-brand-card img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  padding: 10px;
  display: block;
}

.gg-link-more {
  color: var(--gg-accent) !important;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none !important;
  transition: color .2s;
}

.gg-link-more:hover {
  color: var(--gg-link-hover) !important;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.gg-footer {
  background: var(--gg-header-bg);
  border-top: 1px solid var(--gg-border);
  padding: 44px 0 24px;
  margin-top: 10px;
}

.gg-footer .container {
  background-color: transparent;
}

.gg-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 0 16px;
}

.gg-footer-brand strong {
  display: block;
  font-size: 1rem;
  color: var(--gg-text);
  margin-bottom: 10px;
}

.gg-footer-brand p {
  color: var(--gg-text-muted);
  font-size: .85rem;
  line-height: 1.7;
  margin: 0;
}

.gg-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gg-footer-links a {
  color: var(--gg-text-muted) !important;
  font-size: .85rem;
  text-decoration: none !important;
  transition: color .15s;
}

.gg-footer-links a:hover {
  color: var(--gg-accent) !important;
}

.gg-footer-social {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gg-footer-social a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gg-text-muted) !important;
  font-size: .85rem;
  text-decoration: none !important;
  transition: color .15s;
}

.gg-footer-social a:hover {
  color: var(--gg-accent) !important;
}

.gg-footer-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.gg-footer-bottom {
  border-top: 1px solid var(--gg-border);
  padding-top: 20px;
  text-align: center;
  padding-left: 16px;
  padding-right: 16px;
}

.gg-footer-bottom p,
.gg-footer-bottom a {
  color: var(--gg-text-muted);
  font-size: .8rem;
}

.gg-footer-bottom a:hover {
  color: var(--gg-accent);
}

.gg-footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gg-footer-logos img {
  opacity: .7;
  transition: opacity .2s;
}

.gg-footer-logos img:hover {
  opacity: 1;
}

/* ----------------------------------------------------------
   Snipcart Cart Button (in navbar)
   ---------------------------------------------------------- */
.gg-cart-btn {
  background: transparent;
  border: none;
  color: var(--gg-text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 15px;
  font-family: Arial, Helvetica, sans-serif;
  transition: color .15s;
}

.gg-cart-btn:hover {
  color: var(--gg-accent);
}

.snipcart-items-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  background: var(--gg-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 3px;
  vertical-align: middle;
}

/* ----------------------------------------------------------
   Responsive adjustments
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .gg-hero {
    padding: 50px 16px;
  }

  .gg-hero-title {
    font-size: 1.8rem;
  }

  .gg-hero-sub {
    font-size: .95rem;
  }

  .gg-cat-card {
    width: 140px;
    padding: 18px 8px 14px;
  }

  .gg-cat-icon {
    width: 36px;
    height: 36px;
  }

  .gg-brand-card img {
    width: 85px;
    height: 85px;
  }

  .gg-footer-grid {
    flex-direction: column;
    gap: 28px;
  }
}

@media (max-width: 480px) {
  .gg-cat-grid {
    gap: 10px;
  }

  .gg-cat-card {
    width: calc(50% - 10px);
    min-width: 120px;
  }
}

/* ----------------------------------------------------------
   Quality pass - typography + accent restraint
   ---------------------------------------------------------- */

/* Hero heading: larger, tighter tracking */
.gg-hero-title {
  font-size: 3.2rem;
  letter-spacing: -0.03em;
}

/* Trust stats: bigger numbers in G&G blue */
.gg-stat-num {
  font-size: 2.8rem;
  color: var(--gg-primary);
  font-weight: 800;
  line-height: 1;
}

.gg-stat-label {
  color: var(--gg-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Category cards: consistent min-height */
.gg-cat-card {
  min-height: 220px;
}

/* Section headings use body text color, not the action color */
.gg-section-title,
.gg-section-title h2,
h2.gg-section-title {
  color: var(--gg-text);
  font-weight: 600;
}

/* Keep emphasis inside the blue action palette */
.gg-featured-title,
.gg-featured-section-title {
  color: var(--gg-text);
  font-weight: 700;
}


/* ============================================================
   Phase F polish - home.php hero, category cards, brand grid.
   Loaded after gg_bs.css on home.php only.
   ============================================================ */

/* Hero - subtle gradient instead of flat color */
.gg-hero {
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 60%, #e3ebf6 100%);
  position: relative;
}
.gg-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27,58,107,.18), transparent);
}

/* Larger, tighter hero title on desktop */
@media (min-width: 992px) {
  .gg-hero-title { font-size: 3.6rem; }
}

/* Category image cards - subtle zoom + label glow on hover */
.gg-cat-card-img {
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.gg-cat-card-img:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 36px rgba(27,58,107,.22);
}
.gg-cat-card-img:hover .gg-cat-label {
  background: linear-gradient(180deg, transparent 0%, rgba(27,58,107,.92) 100%);
}

/* Featured product cards - soft lift */
.gg-product-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gg-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(27,58,107,.18);
  border-color: var(--gg-primary);
}
.gg-product-card .gg-product-img-wrap img { transition: transform .35s ease; }
.gg-product-card:hover .gg-product-img-wrap img { transform: scale(1.04); }

/* Top brands grid - greyscale at rest, full color on hover */
.gg-brand-card img { filter: grayscale(50%); opacity: .85; transition: filter .25s ease, opacity .25s ease, transform .25s ease; }
.gg-brand-card:hover img { filter: grayscale(0%); opacity: 1; transform: translateY(-2px); }

/* Section titles - thin centered accent rule under each */
.gg-section-title { position: relative; padding-bottom: 18px; }
.gg-section-title::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  background: var(--gg-primary);
  margin: 14px auto 0;
  border-radius: 2px;
}

/* Reduce-motion users get static layouts */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Final homepage alignment: keep home in the same compact catalog language. */
.gg-hero {
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(135deg, #102846 0%, #1B3A6B 56%, #2C5282 100%);
  color: #fff;
  padding: 54px 20px 46px;
}

.gg-hero-title,
.gg-hero-sub,
.gg-hero-badge {
  color: #fff;
}

.gg-hero-sub {
  opacity: .9;
}

.gg-hero-badge {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
}

@media (min-width: 992px) {
  .gg-hero-title { font-size: 3.05rem; }
}

.gg-cat-grid,
.gg-product-grid,
.gg-brand-grid {
  gap: 12px;
  padding: 18px 10px 10px;
}

.gg-cat-card-img {
  height: 150px;
  width: 180px;
}

.gg-product-card {
  width: 220px;
}

.gg-product-img-wrap {
  height: 130px;
}

.gg-section-title {
  padding-top: 26px;
}

.gg-brands .gg-brand-card:nth-child(n+9) {
  display: none;
}

/* Homepage top redesign: split hero with practical shopping paths. */
.gg-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(93,154,211,.24), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, #07162d 0%, #10264a 45%, #1f5a8d 100%) !important;
  min-height: 0;
  overflow: hidden;
  padding: 48px 0 !important;
  position: relative;
}

.gg-hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 34px 34px;
  content: "";
  inset: 0;
  opacity: .45;
  pointer-events: none;
  position: absolute;
}

.gg-hero-layout {
  align-items: stretch;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
  position: relative;
  z-index: 1;
}

.gg-hero-copy {
  align-self: center;
  max-width: 740px;
  text-align: left;
}

.gg-hero-title {
  color: #fff !important;
  font-size: clamp(38px, 5.4vw, 70px) !important;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .94;
  margin: 16px 0 18px;
  max-width: 760px;
}

.gg-hero-sub {
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 640px;
}

.gg-hero-badge {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px;
  color: #fff !important;
  display: inline-flex;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 9px 14px;
  text-transform: uppercase;
}

.gg-hero-ctas {
  justify-content: flex-start;
  margin: 0;
}

.gg-hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.gg-hero-trust-row span {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 750;
  padding: 8px 12px;
}

.gg-hero-finder {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,247,255,.96)),
    radial-gradient(circle at top right, rgba(44,109,163,.2), transparent 40%);
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(0,0,0,.25);
  padding: 22px;
}

.gg-hero-finder .gg-section-kicker {
  margin-bottom: 12px;
}

.gg-hero-finder a {
  background: #fff;
  border: 1px solid #d9e7f5;
  border-radius: 18px;
  color: var(--gg-text) !important;
  display: block;
  margin-top: 10px;
  padding: 16px 16px 15px;
  position: relative;
  text-decoration: none !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gg-hero-finder a:hover {
  border-color: rgba(44,109,163,.5);
  box-shadow: 0 14px 30px rgba(16,38,74,.13);
  transform: translateY(-3px);
}

.gg-hero-finder strong {
  color: var(--gg-primary);
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.gg-hero-finder em {
  color: var(--gg-text-muted);
  display: block;
  font-style: normal;
  line-height: 1.45;
}

@media (max-width: 991px) {
  .gg-hero-layout {
    grid-template-columns: 1fr;
  }

  .gg-hero {
    padding: 38px 0 !important;
  }

  .gg-hero-title {
    max-width: 680px;
  }
}

@media (max-width: 620px) {
  .gg-hero-title {
    font-size: 38px !important;
  }

  .gg-hero-ctas {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .gg-hero-ctas a {
    text-align: center;
  }

  .gg-hero-finder {
    border-radius: 12px;
    padding: 16px;
  }
}

/* Guided homepage buying paths: compact, useful, and distinctly G&G. */
.gg-home-guide {
  background:
    radial-gradient(circle at 10% 0%, rgba(44,109,163,.16), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
  border-bottom: 1px solid var(--gg-border);
  border-top: 1px solid var(--gg-border);
  padding: 42px 0;
}

.gg-section-heading-row {
  align-items: flex-end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.gg-section-heading-row .gg-section-title {
  margin: 0;
  padding-top: 0;
  text-align: left;
}

.gg-section-heading-row .gg-section-title::after {
  margin-left: 0;
}

.gg-home-guide-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gg-home-guide-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,249,255,.96)),
    radial-gradient(circle at top right, rgba(44,109,163,.16), transparent 34%);
  border: 1px solid var(--gg-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(16,38,74,.09);
  color: var(--gg-text) !important;
  display: block;
  min-height: 210px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.gg-home-guide-card::before {
  background: linear-gradient(90deg, #10264a, #2c6da3);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gg-home-guide-card:hover {
  border-color: rgba(44,109,163,.45);
  box-shadow: 0 22px 46px rgba(16,38,74,.16);
  transform: translateY(-5px);
}

.gg-home-guide-card span {
  color: var(--gg-action-secondary, #2c6da3);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gg-home-guide-card strong {
  color: var(--gg-primary);
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.16;
  margin: 10px 0;
}

.gg-home-guide-card em {
  color: var(--gg-text-muted);
  display: block;
  font-style: normal;
  line-height: 1.58;
}

@media (max-width: 991px) {
  .gg-home-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gg-section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .gg-home-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Clean & flat (B&H-inspired) de-box refinement - sitewide
   ============================================================ */
:root {
  --gg-radius: 10px;
  --gg-shadow-sm: 0 1px 2px rgba(16,38,74,.05);
  --gg-shadow-md: 0 6px 16px rgba(16,38,74,.08);
}
/* Flatten the boxy cards: white fill, thin light border, subtle shadow, no gradients/accent-bars */
.gg-home-guide-card, .gg-brand-card-modern, .gg-brand-line-card, .gg-catalog-card,
.gg-video-card, .gg-about-audience-card, .gg-brand-jump-card {
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: var(--gg-radius) !important;
  box-shadow: var(--gg-shadow-sm) !important;
}
.gg-home-guide-card:hover, .gg-brand-card-modern:hover, .gg-brand-line-card:hover,
.gg-catalog-card:hover, .gg-video-card:hover, .gg-brand-jump-card:hover {
  box-shadow: var(--gg-shadow-md) !important;
  border-color: rgba(27,58,107,.35) !important;
}
.gg-home-guide-card::before, .gg-brand-line-card::before,
.gg-brand-card-modern::before, .gg-brand-jump-card::before { display: none !important; }
.gg-cat-card-img { border-radius: var(--gg-radius) !important; }
/* lighter, cleaner type - no 900 "black" weights */
.gg-section-title, .gg-section-title h2, h2.gg-section-title,
.gg-home-guide-card strong, .gg-home-guide-card span,
.gg-video-body h3, .gg-section-kicker, .gg-video-kicker, .pagetitle, h1.pagetitle {
  font-weight: 700 !important;
}
.gg-section-kicker, .gg-video-kicker, .gg-home-guide-card span { letter-spacing: .08em; }

/* Homepage stabilization: one final Retail Pro design pass */
.gg-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%) !important;
  border-bottom: 1px solid var(--gg-border);
  color: var(--gg-text);
  padding: 42px 0 !important;
}

.gg-hero::before,
.gg-hero::after {
  display: none !important;
}

.gg-hero-layout {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}

.gg-hero-title {
  color: var(--gg-primary) !important;
  font-family: var(--gg-font-product, "Trebuchet MS", Arial, Helvetica, sans-serif);
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.08;
  margin: 14px 0 14px;
  max-width: 720px;
}

.gg-hero-sub {
  color: var(--gg-text-muted) !important;
  font-family: var(--gg-font-body, Verdana, Arial, Helvetica, sans-serif);
  font-size: 17px !important;
  line-height: 1.6;
  max-width: 620px;
}

.gg-hero-badge {
  background: #eef3fb !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 999px;
  color: var(--gg-primary) !important;
  font-family: var(--gg-font-nav, Arial, Helvetica, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.gg-hero-trust-row span {
  background: #fff;
  border: 1px solid var(--gg-border);
  border-radius: 999px;
  color: var(--gg-text-muted);
  font-family: var(--gg-font-nav, Arial, Helvetica, sans-serif);
  font-size: 13px;
  font-weight: 700;
}

.gg-hero-finder {
  background: #fff !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: var(--gg-radius, 10px) !important;
  box-shadow: var(--gg-shadow-sm) !important;
  padding: 18px !important;
}

.gg-hero-finder a {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.gg-home-guide {
  background: var(--gg-surface, #f7f9fc) !important;
}

.gg-home-guide-card,
.gg-cat-card-img {
  border-radius: 8px !important;
}

@media (min-width: 992px) {
  .gg-hero-title {
    font-size: 48px !important;
  }
}

@media (max-width: 991px) {
  .gg-hero-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .gg-hero-title {
    font-size: 34px !important;
  }

  .gg-hero-sub {
    font-size: 15px !important;
  }
}

/* Canva export-backed homepage visuals. Keep this after flat-card resets. */
.gg-home-guide-card.gg-canva-tile,
.gg-cat-card-img {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.gg-home-guide-card.gg-canva-tile {
  color: #fff !important;
  min-height: 230px;
  padding: 22px;
}
.gg-home-guide-card.gg-canva-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,22,45,.08), rgba(7,22,45,.82));
  z-index: 0;
}
.gg-home-guide-card.gg-canva-tile span,
.gg-home-guide-card.gg-canva-tile strong,
.gg-home-guide-card.gg-canva-tile em {
  position: relative;
  z-index: 1;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(7,22,45,.35);
}
.gg-home-guide-card.gg-canva-tile span {
  opacity: .86;
}
.gg-home-guide-card.gg-canva-tile em {
  color: rgba(255,255,255,.86) !important;
}
.gg-canva-media img {
  background: #f4f7fb;
}
.gg-retail-promo {
  position: relative;
  overflow: hidden;
}
.gg-retail-promo-track {
  display: flex;
  transition: transform .32s ease;
}
.gg-retail-promo-slide {
  min-width: 100%;
}
.gg-canva-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(16,38,74,.88);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.gg-canva-carousel-arrow-prev {
  left: 14px;
}
.gg-canva-carousel-arrow-next {
  right: 14px;
}
.gg-canva-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.gg-canva-carousel-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: transparent;
}
.gg-canva-carousel-dots button.is-active {
  background: #fff;
}

/* ============================================================
   Hero (static) - home.php marketing hero. Navy, single banner.
   ============================================================ */
.gg-hero-static {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
  background-color: #10264a !important;
  background-image: linear-gradient(135deg, #07162d 0%, #10264a 55%, #1f4f86 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gg-hero-static::before { display: none !important; }
/* navy scrim so left-aligned text stays legible over any background image */
.gg-hero-static::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,22,45,.92) 0%, rgba(7,22,45,.66) 42%, rgba(7,22,45,.12) 100%);
}
.gg-hero-static-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 760px);
  align-items: center;
  min-height: 380px; padding: 56px 0;
}
.gg-hero-static .gg-hero-copy { text-align: left; max-width: 640px; }
.gg-hero-static .gg-hero-badge {
  display: inline-block; margin-bottom: 14px;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 7px 14px; text-transform: uppercase;
}
.gg-hero-static .gg-hero-title {
  color: #fff !important; margin: 0 0 14px;
  font-family: var(--gg-font-product, 'Figtree', Arial, sans-serif);
  font-size: clamp(30px, 4vw, 52px) !important; font-weight: 800 !important; line-height: 1.06; letter-spacing: -.01em;
}
.gg-hero-static .gg-hero-sub {
  color: rgba(255,255,255,.86) !important; margin: 0 0 24px;
  font-size: clamp(15px, 1.6vw, 18px) !important; line-height: 1.6; max-width: 600px;
}
.gg-hero-static .gg-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.gg-hero-static .gg-hero-media { display: flex; align-items: center; justify-content: center; }
.gg-hero-static .gg-hero-media img { max-width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 20px 44px rgba(0,0,0,.45)); }
@media (max-width: 767px) {
  .gg-hero-static-inner { grid-template-columns: 1fr; min-height: 0; padding: 32px 0 38px; gap: 16px; text-align: center; }
  .gg-hero-static .gg-hero-copy { text-align: center; max-width: none; }
  .gg-hero-static .gg-hero-ctas { justify-content: center; }
  .gg-hero-static .gg-hero-media { order: -1; }
  .gg-hero-static .gg-hero-media img { max-height: 180px; }
}

/* ============================================================
   Homepage hero - authoritative navy gradient.
   Per CLAUDE.md Imagery Rules: heroes use a dark navy gradient
   built from brand hex (no photo backgrounds). Two-class selector
   + !important so it beats the single-class white `.gg-hero`
   override earlier in this file. Scoped to .gg-hero-static, which
   only the homepage hero carries, so no other page is affected.
   ============================================================ */
.gg-hero.gg-hero-static {
  background:
    radial-gradient(circle at 78% 18%, rgba(44,82,130,.40), transparent 30%),
    linear-gradient(135deg, #10264a 0%, #1B3A6B 58%, #2C5282 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gg-hero.gg-hero-static .gg-hero-title,
.gg-hero.gg-hero-static .gg-hero-sub { color: #fff !important; }

/* Brand-proof line: subordinate to the h1/CTA (hierarchy), text-only
   so it wraps cleanly on phones (mobile-first). */
.gg-hero-brandproof {
  margin: 16px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(255,255,255,.72);
}
.gg-hero-brandproof strong { color: #fff; font-weight: 600; }
@media (max-width: 600px) {
  .gg-hero-brandproof { font-size: .78rem; }
}

/* Business identity - tagline + text-only vendor cards (brands pending logo art) */
.gg-footer-tagline { color: var(--gg-text-muted, #6b7a90); font-size: .8rem; letter-spacing: .05em; margin: -4px 0 10px !important; }
.gg-vendor-card--text span { font-weight: 600; color: var(--gg-primary, #1B3A6B); font-size: .9rem; line-height: 1.3; text-align: center; letter-spacing: .02em; }
.gg-vendor-card--text:hover span { color: var(--gg-accent, #0b5cab); }

/* Services strip (home/about) */
.gg-services { padding: 48px 0; }
.gg-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.gg-service-card { display: block; background: #fff; border: 1px solid var(--gg-border, #dde3ec); border-radius: 6px; padding: 18px; text-decoration: none; color: inherit; }
.gg-service-card strong { display: block; color: var(--gg-primary, #1B3A6B); margin-bottom: 6px; font-size: .95rem; }
.gg-service-card span { color: #5a6878; font-size: .85rem; line-height: 1.5; }

/* ============================================================
   GG 2026 HOMEPAGE LAYER - final authoritative layer for home.php
   (loads after gg_bs.css; matches the sitewide GG 2026 system)
   ============================================================ */

/* Hero (home) */
.gg-hero-static { padding: 64px 0 56px; }
.gg-hero-static .gg-hero-title {
  margin: 14px 0 12px; color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
}
.gg-hero-static .gg-hero-sub { max-width: 640px; font-size: 1.08rem; }
.gg-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* Shop by workflow - navy cards */
.gg-workflow { padding: 52px 0 8px; }
.gg-workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.gg-workflow-card {
  display: block; padding: 26px 24px 24px;
  background: linear-gradient(150deg, #10264a 0%, #1B3A6B 100%);
  border-radius: 10px; color: #fff !important; text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gg-workflow-card:hover, .gg-workflow-card:focus { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,38,74,.28); }
.gg-workflow-card strong { display: block; font-family: var(--gg-font-display); font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; color: #fff; }
.gg-workflow-card span { display: block; color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.55; margin-bottom: 14px; }
.gg-workflow-card em { font-style: normal; color: #fff; font-family: var(--gg-font-display); font-weight: 600; font-size: .9rem; }
.gg-workflow-card em::after { content: " \2192"; }

/* Why G&G - light gray trust band */
.gg-why { background: #f4f6fa; padding: 52px 0; margin: 48px 0 0; }
.gg-why .container { background: transparent; }
.gg-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.gg-why-item { text-align: center; padding: 8px 14px; }
.gg-why-item svg { width: 38px; height: 38px; color: #0b5cab; margin-bottom: 12px; }
.gg-why-item strong { display: block; color: #10264a; font-family: var(--gg-font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.gg-why-item span { color: #5a6878; font-size: .89rem; line-height: 1.55; }

/* Services - navy cards (override the white default for home) */
.gg-services--navy .gg-service-card {
  background: linear-gradient(150deg, #10264a 0%, #1B3A6B 100%);
  border: 0; border-radius: 10px; padding: 24px 22px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gg-service-card:focus, .gg-service-card:focus-visible { outline: 3px solid #8fb6e6; outline-offset: 3px; }
.gg-services--navy .gg-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,38,74,.28); }
.gg-services--navy .gg-service-card strong { color: #fff; font-size: 1.05rem; }
.gg-services--navy .gg-service-card span { color: rgba(255,255,255,.78); display: block; margin-bottom: 12px; }
.gg-services--navy .gg-service-card .gg-service-more { display: inline-block; color: #fff !important; font-family: var(--gg-font-display); font-weight: 600; font-size: .9rem; margin-bottom: 0; }
.gg-services--navy .gg-service-card:hover .gg-service-more { text-decoration: underline; }

/* Ask a specialist - full-width navy banner */
.gg-specialist-cta {
  background: linear-gradient(135deg, #10264a 0%, #1B3A6B 100%);
  padding: 56px 0; margin: 56px 0 0; text-align: center; color: #fff;
}
.gg-specialist-cta .container { background: transparent; }
.gg-specialist-cta h2 { color: #fff; margin: 0 0 12px; font-size: clamp(2rem, 3.6vw, 2.6rem); }
.gg-specialist-cta p { color: rgba(255,255,255,.92); max-width: 640px; margin: 0 auto 26px; font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.6; }
.gg-specialist-cta .gg-hero-ctas { justify-content: center; }
.gg-specialist-cta .gg-btn-primary { background: #fff; color: #10264a !important; border-color: #fff; }
.gg-specialist-cta .gg-btn-primary:hover { background: #e8eef7; }
.gg-specialist-cta .gg-btn-secondary { color: #fff !important; border-color: rgba(255,255,255,.55); }
.gg-specialist-cta .gg-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gg-workflow-card:hover, .gg-services--navy .gg-service-card:hover { transform: none; }
}

/* GG 2026 - final cascade overrides (must stay the last rules in this file).
   gg_premium.css loads after gg_bs.css on home.php, and earlier blocks in
   this file restyle .gg-btn-* with equal or higher specificity. */
.gg-hero-static .gg-hero-ctas .gg-btn-primary {
  background: #0b5cab !important; color: #fff !important; border: 1px solid #0b5cab !important;
}
.gg-hero-static .gg-hero-ctas .gg-btn-primary:hover {
  background: #0a4f93 !important;
}
.gg-hero-static .gg-hero-ctas .gg-btn-secondary {
  background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.6) !important;
}
.gg-hero-static .gg-hero-ctas .gg-btn-secondary:hover {
  background: rgba(255,255,255,.14) !important; border-color: #fff !important; color: #fff !important;
}
.gg-specialist-cta .gg-hero-ctas .gg-btn-primary {
  background: #fff !important; color: #10264a !important; border-color: #fff !important;
}
.gg-specialist-cta .gg-hero-ctas .gg-btn-primary:hover { background: #e8eef7 !important; }
.gg-specialist-cta .gg-hero-ctas .gg-btn-secondary {
  background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.55) !important;
}
/* Both CTAs are the clear/white-bordered treatment now (Call Sales was the solid
   white pill). Flex-centre the label: inline-block centres the LINE box, which
   reserves descender space and leaves the caps sitting visibly high. */
.gg-specialist-cta .gg-hero-ctas .gg-btn-primary,
.gg-specialist-cta .gg-hero-ctas .gg-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
}

/* Hero product montage: manufacturer product shots on white chips,
   overlapping cluster on the navy gradient (Imagery Rules: product shots
   only, no lifestyle stock, no photo background). */
.gg-hero-static-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.gg-hero-montage { position: relative; min-height: 320px; }
.gg-hero-chip {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 12px;
  box-shadow: 0 18px 40px rgba(7,22,45,.45);
}
.gg-hero-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gg-hero-chip--a { width: 44%; height: 46%; left: 0;   top: 4%;  z-index: 3; }
.gg-hero-chip--b { width: 30%; height: 40%; right: 14%; top: 0;   z-index: 2; transform: rotate(2deg); }
.gg-hero-chip--c { width: 48%; height: 38%; left: 8%;  bottom: 2%; z-index: 4; transform: rotate(-1.5deg); }
.gg-hero-chip--d { width: 26%; height: 34%; right: 0;  top: 36%; z-index: 1; }
.gg-hero-chip--e { width: 34%; height: 28%; right: 12%; bottom: 0; z-index: 2; transform: rotate(1deg); }
@media (max-width: 991px) {
  .gg-hero-static-inner { grid-template-columns: 1fr; }
  .gg-hero-montage { display: none; }
}

/* Readability floor: no text below ~12.5px on the homepage; key labels bumped. */
.gg-section-kicker { font-size: 13px !important; letter-spacing: .08em; }
.gg-trust-strip { font-size: 18px; font-weight: 700; color: var(--gg-text, #10264a); gap: 10px 40px; }
.gg-hero-badge { font-size: 13px; }
.gg-why-item span { font-size: .95rem; }
.gg-workflow-card span { font-size: .95rem; }
.gg-footer-bottom p { font-size: .85rem; }
.gg-footer-services li { font-size: .9rem; }
.gg-section-sub { font-size: 1rem; }

/* GG 2026: mobile strip matches the navy header (overrides the older
   white .mobile rule above). */
.visible-xs-block.bgimage { background: #10264a !important; }
.visible-xs-block.bgimage .mobile { background: transparent !important; color: #fff !important; border-bottom: 0; }
.visible-xs-block.bgimage .mobile a { color: #fff !important; }

/* GG 2026 readability + hero polish (final overrides) */
/* Navy cards: brighter body text, larger floor */
.gg-workflow-card span { color: rgba(255,255,255,.92) !important; font-size: .97rem; }
.gg-services--navy .gg-service-card span { color: rgba(255,255,255,.92) !important; font-size: .95rem; }
.gg-why-item span { color: #445163; }
.gg-footer p, .gg-footer span, .gg-footer a { color: rgba(255,255,255,.85); }
.gg-footer-bottom p { color: rgba(255,255,255,.62); }

/* Hero collage: aligned 2x2 grid + one wide card, no rotation - calmer,
   more intentional than the scattered overlap */
.gg-hero-montage { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 14px; min-height: 0; }
.gg-hero-chip { position: static !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 10px; }
.gg-hero-chip--c { grid-column: 1 / -1; }
.gg-hero-chip img { max-height: 105px; }

/* CTA balance: equal visual weight, consistent min width */
.gg-hero-ctas a { min-width: 200px; text-align: center; }

/* Section rhythm: consistent vertical spacing between homepage sections */
.gg-workflow, .gg-categories, .gg-brands { padding: 52px 0 8px; }
.gg-section-title { margin-bottom: 18px; }


/* =====================================================================
   Technical Glass (GG 2026) - approved sitewide design layer
   Rule: glass is for CHROME (header, mega menus, hero panels, carousel
   controls, CTA bands). MERCHANDISE (product/category/brand cards)
   stays solid white so photography reads true. Palette unchanged:
   navy #10264a/#1B3A6B, retail blue #0b5cab, white + grays.
   ===================================================================== */
:root {
  --gg-glass-bg: rgba(255, 255, 255, .76);
  --gg-glass-bg-strong: rgba(255, 255, 255, .94);
  --gg-glass-navy: rgba(16, 38, 74, .42);
  --gg-glass-border: rgba(16, 38, 74, .12);
  --gg-glass-highlight: rgba(255, 255, 255, .7);
  --gg-blur: 14px;
  --gg-shadow-card: 0 1px 2px rgba(16, 38, 74, .06);
  --gg-shadow-lift: 0 10px 30px rgba(16, 38, 74, .16);
  --gg-ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Sticky header: solid fallback, glass where supported ------------ */
.gg-site-header,
.gg-site-header--primary {
  background: var(--gg-glass-bg-strong);
  border-bottom: 1px solid var(--gg-glass-border);
  box-shadow: 0 1px 0 var(--gg-glass-highlight) inset, 0 4px 18px rgba(16, 38, 74, .07);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gg-site-header,
  .gg-site-header--primary {
    background: var(--gg-glass-bg);
    -webkit-backdrop-filter: blur(var(--gg-blur)) saturate(1.4);
    backdrop-filter: blur(var(--gg-blur)) saturate(1.4);
  }
}

/* --- Mega menus + dropdowns: glass panel with top edge highlight ----- */
.gg-mega-inner,
.dropdown-menu {
  background: var(--gg-glass-bg-strong);
  border: 1px solid var(--gg-glass-border);
  border-top: 1px solid var(--gg-glass-highlight);
  box-shadow: var(--gg-shadow-lift);
  border-radius: 0 0 10px 10px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gg-mega-inner,
  .dropdown-menu {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(var(--gg-blur)) saturate(1.4);
    backdrop-filter: blur(var(--gg-blur)) saturate(1.4);
  }
}

/* --- Glass panel + chip utilities (heroes, CTA bands) ----------------
   .gg-glass-panel  : light glass on dark navy surfaces
   .gg-glass-chip   : small translucent pill (hero badges, stat chips)  */
.gg-glass-panel {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-top-color: rgba(255, 255, 255, .38);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(4, 12, 28, .35);
}
.gg-glass-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #dbe7f6;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gg-glass-panel, .gg-glass-chip {
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
  }
}

/* --- Buttons: quiet elevation, sheen on primary only ----------------- */
.gg-btn-primary,
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--gg-ease), box-shadow .18s var(--gg-ease), background .18s var(--gg-ease);
  box-shadow: 0 2px 6px rgba(16, 38, 74, .18);
}
.gg-btn-primary:hover, .gg-btn-primary:focus,
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 38, 74, .28);
}
.gg-btn-primary:active, .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(16, 38, 74, .18);
}
.gg-btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .45s var(--gg-ease);
  pointer-events: none;
}
.gg-btn-primary:hover::after { left: 125%; }
.gg-btn-secondary {
  background: transparent;
  border: 1px solid var(--gg-glass-border);
  color: var(--gg-primary, #1B3A6B);
  transition: border-color .18s var(--gg-ease), background .18s var(--gg-ease), transform .18s var(--gg-ease);
}
.gg-btn-secondary:hover, .gg-btn-secondary:focus {
  border-color: #0b5cab;
  background: rgba(11, 92, 171, .06);
  transform: translateY(-1px);
}

/* --- Merchandise cards: one solid-white spec, one hover -------------- */
.gg-cat-card, .gg-brand-card, .gg-vendor-card,
.gg-icon-card, .gg-department-brand-card,
.gg-manufacturer-jump-card, .gg-card {
  background: #ffffff;
  border: 1px solid var(--gg-border, #e3e8ef);
  border-radius: 12px;
  box-shadow: var(--gg-shadow-card);
  transition: border-color .18s var(--gg-ease), box-shadow .18s var(--gg-ease), transform .18s var(--gg-ease);
}
.gg-cat-card:hover, .gg-brand-card:hover,
.gg-vendor-card:hover, .gg-icon-card:hover, .gg-department-brand-card:hover,
.gg-manufacturer-jump-card:hover, .gg-card:hover {
  border-color: #0b5cab;
  box-shadow: 0 8px 24px rgba(16, 38, 74, .14);
  transform: translateY(-2px);
}
/* Product imagery: contained on white, gentle zoom - never cropped,
   never behind glass. */
.gg-cat-card img, .gg-brand-card img,
.gg-vendor-card img, .gg-department-brand-card img {
  object-fit: contain;
  background: #ffffff;
  transition: transform .25s var(--gg-ease);
}
.gg-cat-card:hover img {
  transform: scale(1.03);
}
.gg-vendor-card:hover img, .gg-brand-card:hover img,
.gg-department-brand-card:hover img {
  transform: none; /* logos shouldn't wobble */
}

/* --- Search field: soft inset (the only neumorphic note) ------------- */
.gg-header-search input.form-control,
.navbar-form .form-control {
  border-radius: 999px;
  background: #f3f6fa;
  border: 1px solid transparent;
  box-shadow: inset 1px 1px 3px rgba(16, 38, 74, .08), inset -1px -1px 3px rgba(255, 255, 255, .9);
  transition: background .18s var(--gg-ease), border-color .18s var(--gg-ease), box-shadow .18s var(--gg-ease);
}
.gg-header-search input.form-control:focus,
.navbar-form .form-control:focus {
  background: #ffffff;
  border-color: #0b5cab;
  box-shadow: 0 0 0 3px rgba(11, 92, 171, .14);
}

/* --- Carousel controls (workflow carousel + future use) -------------- */
.gg-car-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gg-glass-border);
  background: var(--gg-glass-bg-strong);
  color: #10264a;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--gg-glass-highlight) inset, 0 4px 14px rgba(16, 38, 74, .12);
  transition: transform .18s var(--gg-ease), box-shadow .18s var(--gg-ease), border-color .18s var(--gg-ease);
}
.gg-car-btn:hover { transform: scale(1.06); border-color: #0b5cab; box-shadow: 0 6px 18px rgba(16, 38, 74, .2); }
.gg-car-btn:active { transform: scale(.98); }
.gg-car-btn[disabled] { opacity: .35; cursor: default; transform: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gg-car-btn {
    background: var(--gg-glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
  }
}
.gg-car-dots { display: flex; gap: 8px; justify-content: center; }
.gg-car-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(16, 38, 74, .22);
  cursor: pointer;
  transition: width .22s var(--gg-ease), background .22s var(--gg-ease);
}
.gg-car-dot.is-active { width: 24px; background: #0b5cab; }

/* --- Readability floor: no pale-blue-on-white, no navy-on-navy ------- */
.gg-section-kicker, .gg-video-kicker { color: #0b5cab; font-weight: 700; }
.gg-section-sub, .gg-page-sub { color: #4b5563; }
.gg-hero-sub { color: #c7d6ea; }

/* --- Motion respect --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gg-btn-primary, .btn-primary, .gg-btn-secondary,
  .gg-workflow-card, .gg-cat-card, .gg-brand-card, .gg-vendor-card,
  .gg-icon-card, .gg-department-brand-card, .gg-service-card,
  .gg-manufacturer-jump-card, .gg-card, .gg-car-btn, .gg-car-dot,
  .gg-cat-card img {
    transition: none !important;
    transform: none !important;
  }
  .gg-btn-primary::after { display: none; }
}

/* =====================================================================
   Homepage workflow carousel + hero polish (Technical Glass, GG 2026)
   ===================================================================== */
.gg-workflow-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}
.gg-workflow-carousel .gg-car-btn {
  align-self: center;
  flex: 0 0 auto;
  z-index: 2;
}
.gg-workflow-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 2px 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.gg-workflow-track::-webkit-scrollbar { display: none; }
.gg-workflow-track:focus-visible { outline: 2px solid #0b5cab; outline-offset: 4px; }
.gg-workflow-track .gg-workflow-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 991px) {
  .gg-workflow-track .gg-workflow-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  .gg-workflow-track .gg-workflow-card { flex-basis: 86%; }
  .gg-workflow-carousel .gg-car-btn { display: none; } /* thumb-swipe on phones */
}
.gg-workflow .gg-car-dots { margin: 2px 0 6px; }
.gg-workflow-icon { display: block; line-height: 0; margin-bottom: 14px; }
.gg-workflow-icon svg { width: 34px; height: 34px; color: #9fc0e8; }

/* Hero polish: glassier badge, gentle montage float */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gg-hero-static .gg-hero-badge {
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    backdrop-filter: blur(8px) saturate(1.3);
  }
}
@keyframes gg-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* Only chips without a static rotate() - animating transform would
   cancel the rotation on --b/--c/--e. */
.gg-hero-chip--a { animation: gg-chip-float 7s ease-in-out infinite; }
.gg-hero-chip--d { animation: gg-chip-float 9.5s ease-in-out 2.1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .gg-hero-chip--a, .gg-hero-chip--d { animation: none; }
  .gg-workflow-track { scroll-behavior: auto; }
}

/* Homepage navy workflow cards: neutralize the white category-page workflow
   styling from gg_bs.css (navy !important heading, uppercase 12px span,
   gradient accent bar) that otherwise bleeds into the navy home cards. */
.gg-workflow .gg-workflow-card strong { color: #fff !important; font-size: 19px; font-weight: 700; }
.gg-workflow .gg-workflow-card span {
  color: rgba(255,255,255,.82) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  margin-top: 0;
}
.gg-workflow .gg-workflow-card::before { display: none; }
.gg-workflow .gg-workflow-card em { color: #fff; }

/* Technical Glass header text: the legacy navy-header block paints nav links,
   wordmark, and search text white; on the glass (light) header they must be
   navy/dark again. Keep in sync across gg_bs.css / gg_bs2.css / gg_premium.css. */
.gg-site-header--primary .gg-nav-link { color: var(--gg-nav-navy, #10264a) !important; }
.gg-site-header--primary .gg-nav-link:hover,
.gg-site-header--primary .gg-nav-link:focus,
.gg-site-header--primary .gg-nav-item--mega:hover > .gg-nav-link,
.gg-site-header--primary .gg-nav-item--mega:focus-within > .gg-nav-link {
  background: rgba(11, 92, 171, .08);
  color: var(--gg-nav-navy-deep, #10264a) !important;
}
/* Gear Finder - guided entry point, accented in retail blue */
.gg-site-header--primary .gg-nav-link--emphasis { color: #0b5cab !important; }
.gg-site-header--primary .gg-nav-link--emphasis:hover,
.gg-site-header--primary .gg-nav-link--emphasis:focus { background: rgba(11, 92, 171, .12); color: #08305c !important; }
.gg-site-header--primary .gg-header-wordmark strong { color: #10264a; }
.gg-site-header--primary .gg-header-wordmark small { color: #5a6878; }
.gg-site-header--primary .gg-header-logo { background: transparent; padding: 0; }
.gg-site-header--primary .gg-header-search input.form-control {
  color: #1f2937;
  background: #f3f6fa;
  border-color: transparent;
}
.gg-site-header--primary .gg-header-search input.form-control::placeholder { color: #6b7280; }
.gg-site-header--primary .gg-header-search-btn { color: #10264a; }

/* Clean & flat compliance: no gradient accent bars on workflow/brand cards. */
.gg-workflow-card::before, .gg-brand-card-modern::before { display: none; }

/* Navy hero band: title/breadcrumb must be light (the older light-hero rule
   set navy + white text-shadow, which ghosts on the navy gradient). */
.gg-page-hero h1.pagetitle { color: #fff; text-shadow: none; }
.gg-page-hero .gg-breadcrumb, .gg-page-hero .gg-breadcrumb a { color: rgba(255,255,255,.78); }
.gg-page-hero .gg-breadcrumb a:hover { color: #fff; }
.gg-page-hero .gg-page-sub { color: rgba(255,255,255,.84); }

/* Brand-page family link cards: compact chips instead of tall empty boxes.
   (The old spec reserved 168px of image space most links don't have.) */
.gg-brand-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 8px;
}
body.gg-brand-page .gg-brand-card-modern {
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px !important;
  border-radius: 10px !important;
  background: #fff !important;
}
body.gg-brand-page .gg-brand-card-modern::after {
  content: "\203A";
  font-size: 20px;
  line-height: 1;
  color: #0b5cab;
  flex: 0 0 auto;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
body.gg-brand-page .gg-brand-card-modern:hover::after { transform: translateX(3px); }
body.gg-brand-page .gg-brand-card-modern span {
  font-size: 15px !important;
  margin: 0 !important;
  text-align: left;
}
body.gg-brand-page .gg-brand-card-modern img { display: none; }

body.gg-brand-page .gg-brand-card-modern { flex-direction: row !important; }

/* =====================================================================
   Quiet Premium Retail (GG 2026 P5) - approved Part 5 layer.
   Layered light canvas + alternating bands kill the white-box feel;
   cards become elevated surfaces. Glass stays chrome-only.
   ===================================================================== */
:root {
  --gg-canvas: #f4f7fb;
  --gg-band-tint: #eef3f9;
  --gg-elev-1: 0 1px 2px rgba(16, 38, 74, .05), 0 6px 18px rgba(16, 38, 74, .05);
  --gg-elev-2: 0 2px 4px rgba(16, 38, 74, .06), 0 14px 32px rgba(16, 38, 74, .10);
}

/* Canvas: tinted page, transparent containers - surfaces come from cards
   and bands, not from one giant white sheet. */
body, .bgimage, .bgimage2 { background-color: var(--gg-canvas); }
.container { background-color: transparent; }

/* Band utilities (full-bleed section treatments) */
.gg-band--white { background: #ffffff; border-top: 1px solid #e7edf5; border-bottom: 1px solid #e7edf5; }
.gg-band--tint { background: var(--gg-band-tint); }
.gg-band--navy { background: linear-gradient(135deg, #10264a 0%, #1B3A6B 100%); color: #fff; }

/* Soft two-layer elevation replaces flat single shadows on merchandise cards */
.gg-cat-card, .gg-brand-card, .gg-vendor-card, .gg-icon-card,
.gg-department-brand-card, .gg-manufacturer-jump-card, .gg-card,
.gg-brand-jump-card, .gg-brand-card-modern, .gg-service-card,
.gg-catalog-card {
  box-shadow: var(--gg-elev-1);
  border: 1px solid #e3eaf3;
  background: #fff;
}
.gg-cat-card:hover, .gg-brand-card:hover, .gg-vendor-card:hover,
.gg-icon-card:hover, .gg-department-brand-card:hover,
.gg-manufacturer-jump-card:hover, .gg-card:hover,
.gg-brand-jump-card:hover, .gg-brand-card-modern:hover {
  box-shadow: var(--gg-elev-2);
  border-color: #0b5cab;
}

/* Tertiary action: quiet text-button with animated underline */
.gg-link-more, .gg-btn-tertiary {
  position: relative;
  display: inline-block;
  color: #0b5cab;
  font-weight: 600;
  text-decoration: none !important;
}
.gg-link-more::after, .gg-btn-tertiary::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: #0b5cab;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.gg-link-more:hover::after, .gg-btn-tertiary:hover::after { transform: scaleX(1); }

/* Soft inset divider (the neumorphic note) instead of hard borders */
.gg-divider {
  border: 0; height: 2px; margin: 36px auto; max-width: 1180px;
  background: linear-gradient(90deg, transparent, rgba(16,38,74,.10), transparent);
}

/* --- THE logo tile: one spec for every brand surface ------------------ */
.gg-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  padding: 12px 16px;
  height: 76px;
  box-shadow: var(--gg-elev-1);
  transition: box-shadow .18s cubic-bezier(.2,.7,.3,1), border-color .18s cubic-bezier(.2,.7,.3,1);
}
.gg-logo-tile img {
  max-width: 82%;
  max-height: 48px;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
a.gg-logo-tile:hover { box-shadow: var(--gg-elev-2); border-color: #0b5cab; }
.gg-logo-tile--sm { height: 56px; padding: 8px 12px; border-radius: 8px; }
.gg-logo-tile--sm img { max-height: 34px; }

/* Catalog rebuild logo box parity. */
.logo-box{width:84px;height:46px;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;filter:none;opacity:1}
.logo-box--chip{background:#fff;border:1px solid #edf1f6;padding:6px;box-shadow:0 1px 2px rgba(16,38,74,.06)}
.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:84px;height:46px}

/* Apply the same containment to every existing brand-logo surface */
.gg-brand-jump-card img, .gg-vendor-card img, .gg-brand-card img,
.gg-department-brand-card img, .gg-brand-product-heading img,
.gg-brand-masthead-logo img {
  max-height: 48px !important;
  max-width: 82% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 auto;
}
.gg-brand-masthead-logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e3eaf3; border-radius: 12px;
  padding: 16px 20px; min-width: 180px; min-height: 88px;
  box-shadow: var(--gg-elev-1);
}
.gg-brand-masthead-logo img { max-height: 56px !important; }
.gg-brand-product-heading img {
  background: #fff; border: 1px solid #e3eaf3; border-radius: 8px; padding: 8px 12px;
}

/* Type polish: bigger, calmer section titles */
.gg-section-title { font-size: 24px; letter-spacing: -.01em; }
.gg-section-sub { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .gg-link-more::after, .gg-btn-tertiary::after { transition: none; }
}

/* Mega menu brand chips: tiny curated logo beside each top-brand link */
.gg-mega-brand-link { display: flex !important; align-items: center; gap: 8px; }
.gg-mega-brand-logo {
  flex: 0 0 30px; width: 30px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e7edf5; border-radius: 4px; overflow: hidden;
}
.gg-mega-brand-logo img { max-width: 26px; max-height: 18px; object-fit: contain; }

/* ===== Footer (GG 2026 P5): navy 4-column, self-contained styling ===== */
.gg-footer {
  background: linear-gradient(160deg, #0c1f3e 0%, #10264a 60%, #14305c 100%);
  color: #c3d0e2;
  margin-top: 56px;
  padding: 56px 0 28px;
  font-size: 14px;
  border-top: 0;
}
.gg-footer .container { background: transparent; }
.gg-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.gg-footer-name { display: block; color: #fff; font-family: var(--gg-font-display, 'Figtree', Arial, sans-serif); font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.gg-footer-tagline { color: #8fb0da; font-size: 13px; letter-spacing: .04em; margin: 0 0 16px; }
.gg-footer-address { font-style: normal; line-height: 1.6; margin: 0 0 10px; color: #c3d0e2; }
.gg-footer-contact { margin: 0 0 14px; line-height: 1.7; }
.gg-footer-contact a { color: #fff; font-weight: 600; text-decoration: none; }
.gg-footer-contact a:hover { text-decoration: underline; color: #fff; }
.gg-footer-longevity {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #cfe0f5; font-size: 12px; font-weight: 600;
}
.gg-footer-heading {
  display: block; color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px;
}
.gg-footer-list { list-style: none; margin: 0; padding: 0; }
/* One colour for all three footer columns. The Services column is plain <li> while Shop
   and Support are <a>, and they used to carry different values (#aebdd2 vs #c3d0e2), so
   the middle column read as a different shade than the two beside it. Both now resolve to
   the same token, which makes the columns identical by construction rather than by two
   rules happening to be close. */
.gg-footer .gg-footer-list li,
.gg-footer .gg-footer-list a { color: #c3d0e2; line-height: 1.5; }
.gg-footer-list li { margin: 0 0 9px; }
.gg-footer-list a { text-decoration: none; transition: color .15s ease; }
.gg-footer-list a:hover { color: #fff; text-decoration: none; }
.gg-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.gg-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #dbe7f6; transition: background .18s ease, transform .18s ease;
}
.gg-footer-social a:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); color: #fff; }
.gg-footer-social svg { width: 17px; height: 17px; }
.gg-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #8497b1; font-size: 12.5px;
}
.gg-footer-bottom p { margin: 0; color: #8497b1; }
.gg-footer-bottom img { opacity: .85; }
@media (max-width: 991px) { .gg-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) {
  .gg-footer-grid { grid-template-columns: 1fr; }
  .gg-footer { padding: 40px 0 22px; }
  .gg-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* CTA banner keeps its navy treatment (excluded from white card group) */
.gg-cta-card {
  background: linear-gradient(135deg, #10264a 0%, #1B3A6B 100%);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
}
.gg-cta-card h3 { color: #fff; }
.gg-cta-card p { color: rgba(255,255,255,.85); }
.gg-footer-social { flex-direction: row !important; }

/* Carousel alignment (P5): arrows float over the track edges so the first
   card aligns flush with the section heading; the track owns the full row. */
.gg-workflow-carousel { display: block; position: relative; }
.gg-workflow-carousel .gg-car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.gg-workflow-carousel .gg-car-prev { left: -18px; }
.gg-workflow-carousel .gg-car-next { right: -18px; }
.gg-workflow-carousel .gg-car-btn:hover { transform: translateY(-50%) scale(1.06); }
.gg-workflow-carousel .gg-car-btn:active { transform: translateY(-50%) scale(.98); }
.gg-workflow-track { padding: 6px 0 16px; }
.gg-section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.gg-section-heading-row .gg-section-title { text-align: left; padding: 6px 0 2px; }
.gg-workflow .gg-section-kicker { display: block; text-align: left; }
@media (max-width: 640px) {
  .gg-workflow-carousel .gg-car-btn { display: none; }
}

/* ===== PDP mode (GG 2026 P5): B&H-style two-column product detail ====== */
body.gg-pdp h1.pagetitle { text-align: left; max-width: 1180px; margin: 18px auto 6px; padding: 10px 16px 0; border-bottom: 0; font-size: 30px; }
body.gg-pdp h1.pagetitle::after { margin: 12px 0 0; }
body.gg-pdp .gg-catalog-card.gg-pdp-hero {
  display: grid !important;
  grid-template-columns: minmax(300px, 460px) 1fr;
  grid-template-areas: "media body" "media action";
  gap: 8px 36px;
  align-items: start;
  max-width: 1180px;
  margin: 10px auto 26px;
  padding: 28px;
  background: #fff;
  border: 1px solid #e3eaf3;
  border-radius: 14px;
  box-shadow: var(--gg-elev-1, 0 1px 2px rgba(16,38,74,.05));
}
body.gg-pdp .gg-pdp-hero .gg-catalog-card-media {
  grid-area: media;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #eef2f8;
  border-radius: 12px;
  padding: 22px;
  min-height: 340px;
}
body.gg-pdp .gg-pdp-hero .gg-catalog-card-media img {
  max-width: 100%; max-height: 380px;
  width: auto; height: auto; object-fit: contain;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
body.gg-pdp .gg-pdp-hero .gg-catalog-card-media:hover img { transform: scale(1.04); }
body.gg-pdp .gg-pdp-hero .gg-catalog-card-body { grid-area: body; }
body.gg-pdp .gg-pdp-hero .gg-catalog-card-body h3, body.gg-pdp .gg-pdp-hero .gg-catalog-card-body h2 { font-size: 22px; }
body.gg-pdp .gg-pdp-hero .gg-catalog-card-action {
  grid-area: action;
  margin-top: 6px;
  padding: 18px 20px;
  background: #f7fafd;
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  max-width: 420px;
}
body.gg-pdp .gg-pdp-hero .gg-catalog-card-action .text-center { text-align: left !important; }
body.gg-pdp .gg-pdp-hero .gg-catalog-card-action h2 { margin: 0 0 10px; font-size: 26px; color: #10264a; }
body.gg-pdp .gg-pdp-trust {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e3eaf3;
  color: #5a6878;
  font-size: 13px;
  line-height: 1.5;
}
body.gg-pdp .gg-pdp-trust a { color: #0b5cab; font-weight: 600; text-decoration: none; }
@media (max-width: 860px) {
  body.gg-pdp .gg-catalog-card.gg-pdp-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body" "action";
    padding: 18px;
  }
  body.gg-pdp .gg-pdp-hero .gg-catalog-card-media { min-height: 0; }
  body.gg-pdp .gg-pdp-hero .gg-catalog-card-action { max-width: none; }
}

/* PDP: the card list grid collapses to one full-width column */
body.gg-pdp .gg-catalog-card-list { display: block !important; max-width: 1180px; margin: 0 auto; }
body.gg-pdp .gg-catalog-card-list > .gg-catalog-card { margin-bottom: 18px; }

/* Auto-hero: collapse the logo column when no curated logo exists */
.gg-auto-brand-logo[hidden] { display: none !important; }
.gg-auto-brand-hero { display: flex; align-items: center; gap: 28px; }
.gg-auto-brand-hero .gg-auto-brand-copy { flex: 1 1 auto; min-width: 0; }
.gg-auto-brand-hero h1 { white-space: normal; }

/* Legacy 400px center-block must never exceed the viewport */
.center-block, .center-block-500 { max-width: 100%; }

/* Photo-tile sizing variants (P6): quick-link cat cards + logo tiles */
.gg-cat-card .gg-card-photo { height: 92px; margin-bottom: 10px; }
.gg-cat-card .gg-card-photo img { max-height: 74px; }
.gg-card-photo--logo img { max-height: 44px !important; max-width: 70%; }
a:hover .gg-card-photo--logo img { transform: none; }
/* Navy homepage workflow cards: tile reads as an inset product window */
.gg-workflow .gg-workflow-card .gg-card-photo { background: #fff; border-color: rgba(255,255,255,.25); }

/* Part-7: home hero + section titles share the site display face */
.gg-hero-title { font-family: var(--gg-font-display); letter-spacing: -.02em; }
.gg-section-title { font-family: var(--gg-font-display); }
/* === end Part-7 home additions === */

/* =====================================================================
   Phase 3 home + gear finder production slice.
   Visual changes only for home.php and gearfinder.php.
   ===================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.gg-hero-product-anchor {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: center;
}
.gg-product-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #edf3fb 100%);
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
}
.gg-product-stage img {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gg-signal-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.gg-signal-mini span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #dbe8f7;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.gg-home-decision-band {
  padding: 44px 0 18px;
  background: var(--gg-canvas, #f4f7fb);
}
.gg-home-decision-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: stretch;
}
.gg-home-finder-card,
.gg-featured-catalog-item {
  min-width: 0;
  border: 1px solid #e3eaf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--gg-elev-1);
}
.gg-home-finder-card {
  padding: 24px;
}
.gg-home-finder-card h2,
.gg-featured-catalog-item h2 {
  margin: 6px 0 10px;
  color: #10264a;
  font-family: var(--gg-font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.06;
}
.gg-home-finder-card p,
.gg-featured-catalog-item p {
  color: #5b6677;
  line-height: 1.55;
}
.gg-home-finder-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.gg-home-finder-roles span {
  padding: 6px 10px;
  border: 1px solid #d7e4f3;
  border-radius: 999px;
  background: #f5f8fc;
  color: #1B3A6B;
  font-size: 12px;
  font-weight: 800;
}
.gg-featured-catalog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .58fr);
  overflow: hidden;
}
.gg-featured-copy {
  min-width: 0;
  padding: 24px;
}
.gg-featured-copy h2 a {
  color: inherit;
  text-decoration: none;
}
.gg-featured-copy h2 a:hover { color: #0b5cab; }
.gg-featured-copy small {
  display: block;
  margin: 0 0 16px;
  color: #5b6677;
  line-height: 1.45;
}
.gg-home-promo-cart {
  margin-top: 12px;
  min-width: 210px;
}
.gg-featured-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 22px;
  background: linear-gradient(180deg, #fff 0%, #edf3fb 100%);
  border-left: 1px solid #e3eaf3;
}
.gg-featured-media img {
  max-width: 100%;
  max-height: 138px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gg-home-more-row { margin-top: 16px; padding-bottom: 10px; }
.gg-home-more-row--wide { margin-top: 24px; padding-bottom: 8px; }
.gg-gear-shell {
  padding-bottom: 44px;
}
.gg-gear-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .34fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
  padding: clamp(24px, 4vw, 42px);
  background: linear-gradient(135deg, #10264a 0%, #1B3A6B 70%, #0b5cab 100%);
  color: #fff;
}
.gg-gear-hero h1 {
  margin: 4px 0 10px;
  color: #fff;
  font-family: var(--gg-font-display);
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.02;
}
.gg-gear-hero p {
  max-width: 760px;
  color: #dbe8f7;
  font-size: 16px;
  line-height: 1.6;
}
.gg-gear-map {
  margin: 0;
  padding: 16px;
  list-style: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.gg-gear-map li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin: 8px 0;
}
.gg-gear-map b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #10264a;
}
.gg-advisor-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  grid-template-areas: "quiz kit" "tiers kit" "acc kit";
  gap: 20px;
  align-items: start;
}
/* quiz + results share the left column; the running kit stays in its own sticky
   right column so results fill the space beside/below the steps (not far below). */
.gg-advisor-page > .gg-quiz-panel { grid-area: quiz; }
.gg-advisor-page > .gg-kit-panel  { grid-area: kit; }
.gg-advisor-page > .gg-tiers-wrap { grid-area: tiers; }
.gg-advisor-page > .gg-acc-wrap   { grid-area: acc; }
.gg-quiz-panel,
.gg-results-panel {
  min-width: 0;
  border: 1px solid #e3eaf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--gg-elev-1);
  padding: 22px;
}
.gg-quiz-panel h2,
.gg-results-panel h2,
.gg-results-panel h3 {
  margin: 0 0 12px;
  color: #10264a;
  font-family: var(--gg-font-display);
}
.gg-question {
  margin: 0 0 14px;
  color: #5b6677;
  font-weight: 700;
}
/* The quiz options are a FACEPLATE, not a card grid. They used to be rounded cards
   floating on the rounded panel; on a rack panel a control sits below the faceplate,
   never on it. One recessed well, divided by hairlines, and the chosen row latches
   forward. The 1px gap IS the hairline - the grid's own background shows through, so
   rules never double up at the seams the way per-card borders do. */
.gg-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #d7e2f0;
  border: 1px solid #d7e2f0;
  border-radius: 4px;
  overflow: hidden;
}
/* An odd option count left the unfilled half-cell showing the well's hairline colour
   as a raw block - visible the moment the finder went from 4 projects to 9. The last
   row spans instead, which reads deliberate and needs no filler element. */
.gg-option-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.gg-option-card {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 14px 16px 14px 40px;
  border: 0;
  background: #fbfcfe;
  color: #10264a;
  text-align: left;
  /* Flex-column, not the default: a <button> centres its content vertically, and
     grid stretches both cells of a row to the taller one. So in any row where one
     option's sub-copy wrapped to two lines, its partner's label sank ~10px out of
     alignment with the indicator beside it - visible the moment nine projects with
     uneven copy lengths went in. Content is pinned to the top instead. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: background 140ms linear, box-shadow 140ms linear;
}
.gg-option-card:hover {
  background: #fff;
}
.gg-option-card strong,
.gg-option-card small {
  display: block;
}
.gg-option-card strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.gg-option-card small {
  margin-top: 4px;
  color: #5b6677;
  line-height: 1.45;
}
/* Round for pick-one, square for pick-many. The panel drew the same square checkbox
   for kind 'single' and kind 'multi', so "Project type" - which takes exactly one
   answer - read as a pick-many list. .is-multi is set by the caller in gearfinder.php. */
.gg-option-check {
  position: absolute;
  left: 15px;
  /* padding 14 + (label line-box 18.75 - 13) / 2, so the indicator centres on the
     label's first line rather than floating above it. */
  top: 17px;
  width: 13px;
  height: 13px;
  border: 1px solid #b9cbe2;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  transition: background 140ms linear, border-color 140ms linear, box-shadow 140ms linear;
}
.gg-option-grid.is-multi .gg-option-check {
  border-radius: 0;
}
.gg-option-card.is-selected {
  background: #fff;
  box-shadow: inset 3px 0 0 0 #10264a;
}
.gg-option-card.is-selected .gg-option-check {
  background: #10264a;
  border-color: #10264a;
  /* The inner white ring is what makes a filled circle read as a radio. A square
     multi-select wants none of it, so it is cleared below. */
  box-shadow: inset 0 0 0 2.5px #fff;
}
.gg-option-grid.is-multi .gg-option-card.is-selected .gg-option-check {
  box-shadow: none;
}
.gg-quiz-panel.has-error .gg-option-grid {
  box-shadow: 0 0 0 2px rgba(11,92,171,.2);
}
.gg-quiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.gg-quiz-foot button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  background: #fff;
  color: #10264a;
  font-weight: 800;
}
.gg-quiz-foot button[data-next] {
  background: #0b5cab;
  border-color: #0b5cab;
  color: #fff;
}
.gg-quiz-foot button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.gg-selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 20px;
}
.gg-selection-chips span {
  padding: 5px 9px;
  border: 1px solid #d7e4f3;
  border-radius: 999px;
  background: #f5f8fc;
  color: #1B3A6B;
  font-size: 12px;
  font-weight: 800;
}
.gg-recommendation-list {
  display: grid;
  gap: 10px;
}
.gg-recommendation-card {
  display: block;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  background: #fff;
  color: #10264a;
  text-decoration: none;
}
.gg-recommendation-card > span {
  color: #0b5cab;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gg-recommendation-card strong {
  display: block;
  margin-top: 4px;
  font-family: var(--gg-font-display);
  font-size: 17px;
  line-height: 1.2;
}
.gg-recommendation-card p {
  margin: 7px 0;
  color: #5b6677;
  line-height: 1.45;
}
.gg-recommendation-card small {
  color: #5b6677;
  line-height: 1.35;
}

/* ============================================================
   Gear Finder - result column (kit sheet + good/better/best
   tiers + accessories). Ports _mockups/gearfinder_redesign.html
   onto the live gg- class structure emitted by gearfinder.php.
   ============================================================ */
/* --gf-mono was a real monospace (JetBrains Mono). On labels it reads as a code
   editor, and it was also landing on product names, prices and the build-name
   input - a developer-tool look on a retail surface, and the one place on the site
   that ignored the type tokens. It now resolves to the design system's label face.
   The uppercase + letter-spacing treatment on these elements is what carries the
   technical, authoritative tone; the code font was never doing that work. */
.gg-gear-shell { --gf-mono: var(--gg-font-nav, 'Inter', 'Figtree', 'Segoe UI', Arial, sans-serif); }

/* --- Kit sheet (navy, sticky right rail) --- */
.gg-kit-panel {
  position: sticky;
  /* Clear the pinned site header, or the kit sheet slides under it.
     Fallback covers pages that load gg_premium.css without the token. */
  top: calc(var(--gg-header-h, 101px) + 16px);
  min-width: 0;
  padding: 20px;
  border-radius: 14px;
  background: #10264a;
  color: #fff;
  overflow: hidden;
}
.gg-kit-kicker {
  font-family: var(--gf-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb6e6;
}
.gg-kit-panel h3 {
  margin: 6px 0 2px;
  font-family: var(--gg-font-display);
  font-size: 19px;
  color: #fff;
}
.gg-kit-panel .sub {
  margin: 0 0 14px;
  font-family: var(--gf-mono);
  font-size: 11px;
  color: #9fb6d6;
}
.gg-kit-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
  padding: 10px;
  border: 1px solid rgba(143,182,230,.18);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
}
.gg-kit-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(143,182,230,.14);
  color: #8fb6e6;
}
.gg-kit-ic svg { width: 21px; height: 21px; }
.gg-kit-body { flex: 1; min-width: 0; }
.gg-kit-body .role {
  display: block;
  font-family: var(--gf-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9fb6d6;
}
.gg-kit-body .name {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-kit-body .name:hover { color: #cfe0f5; text-decoration: underline; }
.gg-kit-body .brand {
  display: block;
  font-family: var(--gf-mono);
  font-size: 10.5px;
  color: #9fb6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-kit-r {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.gg-kit-r .price {
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.gg-kit-r .swap {
  padding: 0;
  border: 0;
  background: none;
  color: #8fb6e6;
  font-family: var(--gf-mono);
  font-size: 10px;
  cursor: pointer;
}
.gg-kit-r .swap:hover { text-decoration: underline; }
.gg-kit-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 14px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(143,182,230,.22);
}
.gg-kit-total .lbl {
  font-family: var(--gf-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9fb6d6;
}
.gg-kit-total .amt {
  font-family: var(--gg-font-display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
}
.gg-kit-note {
  margin: 0 0 14px;
  font-family: var(--gf-mono);
  font-size: 10px;
  color: #8aa3c4;
}
.gg-kit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gg-kit-actions a {
  display: block;
  padding: 11px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.gg-kit-actions .primary { background: #0b5cab; color: #fff; }
.gg-kit-actions .primary:hover { background: #094a8c; }
.gg-kit-actions .ghost {
  border: 1px solid rgba(143,182,230,.34);
  background: transparent;
  color: #cfe0f5;
  font-family: var(--gf-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
.gg-kit-actions .ghost:hover { background: rgba(143,182,230,.1); }

/* --- Section heads for the full-width tier / accessory bands --- */
.gg-tiers-wrap,
.gg-acc-wrap { margin-top: 6px; }

/* Results signpost: a clear divider that ties the finished quiz to the
   Good/Better/Best build below, so the results read as one continuous flow
   rather than a detached block. Only rendered once real results exist. */
.gg-results-divider { margin: 18px 0 6px; padding-top: 18px; border-top: 2px solid #e3eaf3; }
.gg-results-eyebrow { display: inline-block; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #0b5cab; }
.gg-results-sub { margin: 5px 0 0; color: #51607a; font-size: 14px; line-height: 1.5; }
@media (max-width: 520px) { .gg-results-divider { margin-top: 14px; padding-top: 14px; } }
.gg-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 38px 0 14px;
}
.gg-sec-head h2 {
  margin: 0;
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  color: #10264a;
}
.gg-sec-head .meta {
  font-family: var(--gf-mono);
  font-size: 11px;
  color: #5b6b80;
}

/* --- Good / Better / Best tier cards --- */
.gg-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gg-tier {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce3ec;
  border-radius: 13px;
  background: #fff;
}
.gg-tier.is-picked {
  border-color: #0b5cab;
  box-shadow: 0 0 0 1px #0b5cab;
}
.gg-tier .badge {
  align-self: flex-start;
  margin-bottom: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--gf-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gg-tier.good .badge { color: #5b6b80; background: #eef2f8; border: 1px solid #dce3ec; }
.gg-tier.better .badge { color: #0b5cab; background: #eaf2fb; border: 1px solid #c7d8ec; }
.gg-tier.best .badge { color: #7a4a00; background: #fbf2e2; border: 1px solid #ecdcb8; }
.gg-tier .pname {
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  color: #10264a;
  text-decoration: none;
}
.gg-tier .pname:hover { color: #0b5cab; }
.gg-tier .pbrand {
  margin-top: 3px;
  font-family: var(--gf-mono);
  font-size: 11px;
  color: #5b6b80;
}
.gg-tier .tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #dce3ec;
}
.gg-tier .tprice {
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 17px;
  color: #0b5cab;
}
.gg-tier .pick {
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: #10264a;
  color: #fff;
  font-family: var(--gf-mono);
  font-size: 11px;
  cursor: pointer;
}
.gg-tier.is-picked .pick { background: #0b5cab; }
.gg-tier .pick:disabled { cursor: default; }

/* --- "You'll also need" accessory cards --- */
.gg-acc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gg-acc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px;
  border: 1px solid #dce3ec;
  border-radius: 11px;
  background: #fff;
  text-decoration: none;
}
.gg-acc .atype {
  font-family: var(--gf-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0b5cab;
}
.gg-acc .aname {
  margin: 5px 0 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #10264a;
}
.gg-acc .abrand {
  font-family: var(--gf-mono);
  font-size: 10.5px;
  color: #5b6b80;
}
.gg-acc .afoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}
.gg-acc .aprice {
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 14px;
  color: #0b5cab;
}
.gg-acc .add {
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: #0b5cab;
  color: #fff;
  font-family: var(--gf-mono);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.gg-acc .add:hover { background: #094a8c; }

/* --- Quiz: help line, quantity step, empty notice --- */
.gg-q-help {
  margin: -6px 0 16px;
  color: #5b6677;
  font-size: 13px;
  line-height: 1.4;
}
.gg-step-empty {
  margin: 6px 0 0;
  color: #5b6677;
  font-style: italic;
}
.gg-qty-list {
  display: grid;
  gap: 10px;
}
.gg-qty-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: #fff;
}
.gg-qty-lbl {
  font-weight: 700;
  color: #10264a;
}
.gg-qty-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gg-qty-ctl b {
  min-width: 26px;
  text-align: center;
  font-family: var(--gg-font-display);
  font-weight: 700;
  font-size: 15px;
  color: #10264a;
}
.gg-qstep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cfe0f3;
  border-radius: 8px;
  background: #fff;
  color: #0b5cab;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.gg-qstep:hover { border-color: #0b5cab; background: #f3f8fd; }

/* --- Kit line: mini qty stepper + remove --- */
.gg-kit-body .gg-qty-ctl.mini {
  margin-top: 7px;
  gap: 3px;
}
.gg-kit-body .gg-qty-ctl.mini .gg-qstep {
  width: 22px;
  height: 22px;
  border-color: rgba(143,182,230,.4);
  background: rgba(255,255,255,.06);
  color: #cfe0f5;
  font-size: 14px;
}
.gg-kit-body .gg-qty-ctl.mini .gg-qstep:hover { background: rgba(143,182,230,.18); border-color: #8fb6e6; }
.gg-kit-body .gg-qty-ctl.mini b {
  min-width: 20px;
  font-size: 12px;
  color: #fff;
}
.gg-kit-r .rm {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: #7e93b3;
  font-family: var(--gf-mono);
  font-size: 9.5px;
  letter-spacing: .03em;
  cursor: pointer;
}
.gg-kit-r .rm:hover { color: #e88; text-decoration: underline; }

/* --- Bundle name input --- */
.gg-kit-name {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 11px;
  border: 1px solid rgba(143,182,230,.28);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-family: var(--gf-mono);
  font-size: 12px;
}
.gg-kit-name::placeholder { color: #8aa3c4; }
.gg-kit-name:focus {
  outline: none;
  border-color: #8fb6e6;
  background: rgba(255,255,255,.1);
}

@media (prefers-reduced-motion: no-preference) {
  .gg-tier,
  .gg-acc {
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1), border-color .18s cubic-bezier(.2,.7,.3,1);
  }
  .gg-tier:hover,
  .gg-acc:hover {
    transform: translateY(-3px);
    border-color: #bcd0ea;
    box-shadow: var(--gg-elev-2);
  }
}
@media (max-width: 991px) {
  .gg-kit-panel { position: static; }
  .gg-tier-grid { grid-template-columns: 1fr; }
  .gg-acc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .gg-acc-grid { grid-template-columns: 1fr; }
}

/* .gg-option-card is deliberately NOT in these two rules any more. It was inheriting
   the card treatment - lift 2px, take a blue border, gain a drop shadow - which is
   the floating-card metaphor the faceplate above replaces. A control seated in a well
   does not rise off it on hover; it lights up in place, which .gg-option-card:hover
   does with a background change alone. */
@media (prefers-reduced-motion: no-preference) {
  .gg-featured-catalog-item,
  .gg-home-finder-card,
  .gg-recommendation-card {
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1), border-color .18s cubic-bezier(.2,.7,.3,1);
  }
  .gg-featured-catalog-item:hover,
  .gg-home-finder-card:hover,
  .gg-recommendation-card:hover {
    transform: translateY(-2px);
    border-color: #0b5cab;
    box-shadow: var(--gg-elev-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gg-featured-catalog-item,
  .gg-home-finder-card,
  .gg-option-card,
  .gg-recommendation-card,
  .gg-hero-chip--a,
  .gg-hero-chip--d {
    animation: none !important;
    transition: none !important;
  }
  .gg-featured-catalog-item:hover,
  .gg-home-finder-card:hover,
  .gg-option-card:hover,
  .gg-recommendation-card:hover {
    transform: none !important;
  }
}
@media (max-width: 991px) {
  .gg-home-decision-grid,
  .gg-featured-catalog-item,
  .gg-gear-hero,
  .gg-advisor-page {
    grid-template-columns: 1fr;
  }
  /* single column stack on mobile: steps, running kit, then results */
  .gg-advisor-page { grid-template-areas: "quiz" "kit" "tiers" "acc"; }
  .gg-featured-media {
    border-left: 0;
    border-top: 1px solid #e3eaf3;
  }
}
@media (max-width: 640px) {
  .gg-home-decision-band { padding: 28px 0 10px; }
  .gg-home-finder-card,
  .gg-featured-copy,
  .gg-quiz-panel,
  .gg-results-panel {
    padding: 18px;
  }
  .gg-signal-mini,
  .gg-option-grid {
    grid-template-columns: 1fr;
  }
  .gg-product-stage {
    min-height: 172px;
    padding: 18px;
  }
  .gg-product-stage img,
  .gg-featured-media img {
    max-height: 108px;
  }
  .gg-home-promo-cart {
    width: 100%;
    min-width: 0;
  }
  .gg-gear-hero {
    padding: 22px 18px;
  }
  .gg-quiz-foot {
    flex-wrap: wrap;
  }
  .gg-quiz-foot span {
    order: -1;
    flex: 0 0 100%;
  }
}

/* ============================================================
   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;
  }
}

/* ============================================================
   Typography pass (2026-07-11): kill the "AI" eyebrow kickers,
   enlarge display/section headlines. Look-only; reversible by
   deleting this block. Spec: docs/superpowers/specs/2026-07-11-*.
   ============================================================ */
/* Functional kickers -> plain sentence-case dark-grey label (no
   uppercase, no retail-blue, no wide tracking). Text is already
   sentence-case in the markup, so this alone de-"AI"s them. */
.gg-section-kicker,
.gg-kit-kicker,
.gg-results-eyebrow {
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: #51607a !important;      /* muted slate, not #0b5cab */
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* Enlarge section headlines to the approved "B" scale. */
.gg-sec-head h2 { font-size: 28px !important; }

/* Typography pass - small body/label text that reads too small. Starting with
   the "Beyond the box" solution cards (the flagged example); same approach can
   extend to the site's other sub-14px body/label text. */
.gg-section-sub { font-size: 1rem !important; }
.gg-service-card span { font-size: .95rem !important; line-height: 1.55 !important; }
.gg-service-card strong { font-size: 1.05rem !important; }
.gg-services--navy .gg-service-card strong { font-size: 1.15rem !important; }

/* Small-text floor pass (2026-07-11, continued): raise genuinely-undersized
   BODY/CONTENT text to a readable floor. Micro-labels (uppercase kickers,
   badges/chips, footer legal, mono technical labels, form hints, spec-cell
   field labels) are intentionally left alone. */
/* Gear-finder results: the descriptive sentence under the results heading. */
.gg-results-sub { font-size: 15px; }

/* ==== 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;
}

/* ============================================================
   Task 3 (2026-07-11, continued): make the "Tailored Solutions"
   service cards BELONG. They used to be dark navy cards on a light
   page - a different visual language from the site's light category
   cards (.gg-wf-card.gg-wf-light). Re-skin them to that same light
   card language: white surface, 1px cool-grey border, 16px radius,
   soft lift shadow, translateY(-6px) hover, navy title, slate body,
   retail-blue "Explore ... ->" CTA (which inherits the shared arrow
   slide from gg_components.css). Reversible: delete this block to
   restore the navy cards defined earlier in this file. */
.gg-services--navy .gg-service-card {
  background: #fff !important;
  border: 1px solid #dce3ec !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 10px 24px rgba(12, 35, 64, .10) !important;
  transition: transform .5s cubic-bezier(.2,.6,.2,1),
              box-shadow .5s cubic-bezier(.2,.6,.2,1) !important;
}
.gg-services--navy .gg-service-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 34px -12px rgba(16, 38, 74, .28) !important;
}
.gg-services--navy .gg-service-card strong { color: #10264a !important; }
.gg-services--navy .gg-service-card span   { color: #506176 !important; }
/* CTA -> gold-standard retail-blue "Shop X ->" foot (no underline;
   motion comes from the shared .arr slide in gg_components.css). */
.gg-services--navy .gg-service-card .gg-service-more {
  color: #0b5cab !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.gg-services--navy .gg-service-card:hover .gg-service-more {
  text-decoration: none !important;
}

/* Tailored Solutions card text - size C (user pick): larger, open. */
.gg-services--navy .gg-service-card strong { font-size: 24px !important; }
.gg-services--navy .gg-service-card span { font-size: 19px !important; line-height: 1.5 !important; }
.gg-services--navy .gg-service-card .gg-service-more { font-size: 17px !important; }

/* Tailored Solutions cards: level the CTAs across the row regardless of body
   length (flex column + push the CTA to the bottom). Grid already equal-heights
   the cards, so margin-top:auto lands every "Explore ... ->" on the same line. */
.gg-services--navy .gg-service-card { display: flex !important; flex-direction: column; }
.gg-services--navy .gg-service-card .gg-service-more { margin-top: auto; }

/* ============================================================
   Footer brand block (2026-07-12).
   - The name rendered near-black on navy: .gg-footer-brand strong (class+type) outranks
     .gg-footer-name (class), so it won and applied the dark --gg-text. Scoped the name
     under .gg-footer so it wins on specificity instead of resorting to !important.
   - Logo mark added above the name, matching the header's.
   ============================================================ */
.gg-footer .gg-footer-name { color: #fff; }

.gg-footer .gg-footer-logo {
  display: inline-block;
  margin: 0 0 12px;
  line-height: 0;
}
.gg-footer .gg-footer-logo img {
  width: 60px;
  height: 60px;
  display: block;
}

/* The shared footer must not be repainted by page-level link rules. newCart.css sets
   `.gg-cart-page a { color: var(--gg-primary-2) }` (#2C5282) on the BODY of cart and
   checkout, which ties on specificity and loads last -- so footer links rendered dark navy
   on a navy footer, effectively invisible. These selectors are scoped under .gg-footer so
   they outrank any page-level `a` rule wherever the footer is included. */
.gg-footer .gg-footer-list a:hover { color: #fff; text-decoration: none; }
.gg-footer .gg-footer-contact a { color: #fff; font-weight: 600; text-decoration: none; }
.gg-footer .gg-footer-contact a:hover { color: #fff; text-decoration: underline; }
.gg-footer .gg-footer-bottom a { color: #8497b1; }

/* Base footer list colour, scoped under .gg-footer so it outranks page-level `a` rules
   (notably newCart.css's `.gg-cart-page a`, which painted footer links #2C5282 -- dark
   navy on a navy footer). All three columns resolve to one value, so SHOP / SERVICES /
   SUPPORT are identical by construction. */
.gg-footer .gg-footer-list li,
.gg-footer .gg-footer-list a { color: #c3d0e2; line-height: 1.5; }

/* Home featured-products carousel (gg_featured_carousel.js). Navy/blue only. */
.gg-featured{position:relative;display:flex;align-items:stretch;gap:8px}
.gg-featured-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.gg-featured-track::-webkit-scrollbar{height:6px}
.gg-featured-track::-webkit-scrollbar-thumb{background:#c3ccdb;border-radius:3px}
.gg-featured-card{flex:0 0 clamp(240px,38%,340px);scroll-snap-align:start}
.gg-featured-card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:#10264a;background:#fff;border:1px solid #d4dae5;border-radius:10px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
.gg-featured-card a:hover{box-shadow:0 8px 24px rgba(16,38,74,.12);transform:translateY(-2px)}
.gg-featured-thumb{display:block;aspect-ratio:3/2;background:#fff;overflow:hidden}
.gg-featured-thumb img{width:100%;height:100%;object-fit:contain;padding:12px}
.gg-featured-brand{padding:12px 14px 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#0b5cab;font-weight:600}
.gg-featured-name{padding:2px 14px 0;font-size:16px;font-weight:600;line-height:1.3}
/* Price sits directly under the name, the way the brand panel orders it. Tabular
   figures so the column of prices lines up as the carousel scrolls; a
   price-on-request card carries no figures and is set lighter and smaller so it
   reads as a different KIND of answer rather than as a cheaper one. */
.gg-featured-price{padding:5px 14px 0;font-size:16px;font-weight:800;color:#10264a;font-variant-numeric:tabular-nums}
.gg-featured-price:empty{display:none}
.gg-featured-price.is-ask{font-size:13.5px;font-weight:600;color:#4a566b}
.gg-featured-sum{padding:6px 14px 0;font-size:13px;color:#4a566b;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gg-featured-cta{margin-top:auto;padding:12px 14px 14px;font-size:13px;font-weight:600;color:#0b5cab;display:inline-flex;align-items:center;gap:6px}
.gg-featured-cta svg{width:16px;height:16px}
.gg-featured-nav{flex:0 0 auto;align-self:center;width:40px;height:40px;border-radius:50%;border:1px solid #d4dae5;background:#fff;color:#10264a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease}
.gg-featured-nav svg{width:20px;height:20px}
.gg-featured-nav:hover{background:#10264a;color:#fff}
.gg-featured-nav:disabled{opacity:.35;cursor:not-allowed;background:#fff;color:#10264a}
.gg-featured-nav:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
@media (max-width:768px){.gg-featured-nav{display:none}.gg-featured-card{flex-basis:78%}}
@media (prefers-reduced-motion:reduce){.gg-featured-card a{transition:none}}
/* Demo & B-stock row (home A2). Reuses .gg-featured wholesale; this is the entire
   delta. The card needs position:relative so the tag can sit in the thumb corner.
   Applied to every .gg-featured-card, not scoped with :has() - a card with no
   absolutely-positioned child renders identically either way, so the plain rule is
   the same result without depending on :has(). */
.gg-featured-card{position:relative}
.gg-deal-tag{position:absolute;top:14px;left:14px;z-index:2;background:#0b5cab;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;padding:6px 9px;border-radius:4px}
.gg-deal-tag.is-demo{background:#10264a}
.gg-deals-sub{margin:-6px 0 18px;color:#4a566b;font-size:15px;line-height:1.5}
.gg-deals-more{margin:18px 0 0}
.gg-deals-more a{color:#0b5cab;font-weight:600;text-decoration:none}
.gg-deals-more a:hover{text-decoration:underline}

/* PDP multi-image gallery (gg_product_page.php .product-media, >=2 images only -
   count($ggpImages) >= 2 gate in the renderer; scripts/test_pdp_gallery.js pins it).
   Fewer than 2 images renders the plain single <img> as before - no chrome added.
   Nike-style layout: vertical thumbnail rail + large main stage (prev/next arrows
   bottom-right) + a zoom lightbox opened from the main image. Flat white,
   navy/blue only, no gradients. */
.gg-pdp-image-gallery{display:flex;flex-direction:row;align-items:flex-start;gap:16px;position:relative}
.gg-pdp-gallery-rail{display:flex;flex-direction:column;gap:8px;flex:0 0 64px;max-height:420px;overflow-y:auto;overflow-x:hidden}
.gg-pdp-gallery-thumb{flex-shrink:0;width:64px;height:64px;padding:3px;border:1px solid var(--gg-border,#d4dae5);border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gg-pdp-gallery-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gg-pdp-gallery-thumb:hover{border-color:#0b5cab}
.gg-pdp-gallery-thumb:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
.gg-pdp-gallery-thumb.is-active{border-color:#1B3A6B;border-width:2px}
.gg-pdp-gallery-stage{position:relative;flex:1 1 auto;min-width:0;min-height:320px;display:flex}
.gg-pdp-gallery-main{position:relative;flex:1 1 auto;width:100%;min-height:320px;border:1px solid var(--gg-border,#d4dae5);border-radius:8px;background:#fff;padding:0;cursor:zoom-in;display:block}
.gg-pdp-gallery-main:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
.gg-pdp-gallery-main-img{position:absolute;inset:0;margin:auto;max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .2s ease}
.gg-pdp-gallery-main-img.is-active{opacity:1;visibility:visible}
.gg-pdp-gallery-nav{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:2}
.gg-pdp-gallery-arrow{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gg-border,#d4dae5);border-radius:50%;background:#fff;color:#10264a;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(16,38,74,.12)}
.gg-pdp-gallery-arrow:hover{background:#10264a;color:#fff;border-color:#10264a}
.gg-pdp-gallery-arrow:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
.gg-pdp-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px}
.gg-pdp-lightbox[hidden]{display:none}
.gg-pdp-lightbox-backdrop{position:absolute;inset:0;background:rgba(16,38,74,.92)}
.gg-pdp-lightbox-dialog{position:relative;z-index:1;width:100%;height:100%;max-width:min(88vw,1600px);max-height:92vh}
.gg-pdp-lightbox-stage{position:relative;width:min(88vw,1600px);height:82vh;max-width:100%;margin:0 auto}
/* height was a FORCED 88vh, so every image was scaled to 88% of viewport height
   whatever its real resolution. 63.9% of product images (10,228 of 16,001) were
   being enlarged past their own pixels - a 300x300 shot upscaled 3.2x reads as
   "zooms in far too much", while an already-large photo barely changed and read as
   "doesn't zoom at all". Both reported symptoms, one declaration.
   Now a MAXIMUM: the image renders at its natural size, centred, and only shrinks
   when it would overflow the viewport. Never upscaled, never bigger than the screen. */
.gg-pdp-lightbox-img{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .2s ease}
.gg-pdp-lightbox-img.is-active{opacity:1;visibility:visible}
.gg-pdp-lightbox-close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gg-border,#d4dae5);border-radius:50%;background:#fff;color:#10264a;font-size:24px;line-height:1;cursor:pointer}
.gg-pdp-lightbox-close:hover{background:#10264a;color:#fff;border-color:#10264a}
.gg-pdp-lightbox-close:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
.gg-pdp-lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gg-border,#d4dae5);border-radius:50%;background:#fff;color:#10264a;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(16,38,74,.12)}
.gg-pdp-lightbox-arrow--prev{left:16px}
.gg-pdp-lightbox-arrow--next{right:16px}
.gg-pdp-lightbox-arrow:hover{background:#10264a;color:#fff;border-color:#10264a}
.gg-pdp-lightbox-arrow:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
@media (max-width:768px){
.gg-pdp-image-gallery{flex-direction:column}
.gg-pdp-gallery-stage{order:1;width:100%;min-height:260px}
.gg-pdp-gallery-rail{order:2;flex-direction:row;flex:0 0 auto;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.gg-pdp-gallery-thumb{width:56px;height:56px}
.gg-pdp-gallery-main{min-height:260px}
}
@media (max-width:480px){.gg-pdp-gallery-main,.gg-pdp-gallery-stage{min-height:220px}}
@media (prefers-reduced-motion:reduce){.gg-pdp-gallery-main-img,.gg-pdp-lightbox-img{transition:none}}

/* Clean & flat: single product image is always click-to-enlarge. A magnifier
   badge signals the zoom; with no thumbnail rail the stage fills the column. */
.gg-pdp-image-gallery:not(.gg-pdp-has-rail) .gg-pdp-gallery-stage{width:100%}
.gg-pdp-gallery-zoom-badge{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(16,38,74,.70);pointer-events:none;z-index:3;opacity:.9}
.gg-pdp-gallery-zoom-badge::before{content:"";position:absolute;top:9px;left:9px;width:11px;height:11px;border:2px solid #fff;border-radius:50%}
.gg-pdp-gallery-zoom-badge::after{content:"";position:absolute;top:20px;left:19px;width:9px;height:2px;background:#fff;border-radius:1px;transform:rotate(45deg);transform-origin:left center}
.gg-pdp-gallery-main:hover .gg-pdp-gallery-zoom-badge{opacity:1;background:rgba(11,92,171,.9)}
@media (prefers-reduced-motion: reduce){.gg-pdp-gallery-zoom-badge{transition:none}}

/* Escape the gg_components.css `.product-media img` 300x280 cap (specificity
   0,1,1) for the gallery stage + zoom lightbox, else the "enlarged" image stays
   tiny. These selectors are 0,2,0 so they win. */
.gg-pdp-image-gallery .gg-pdp-gallery-main-img{max-width:82%;max-height:82%;width:auto;height:auto}
.gg-pdp-image-gallery .gg-pdp-lightbox-img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}

/* Smooth pop-up for the enlarge lightbox: fade the overlay + fade/scale the
   dialog in. Driven by the .is-open class (added one frame after unhide by
   java1.js); instant under reduced-motion. */
.gg-pdp-lightbox{opacity:0;transition:opacity .22s ease}
.gg-pdp-lightbox.is-open{opacity:1}
.gg-pdp-lightbox .gg-pdp-lightbox-dialog{transform:scale(.94);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.gg-pdp-lightbox.is-open .gg-pdp-lightbox-dialog{transform:scale(1)}

/* PDP variant picker (gg_product_page.php $ggProduct['sku_variants'], >= 2 valid
   entries - count($ggpSkuVariants) >= 2 gate in the renderer;
   scripts/test_pdp_variants.js pins it). Fewer than 2 entries (or the key
   absent) renders the buy panel exactly as before - no picker markup at all.
   Buttons for <= 6 options; a labeled <select> beyond that
   (.gg-pdp-variant-select). Flat white, navy/blue only, no gradients. */
.gg-pdp-variant-picker{margin:14px 0;display:flex;flex-direction:column;gap:8px}
.gg-pdp-variant-picker-label{font-size:12.5px;font-weight:700;color:#10264a;text-transform:uppercase;letter-spacing:.04em}
.gg-pdp-variant-options{display:flex;flex-wrap:wrap;gap:8px}
.gg-pdp-variant-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid var(--gg-border,#d4dae5);border-radius:var(--gg-radius,8px);background:#fff;color:#10264a;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.gg-pdp-variant-btn:hover{border-color:#0b5cab;color:#0b5cab}
.gg-pdp-variant-btn:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
.gg-pdp-variant-btn.is-active{background:#10264a;border-color:#10264a;color:#fff}
.gg-pdp-variant-btn.is-active:hover{color:#fff;border-color:#10264a}
.gg-pdp-variant-select{display:block;width:100%;max-width:320px;min-height:44px;padding:8px 36px 8px 12px;border:1px solid var(--gg-border,#d4dae5);border-radius:var(--gg-radius,8px);background-color:#fff;color:#10264a;font-size:14px;font-weight:600;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2310264a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.gg-pdp-variant-select:hover{border-color:#0b5cab}
.gg-pdp-variant-select:focus-visible{outline:2px solid #0b5cab;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gg-pdp-variant-btn{transition:none}}
@media (prefers-reduced-motion:reduce){.gg-pdp-lightbox,.gg-pdp-lightbox .gg-pdp-lightbox-dialog{transition:none}}

/* ============================================================================
   GEAR FINDER - build panel as a QUOTE, not a config console
   ----------------------------------------------------------------------------
   The panel read as a separate technical widget: a dark navy slab floating in
   its own column with a light gutter beside the questions, uppercase
   letterspaced data labels, and generic glyph tiles where the product should be.
   This page's whole output is a QUOTE, so the panel should look like one.

   Two changes, both structural rather than decorative:
   1. One continuous surface. The column gap is closed and the facing corners
      and borders are removed, so the questions and the build read as two halves
      of a single card with a hairline between them - not two widgets.
   2. Paper, not console. Light surface, real product photography, sentence-case
      labels, and a ruled total the way an itemised quote is set.
   ============================================================================ */
.gg-advisor-page { column-gap: 0; }

/* Left column loses its right edge; the kit panel supplies the hairline. */
.gg-advisor-page > .gg-quiz-panel,
.gg-advisor-page > .gg-tiers-wrap > .gg-results-panel,
.gg-advisor-page > .gg-acc-wrap > .gg-results-panel {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.gg-kit-panel {
  background: #fbfcfe;
  color: var(--gg-text, #10264a);
  border: 1px solid #e3eaf3;
  border-left: 1px solid #e3eaf3;   /* the hairline between the halves */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: var(--gg-elev-1);
}

/* Sentence case throughout. An uppercase letterspaced micro-label is the single
   strongest "console" cue left once the monospace face is gone. */
.gg-kit-kicker {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: #5b7099;
}
.gg-kit-panel h3 { color: #10264a; }
.gg-kit-panel .sub { color: #5b7099; font-size: 12.5px; line-height: 1.5; }
.gg-kit-line .role {
  text-transform: none;
  letter-spacing: 0;
  color: #5b7099;
}
.gg-kit-line .name { color: #10264a; }
.gg-kit-line .brand { color: #5b7099; }
.gg-kit-line { border-color: #e8eef7; background: #fff; }

/* Real product photography, on white, the way the rest of the catalogue shows it. */
.gg-kit-ic {
  background: #fff;
  border: 1px solid #e8eef7;
  color: #5b7099;
}
.gg-kit-ic.has-photo { padding: 3px; }
.gg-kit-ic.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The total, set like the ruled total line of a quote. */
.gg-kit-total {
  border-top: 1px solid #dfe7f2;
  color: #10264a;
}
.gg-kit-total .lbl { text-transform: none; letter-spacing: 0; color: #5b7099; }
.gg-kit-total .amt { color: #10264a; }
.gg-kit-note { color: #5b7099; }

/* Word buttons, not symbols. */
.gg-kit-line .swap,
.gg-kit-line .rm {
  text-transform: none;
  letter-spacing: 0;
  color: #0b5cab;
}
.gg-kit-line .rm { color: #7a8aa3; }
.gg-kit-panel .gg-kit-name {
  background: #fff;
  border: 1px solid #dfe7f2;
  color: #10264a;
}
.gg-kit-panel .gg-kit-name::placeholder { color: #93a4bd; }

/* Stacked on small screens: the panel is a normal card again, so restore its
   corners and its left edge. */
@media (max-width: 900px) {
  .gg-advisor-page > .gg-quiz-panel,
  .gg-advisor-page > .gg-tiers-wrap > .gg-results-panel,
  .gg-advisor-page > .gg-acc-wrap > .gg-results-panel {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-right: 1px solid #e3eaf3;
  }
  .gg-kit-panel { border-radius: 14px; }
}