/* Metric-matched fallback for Oswald — kicks in during the brief window
   between first paint and the Google Fonts woff2 arriving. Uses local
   Arial with size-adjust + ascent/descent overrides so the line-box
   matches Oswald closely enough that the swap is visually a no-op.
   Tune size-adjust if hero h1 still nudges on swap. */
@font-face {
  font-family: 'Oswald Fallback';
  src: local('Arial');
  size-adjust: 88%;
  ascent-override: 105%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ===================================================================
   1. RESET + DESIGN TOKENS
   Scoped to .lg-homepage so they don't bleed into the existing
   sitewide header / footer chrome (Tahoma 14px, link colours, etc).
   =================================================================== */
.lg-homepage,
.lg-homepage *,
.lg-homepage *::before,
.lg-homepage *::after { box-sizing: border-box; }
.lg-homepage {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 16px;
}
.lg-homepage img { max-width: 100%; display: block; }
.lg-homepage a { color: inherit; text-decoration: none; }
.lg-homepage button { font: inherit; }

:root {
  /* Brand palette */
  --blue: #4183C5;
  --blue-light: #6FA9DD;
  --blue-deep: #28527B;
  --blue-darker: #1F405F;
  --cream: #FFE9B7;
  --cream-soft: #FFF5DA;

  /* Surfaces */
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --border: #E6DFD2;
  --border-strong: #D4CBB7;

  /* Text */
  --ink: #1A1F2A;
  --ink-soft: #3D4452;
  --muted: #7B7F88;

  /* Accents */
  --sale: #C8392B;
  --star: #E8A93C;

  /* Radius / shadow */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(40, 82, 123, 0.06);
  --shadow-md: 0 6px 20px rgba(40, 82, 123, 0.12);

  /* Container width — set per breakpoint below */
  --container: 100%;
  --gutter: 18px;
}

/* ===================================================================
   2. CONTAINER — breakpoint-driven content widths
   =================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mobile (default, ≤699px): full-bleed, 18px gutter */

/* Tablet: 700–1024px */
@media (min-width: 700px) {
  :root { --gutter: 28px; }
}

/* Small desktop: 1025–1199px → 980px container, content edges flush with site header */
@media (min-width: 1025px) {
  :root { --container: 980px; --gutter: 32px; }
  .lg-homepage .container { padding: 0; }
}

/* Medium desktop: 1200–1499px → 1180px container */
@media (min-width: 1200px) {
  :root { --container: 1180px; --gutter: 32px; }
}

/* Large desktop: 1500px+ → 1330px container */
@media (min-width: 1500px) {
  :root { --container: 1330px; --gutter: 32px; }
}

/* ===================================================================
   3. SECTIONS — vertical rhythm scales with breakpoint
   =================================================================== */
.section { padding: 48px 0; }

@media (min-width: 700px) {
  .section { padding: 64px 0; }
}
@media (min-width: 1025px) {
  .section { padding: 78px 0; }
}

.section-head { margin-bottom: 24px; }
.section-head .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 16px;
}
.section-head .left { flex: 1; min-width: 0; }
.section-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.section-head h2 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.section-head .link {
  font-size: 13px;
  color: var(--blue-deep);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.section-head .link svg { width: 14px; height: 14px; }

/* Base link style — applied to any .link element in the page */
a.link, .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--blue-deep);
  font-weight: 500;
  white-space: nowrap;
}
a.link svg, .link svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (min-width: 700px) {
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 32px; }
  .section-head .link, a.link, .link { font-size: 14px; }
  a.link svg, .link svg { width: 16px; height: 16px; }
}
@media (min-width: 1025px) {
  .section-head h2 { font-size: 38px; }
}

/* ===================================================================
   4. UTILITY: eyebrow / accent / cta / link
   =================================================================== */
.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-deep);
  font-weight: 700;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease, color .2s ease;
  white-space: nowrap;
}
.cta svg { width: 16px; height: 16px; }
.cta:active { transform: scale(0.98); }
.lg-homepage .cta--primary { background: var(--blue); color: #fff; font-weight: 700; }
.lg-homepage .cta--primary:hover { background: var(--blue-light); }
.lg-homepage .cta--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.lg-homepage .cta--ghost:hover { border-color: var(--ink); background: var(--surface); }

/* ===================================================================
   PROMO BANNER — full-width banner below hero for sale campaigns
   =================================================================== */
.promo-banner {
  padding: 0 0 48px;
}
.promo-banner__inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sale);
  color: #fff;
}
.promo-banner__text {
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.promo-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--sale);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.promo-banner__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--sale);
  border-radius: 50%;
  animation: bannerPulse 1.5s ease-in-out infinite;
}
@keyframes bannerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.promo-banner__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.0;
  margin: 0 0 14px;
  color: #fff;
}
.promo-banner__highlight {
  display: block;
  font-size: 64px;
  line-height: 0.9;
  margin: 4px 0;
  letter-spacing: -0.02em;
}
.promo-banner__sub {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 24px;
  max-width: 460px;
}
.promo-banner__bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.promo-banner__countdown {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.promo-banner__countdown::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: bannerPulse 1.5s ease-in-out infinite;
}
.lg-homepage .promo-banner__cta {
  background: #fff;
  color: var(--sale);
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  transition: transform .15s ease, background-color .2s ease;
}
.promo-banner__cta:hover { background: var(--cream); }
.promo-banner__cta:active { transform: scale(0.97); }
.promo-banner__cta svg { width: 18px; height: 18px; }
.promo-banner__media {
  position: relative;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.promo-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(200, 57, 43, 0.15) 0%, transparent 30%);
}

@media (min-width: 700px) {
  .promo-banner { padding: 0 0 64px; }
  .promo-banner__inner {
    flex-direction: row;
    min-height: 320px;
  }
  .promo-banner__text {
    padding: 48px 48px;
    flex: 1;
  }
  .promo-banner__media {
    flex: 1;
    aspect-ratio: auto;
  }
  .promo-banner__headline { font-size: 44px; }
  .promo-banner__highlight { font-size: 88px; }
  .promo-banner__sub { font-size: 16px; }
  .promo-banner__bottom {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .promo-banner__cta {
    padding: 16px 28px;
    font-size: 15px;
  }
  .promo-banner__countdown { font-size: 14px; }
}

@media (min-width: 1025px) {
  .promo-banner { padding: 0 0 78px; }
  .promo-banner__inner { min-height: 360px; }
  .promo-banner__text { padding: 56px 64px; }
  .promo-banner__headline { font-size: 52px; }
  .promo-banner__highlight { font-size: 112px; }
  .promo-banner__sub { font-size: 17px; line-height: 1.55; }
}

/* === Variant: SALE (red, the default) — already styled above === */

/* === Variant: BLACK FRIDAY (deep navy + cream) === */
.promo-banner--black-friday .promo-banner__inner {
  background: linear-gradient(135deg, #0F1A2A 0%, #1A2640 60%, #243352 100%);
  color: var(--cream);
}
.promo-banner--black-friday .promo-banner__eyebrow {
  background: var(--cream);
  color: #0F1A2A;
}
.promo-banner--black-friday .promo-banner__eyebrow::before {
  background: #0F1A2A;
}
.promo-banner--black-friday .promo-banner__headline {
  color: #fff;
}
.promo-banner--black-friday .promo-banner__highlight {
  color: var(--cream);
}
.promo-banner--black-friday .promo-banner__cta {
  background: var(--cream);
  color: #0F1A2A;
}
.promo-banner--black-friday .promo-banner__cta:hover {
  background: #fff;
}
.promo-banner--black-friday .promo-banner__media::after {
  background: linear-gradient(0deg, rgba(15, 26, 42, 0.25) 0%, transparent 30%);
}

/* === Variant: CYBER MONDAY (electric blue + cyan) === */
.promo-banner--cyber-monday .promo-banner__inner {
  background: linear-gradient(135deg, #0A1F4D 0%, #1E40AF 55%, #0EA5E9 100%);
  color: #fff;
}
.promo-banner--cyber-monday .promo-banner__eyebrow {
  background: #06E0FA;
  color: #0A1F4D;
}
.promo-banner--cyber-monday .promo-banner__eyebrow::before {
  background: #0A1F4D;
}
.promo-banner--cyber-monday .promo-banner__headline {
  color: #fff;
}
.promo-banner--cyber-monday .promo-banner__highlight {
  color: #06E0FA;
}
.promo-banner--cyber-monday .promo-banner__cta {
  background: #06E0FA;
  color: #0A1F4D;
}
.promo-banner--cyber-monday .promo-banner__cta:hover {
  background: #fff;
}
.promo-banner--cyber-monday .promo-banner__media::after {
  background: linear-gradient(0deg, rgba(6, 224, 250, 0.2) 0%, transparent 30%);
}

/* Shimmer animation applies to all "premium event" campaigns */
.promo-banner--black-friday::before,
.promo-banner--cyber-monday::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%);
  animation: bannerShimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes bannerShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* === Variant: BOXING DAY / WINTER SALE (cool slate) === */
.promo-banner--boxing-day .promo-banner__inner {
  background: linear-gradient(135deg, #1E293B 0%, #475569 100%);
  color: #fff;
}
.promo-banner--boxing-day .promo-banner__eyebrow {
  background: #fff;
  color: #1E293B;
}
.promo-banner--boxing-day .promo-banner__eyebrow::before {
  background: #1E293B;
}
.promo-banner--boxing-day .promo-banner__headline {
  color: #fff;
}
.promo-banner--boxing-day .promo-banner__highlight {
  color: #FFE9B7;
}
.promo-banner--boxing-day .promo-banner__cta {
  background: #fff;
  color: #1E293B;
}

/* === Variant: CHRISTMAS (with festive stars) === */
.promo-banner--christmas .promo-banner__inner {
  background: linear-gradient(135deg, #7A1A1A 0%, #A52828 100%);
}
.promo-banner--christmas .promo-banner__eyebrow {
  background: var(--cream);
  color: #7A1A1A;
}
.promo-banner--christmas .promo-banner__eyebrow::before {
  background: #7A1A1A;
}
.promo-banner--christmas .promo-banner__cta {
  background: var(--cream);
  color: #7A1A1A;
}
/* Festive star scatter on the text panel — uses SVG data URI */
.promo-banner--christmas .promo-banner__text::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 360' fill='%23FFE9B7'><g><path d='M50 80 L54 90 L65 90 L56 96 L60 107 L50 100 L40 107 L44 96 L35 90 L46 90 Z' opacity='0.5'/><path d='M520 60 L523 67 L530 67 L524 71 L526 78 L520 74 L514 78 L516 71 L510 67 L517 67 Z' opacity='0.4'/><path d='M450 280 L454 290 L465 290 L456 296 L460 307 L450 300 L440 307 L444 296 L435 290 L446 290 Z' opacity='0.45'/><path d='M120 320 L123 327 L130 327 L124 331 L126 338 L120 334 L114 338 L116 331 L110 327 L117 327 Z' opacity='0.4'/><circle cx='200' cy='50' r='2' opacity='0.7'/><circle cx='340' cy='30' r='1.5' opacity='0.5'/><circle cx='90' cy='180' r='2' opacity='0.6'/><circle cx='420' cy='140' r='1.5' opacity='0.5'/><circle cx='560' cy='200' r='2' opacity='0.7'/><circle cx='280' cy='250' r='1.5' opacity='0.5'/><circle cx='580' cy='320' r='2' opacity='0.6'/><circle cx='40' cy='250' r='1.5' opacity='0.5'/><circle cx='370' cy='200' r='1' opacity='0.4'/><circle cx='180' cy='130' r='1' opacity='0.4'/></g></svg>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.promo-banner--christmas .promo-banner__text > * {
  position: relative;
  z-index: 1;
}

/* === Variant: WORLD CUP (pitch green + gold trophy accents) === */
.promo-banner--world-cup .promo-banner__inner {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #0a3a1d 0%, #1a5d33 55%, #246d3d 100%);
  color: #fff;
}
/* Subtle vertical pitch stripes across the whole banner */
.promo-banner--world-cup .promo-banner__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 70px,
    rgba(255, 255, 255, 0.025) 70px,
    rgba(255, 255, 255, 0.025) 140px
  );
  pointer-events: none;
  z-index: 0;
}
.promo-banner--world-cup .promo-banner__text {
  z-index: 2;
}
.promo-banner--world-cup .promo-banner__eyebrow {
  background: #FFD33A;
  color: #0a3a1d;
}
.promo-banner--world-cup .promo-banner__eyebrow::before {
  background: #0a3a1d;
}
.promo-banner--world-cup .promo-banner__headline {
  color: #fff;
}
.promo-banner--world-cup .promo-banner__highlight {
  color: #FFD33A;
}
.promo-banner--world-cup .promo-banner__cta {
  background: #FFD33A;
  color: #0a3a1d;
}
.promo-banner--world-cup .promo-banner__cta:hover {
  background: #fff;
}
/* Replace the product image with a stylized football on a pitch background */
.promo-banner--world-cup .promo-banner__media {
  background:
    radial-gradient(ellipse at center 70%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(160deg, #1a5d33 0%, #0a3a1d 100%);
  z-index: 1;
}
.promo-banner--world-cup .promo-banner__media picture {
  opacity: 0;
}
/* Football graphic */
.promo-banner--world-cup .promo-banner__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g><circle cx='100' cy='100' r='78' fill='%23ffffff' stroke='%23111' stroke-width='2'/><polygon points='100,68 124,86 115,116 85,116 76,86' fill='%23111'/><line x1='100' y1='68' x2='100' y2='25' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/><line x1='124' y1='86' x2='162' y2='62' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/><line x1='115' y1='116' x2='155' y2='150' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/><line x1='85' y1='116' x2='45' y2='150' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/><line x1='76' y1='86' x2='38' y2='62' stroke='%23111' stroke-width='2.5' stroke-linecap='round'/><circle cx='100' cy='25' r='4' fill='%23111'/><circle cx='162' cy='62' r='4' fill='%23111'/><circle cx='155' cy='150' r='4' fill='%23111'/><circle cx='45' cy='150' r='4' fill='%23111'/><circle cx='38' cy='62' r='4' fill='%23111'/></g></svg>");
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}
.promo-banner--world-cup .promo-banner__media::after {
  background: linear-gradient(0deg, rgba(10, 58, 29, 0.4) 0%, transparent 30%);
  z-index: 2;
}
/* Hide pitch stripes on mobile (where banner stacks) — keep it simpler */
@media (max-width: 699px) {
  .promo-banner--world-cup .promo-banner__media {
    min-height: 200px;
  }
}

/* ===================================================================
   5. HEADER — three bands
   =================================================================== */
/* z-index must clear the .valBarNew value bar that follows .header in the DOM:
   its .vbnTitle a::before stretched-link overlays sit at z-index:100 in the
   root stacking context. .header is itself a stacking context (position +
   z-index), so the dtMenu dropdown nested inside it — despite its own
   z-index:10000 — is capped at whatever .header uses here. At the old value
   of 10 the value bar painted over the open dropdown and stole the hover,
   closing it the moment the cursor crossed the value-bar band. */
.header { position: relative; z-index: 200; }

/* Top brand band (blue) */
.header__top {
  background: var(--blue);
  color: #fff;
  padding: 16px 0;
}
.header__top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header__logo {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  flex-shrink: 0;
}
.header__logo .liberty {
  font-family: 'Quando', serif;
  font-size: 30px;
  color: #fff;
}
.header__logo .games {
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding-left: 8px;
  margin-top: 2px;
}
.header__tagline {
  display: none;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
  padding-left: 8px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.header__search {
  flex: 1;
  display: none;
  position: relative;
  max-width: 520px;
}
.header__search input {
  width: 100%;
  padding: 12px 18px 12px 46px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  font-size: 14px;
  color: var(--ink);
}
.header__search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.header__utils {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.header__util-btn {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 400;
  padding: 0;
}
.header__util-btn svg { width: 22px; height: 22px; }
.header__util-btn .label { display: none; font-size: 10px; }
.header__phone {
  display: none;
  font-size: 14px;
  font-weight: 700;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.header__phone svg { width: 14px; height: 14px; }

/* Mobile menu trigger */
.header__menu-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  margin-right: -4px;
  display: flex;
}
.header__menu-btn svg { width: 24px; height: 24px; }

@media (min-width: 700px) {
  .header__logo .liberty { font-size: 36px; }
  .header__logo .games { font-size: 10px; }
  .header__tagline { display: block; }
  .header__search { display: block; }
  .header__util-btn .label { display: block; }
  .header__menu-btn { display: none; }
}
@media (min-width: 1025px) {
  .header__phone { display: flex; }
}

/* Nav band (deep blue) */
.header__nav {
  background: var(--blue-deep);
  display: none;
}
.header__nav-inner {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.header__nav-inner::-webkit-scrollbar { display: none; }
.header__nav a {
  padding: 14px 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease;
}
.header__nav a:hover { color: var(--cream); }
.header__nav a.is-sale { color: var(--cream); }
.header__nav a.is-sale::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--cream);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

@media (min-width: 1025px) {
  .header__nav { display: block; }
}

/* Trust strip (cream) */
.header__trust {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--border);
  display: none;
}
.header__trust-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.header__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}
.header__trust-item svg { width: 18px; height: 18px; color: var(--blue-deep); flex-shrink: 0; }
.header__trust-item strong { font-weight: 700; color: var(--ink); display: block; line-height: 1.2; }
.header__trust-item span { font-size: 11px; color: var(--muted); }

@media (min-width: 1025px) {
  .header__trust { display: block; }
}

/* Mobile-only sub-nav (horizontal scroller) */
.header__mobile-nav {
  background: var(--blue-deep);
  padding: 12px 0;
}
.header__mobile-nav-inner {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--gutter);
}
.header__mobile-nav-inner::-webkit-scrollbar { display: none; }
.header__mobile-nav a {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.header__mobile-nav a.is-sale { color: var(--cream); }

@media (min-width: 1025px) {
  .header__mobile-nav { display: none; }
}

/* ===================================================================
   6. HERO — stacked on mobile, side-by-side on tablet+
   =================================================================== */
/* Hero band runs full viewport width at every breakpoint — the cream
   background lives on the section, so it spans edge-to-edge regardless of
   the inner content's width. The inner just provides the layout (stacked
   on mobile, side-by-side grid on desktop) — no card chrome. */
.hero {
  padding: 0;
  background: var(--cream-soft);
  margin-top: -20px;
  margin-bottom: 20px;
}
.hero .container { max-width: none; padding: 0; }

.hero__inner {
  display: flex;
  flex-direction: column;
}

.hero__text {
  padding: 32px 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 2;
}
.hero__text .eyebrow { color: var(--blue-deep); margin-bottom: 14px; }
.hero__text h1 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.04;
  margin: 0 0 16px;
  color: var(--ink);
}
.hero__text p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 520px;
}
.hero__ctas {
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: stretch;
}
.hero__ctas .cta { justify-content: center; }

/* Hero trust signal — real 4.9/5 rating + review count (concrete proof, not
   decoration). Opens the reviews popin via .lnkHappy. */
.hero__rating {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  text-align: center;
  gap: 8px;
  margin-top: 22px;
  text-decoration: none;
  cursor: pointer;
}
.hero__rating-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__rating-logo { display: block; line-height: 0; }
.hero__rating-logo img { height: 20px; width: auto; display: block; }
.hero__rating-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
  flex-shrink: 0;
}
.hero__rating-stars svg { width: 18px; height: 18px; fill: currentColor; }
.hero__rating-text { font-size: 14px; color: var(--ink); }
.hero__rating-text strong { font-weight: 700; }
.hero__rating:hover .hero__rating-text { text-decoration: underline; text-underline-offset: 2px; }

.hero__media {
  position: relative;
  background: var(--cream-soft);
  aspect-ratio: 4 / 3;
  order: 1;
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.lg-homepage .hero__badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  /* Cap the width so a long product name can't run into the playpause
     button at bottom-left: ~44px button + ~25px gap + 14px right inset =
     83px reserved. Once capped the label wraps onto more lines instead of
     growing wider. display:block (not flex) lets it wrap as flowing text;
     see the min-width:700px override for the larger button there. */
  max-width: calc(100% - 83px);
  background: rgba(40, 82, 123, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  /* Hanging indent for wrapped lines: bigger left padding (14 base + 14
     for the dot+gap) and a negative text-indent that pulls just the first
     line back so the inline dot sits in the reserved space. Wrapped lines
     then start at the padding edge, aligned under "Featured" rather than
     running back under the dot. */
  padding: 8px 14px 8px 28px;
  text-indent: -14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  transition: opacity .18s ease, transform .18s ease;
  display: block;
}
.hero__badge::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--cream);
  border-radius: 50%;
}
/* Hover/active — mirrors the playpause button so the two corners feel
   the same when interacted with. Source-ordered before .is-swapping so the
   swap fade-out wins during cue changes (though the badge is invisible
   then anyway, so it's mostly cosmetic). */
.lg-homepage .hero__badge:hover {
  background: rgba(40, 82, 123, 1);
  transform: scale(1.06);
}
.lg-homepage .hero__badge:active { transform: scale(0.94); }
.lg-homepage .hero__badge:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Cue swap — JS adds .is-swapping while it rewrites the badge text/href.
   Fades out, hides the natural width snap, then fades back in at the new
   size. Reduced-motion users skip the animation. */
.lg-homepage .hero__badge.is-swapping {
  opacity: 0;
  transform: translateY(3px);
}
@media (prefers-reduced-motion: reduce) {
  .lg-homepage .hero__badge { transition: none; }
}

/* Hero play/pause toggle — circular button mirroring the badge on the
   opposite (left) side of the video, same vertical inset. */
.lg-homepage .hero__playpause {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(40, 82, 123, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .15s ease;
  z-index: 2;
}
.lg-homepage .hero__playpause:hover { background: rgba(40, 82, 123, 1); transform: scale(1.06); }
.lg-homepage .hero__playpause:active { transform: scale(0.94); }
.lg-homepage .hero__playpause:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.lg-homepage .hero__playpause svg { width: 14px; height: 14px; display: block; }
.lg-homepage .hero__playpause .hero__playpause__play { display: none; }
.lg-homepage .hero__playpause.is-paused .hero__playpause__pause { display: none; }
.lg-homepage .hero__playpause.is-paused .hero__playpause__play { display: block; }

@media (min-width: 700px) {
  .hero { padding: 36px 0 48px; }
  .hero__text { padding: 48px 40px 56px; }
  .hero__text h1 { font-size: 44px; }
  .hero__ctas {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .hero__ctas .cta { justify-content: flex-start; }
  .hero__badge {
    bottom: 22px;
    right: 22px;
    padding: 10px 16px;
    font-size: 13px;
  }
  /* Larger playpause button here (~36px). Selector must match the base
     rule's `.lg-homepage .hero__badge` specificity or it won't win. */
  .lg-homepage .hero__badge { max-width: calc(100% - 97px); }
  .lg-homepage .hero__playpause {
    bottom: 22px;
    left: 22px;
    padding: 10px;
  }
  .lg-homepage .hero__playpause svg { width: 16px; height: 16px; }
}

@media (min-width: 1025px) {
  .hero {
    padding: 36px 0 36px;
    margin-top: -10px;
    margin-bottom: 30px;
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: stretch;
  }
  .hero__text {
    padding: 64px 56px;
    order: 1;
  }
  .hero__text h1 { font-size: 48px; }
  .hero__media { order: 2; aspect-ratio: auto; }
}

@media (min-width: 1200px) {
  .hero__text { padding: 70px 64px; }
  .hero__text h1 { font-size: 56px; }
  .hero__text p { font-size: 17px; margin-bottom: 36px; }
}

/* Desktop content alignment — the cream band is full-width (set on .hero
   above), but the image stops at the container's right edge so it lines up
   with the rest-of-page content column, and the text is padded back from
   the viewport's left to align with the container's left edge (i.e. with
   section h2s below). */
@media (min-width: 1025px) {
  .hero__inner { margin-right: calc((100vw - var(--container)) / 2); }
  .hero__text  { padding-left: calc((100vw - var(--container)) / 2); }
}

/* ===================================================================
   7. SCROLLER PATTERN (categories, accessories, products, reviews)
   =================================================================== */
.scroll-wrap { position: relative; padding-bottom: 8px; }
.scroll-list {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  scroll-padding-left: var(--gutter);
}
.scroll-list::-webkit-scrollbar { display: none; }
.scroll-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.scroll-list.is-dragging * {
  user-select: none;
  pointer-events: none;
}
.scroll-list > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.scroll-list > *:first-child { margin-left: var(--gutter); }
.scroll-list > *:last-child { margin-right: var(--gutter); }

/* Arrow buttons — hidden on mobile/tablet, visible on desktop */
.scroll-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .25s ease, transform .15s ease, background-color .2s ease;
  box-shadow: 0 6px 16px rgba(40, 82, 123, 0.14);
  color: var(--blue-deep);
}
.scroll-arrow:hover { background: var(--blue-deep); color: #fff; }
.scroll-arrow:active { transform: translateY(-50%) scale(0.94); }
.scroll-arrow[data-disabled="true"] { opacity: 0; pointer-events: none; }
.scroll-arrow svg { width: 20px; height: 20px; }
.scroll-arrow--prev { left: -22px; }
.scroll-arrow--next { right: -22px; }

@media (min-width: 1025px) {
  .scroll-arrow { display: flex; }
  .scroll-list { gap: 16px; }
}

/* Progress track — drag the thumb or click anywhere on the track to scroll */
.scroll-track {
  margin: 16px auto 0;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  max-width: 120px;
  cursor: pointer;
  touch-action: none;
}
/* Invisible padded hit-zone so the thin track is comfortably clickable
   without changing the visual height. Pointer events on this pseudo-element
   bubble to .scroll-track itself. */
.scroll-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}
.scroll-thumb {
  position: absolute;
  height: 100%;
  background: var(--blue-deep);
  border-radius: 2px;
  width: 30%;
  left: 0;
  cursor: grab;
  transition: width .15s ease;
}
.scroll-thumb:active { cursor: grabbing; }

@media (min-width: 1025px) {
  .scroll-track { margin-top: 22px; max-width: 240px; }
}

/* ===================================================================
   8. CATEGORIES (2-row horizontal scroller — items flow into 2 rows
   and the strip scrolls horizontally to fit ~10–14 dept/sect tiles)
   =================================================================== */
.scroll-list.cats {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 12px;
}
@media (min-width: 700px) {
  .scroll-list.cats { grid-auto-columns: 180px; gap: 14px; }
}
@media (min-width: 1025px) {
  .scroll-list.cats { grid-auto-columns: 200px; gap: 18px; }
}
/* Cancel the flex first/last gutter margins — they'd shrink the first/last
   grid cards. Mobile/tablet edge spacing comes from .container's gutter. */
.scroll-list.cats > *:first-child { margin-left: 0; }
.scroll-list.cats > *:last-child { margin-right: 0; }
.cats > .cat { width: auto; }

.cat {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cat:hover {
  border-color: var(--blue);
}
.cat__media {
  aspect-ratio: 1 / 1;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  pointer-events: none;
}
.cat__media--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  color: #fff;
  text-align: center;
  padding: 14px;
  position: relative;
}
.cat__media--text::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 233, 183, 0.4);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.cat__media--text .script {
  font-family: 'Quando', serif;
  font-size: 22px;
  color: var(--cream);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.cat__media--text .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}
.cat__body {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cat__body .name { font-size: 13px; font-weight: 700; color: var(--ink); }
.cat__body .from { font-size: 11px; color: var(--muted); }

@media (min-width: 1025px) {
  .cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(40, 82, 123, 0.08);
  }
  .cat:hover .cat__media img { transform: scale(1.04); }
  .cat:nth-child(odd):hover { transform: translateY(-3px) rotate(-1.5deg); }
  .cat:nth-child(even):hover { transform: translateY(-3px) rotate(1.5deg); }
  .cat__media--text { padding: 24px; }
  .cat__media--text::after { inset: 12px; }
  .cat__media--text .script { font-size: 28px; margin-bottom: 6px; }
  .cat__media--text .label { font-size: 12px; }
  .cat__body { padding: 14px 16px 16px; }
  .cat__body .name { font-size: 14px; }
  .cat__body .from { font-size: 12px; }
}

/* ===================================================================
   9. AUDIENCE TILES — 1 col on mobile, 2 on tablet, 4 on desktop
   =================================================================== */
.audience {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .audience { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1025px) {
  .audience { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

.aud-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  display: block;
  transition: transform .25s ease;
}
.aud-tile:hover { transform: translateY(-3px); }
.aud-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.aud-tile:hover img { transform: scale(1.04); }
.aud-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
}
.aud-tile__text {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 1;
  color: #fff;
}
.aud-tile__text h3 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 4px;
}
.aud-tile__text p {
  font-size: 13px;
  margin: 0;
  opacity: 0.92;
  line-height: 1.4;
}

@media (min-width: 1025px) {
  .aud-tile__text { bottom: 22px; left: 22px; right: 22px; }
  .aud-tile__text h3 { font-size: 26px; }
  .aud-tile__text p { font-size: 14px; }
}

/* ===================================================================
   10. BUYERS GUIDES (tabbed editorial band)
   =================================================================== */
.guides {
  background: var(--cream-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.guides__header {
  margin-bottom: 24px;
}
.guides__header .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.guides__header h2 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  margin: 8px 0 0;
}

@media (min-width: 700px) { .guides__header h2 { font-size: 32px; } }
@media (min-width: 1025px) { .guides__header h2 { font-size: 38px; } }

/* Tabs */
.guides__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.guides__tabs::-webkit-scrollbar { display: none; }
.guides__tab {
  flex-shrink: 0;
  padding: 12px 14px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .2s ease;
}
.guides__tab:hover { color: var(--ink-soft); }
.guides__tab[aria-selected="true"] { color: var(--blue-deep); }
.guides__tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 14px; right: 14px;
  height: 3px;
  background: var(--blue-deep);
  border-radius: 2px 2px 0 0;
}
.guides__tab .count {
  font-size: 10px;
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.6;
}

@media (min-width: 1025px) {
  .guides__tab { padding: 14px 22px 16px; font-size: 14.5px; }
  .guides__tab[aria-selected="true"]::after { left: 0; right: 0; }
  .guides__tab .count { font-size: 11px; margin-left: 6px; }
}

.guides__panel { display: none; }
.guides__panel.is-active {
  display: block;
  animation: panelFadeIn .35s ease forwards;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Layout switches at tablet+ */
.guides__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1025px) {
  .guides__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: stretch;
  }
}

.guide-feature {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
/* The FAQ feature image is uploaded as a square via the admin; the existing
   .guide-feature img rule below already has object-fit: cover so the square
   crops cleanly to the feature card's 4:3 aspect. Some loss top/bottom is
   acceptable. */
/* Placeholder when no feature image is uploaded yet — solid blue-deep card
   with the dept label centered, so the layout still looks deliberate. */
.guide-feature__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color: var(--cream);
  padding: 24px;
  text-align: center;
}
.guide-feature__placeholder span {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.guide-item__media--placeholder {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream) 100%);
}
.guides__empty {
  padding: 24px 0;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.guide-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.guide-feature:hover img { transform: scale(1.03); }
.guide-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(31, 64, 95, 0.92) 100%);
}
.guide-feature__text {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 1;
  color: #fff;
}
.guide-feature__cat {
  display: inline-block;
  background: var(--cream);
  color: var(--blue-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.guide-feature__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 4px;
  max-width: 480px;
}
.guide-feature__title {
  font-size: 11px;
  opacity: 0.78;
  margin-bottom: 8px;
}
.guide-feature__title::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  background: rgba(255, 233, 183, 0.6);
  vertical-align: middle;
  margin-right: 10px;
}
.guide-feature__summary {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.92;
  margin: 0 0 8px;
  max-width: 460px;
}
.guide-feature__read {
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.82;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.guide-feature__read::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--cream);
}

@media (min-width: 1025px) {
  .guide-feature__text { left: 36px; right: 36px; bottom: 32px; }
  .guide-feature__cat { font-size: 11px; padding: 5px 10px; margin-bottom: 16px; }
  .guide-feature__headline { font-size: 32px; line-height: 1.1; }
  .guide-feature__title { font-size: 13px; margin-bottom: 14px; }
  .guide-feature__summary { font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
  .guide-feature__read { font-size: 12.5px; }
  .guide-feature__read::before { width: 18px; }
}

.guide-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.guide-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: transform .2s ease;
}
.guide-item:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-item:hover { transform: translateX(4px); }
.guide-item__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}
.guide-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-item__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 4px;
}
.guide-item__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 3px;
}
.guide-item:hover .guide-item__headline { color: var(--blue-deep); }
.guide-item__title {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 4px;
}
.guide-item__read { font-size: 11px; color: var(--muted); }

/* ===================================================================
   10b. THEMED PROMO COLLECTION — seasonal product strip with a thematic
        background + decorative motif. Currently shipped with --summer;
        add new modifiers (.promo-collection--xmas, --bbq, --gifting…)
        for future themes by overriding background + decor + accent.
   =================================================================== */
.promo-collection {
  position: relative;
  overflow: hidden;
  /* Compact band — half the regular section padding so it reads as a
     punchy interlude between content sections rather than a full beat. */
  padding: 28px 0 24px;
}
.promo-collection .section-head { margin-bottom: 16px; }
.promo-collection h2 { font-size: 24px; }
.promo-collection .promo-collection__intro {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 6px 0 0;
}
.promo-collection__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.promo-collection .container { position: relative; z-index: 1; }

/* Smaller product cards in the promo bar — keeps the band compact and
   shows ~6 across at the largest desktop breakpoint. */
.promo-collection__list > .prod { width: 200px; }
@media (min-width: 700px)  { .promo-collection__list > .prod { width: 220px; } }
@media (min-width: 1025px) { .promo-collection__list > .prod { width: calc((100% - 80px) / 6); } }

/* Categories mode in the promo bar. The main categories strip flows into TWO
   rows (it carries 10-14 tiles); this band is a compact interlude, so keep it
   to a single scrolling row and match the ~6-across rhythm of the product
   cards above. Same specificity as .scroll-list.cats, so these must stay
   below it in the file to win. */
.promo-collection__list.cats {
  grid-template-rows: auto;
  grid-auto-columns: 150px;
}
@media (min-width: 700px)  { .promo-collection__list.cats { grid-auto-columns: 180px; } }
@media (min-width: 1025px) { .promo-collection__list.cats { grid-auto-columns: calc((100% - 90px) / 6); } }

/* Per-tile CTA. The tile itself is already the <a>, so this is a <span>
   dressed as a button — a nested <a>/<button> inside a link is invalid HTML
   and breaks keyboard navigation. Scoped to the promo band: the main
   categories strip is a dense two-row grid where these would just bloat it.
   Tiles stretch to equal height in the grid, so push the CTA to the bottom
   with margin-top:auto and they all line up regardless of title length. */
.promo-collection__list .cat,
.promo-collection__list .prod {
  display: flex;
  flex-direction: column;
}
/* Name left, "From £x" pushed hard right on the same line. margin-left:auto
   does the pushing even when the name wraps to two lines (space-between alone
   doesn't, once the name takes the full width), and nowrap stops the price
   itself breaking across lines. */
.promo-collection__list .cat__body .from {
  margin-left: auto;
  padding-left: 8px;
  white-space: nowrap;
}
.promo-collection__list .tile-cta {
  margin: auto 10px 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.promo-collection__list .tile-cta svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  transition: transform .2s ease;
}
.promo-collection__list .cat:hover .tile-cta,
.promo-collection__list .prod:hover .tile-cta {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
}
.promo-collection__list .cat:hover .tile-cta svg,
.promo-collection__list .prod:hover .tile-cta svg { transform: translateX(2px); }

/* Lower "Shop <collection>" button removed — it duplicated the top-right link
   and competed with the six per-card CTAs. The top-right text link is retained.
   No promo-specific card shadow either: white cards read cleanly against the
   flat saturated panel, so they inherit the standard card treatment. */

@media (min-width: 700px) {
  .promo-collection { padding: 40px 0 36px; }
  .promo-collection h2 { font-size: 28px; }
}
@media (min-width: 1025px) {
  .promo-collection { padding: 48px 0 44px; }
  .promo-collection h2 { font-size: 32px; }
  .promo-collection .promo-collection__intro {
    font-size: 15px;
    margin-top: 10px;
  }
}

/* === Variant: SUMMER — "Summer of Games". A flat sky-blue panel with a hard-
   edged geometric sun cropped by the top edge. Every colour comes from the five
   --season-* custom properties below; re-theming a season means overriding just
   those five values — no other CSS and no markup change. === */
.promo-collection--summer {
  --season-panel:     #BBDCEE;  /* section background                  */
  --season-motif:     #F5DFB0;  /* sun disc + rays (decorative ~1.1:1) */
  --season-ink:       #0F2A3C;  /* heading             10.29:1 AAA     */
  --season-ink-muted: #1F4459;  /* subheading / intro   7.19:1 AAA     */
  --season-accent:    #7A4A0E;  /* eyebrow + arrows     5.18:1 AA      */
}

/* === Variant: AUTUMN — "Bring it back indoors". A warm honey panel with a few
   hard-edged leaves tumbling in from the top edge — same flat, gradient-free
   treatment as summer's sun, just a warmer season. Light panel like summer, so
   the text vars stay dark/warm and nothing else needs touching. === */
.promo-collection--autumn {
  --season-panel:     #E7CE9E;  /* warm honey / wheat panel              */
  --season-motif:     #B85C22;  /* burnt-orange leaves (decorative)      */
  --season-ink:       #3A2716;  /* heading — deep espresso  ~9:1 AAA     */
  --season-ink-muted: #5C4227;  /* subheading / intro       ~5.7:1 AA    */
  --season-accent:    #9A3D12;  /* eyebrow + link — rust    ~5.4:1 AA    */
}

/* Flat panel + text colours, var-driven with fallbacks so an un-themed
   collection is unaffected. A future season = one modifier overriding the five
   vars above; nothing below needs touching. */
.promo-collection { background: var(--season-panel, transparent); }
.promo-collection .section-head h2 { color: var(--season-ink, var(--ink)); }
.promo-collection .promo-collection__intro { color: var(--season-ink-muted, var(--ink-soft)); }
.promo-collection .section-head .link { color: var(--season-accent, var(--blue-deep)); }

/* Keep the heading and intro clear of the sun (~70% across). The sun may sit
   behind the eyebrow/link row, but never behind the heading or subheading. */
@media (min-width: 768px) {
  .promo-collection .section-head h2 { max-width: 55%; }
  .promo-collection .promo-collection__intro { max-width: min(600px, 55%); }
}

/* Sun motif — inline SVG, decorative (aria-hidden in markup), sat behind the
   content (.container is z-index:1) and cropped by the section's overflow:hidden
   so the disc centre lands on the top edge. Hard edges only: no blur, glow or
   gradient. On mobile it moves above the heading (see below) rather than hiding,
   so it can never collide with the full-width heading text. */
.promo-collection__sun {
  position: absolute;
  top: 0;
  left: 70%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  color: var(--season-motif);
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 768px)  { .promo-collection__sun { display: block; } }
@media (min-width: 1025px) { .promo-collection__sun { width: 240px; height: 240px; } }
/* Mobile (<768px): show the sun ABOVE the heading instead of hiding it — centre
   it on the top edge and pad the section so the eyebrow/heading sit clear below
   its arc. The heading is full-width here, so this vertical gap is what prevents
   any overlap. */
@media (max-width: 767px) {
  .promo-collection--summer { padding-top: 74px; }
  .promo-collection__sun {
    display: block;
    left: 50%;
    width: 120px;
    height: 120px;
  }
}

/* Autumn leaves motif — a small cluster tumbling in from the top edge, cropped
   by the section's overflow:hidden. Its own positioning (not the sun's centre-
   on-edge trick): sits top-right, drifts down-left, clear of the heading which
   is capped at 55% width. Flat and hard-edged, no blur/gradient, decorative. */
.promo-collection__leaves {
  position: absolute;
  top: -20px;
  left: 66%;
  width: 210px;
  height: 175px;
  color: var(--season-motif);
  pointer-events: none;
  z-index: 0;
  display: none;
}
@media (min-width: 768px)  { .promo-collection__leaves { display: block; } }
@media (min-width: 1025px) { .promo-collection__leaves { left: 70%; width: 260px; height: 210px; } }
/* Mobile (<768px): a smaller cluster centred above the heading, with section
   padding so the eyebrow/heading sit clear below it. */
@media (max-width: 767px) {
  .promo-collection--autumn { padding-top: 72px; }
  .promo-collection__leaves {
    display: block;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 120px;
  }
}

/* White surround behind card imagery — guarantees edge definition for shots
   with large blue areas (outdoor pool / table tennis) so they never blur into
   the blue panel at the card boundary. */
.promo-collection__list .prod__media,
.promo-collection__list .cat__media { background: #fff; }

/* Eyebrow row — label text and its icon in the seasonal accent. */
.promo-collection__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.promo-collection .promo-collection__eyebrow { color: var(--season-accent, var(--blue-deep)); }
.promo-collection__eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--season-accent, var(--blue-deep));
  flex-shrink: 0;
}

/* Videos tab — feature position is a video player. Same .guides__grid
   columns, but the "feature" cell is a player + caption rather than an
   image card. List items show a play-icon overlay so the swap-on-click
   affordance is clear. */
.guide-video {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.guide-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.guide-video__caption {
  padding: 16px 18px;
  background: var(--blue-deep);
  color: #fff;
}
.guide-video__cat {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 6px;
}
.guide-video__cat:empty { display: none; }
.guide-video__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #fff;
}
.guide-video__desc {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.guide-video__desc:empty { display: none; }

@media (min-width: 1025px) {
  .guide-video__caption { padding: 20px 22px; }
  .guide-video__headline { font-size: 22px; }
  .guide-video__desc { font-size: 14px; }
}

/* Play-icon overlay on video list items */
.guide-item--video .guide-item__media {
  position: relative;
}
.guide-item__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 82, 123, 0.45);
  color: #fff;
  opacity: 0.92;
  transition: opacity .15s ease, background-color .15s ease;
  pointer-events: none;
}
.guide-item__play svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.guide-item--video:hover .guide-item__play,
.guide-item--video.is-active .guide-item__play {
  opacity: 1;
  background: rgba(40, 82, 123, 0.6);
}
.guide-item--video.is-active {
  background: rgba(40, 82, 123, 0.05);
}

/* Mobile / tablet — feature card stacks above list; cap the list and scroll
   inside it so the section doesn't run on forever while still letting users
   see everything without leaving the page. Phone gets a tighter cap (~2
   items + a peek of the next) so the inner-scroll area is short enough to
   thumb past easily on small screens. */
@media (max-width: 1024px) {
  .guide-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 699px) {
  .guide-list { max-height: 220px; }
}

@media (min-width: 1025px) {
  .guide-list {
    gap: 16px;
    justify-content: flex-start;
    /* Scroll internally so the column stays the same height as the feature
       card no matter how many items there are. max-height per breakpoint
       roughly matches the feature's 4:3 aspect-derived height (feature
       column = 7/12 of (container - 40px gap), * 0.75 for 4:3). */
    max-height: 411px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-gutter: stable;
  }

  .guide-item {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding-bottom: 16px;
  }
  .guide-item__cat { font-size: 10.5px; }
  .guide-item__headline { font-size: 17px; }
  .guide-item__title { font-size: 12px; margin-bottom: 6px; }
  .guide-item__read { font-size: 11.5px; }
}
@media (min-width: 1200px) { .guide-list { max-height: 499px; } }
@media (min-width: 1500px) { .guide-list { max-height: 564px; } }

/* Slim, brand-coloured scrollbar at all breakpoints so the scroll affordance
   is visible on mobile too. */
.guide-list::-webkit-scrollbar { width: 6px; }
.guide-list::-webkit-scrollbar-track { background: var(--border); border-radius: 3px; }
.guide-list::-webkit-scrollbar-thumb { background: var(--blue-deep); border-radius: 3px; }
.guide-list { scrollbar-width: thin; scrollbar-color: var(--blue-deep) var(--border); }

/* ===================================================================
   11. CROSS-SELL (cream band, scroller)
   =================================================================== */
.setup { background: var(--cream); }

.acc > .acc__card { width: 200px; }

@media (min-width: 700px) { .acc > .acc__card { width: 240px; } }
@media (min-width: 1025px) { .acc > .acc__card { width: 280px; } }

.acc__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: block;
}
.acc__card:hover {
  border-color: var(--blue);
}
.acc__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--surface) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc__media .placeholder {
  font-family: 'Quando', serif;
  font-size: 30px;
  color: var(--blue-deep);
  line-height: 1;
}
.acc__body { padding: 14px 16px 16px; }
.acc__body .name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--ink);
}
.acc__body .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.acc__body .price {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.acc__body .price .label { color: var(--muted); }
.acc__body .price strong { font-weight: 700; color: var(--ink); }

@media (min-width: 1025px) {
  .acc__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(40, 82, 123, 0.1);
  }
  .acc__media .placeholder { font-size: 38px; }
  .acc__body { padding: 18px 18px 20px; }
  .acc__body .name { font-size: 16px; }
  .acc__body .meta { font-size: 13px; }
  .acc__body .price { font-size: 14px; }
}

/* ===================================================================
   12. SHOWROOM band (cinematic split layout)
   =================================================================== */
.showroom {
  background: var(--blue-deep);
  overflow: hidden;
}
.showroom__grid {
  display: flex;
  flex-direction: column;
}
.showroom__hero {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.showroom__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showroom__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(31, 64, 95, 0.6) 100%);
}
.showroom__hero__caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(31, 64, 95, 0.85);
  padding: 6px 12px;
  border-radius: 999px;
}
.showroom__hero__caption::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--cream);
  border-radius: 50%;
}
.showroom__text {
  background: var(--blue-deep);
  color: #fff;
  padding: 28px var(--gutter) 32px;
}
.showroom__text .eyebrow { color: var(--cream); margin-bottom: 12px; }
.showroom__text h2 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #fff;
}
.showroom__text p {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.92;
  margin: 0 0 22px;
}
.showroom__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 22px;
  font-size: 11.5px;
}
.showroom__meta-item {
  display: flex;
  align-items: start;
  gap: 8px;
}
.showroom__meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--cream);
  margin-top: 2px;
}
.showroom__meta strong {
  display: block;
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 1px;
  color: var(--cream);
}
.showroom__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.showroom__ctas .cta { justify-content: center; }
.showroom__ctas .cta--primary {
  background: var(--cream);
  color: var(--blue-deep);
}
.showroom__ctas .cta--ghost {
  border: 1px solid rgba(255, 233, 183, 0.5);
  color: #fff;
}
.showroom__ctas .cta--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

@media (min-width: 1025px) {
  .showroom__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    flex-direction: initial;
    min-height: 520px;
  }
  .showroom__hero { aspect-ratio: auto; }
  .showroom__hero__caption {
    bottom: 22px;
    left: 28px;
    font-size: 12.5px;
    padding: 8px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .showroom__hero__caption::before { width: 6px; height: 6px; }
  .showroom__text {
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .showroom__text::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    background: var(--blue);
    border-radius: 50%;
    opacity: 0.16;
    pointer-events: none;
  }
  .showroom__text .eyebrow { margin-bottom: 16px; }
  .showroom__text h2 { font-size: 36px; margin-bottom: 18px; }
  .showroom__text p { font-size: 15.5px; line-height: 1.6; margin-bottom: 24px; }
  .showroom__meta {
    gap: 18px 24px;
    margin-bottom: 28px;
    font-size: 13px;
  }
  .showroom__meta-item svg { width: 18px; height: 18px; }
  .showroom__meta strong { font-size: 16px; margin-bottom: 2px; }
  .showroom__ctas { flex-direction: row; gap: 12px; flex-wrap: wrap; }
  .showroom__ctas .cta { justify-content: flex-start; }
}

/* ===================================================================
   13. PRODUCTS (recently arrived) — scroller everywhere
   =================================================================== */
.products > .prod { width: 240px; }

@media (min-width: 700px) { .products > .prod { width: 280px; } }
/* Desktop: fit exactly 5 cards across the container width.
   Calc = (100% - 4 gaps) / 5. Gap is 16px at this breakpoint
   (set on .scroll-list at 1025+), so 4*16 = 64. */
@media (min-width: 1025px) {
  .products > .prod { width: calc((100% - 64px) / 5); }
}

.prod {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  /* Flex column so the body can stretch to fill the card height when cards
     are equal-height in the parent flex row. */
  display: flex;
  flex-direction: column;
  position: relative;
}
.prod__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--cream-soft);
  flex-shrink: 0;
}
.prod__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.prod__sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sale);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  animation: salePulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes salePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.prod__body {
  padding: 14px 16px 16px;
  /* Body fills the rest of the card and lays its own children out in a
     column so the price + status block can be pinned to the bottom edge
     regardless of how long the title is. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prod__name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.prod__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  /* Pushes price and everything below (status, rating) to the bottom of
     the body so all cards have aligned price/status lines. */
  margin-top: auto;
}
.prod__price strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.prod__price .was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.prod__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.prod__rating .stars { display: inline-flex; gap: 1px; color: var(--star); }
.prod__rating .stars svg { width: 12px; height: 12px; fill: currentColor; }

/* Stock status — small green badge with check, shown when buyable */
.prod__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #2E8B57;
  margin-bottom: 6px;
}
.prod__status svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (min-width: 1025px) {
  .prod:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40, 82, 123, 0.1); }
  .prod:hover .prod__media img { transform: scale(1.04); }
  .prod__body { padding: 18px 20px 20px; }
  .prod__name { font-size: 16px; }
  .prod__price strong { font-size: 19px; }
}

/* ===================================================================
   14. WHY (deep blue band)
   =================================================================== */
.why {
  background: var(--blue-deep);
  color: #fff;
}
/* Asymmetric layout: a single big statement on the left, the reasons as a
   hairline-divided list on the right. Deliberately unlike the icon-card grid
   it replaces AND unlike the numbered delivery steps directly below — that
   contrast is what stops the page reading as a stack of identical modules. */
.why-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 850px) {
  .why-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: start;
  }
}
@media (min-width: 1025px) {
  .why-layout { gap: 72px; }
}

.why-lead h2 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 0;
  color: #fff;
}
.why-lead h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 22px;
  background: var(--cream);
}
@media (min-width: 850px) {
  .why-lead h2 { font-size: 40px; }
}
@media (min-width: 1025px) {
  .why-lead h2 { font-size: 48px; }
}

.why-point {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.why-point:first-child { border-top: 0; padding-top: 0; }
.why-point:last-child { padding-bottom: 0; }
.why-point h3 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--cream);
}
.why-point p {
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 54ch;
}
/* Heading links (nav links + the .lnkHappy reviews-widget trigger) sit on the
   dark band — inherit the light text colour rather than the default link blue,
   and underline on hover. The inline body .lnkHappy link keeps a subtle
   underline so it reads as clickable within the paragraph. */
.why-point h3 a { color: inherit; text-decoration: none; cursor: pointer; }
.why-point h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.why-point p a.lnkHappy { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.4); cursor: pointer; }
.why-point p a.lnkHappy:hover { text-decoration-color: currentColor; }

@media (min-width: 1025px) {
  .why-point h3 { font-size: 22px; }
}

/* ===================================================================
   DELIVERY — process walkthrough (4 numbered steps)
   =================================================================== */
.delivery {
  background: var(--cream-soft);
}
.delivery .section-head h2 .accent {
  color: var(--blue-deep);
}
.delivery__intro {
  max-width: 640px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.delivery__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  position: relative;
}
.delivery__step {
  position: relative;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.delivery__step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.delivery__step-body { flex: 1; }
.delivery__step h3 {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  margin: 6px 0 6px;
  color: var(--ink);
}
.delivery__step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.delivery__step strong {
  color: var(--blue-deep);
  font-weight: 700;
}
.delivery__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.delivery__cta .link {
  font-size: 14px;
  color: var(--blue-deep);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--blue-deep);
  padding-bottom: 2px;
}

@media (min-width: 700px) {
  .delivery__intro { font-size: 16px; }
  .delivery__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
  }
}

@media (min-width: 1025px) {
  .delivery__intro { font-size: 17px; margin-bottom: 40px; max-width: 700px; }
  .delivery__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  .delivery__step {
    flex-direction: column;
    gap: 18px;
    position: relative;
  }
  /* Connector dotted lines between steps on desktop */
  .delivery__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(44px + 14px);
    right: calc(-1 * (32px - 14px));
    height: 1px;
    background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    z-index: 0;
  }
  .delivery__step-num { width: 48px; height: 48px; font-size: 20px; }
  .delivery__step h3 { font-size: 20px; margin: 8px 0 8px; }
  .delivery__step p { font-size: 14.5px; }
  .delivery__cta { margin-top: 48px; }
}

/* ===================================================================
   15. SOCIAL strip
   =================================================================== */
.social-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
  scroll-padding-left: var(--gutter);
}
.social-strip::-webkit-scrollbar { display: none; }
.social-strip > *:first-child { margin-left: var(--gutter); }
.social-strip > *:last-child { margin-right: var(--gutter); }
/* Wired into the shared [data-scroller] system (drag-to-scroll + the slim
   progress bar below, no arrows). The strip keeps its own layout; these just
   add the grab cursor and the drag-suppression the scroller JS relies on — it
   toggles .is-dragging on this element while a drag is in progress. */
.social-strip { cursor: grab; }
.social-strip.is-dragging { cursor: grabbing; }
.social-strip.is-dragging * { user-select: none; pointer-events: none; }
.social-strip .tile {
  flex: 0 0 auto;
  width: 140px;
  display: block;
}
/* square media box - aspect-ratio on the container (reliable), image fills it.
   Works for the feed (<div.tile__media>) and the fallback (<picture>). */
.social-strip .tile__media,
.social-strip .tile > picture {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.social-strip .tile__media img,
.social-strip .tile > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.social-strip .tile:hover .tile__media img,
.social-strip .tile:hover > picture img { transform: scale(1.04); }
/* caption - the Instagram post text, sat below the image */
.social-strip .tile__cap {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}
.social-strip .tile__cap-ig {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--muted);
}
.social-strip .tile__cap-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 700px) {
  .social-strip .tile { width: 180px; }
}
@media (min-width: 1025px) {
  /* Stays one edge-to-edge horizontal scroller at every width - no grid. The
     band sits outside .container so it already bleeds the full viewport; here we
     just grow the tiles and captions to suit the larger screen. */
  .social-strip .tile { width: 200px; }
  /* roomier captions to match the bigger tiles */
  .social-strip .tile__cap {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }
  .social-strip .tile__cap-ig { width: 14px; height: 14px; }
  .social-strip .tile__cap-text { -webkit-line-clamp: 4; }
}
@media (min-width: 1500px) {
  .social-strip .tile { width: 224px; }
}

/* ===================================================================
   16. REVIEWS band
   =================================================================== */
.reviews {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.reviews__layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 1025px) {
  .reviews__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: stretch;
  }
}

.reviews-aggregate {
  background: var(--blue-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.reviews-aggregate::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: var(--blue);
  border-radius: 50%;
  opacity: 0.16;
  pointer-events: none;
}
.reviews-aggregate__score {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 0.95;
  position: relative;
}
.reviews-aggregate__score sup {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
  vertical-align: top;
  line-height: 1.4;
}
.reviews-aggregate__right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reviews-aggregate__top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 2px;
}
.reviews-aggregate__top::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #4FB45A;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(79, 180, 90, 0.25);
}
.reviews-aggregate__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--cream);
}
.reviews-aggregate__stars svg { width: 14px; height: 14px; fill: currentColor; }
.reviews-aggregate__count { font-size: 12px; opacity: 0.92; }
.reviews-aggregate__count strong { font-weight: 700; color: var(--cream); }
.reviews-aggregate__source {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  opacity: 0.85;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 233, 183, 0.2);
  position: relative;
}
.reviews-aggregate__source-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--cream);
}
.reviews-aggregate__source-logo .star-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background: var(--cream);
  color: var(--blue-deep);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}
.reviews-aggregate__cta {
  margin-left: auto;
  color: #fff;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 233, 183, 0.4);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.reviews-aggregate__cta svg { width: 12px; height: 12px; }

@media (min-width: 1025px) {
  .reviews-aggregate {
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .reviews-aggregate::before {
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
  }
  .reviews-aggregate__score { font-size: 72px; line-height: 1; letter-spacing: -0.01em; }
  .reviews-aggregate__score sup { font-size: 22px; margin-left: 4px; }
  .reviews-aggregate__top { font-size: 11px; }
  .reviews-aggregate__top::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(79, 180, 90, 0.25); }
  .reviews-aggregate__stars svg { width: 22px; height: 22px; }
  .reviews-aggregate__count { font-size: 14px; line-height: 1.4; }
  .reviews-aggregate__count strong {
    display: block;
    font-family: 'Oswald', 'Oswald Fallback', sans-serif;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 2px;
  }
  .reviews-aggregate__source {
    margin-top: auto;
    padding-top: 16px;
    grid-column: auto;
    font-size: 12px;
  }
  .reviews-aggregate__source-logo { font-size: 13px; }
  .reviews-aggregate__source-logo .star-mark { width: 14px; height: 14px; font-size: 10px; }
  .reviews-aggregate__cta { font-size: 12px; }
}

/* Review cards — wrapped in .scroll-wrap.reviews-scroll for arrows + track.
   min-width:0 lets the wrap shrink instead of forcing its parent (column flex
   on mobile, grid on desktop) wide enough to fit the un-scrolled card row.
   align-self:start only applies on desktop, where the parent is a grid with
   align-items:stretch — without it the wrap would stretch tall to match the
   aggregate panel and push the scroll-track far below the cards. On mobile
   the parent is flex-direction:column where the default stretch is correct
   for full-width; overriding to "start" there shrinks the wrap to its content
   width and the cards overflow the viewport. */
.reviews-scroll { min-width: 0; }
@media (min-width: 1025px) {
  .reviews-scroll { align-self: start; }
}
.reviews-cards {
  display: flex;
  gap: 12px;
  padding: 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-left: var(--gutter);
}
.reviews-cards::-webkit-scrollbar { display: none; }
.reviews-cards > *:first-child { margin-left: var(--gutter); }
.reviews-cards > *:last-child { margin-right: var(--gutter); }

@media (min-width: 1025px) {
  .reviews-cards {
    gap: 18px;
    padding: 0;
  }
  .reviews-cards > *:first-child,
  .reviews-cards > *:last-child {
    margin: 0;
  }
}

.review-card {
  flex: 0 0 280px;
  background: var(--cream-soft);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-snap-align: start;
}
.review-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--star);
}
.review-card__stars svg { width: 12px; height: 12px; fill: currentColor; }
.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--blue-deep);
  font-weight: 600;
}
.review-card__verified svg { width: 11px; height: 11px; }
.review-card__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.review-card__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1;
  margin: 0;
}
.review-card__product {
  font-size: 11px;
  color: var(--blue-deep);
  font-weight: 600;
  padding: 5px 8px;
  background: rgba(40, 82, 123, 0.08);
  border-radius: 4px;
  align-self: flex-start;
}
.review-card__meta {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.review-card__meta strong { color: var(--ink-soft); font-weight: 700; }

@media (min-width: 1025px) {
  .review-card { flex: 0 0 320px; padding: 24px 22px; gap: 14px; }
  .review-card__stars svg { width: 14px; height: 14px; }
  .review-card__verified { font-size: 11px; gap: 5px; }
  .review-card__verified svg { width: 12px; height: 12px; }
  .review-card__headline { font-size: 18px; }
  .review-card__body { font-size: 14px; line-height: 1.55; }
  .review-card__product { font-size: 12px; padding: 6px 10px; }
  .review-card__meta { font-size: 12px; padding-top: 12px; gap: 8px; }
}

/* ===================================================================
   16b. PRODUCT REVIEW PHOTO CARDS — full-width scroller of 5*
        customer photos, image links to full size, body links to product
   =================================================================== */
.prod-reviews-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Full-width modifier — scroller breaks out of .container so the strip runs
   to the viewport edge on desktop. The first card is inset from the viewport
   edge by the base scroller's --gutter rather than lining up with the
   section-head; trailing cards extend off-screen for a "more to see" peek.

   This strip has no arrow buttons (see index.html): there's nowhere to put them
   that doesn't cover a photo, since the bleed either side is only
   (100vw - container)/2 — as little as 10px at a 1200px viewport. Dragging, the
   wheel and the scrollbar track drive it instead. */
@media (min-width: 1025px) {
  .prod-reviews-section--full-width .prod-reviews-scroll .scroll-list > *:last-child {
    margin-right: calc((100vw - var(--container)) / 2);
  }
}

.prod-reviews > .prod-review-card { width: 240px; }
@media (min-width: 700px)  { .prod-reviews > .prod-review-card { width: 280px; } }
@media (min-width: 1025px) { .prod-reviews > .prod-review-card { width: 320px; } }

.prod-review-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
}
.prod-review-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--cream-soft);
  overflow: hidden;
}
.prod-review-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.prod-review-card__media:hover img { transform: scale(1.04); }
.prod-review-card__zoom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(40, 82, 123, 0.92);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.9;
  transition: opacity .2s ease, transform .15s ease;
}
.prod-review-card__zoom svg { width: 16px; height: 16px; }
.prod-review-card__media:hover .prod-review-card__zoom { opacity: 1; transform: scale(1.06); }

.prod-review-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
}
.prod-review-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.prod-review-card__stars { display: inline-flex; gap: 2px; color: var(--star); }
.prod-review-card__stars svg { width: 12px; height: 12px; fill: currentColor; }
.prod-review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--blue-deep);
  font-weight: 600;
}
.prod-review-card__verified svg { width: 11px; height: 11px; }
.prod-review-card__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.prod-review-card__meta {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.prod-review-card__meta strong { color: var(--ink-soft); font-weight: 700; }

/* Bottom-bar CTA — primary click affordance, product name is the visual anchor */
.prod-review-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cream-soft);
  border-top: 1px solid var(--border);
  color: var(--blue-deep);
  margin-top: auto;
  transition: background-color .2s ease, color .2s ease;
}
.prod-review-card__cta:hover { background: var(--cream); color: var(--ink); }
.prod-review-card__cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prod-review-card__cta-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.prod-review-card__cta-title {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-review-card__cta-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.prod-review-card__cta:hover .prod-review-card__cta-arrow { transform: translateX(3px); }

@media (min-width: 1025px) {
  .prod-review-card__body { padding: 16px 16px 14px; gap: 10px; }
  .prod-review-card__stars svg { width: 13px; height: 13px; }
  .prod-review-card__text { font-size: 14px; }
  .prod-review-card__meta { font-size: 12px; padding-top: 12px; }
  .prod-review-card__zoom { width: 36px; height: 36px; bottom: 12px; right: 12px; }
  .prod-review-card__zoom svg { width: 18px; height: 18px; }
  .prod-review-card__cta { padding: 14px 16px; }
  .prod-review-card__cta-title { font-size: 16px; }
  .prod-review-card__cta-arrow { width: 20px; height: 20px; }
}

/* ===================================================================
   16c. LIGHTBOX — used by [data-lightbox] anchors (review photos etc).
        Falls back gracefully: anchor still opens in new tab without JS.
   =================================================================== */
.lg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 22, 35, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  cursor: zoom-out;
}
.lg-lightbox.is-open { opacity: 1; visibility: visible; }
.lg-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
  opacity: 0;
  transition: opacity .25s ease;
  display: block;
}
.lg-lightbox__img.is-loaded { opacity: 1; }
.lg-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .2s ease, transform .15s ease;
}
.lg-lightbox__close:hover { background: rgba(255,255,255,0.26); }
.lg-lightbox__close:active { transform: scale(0.94); }
.lg-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lg-lightbox__close svg { width: 20px; height: 20px; }
.lg-lightbox__spinner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lgLightboxSpin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes lgLightboxSpin {
  to { transform: rotate(360deg); }
}

/* ===================================================================
   17. FOOTER
   =================================================================== */
.footer {
  background: var(--blue-darker);
  color: #B7C2D2;
  padding: 36px 0 24px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand {
  grid-column: 1 / -1;
}
.footer__logo {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  color: #fff;
  margin-bottom: 14px;
}
.footer__logo .liberty {
  font-family: 'Quando', serif;
  font-size: 36px;
}
.footer__logo .games {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding-left: 10px;
}
.footer__brand p { font-size: 12.5px; margin: 0 0 18px; max-width: 500px; }
.footer__col h4 {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 700;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a {
  font-size: 13px;
  color: #B7C2D2;
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--cream); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: rgba(183, 194, 210, 0.6);
}
.footer__bottom a { color: rgba(183, 194, 210, 0.85); }

@media (min-width: 700px) {
  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
  }
  .footer__brand { grid-column: auto; }
}
@media (min-width: 1025px) {
  .footer { padding: 64px 0 28px; }
  .footer__top { gap: 48px; margin-bottom: 40px; padding-bottom: 40px; }
}
/* ===================================================================
   DUAL PROMO — Sale + Graded side-by-side tiles (replaces the old
   full-width .promo-banner on the homepage). Image-bg cards with a
   directional overlay and text on top.
   =================================================================== */
.dual-promo-section { padding: 35px 0; }
@media (min-width: 700px) {
  .dual-promo-section { padding: 50px 0; }
}
.dual-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.dual-promo__card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dual-promo__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.dual-promo__card:active { transform: translateY(-1px); }
.dual-promo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.dual-promo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dual-promo__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.dual-promo__card--sale .dual-promo__overlay {
  background: linear-gradient(90deg, var(--sale) 0%, rgba(200, 57, 43, 0.82) 42%, rgba(200, 57, 43, 0.12) 100%);
}
.dual-promo__card--graded .dual-promo__overlay {
  background: linear-gradient(90deg, #1f6f63 0%, rgba(31, 111, 99, 0.82) 42%, rgba(31, 111, 99, 0.12) 100%);
}
.dual-promo__content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  max-width: 82%;
}
.dual-promo__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: #fff;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.dual-promo__card--sale .dual-promo__eyebrow { color: var(--sale); }
.dual-promo__card--graded .dual-promo__eyebrow { color: #1f6f63; }
.dual-promo__headline {
  font-family: 'Oswald', 'Oswald Fallback', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.04;
  margin: 0 0 10px;
  color: #fff;
}
.dual-promo__amount { font-size: 1.28em; letter-spacing: -0.02em; }
.dual-promo__sub {
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  opacity: 0.94;
  margin: 0 0 22px;
}
.dual-promo__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  align-items: center;
  gap: 8px;
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  transition: transform .15s ease, background-color .2s ease;
}
.dual-promo__card--sale .dual-promo__cta { color: var(--sale); }
.dual-promo__card--graded .dual-promo__cta { color: #1f6f63; }
.dual-promo__card:hover .dual-promo__cta { background: var(--cream); }
.dual-promo__cta svg { width: 18px; height: 18px; }

@media (min-width: 700px) {
  .dual-promo {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .dual-promo__card { min-height: 300px; }
  .dual-promo__content { padding: 32px; max-width: 88%; }
  .dual-promo__headline { font-size: 34px; }
}
@media (min-width: 1025px) {
  .dual-promo__card { min-height: 320px; }
  .dual-promo__content { padding: 36px; }
}

/* ===================================================================
   Hero "Browse the range" CTA -> smooth-scroll to "What are you playing"
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#what-are-you-playing { scroll-margin-top: 80px; }
@media (min-width: 1025px) {
  #what-are-you-playing { scroll-margin-top: 96px; }
}