:root{
  --navy:#07192f;
  --navy2:#0e2a49;
  --accent:#6d9bc6;
  --paper:#f6f7f8;
  --ink:#122234;
  --muted:#71808d;
  --line:#dce3e8;
  --white:#fff;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,Arial,sans-serif;
  --radius-lg:24px;
  --radius-md:12px;
  --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(18,34,52,.05),0 1px 2px rgba(18,34,52,.04);
  --shadow-md:0 14px 32px -12px rgba(18,34,52,.20),0 4px 10px -4px rgba(18,34,52,.08);
  --shadow-lg:0 28px 56px -20px rgba(18,34,52,.30);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden; /* hard guarantee against any sideways scroll from an absolutely-positioned hero element, regardless of viewport width */
}

button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
a{text-decoration:none;color:inherit}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ==========================================================================
   Global CTA system: one shared shape (radius, padding, weight, letter-
   spacing, hover-lift) for every pill-style call-to-action across hero
   modules and cards, so they read as one button family. Individual classes
   below only set color/background/border for their surface — never
   geometry — which is what previously drifted (radius-md vs pill, 12/13/
   13.5px type, weight 600 vs 700) across gameday/brand/SEC/mystery/
   cardstorm/partner CTAs built in separate passes. */
.gameday-cta,
.brand-hero-cta,
.sec-tailgate-cta,
.mystery-cta,
.hero-explore-cta,
.cardstorm-module-cta,
.partner-cta a,.partner-cta span{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-pill);
  padding:14px 26px;
  font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.gameday-cta:hover,
.brand-hero-cta:hover,
.sec-tailgate-cta:hover,
.mystery-cta:hover,
.hero-explore-cta:hover,.hero-explore-cta:focus-visible,
.cardstorm-module-cta:hover,.cardstorm-module-cta:focus-visible,
.partner-cta a:hover{
  transform:translateY(-2px);
}

.shell{max-width:1500px;margin:auto;padding:0 40px 48px}

.topbar{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(246,247,248,.94);
  backdrop-filter:blur(18px);
  z-index:50;
}

.teaser-bar{
  text-align:center;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy2);
  background:linear-gradient(90deg,rgba(109,155,198,.07),rgba(109,155,198,.15),rgba(109,155,198,.07));
  padding:10px 16px;
  border-bottom:1px solid rgba(18,34,52,.06);
}

.brand{display:flex;align-items:center;gap:18px}
.brand-mark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:66px;
  width:66px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  font:600 26px var(--serif);
  color:var(--navy);
  transition:filter .18s var(--ease);
}
.brand-mark img{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  object-fit:cover;
  display:block;
  transition:opacity .2s var(--ease);
}
.brand-mark img.brand-mark-hover{opacity:0}
.brand:hover .brand-mark img.brand-mark-hover,
.brand:focus-visible .brand-mark img.brand-mark-hover,
.brand:active .brand-mark img.brand-mark-hover{opacity:1}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark,
.brand:active .brand-mark{
  filter:drop-shadow(0 0 8px rgba(88,190,255,.9)) drop-shadow(0 0 18px rgba(88,190,255,.55));
}
.brand-name{font-weight:700;letter-spacing:.14em;font-size:23px;color:var(--ink)}

.nav{display:flex;gap:6px}
.nav a{
  padding:11px 18px;
  color:#667583;
  border-radius:var(--radius-pill);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav a:hover{background:#eef1f4;color:var(--ink)}
.nav a.current{background:#e9eef2;color:#142638}

.saved{
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:11px 18px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.saved:hover{border-color:#c3cdd5;background:#fff}

/* --- Shop mega-menu (desktop) --- */
.shop-mega{position:relative}
.shop-mega-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;color:#667583;background:none;border:none;font:inherit;cursor:pointer;
  border-radius:var(--radius-pill);transition:background .2s var(--ease),color .2s var(--ease);
}
.shop-mega-trigger:hover,.shop-mega:focus-within .shop-mega-trigger,.shop-mega.is-open .shop-mega-trigger{background:#eef1f4;color:var(--ink)}
.shop-mega-trigger .caret{
  display:inline-block;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .18s var(--ease);
}
.shop-mega:focus-within .shop-mega-trigger .caret,.shop-mega.is-open .shop-mega-trigger .caret{transform:rotate(180deg)}
.shop-mega-panel{
  position:absolute;top:calc(100% + 10px);left:0;
  width:min(760px,86vw);
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px rgba(10,20,35,.16);
  padding:26px 28px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px 20px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
  z-index:60;
}
.shop-mega:hover .shop-mega-panel,.shop-mega:focus-within .shop-mega-panel,.shop-mega.is-open .shop-mega-panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.shop-mega-col h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8996a3;margin-bottom:10px}
.shop-mega-col a{display:block;padding:6px 0;color:var(--ink);font-size:14.5px;border-radius:6px}
.shop-mega-col a:hover{color:var(--accent,#2f6fed);text-decoration:underline}
.shop-mega-viewall{
  grid-column:1/-1;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.shop-mega-viewall a{font-weight:700;color:var(--ink)}
.shop-mega-viewall small{color:#8996a3}

/* --- Shop entry point (mobile) --- */
.shop-mobile-trigger{display:none}
.shop-mobile-panel{display:none}
@media(max-width:680px){
  .shop-mobile-trigger{
    display:inline-flex;align-items:center;gap:6px;
    padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);
    background:#fff;color:var(--ink);font:600 13px var(--sans,inherit);cursor:pointer;
  }
  .shop-mobile-panel{
    position:fixed;inset:0;top:0;
    background:rgba(8,14,24,.5);
    z-index:80;
    display:none;
  }
  .shop-mobile-panel.is-open{display:block}
  .shop-mobile-sheet{
    position:absolute;left:0;right:0;top:0;
    max-height:88vh;overflow-y:auto;
    background:#fff;border-radius:0 0 22px 22px;
    padding:18px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .shop-mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .shop-mobile-sheet-head strong{font:700 17px var(--serif)}
  .shop-mobile-close{border:none;background:none;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;color:#667583}
  .shop-mobile-group summary{
    list-style:none;display:flex;align-items:center;justify-content:space-between;
    padding:14px 2px;font-weight:700;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);
  }
  .shop-mobile-group summary::-webkit-details-marker{display:none}
  .shop-mobile-group summary:after{content:"+";font-size:18px;color:#8996a3}
  .shop-mobile-group[open] summary:after{content:"–"}
  .shop-mobile-group a{display:block;padding:9px 4px;color:#3a4551;font-size:14.5px}
  .shop-mobile-viewall{
    display:block;margin-top:14px;padding:13px;text-align:center;
    background:var(--navy,#142638);color:#fff;border-radius:var(--radius-pill);font-weight:700;
  }
}

.page{padding-top:40px}

.hero{
  min-height:680px;
  border-radius:32px;
  background:
    radial-gradient(ellipse 900px 620px at 62% 30%,rgba(88,150,210,.22),transparent 60%),
    radial-gradient(ellipse 700px 500px at 18% 78%,rgba(60,110,170,.14),transparent 65%),
    radial-gradient(ellipse 1400px 900px at 50% -10%,#0f2c4d,transparent 55%),
    linear-gradient(160deg,#081c33 0%,#050f1e 55%,#02070f 100%);
  color:#fff;
  padding:clamp(56px,7vw,110px) clamp(32px,6vw,100px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.azul-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.azul-nodes{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.azul-nodes .n-line{stroke:rgba(120,170,225,.28);stroke-width:1}
.azul-nodes .n-dot{fill:rgba(170,205,240,.65)}
.azul-hero-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 75% at 50% 45%,transparent 45%,rgba(2,6,14,.65) 100%);
}
.azul-hero-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:no-preference){
  .azul-nodes{animation:azulDrift 50s ease-in-out infinite alternate}
}
@keyframes azulDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-1.2%,1%) scale(1.015)}
}
.hero-copy{position:relative;z-index:3;max-width:720px;display:flex;flex-direction:column;align-items:center}

/* Two-column hero: copy left, large dominant mascot right. Falls back to
   the original centered single-column rules above on pages/states that
   don't opt into .hero-split. */
.hero.hero-split{
  display:grid;
  grid-template-columns:1.1fr auto;
  align-items:center;
  gap:clamp(32px,5vw,72px);
  text-align:left;
  justify-content:normal;
}
.hero-split .hero-copy{align-items:flex-start;max-width:560px;margin:0;order:1}
.hero-split .hero-mascot-wrap{display:flex;justify-content:center;position:relative;z-index:3;order:2}
.hero-split .hero-mascot{width:clamp(260px,26vw,420px);height:clamp(260px,26vw,420px);margin:0}

.hero-mascot{
  position:relative;
  width:220px;
  height:220px;
  margin:0 auto 30px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.05),
    0 0 90px rgba(109,166,225,.5),
    0 0 160px rgba(88,150,210,.25),
    var(--shadow-lg);
  transition:filter .32s var(--ease),box-shadow .32s var(--ease),transform .32s var(--ease);
  cursor:pointer;
}
.hero-mascot:before{
  content:"";
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(109,166,225,.35),transparent 70%);
  z-index:-1;
  filter:blur(6px);
}
.hero-mascot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .36s var(--ease);
}
.hero-mascot img.hero-mascot-hover{opacity:0}
.hero-mascot:hover img.hero-mascot-hover,
.hero-mascot:active img.hero-mascot-hover,
.hero-mascot:focus-visible img.hero-mascot-hover,
.hero-mascot.is-active img.hero-mascot-hover{opacity:1}
.hero-mascot:hover,
.hero-mascot:active,
.hero-mascot:focus-visible,
.hero-mascot.is-active{
  transform:scale(1.035);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.1),
    0 0 110px rgba(109,166,225,.6),
    0 0 200px rgba(88,150,210,.35),
    var(--shadow-lg);
  filter:
    drop-shadow(0 0 22px rgba(88,190,255,1))
    drop-shadow(0 0 55px rgba(88,190,255,.7))
    drop-shadow(0 0 100px rgba(88,190,255,.4));
}
.hero-mascot:focus-visible{outline:2px solid rgba(120,190,255,.85);outline-offset:8px}
@media(prefers-reduced-motion:reduce){
  .hero-mascot,.hero-mascot img{transition:opacity .01ms linear}
  .hero-mascot:hover,.hero-mascot:active,.hero-mascot:focus-visible,.hero-mascot.is-active{transform:none}
}

.hero-explore-cta{
  margin-top:18px;
  background:transparent;border:1.5px solid rgba(150,195,240,.55);
  color:#dceaf9;
}
.hero-explore-cta:hover,.hero-explore-cta:focus-visible{
  background:rgba(120,180,240,.14);border-color:rgba(150,195,240,.9);
}

@media(max-width:780px){
  .hero.hero-split{grid-template-columns:1fr;text-align:center}
  .hero-split .hero-mascot-wrap{order:-1}
  .hero-split .hero-copy{align-items:center;max-width:100%}
  .hero-split .hero-mascot{width:clamp(180px,52vw,260px);height:clamp(180px,52vw,260px)}
}

.eyebrow{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:#7497b8;
  margin:0 0 20px;
}
.hero .eyebrow{color:#8fbdea;letter-spacing:.28em}

.hero h1{
  font:600 clamp(34px,4.6vw,58px)/1.1 var(--serif);
  letter-spacing:-.02em;
  margin:0 0 18px;
}
.hero h1 em{font-style:normal;color:#a4c8e6}

.lede{font-size:16.5px;line-height:1.7;color:#b9c8d8;max-width:520px;margin:0 auto}

.ask{
  display:grid;
  grid-template-columns:1fr auto;
  max-width:640px;
  width:100%;
  background:rgba(10,22,38,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
  padding:8px;
  border-radius:var(--radius-lg);
  margin-top:36px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
}
.ask input{
  border:0;
  outline:0;
  padding:20px 22px;
  min-width:0;
  color:#fff;
  -webkit-text-fill-color:#fff;
  caret-color:#2f7cff;
  font-size:16px;
  background:transparent;
}
.ask input::placeholder{color:#8fa9c4;opacity:1}
.ask input::selection{background:#2f7cff;color:#fff}
.ask input:-webkit-autofill,
.ask input:-webkit-autofill:hover,
.ask input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  caret-color:#2f7cff;
  transition:background-color 9999s ease-in-out 0s;
}
.ask button,.primary{
  border:0;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  color:#fff;
  border-radius:var(--radius-md);
  padding:19px 30px;
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 1px 2px rgba(7,25,47,.18),inset 0 1px 0 rgba(255,255,255,.10);
  transition:box-shadow .2s var(--ease),transform .15s var(--ease),background .2s var(--ease);
}
.ask button:hover,.primary:hover{
  background:linear-gradient(180deg,#123258,var(--navy2));
  box-shadow:0 6px 16px -6px rgba(7,25,47,.4),inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.ask button:active,.primary:active{transform:translateY(0)}
.hero .ask button{background:#fff;color:var(--navy);border-left:1px solid var(--line);box-shadow:none}
.hero .ask button:hover{background:#f3f6f8;box-shadow:none;transform:none}

.quick{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.quick a{
  border:1px solid rgba(255,255,255,.3);
  padding:10px 15px;
  border-radius:var(--radius-pill);
  color:#c3d2df;
  font-size:12px;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.quick a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.portal{
  min-height:190px;
  background:#fff;
  border:1px solid rgba(18,34,52,.06);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.portal:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.portal small{font-size:10px;letter-spacing:.16em;color:#80909e;text-transform:uppercase}
.portal strong{font:600 27px var(--serif);color:var(--ink)}
.portal span{font-size:12px;color:#70808e}

.page-title{display:flex;align-items:start;gap:36px;margin-bottom:40px}
.back{color:#71808e;padding-top:9px;transition:color .2s var(--ease)}
.back:hover{color:var(--navy)}
.page-title h1{
  font:600 clamp(44px,5.5vw,80px)/.98 var(--serif);
  letter-spacing:-.035em;
  margin:0;
  color:var(--ink);
}
.sub{max-width:720px;color:var(--muted);line-height:1.7}

.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.solution{
  min-height:300px;
  border-radius:22px;
  padding:26px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  transition:transform .25s var(--ease);
}
.solution:hover{transform:translateY(-3px)}
.solution:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,20,38,.88),rgba(5,20,38,.03));
}
.solution>*{position:relative;z-index:2}
.solution small{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.solution strong{font:600 29px var(--serif)}
.solution span{font-size:12px;color:#d6e0e7}
.school{background:linear-gradient(135deg,#496174,#adbec5)}
.sec{background:linear-gradient(135deg,#112d4b,#65849b)}
.travel{background:linear-gradient(135deg,#466a78,#c5d4d1)}
.beach{background:linear-gradient(135deg,#4d9db4,#d9e8de)}
.home{background:linear-gradient(135deg,#5c6871,#c5bbae)}
.gifts{background:linear-gradient(135deg,#314f6d,#a8b6c7)}

.mission-hero{
  min-height:380px;
  border-radius:32px;
  background:var(--navy);
  color:#fff;
  padding:56px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
}
.mission-hero h1{font:600 clamp(48px,6vw,84px)/.97 var(--serif);margin:0 0 18px}
.mission-hero p{color:#c7d2dc;line-height:1.7;max-width:620px}
.mission-art{
  height:240px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:radial-gradient(circle,rgba(99,147,189,.28),transparent 60%);
}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 34px}
.chips button,.chips a{
  border:1px solid var(--line);
  background:#fff;
  border-radius:var(--radius-pill);
  padding:11px 16px;
  font-size:13px;
  color:var(--ink);
  display:inline-block;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.chips button:hover,.chips a:hover{border-color:var(--navy);color:var(--navy)}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{
  border:1px solid rgba(18,34,52,.06);
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.product:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.product-image{
  height:220px;
  position:relative;
  overflow:hidden;
  background:#fff;
  display:grid;
  place-items:center;
  color:rgba(7,25,47,.5);
}
.product-image svg{width:30%;height:30%;min-width:56px;min-height:56px}
.product-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px;box-sizing:border-box}
.product-body{padding:30px;background:#fff;position:relative;z-index:1}
.product-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 10px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#84909b;
}
/* Line-clamped as a hard cap on both title and description -- a shared
   safety net for every page using this card (SEC, Topps, brand pages,
   Discover), regardless of how long the underlying catalog/feed text is.
   Clamping only engages past 3/2 lines, so normal-length copy is unaffected
   on desktop; the full text stays reachable via the title attribute set on
   the heading and via the card's own click-through to product detail. */
.product h3{
  font:600 22px var(--serif);margin:14px 0 10px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:normal;
}
.product p{
  font-size:13px;color:#73818e;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;word-break:normal;
}
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:22px;
  gap:12px;
  flex-wrap:wrap;
}
.product-foot strong{font:600 19px var(--serif);color:var(--ink)}
.product-foot button{
  border:0;
  background:linear-gradient(180deg,var(--navy2),var(--navy));
  color:#fff;
  border-radius:var(--radius-md);
  padding:13px 22px;
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  min-height:44px;
  max-width:100%;
  box-sizing:border-box;
  box-shadow:0 1px 2px rgba(7,25,47,.16),inset 0 1px 0 rgba(255,255,255,.08);
  transition:box-shadow .2s var(--ease),transform .15s var(--ease);
}
.product-foot button:hover:not(:disabled){
  box-shadow:0 6px 14px -6px rgba(7,25,47,.38),inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.product-foot button:active:not(:disabled){transform:translateY(0)}
.product-foot button:disabled{background:#d5dbe1;box-shadow:none;cursor:not-allowed}

/* SEC Shop */
.sec-strike{text-decoration:line-through;color:#9aa7b1;font-size:13px;margin-left:6px}
.sec-team-badge{
  display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.sec-disclaimer{font-size:12px;color:#8a97a2;max-width:640px;line-height:1.6;margin-top:10px}

.sec-hero{
  border-radius:32px;padding:48px 52px;color:#fff;margin-bottom:8px;
  box-shadow:var(--shadow-md);
}
.sec-hero .eyebrow{color:rgba(255,255,255,.7)}
.sec-hero h1,.sec-hero h2{font:600 clamp(34px,4.4vw,54px)/1.05 var(--serif);margin:6px 0 14px}
.sec-hero p{color:rgba(255,255,255,.85);line-height:1.7;max-width:680px;margin:0}

/* Real product photography as a brand-page hero backdrop, never fabricated
   lifestyle imagery -- see renderBrandPage() for the real-image pick. */
.sec-hero.brand-hero-photo{
  position:relative;overflow:hidden;
  background:#0a1220;
}
.sec-hero.brand-hero-photo:before{
  content:"";position:absolute;inset:0;
  background-image:var(--brand-hero-image);background-size:cover;background-position:center;
  opacity:.34;filter:saturate(.9);
}
.sec-hero.brand-hero-photo:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,12,22,.94) 0%,rgba(6,12,22,.75) 40%,rgba(6,12,22,.35) 100%);
}
.sec-hero.brand-hero-photo > *{position:relative;z-index:1}

/* Real AZUL-at-tailgate hero photography, one per SEC team (assets/sec-
   <slug>-hero.webp). Unlike .brand-hero-photo (a dimmed 34%-opacity product
   photo backdrop), this shows the photograph at full strength -- AZUL and
   the tailgate scene stay vivid on the right, with only a left-to-right
   cinematic gradient (strong left, clear by the time it reaches AZUL) so
   the copy stays readable without flattening the photography into a dark
   rectangle. Per-team background-position (--team-hero-pos, set in JS) is
   what keeps AZUL's face in frame across 16 differently-composed photos. */
.sec-hero.team-photo-hero{
  position:relative;overflow:hidden;min-height:440px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  background:#0a1220;
}
.sec-hero.team-photo-hero:before{
  content:"";position:absolute;inset:0;
  background-image:var(--brand-hero-image);
  background-size:cover;
  background-position:var(--team-hero-pos,center 20%);
}
.sec-hero.team-photo-hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,8,16,.88) 0%,rgba(4,8,16,.62) 30%,rgba(4,8,16,.22) 55%,transparent 78%);
}
.sec-hero.team-photo-hero > *{position:relative;z-index:1}
.sec-hero.team-photo-hero .sec-tailgate-headline{max-width:520px}
.sec-hero.team-photo-hero .sec-tailgate-sub{max-width:420px}
@media(max-width:680px){
  .sec-hero.team-photo-hero{min-height:0;padding-top:40px;padding-bottom:36px}
  .sec-hero.team-photo-hero:after{background:linear-gradient(180deg,rgba(4,8,16,.75) 0%,rgba(4,8,16,.55) 55%,rgba(4,8,16,.82) 100%)}
  .sec-hero.team-photo-hero:before{background-position:var(--team-hero-pos-mobile,var(--team-hero-pos,center 15%))}
}

.sec-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 12px}
.sec-team-card{
  display:block;border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid rgba(18,34,52,.06);box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.sec-team-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.sec-team-card-top{
  height:96px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sec-c1),var(--sec-c2));
}
.sec-team-initial{font:700 30px var(--serif);color:rgba(255,255,255,.92);letter-spacing:.02em}
.sec-team-card-body{padding:20px 22px}
.sec-team-card-body h3{font:600 19px var(--serif);margin:0 0 6px;color:var(--ink)}
.sec-team-card-body p{font-size:12.5px;color:#78858f;margin:0 0 12px}
.sec-team-cta{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em}

.sec-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}
.sec-tabs button{
  border:1px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  padding:10px 16px;font-size:13px;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.sec-tabs button:hover{border-color:var(--navy);color:var(--navy)}
.sec-tabs button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.sec-tab-count{opacity:.65;font-size:11px;margin-left:2px}

.sec-load-more-wrap{display:flex;justify-content:center;margin:36px 0 8px}
.sec-load-more-wrap button{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:var(--radius-pill);padding:13px 28px;font-weight:600;font-size:13px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sec-load-more-wrap button:hover{border-color:var(--navy);color:var(--navy)}

@media(max-width:950px){
  .sec-team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .sec-hero{padding:32px 24px;border-radius:24px}
  .sec-team-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Global design system: one consistent rule for every section heading
   site-wide, replacing 35 hand-typed inline "font:600 30px..." styles that
   had drifted into 4 different sizes and 6 different margins across 19
   pages. Responsive clamp() where the inline styles were flat/non-scaling. */
.section-heading{
  font:600 clamp(24px,3vw,32px)/1.2 var(--serif);
  margin:48px 0 6px;
  color:var(--ink);
  letter-spacing:-.01em;
}
.section-heading:first-child{margin-top:0}
.section-heading + .sub{margin-top:-8px}

/* Homepage: "Choose your world" destination cards */
.section-kicker{
  font:600 13px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#8a97a2;
  text-align:center;margin:52px 0 26px;
}
.destination-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 0 34px}
.destination-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(165deg,#0c1524,#050a13);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;color:#fff;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.destination-card:hover,.destination-card:focus-visible{
  transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(109,166,225,.55);
}
.destination-card:hover .destination-cta,.destination-card:focus-visible .destination-cta{color:#fff}
.destination-media{height:120px;display:grid;place-items:center;position:relative;overflow:hidden}
.destination-media:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.28) 100%);
}

/* SEC Only: typographic mark on a deep crimson field -- no team/league
   logos used (none approved for this context), premium type treatment
   instead of a football emoji. */
.dest-media-sec{background:radial-gradient(circle at 50% 20%,rgba(139,26,43,.65),transparent 72%),linear-gradient(165deg,#2a0509,#0c0203)}
.dest-media-sec:before{
  content:"SEC";position:relative;z-index:1;
  font:800 34px var(--serif);letter-spacing:.12em;color:rgba(255,255,255,.92);
  text-shadow:0 0 30px rgba(220,60,80,.6);
}
.destination-card:hover .dest-media-sec:before{text-shadow:0 0 40px rgba(220,60,80,.85)}

/* Mystery Boxes: a dark container with escaping purple/blue light and a
   restrained question-mark, instead of a gift emoji. */
.dest-media-boxes{background:radial-gradient(circle at 50% 65%,rgba(109,40,217,.5),transparent 70%),linear-gradient(165deg,#150b2b,#050208)}
.dest-media-boxes:before{
  content:"";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:64px;height:44px;border-radius:6px;
  background:linear-gradient(155deg,#241241,#0c0618);
  border:1px solid rgba(168,120,255,.5);
  box-shadow:0 0 26px rgba(139,92,246,.55),0 0 60px rgba(88,60,220,.3);
}
.dest-media-boxes .dest-media-mark{
  position:relative;z-index:1;font:700 26px var(--serif);color:#c9b3ff;
  text-shadow:0 0 18px rgba(180,140,255,.9);margin-bottom:16px;
}
.destination-card:hover .dest-media-boxes:before{box-shadow:0 0 36px rgba(139,92,246,.75),0 0 90px rgba(88,60,220,.45)}

/* Sports Cards: a small fanned card stack instead of a fire emoji. */
.dest-media-cards{background:radial-gradient(circle at 50% 30%,rgba(194,65,12,.45),transparent 70%),linear-gradient(165deg,#2a1204,#0c0603)}
.dest-card-stack{position:relative;width:56px;height:74px;display:block}
.dest-card-stack span{
  position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(155deg,#3a2210,#1a0f06);
  border:1px solid rgba(255,170,90,.45);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .28s var(--ease);
}
.dest-card-stack span:nth-child(1){transform:rotate(-10deg) translateX(-10px)}
.dest-card-stack span:nth-child(2){transform:rotate(0deg)}
.dest-card-stack span:nth-child(3){transform:rotate(10deg) translateX(10px)}
.destination-card:hover .dest-card-stack span:nth-child(1){transform:rotate(-16deg) translateX(-15px)}
.destination-card:hover .dest-card-stack span:nth-child(3){transform:rotate(16deg) translateX(15px)}

.destination-media-logo{height:130px;background:#000;overflow:hidden}
.destination-media-logo img{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.92;transform:scale(1.35);transition:transform .32s var(--ease)}
.destination-card:hover .destination-media-logo img{transform:scale(1.44)}
.destination-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.destination-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffd60a;margin-bottom:2px;
}
.destination-body h3{font:600 22px var(--serif);margin:0}
.destination-body p{font-size:13px;color:rgba(255,255,255,.68);margin:0;line-height:1.5}
.destination-cta{
  margin-top:auto;padding-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#8fbdea;transition:color .25s var(--ease);
}
.dest-cardstorm .destination-cta{color:#ffd60a}

.trust-bar{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin:6px 0 40px;padding:22px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{text-align:center;max-width:220px}
.trust-item strong{display:block;font:600 14px var(--serif);color:var(--ink);margin-bottom:3px}
.trust-item span{display:block;font-size:12px;color:var(--muted)}

/* Today's Top Finds -- horizontal product rail */
.top-finds-rail-wrap{position:relative;margin:0 0 12px}
.top-finds-rail{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;
  scrollbar-width:none;
}
.top-finds-rail::-webkit-scrollbar{display:none}
.top-find-card{
  flex:0 0 220px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.top-find-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.top-find-image{height:150px;background:#f3f5f7;position:relative;overflow:hidden}
.top-find-image img{width:100%;height:100%;object-fit:cover;display:block}
.top-find-body{padding:14px 16px 16px}
.top-find-brand{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8996a3;font-weight:700}
.top-find-body h3{font:600 15px var(--serif);margin:5px 0 10px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.top-find-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.top-find-foot strong{font:700 15px var(--serif);color:var(--ink)}
.top-find-foot button{
  border:0;background:var(--navy);color:#fff;border-radius:var(--radius-pill);
  padding:8px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.top-finds-nav{
  position:absolute;top:75px;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  box-shadow:var(--shadow-sm);font-size:18px;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
}
.top-finds-nav.prev{left:-14px}
.top-finds-nav.next{right:-14px}
.top-finds-nav:hover{box-shadow:var(--shadow-md)}
@media(max-width:680px){
  .top-finds-nav{display:none}
  .top-find-card{flex-basis:170px}
}

/* AZUL Discovery Circle -- a connected flow, not a numbered list */
.discovery-circle{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
  margin:8px 0 48px;padding:36px 24px 8px;
}
.discovery-path{position:absolute;top:0;left:0;width:100%;height:60px;overflow:visible}
.discovery-path line{
  stroke:url(#none);stroke:rgba(109,166,225,.4);stroke-width:2;stroke-dasharray:4 8;
}
.discovery-node{position:relative;text-align:center;padding-top:0}
.discovery-node-mark{
  width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a5f9e,#0c2038);
  border:1px solid rgba(120,180,240,.55);
  box-shadow:0 0 0 6px rgba(255,255,255,1),0 0 22px rgba(88,150,210,.5);
  display:grid;place-items:center;font:700 15px var(--serif);color:#dceaf9;
  position:relative;z-index:1;
}
.discovery-node h3{font:600 16px var(--serif);margin:0 0 6px;color:var(--ink)}
.discovery-node p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
@media(max-width:900px){
  .discovery-circle{grid-template-columns:repeat(2,1fr);gap:28px 18px;padding-top:8px}
  .discovery-path{display:none}
}
@media(max-width:480px){
  .discovery-circle{grid-template-columns:1fr}
}

/* Homepage CardStorm conversion module -- compact, image-forward, distinct
   from the "Choose Your World" CardStorm entry-point card above it. */
.cardstorm-module{
  display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch;
  margin:0 0 48px;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,#0d1b2f,#050b14);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.cardstorm-module:hover{border-color:rgba(255,214,10,.4);box-shadow:var(--shadow-lg)}
.cardstorm-module-copy{padding:38px 40px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.cardstorm-module-badge{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ffd60a;font-weight:700}
.cardstorm-module-copy h2{font:600 30px var(--serif);margin:10px 0 12px;max-width:420px}
.cardstorm-module-copy p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6;max-width:440px;margin:0 0 18px}
.cardstorm-module-price{font:700 30px var(--serif);color:#fff;margin-bottom:18px}
.cardstorm-module-price span{font-size:14px;color:rgba(255,255,255,.6);font-weight:400}
.cardstorm-module-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cardstorm-module-cta.primary{background:#ffd60a;color:#1a1400}
.cardstorm-module-cta.secondary{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.cardstorm-module:hover .cardstorm-module-cta.primary{box-shadow:0 8px 20px -6px rgba(255,214,10,.5)}
.cardstorm-module-fine{font-size:11px;color:rgba(255,255,255,.45);margin:0}
.cardstorm-module-visual{position:relative;overflow:hidden;min-height:220px}
.cardstorm-module-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.cardstorm-module:hover .cardstorm-module-visual img{transform:scale(1.05)}
@media(max-width:780px){
  .cardstorm-module{grid-template-columns:1fr}
  .cardstorm-module-visual{order:-1;height:200px}
  .cardstorm-module-copy{padding:28px 24px}
  .cardstorm-module-copy h2{max-width:100%}
}

/* Floating AZUL home-shortcut -- desktop/tablet only (see JS comment for
   why it's hidden once the mobile-nav bar takes over). */
.floating-azul-home{
  display:none;
}
@media(min-width:681px){
  .floating-azul-home{
    display:block;position:fixed;right:22px;bottom:22px;z-index:55;
    width:64px;height:64px;border-radius:50%;overflow:hidden;
    border:1px solid rgba(120,180,240,.4);
    box-shadow:0 0 0 4px rgba(255,255,255,.06),0 0 20px rgba(88,150,210,.35),var(--shadow-md);
    transition:box-shadow .28s var(--ease),transform .28s var(--ease);
  }
  .floating-azul-home img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    transition:opacity .3s var(--ease);
  }
  .floating-azul-home img.floating-azul-hover{opacity:0}
  .floating-azul-home:hover img.floating-azul-hover,
  .floating-azul-home:focus-visible img.floating-azul-hover{opacity:1}
  .floating-azul-home:hover,.floating-azul-home:focus-visible{
    transform:scale(1.06);
    box-shadow:0 0 0 4px rgba(255,255,255,.1),0 0 32px rgba(88,150,210,.6),var(--shadow-md);
  }
  .floating-azul-home:focus-visible{outline:2px solid rgba(120,190,255,.85);outline-offset:4px}
}
@media(prefers-reduced-motion:reduce){
  .floating-azul-home,.floating-azul-home img{transition:opacity .01ms linear}
  .floating-azul-home:hover,.floating-azul-home:focus-visible{transform:none}
}

.more-explore{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 34px;justify-content:center}
.more-explore a{
  border:1px solid var(--line);background:#fff;color:#556270;
  padding:9px 16px;border-radius:var(--radius-pill);font-size:12.5px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.more-explore a:hover{border-color:var(--navy);color:var(--navy)}

@media(max-width:950px){
  .destination-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .destination-grid{grid-template-columns:1fr}
}

.photo-collage{display:flex;justify-content:center;gap:-10px;margin:-20px 0 36px;flex-wrap:wrap;padding:0 10px}
.photo-collage-card{
  width:120px;height:120px;border-radius:16px;overflow:hidden;background:#fff;
  border:4px solid #fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  margin:0 -14px;transition:transform .2s var(--ease),z-index 0s;
}
.photo-collage-card:hover{transform:translateY(-8px) scale(1.08) rotate(0deg) !important;z-index:9}
.photo-collage-card img{width:100%;height:100%;object-fit:cover;display:block}
.photo-collage-card:nth-child(1){transform:rotate(-9deg)}
.photo-collage-card:nth-child(2){transform:rotate(-4deg) translateY(6px)}
.photo-collage-card:nth-child(3){transform:rotate(2deg) translateY(-6px)}
.photo-collage-card:nth-child(4){transform:rotate(7deg) translateY(6px)}
.photo-collage-card:nth-child(5){transform:rotate(-3deg) translateY(4px)}
.photo-collage-card:nth-child(6){transform:rotate(6deg)}
@media(max-width:680px){
  .photo-collage-card{width:84px;height:84px;margin:0 -10px}
}

/* CardStorm internal page */
.cardstorm-hero{
  display:grid;grid-template-columns:340px 1fr;gap:0;align-items:stretch;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  background:linear-gradient(115deg,#0a0f1f,#1a1030 55%,#2d1454);
  border:1px solid rgba(255,255,255,.08);
}
.cardstorm-hero-logo{width:100%;height:100%;object-fit:cover;object-position:top;min-height:280px}
.cardstorm-hero-copy{padding:40px 44px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative}
.cardstorm-hero-badge{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#ffd60a;margin-bottom:14px;
}
.cardstorm-hero-copy h1{font:600 32px var(--serif);margin:0 0 12px}
.cardstorm-hero-copy p{font-size:14.5px;color:rgba(255,255,255,.75);line-height:1.7;max-width:480px;margin:0}
.cardstorm-hero-cta{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.cardstorm-hero-price{font:600 20px var(--serif);color:#ffd60a}
.cardstorm-price-line{font:600 38px var(--serif);color:var(--ink);margin:6px 0 14px}
.cardstorm-price-line span{font-size:16px;color:#8a97a2;font-family:var(--sans);font-weight:600}
@media(max-width:780px){
  .cardstorm-hero{grid-template-columns:1fr}
  .cardstorm-hero-logo{min-height:200px}
  .cardstorm-hero-copy{padding:28px 26px}
}

/* Shared: generic hub hero, category cards, steps, partner/offer cards */
.hub-hero{border-radius:32px;padding:48px 52px;color:#fff;margin-bottom:8px;box-shadow:var(--shadow-md)}
.hub-hero .eyebrow{color:rgba(255,255,255,.7)}
.hub-hero h1{font:600 clamp(34px,4.4vw,54px)/1.05 var(--serif);margin:6px 0 14px}
.hub-hero p{color:rgba(255,255,255,.85);line-height:1.7;max-width:680px;margin:0}
.hub-disclaimer{font-size:12px;color:rgba(255,255,255,.6);max-width:640px;line-height:1.6;margin-top:14px}

.info-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0}
.info-card{
  display:block;border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid rgba(18,34,52,.06);box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
a.info-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.info-card-top{height:90px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ic1,#243b55),var(--ic2,#0f1c2e))}
.info-card-emoji{font-size:36px;line-height:1}
.info-card-body{padding:18px 20px}
.info-card-body h3{font:600 16.5px var(--serif);margin:0 0 4px;color:var(--ink)}
.info-card-body p{font-size:12px;color:#78858f;margin:0}

.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.step-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 22px}
.step-num{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:#fff;font:600 14px var(--serif);margin-bottom:12px;
}
.step-card h3{font:600 17px var(--serif);margin:0 0 6px;color:var(--ink)}
.step-card p{font-size:13px;color:#6f7e8b;line-height:1.6;margin:0}

.partner-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
}
.partner-card-copy{flex:1 1 320px}
.partner-card h3{font:600 21px var(--serif);margin:0 0 6px;color:var(--ink);display:flex;align-items:center;gap:10px}
.partner-card p{font-size:13px;color:#6f7e8b;line-height:1.6;margin:0}
.partner-status{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
}
.partner-status.status-active{background:#e6f4e8;color:#2e7d32}
.partner-status.status-pending{background:#fdf0e1;color:#b45309}
.partner-status.status-review{background:#eef2f6;color:#556270}
.partner-cta{flex-shrink:0}
.partner-cta a{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff}
.partner-cta span.disabled{background:#eef2f6;color:#9aa7b1;cursor:not-allowed}

.offer-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;margin-bottom:16px}
.offer-card h3{font:600 20px var(--serif);margin:0 0 8px;color:var(--ink)}
.offer-card p{font-size:13.5px;color:#6f7e8b;line-height:1.7;margin:0 0 10px}
.offer-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.offer-meta span{font-size:11px;background:#eef2f6;color:#556270;padding:4px 10px;border-radius:var(--radius-pill)}
.offer-fine{font-size:11.5px;color:#9aa7b1;margin-top:10px}

.filter-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.filter-chip-row a{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:10px 16px;border-radius:var(--radius-pill);font-size:13px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.filter-chip-row a:hover{border-color:var(--navy);color:var(--navy)}

.cross-promo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:linear-gradient(115deg,#0a0f1f,#1a1030 60%,#2d1454);color:#fff;
  border-radius:var(--radius-lg);padding:24px 28px;margin:30px 0;
}
.cross-promo p{margin:0;font-size:14px;max-width:500px}
.cross-promo strong{color:#ffd60a}
.cross-promo a{
  background:#ffd60a;color:#1a1030;font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:12px 22px;border-radius:var(--radius-pill);white-space:nowrap;
}

@media(max-width:950px){
  .info-card-grid{grid-template-columns:repeat(2,1fr)}
  .steps-row{grid-template-columns:1fr}
}
@media(max-width:680px){
  .hub-hero{padding:32px 24px;border-radius:24px}
  .info-card-grid{grid-template-columns:1fr}
  .partner-card{flex-direction:column;align-items:flex-start}
}

/* SEC Only: state-grouped team selector */
.state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 40px}
.state-card{
  display:block;background:#fff;border:1px solid rgba(18,34,52,.06);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
a.state-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.state-card-top{height:7px}
.state-card-top-split{display:flex}
.state-card-top-split span{flex:1;height:100%}
.state-card-body{padding:20px 22px}
.state-name{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a97a2;font-weight:700}
.state-card-body h3{font:600 19px var(--serif);margin:6px 0 2px;color:var(--ink)}
.state-card-body>p{font-size:12.5px;color:#78858f;margin:0 0 12px}
.state-cta{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.state-multi-hint{font-size:11.5px;color:#9aa7b1;margin:6px 0 12px}
.state-multi-list{display:flex;flex-direction:column;gap:8px}
.state-multi-item{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-md);
  border:1px solid var(--line);transition:border-color .2s var(--ease),background .2s var(--ease);
}
.state-multi-item:hover{border-color:var(--navy);background:#f8fafb}
.state-multi-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.state-multi-text{flex:1;display:flex;flex-direction:column;font-size:13px;color:var(--ink)}
.state-multi-text small{color:#8a97a2;font-size:11px}
.state-multi-arrow{color:#8a97a2;font-size:13px}

@media(max-width:950px){
  .state-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .state-grid{grid-template-columns:1fr}
}

/* SEC Game Day: stadium facts + schedule */
.stadium-card{
  border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid rgba(18,34,52,.06);box-shadow:var(--shadow-sm);margin:28px 0 0;
}
.stadium-banner{position:relative;height:110px}
.stadium-banner svg{position:absolute;inset:0;width:100%;height:100%}
.stadium-banner-label{
  position:absolute;left:24px;bottom:14px;color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.stadium-body{padding:26px 30px 30px}
.stadium-body h2{font:600 26px var(--serif);margin:0 0 4px;color:var(--ink)}
.stadium-field-name{font-size:15px;font-weight:400;color:#8a97a2}
.stadium-location{font-size:13.5px;color:#78858f;margin:0 0 20px}
.stadium-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stadium-fact{display:flex;flex-direction:column;gap:3px}
.stadium-fact-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a97a2}
.stadium-fact-value{font-size:15px;font-weight:600;color:var(--ink)}
.stadium-notes{margin:0 0 18px;padding-left:18px;color:#6f7e8b;font-size:13px;line-height:1.7}
.team-facts-strip{
  display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:#6f7e8b;
}
.team-facts-strip strong{color:var(--ink)}

.schedule-section{margin:34px 0 0}
.schedule-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.schedule-head h2{font:600 28px var(--serif);margin:0;color:var(--ink)}
.schedule-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:#78858f}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:10px}
.legend-dot:first-child{margin-left:0}
.legend-dot.game-home{background:#2e7d32}
.legend-dot.game-away{background:#b45309}
.legend-dot.game-neutral{background:#6d28d9}

.schedule-list{display:flex;flex-direction:column;gap:10px}
.game-row{
  display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--line);border-left:4px solid #ccc;
  border-radius:var(--radius-md);padding:14px 18px;
}
.game-row.game-home{border-left-color:#2e7d32}
.game-row.game-away{border-left-color:#b45309}
.game-row.game-neutral{border-left-color:#6d28d9}
.game-row.game-row-bye{border-left-color:#cfd6db;color:#9aa7b1;font-style:italic}
.game-date{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#556270}
.game-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.game-badge{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--radius-pill);background:#eef2f6;color:#556270;
}
.game-row.game-home .game-badge{background:#e6f4e8;color:#2e7d32}
.game-row.game-away .game-badge{background:#fdf0e1;color:#b45309}
.game-row.game-neutral .game-badge{background:#f0e9fc;color:#6d28d9}
.game-opponent{font:600 16px var(--serif);color:var(--ink)}
.game-note{font-size:11.5px;color:#8a97a2;font-style:italic}
.game-location{font-size:12.5px;color:#8a97a2;margin-top:2px}
.game-time-wrap{text-align:right}
.game-time{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.game-shop-link{display:block;font-size:11.5px;color:var(--navy);margin-top:4px;white-space:nowrap}
.game-shop-link:hover{text-decoration:underline}
.schedule-source{font-size:12px;color:#9aa7b1;margin:16px 2px 0}

.legends-section{margin-top:28px}
.legends-section h2{font:600 26px var(--serif);margin-bottom:14px}
.legends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.legend-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;
  display:flex;flex-direction:column;gap:8px;
}
.legend-card-top{display:flex;justify-content:space-between;font-size:12px;color:#8996a3;font-weight:600;letter-spacing:.03em}
.legend-card h3{font:700 19px var(--serif);margin:0}
.legend-legacy{font-size:13.5px;color:#4a5561;margin:0}
.legend-why{font-size:13.5px;color:#4a5561;margin:0}
.legend-why strong{color:var(--ink);font-weight:700}

.deal-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:#d1272c;color:#fff;font:800 12px var(--sans);letter-spacing:.02em;
  padding:5px 10px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
}
.tenways-swatches{display:flex;gap:6px;margin-top:2px}
.tenways-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}
.tenways-variant-note{font-size:12px;color:#8996a3;margin:0}

.gameday-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 10px}
.gameday-cta{
  border:1px solid var(--line);background:#fff;color:var(--ink);
}
.gameday-cta:hover{border-color:var(--navy);color:var(--navy)}
.gameday-cta.primary{
  background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;border-color:transparent;
  box-shadow:0 6px 14px -6px rgba(7,25,47,.38);
}
.gameday-cta.primary:hover{color:#fff}

/* Per-school Fanatics category shopping boxes (see gameDayCtaHtml() /
   data/sec/fanatics-affiliate.json). Real tracked outbound links, styled
   as a distinct light card group so they read as "shop by category" next
   to the existing gameday-cta-row rather than a duplicate of it. */
.sec-shop-categories{margin:22px 0 4px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.sec-shop-categories-heading{font:600 15px var(--serif);margin:0 0 14px;color:var(--ink)}
.sec-shop-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sec-shop-category-card{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 10px;
  font-size:13px;font-weight:600;color:var(--ink);background:#f7f9fb;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.sec-shop-category-card:hover{border-color:var(--navy);background:#fff;transform:translateY(-2px)}
.sec-shop-categories-disclosure{font-size:11px;color:#9aa7b1;margin:14px 0 0}
@media(max-width:680px){
  .sec-shop-category-grid{grid-template-columns:repeat(2,1fr)}
}

.cardstorm-context{
  display:flex;align-items:center;gap:14px;max-width:340px;
  background:linear-gradient(115deg,#0a0f1f,#1a1030 65%,#2d1454);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);
  padding:10px 16px 10px 10px;margin:6px 0 0;color:#fff;
  transition:transform .15s var(--ease);
}
.cardstorm-context:hover{transform:translateY(-2px)}
.cardstorm-context img{width:44px;height:44px;border-radius:8px;object-fit:cover;object-position:top;transform:scale(1.4);flex-shrink:0}
.cardstorm-context-copy{display:flex;flex-direction:column;flex:1;line-height:1.3}
.cardstorm-context-copy small{color:rgba(255,255,255,.6);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.cardstorm-context-copy strong{font:600 14px var(--serif)}
.cardstorm-context-arrow{color:#ffd60a;font-weight:700}

@media(max-width:680px){
  .stadium-facts-grid{grid-template-columns:repeat(2,1fr)}
  .game-row{grid-template-columns:56px 1fr;grid-template-rows:auto auto;}
  .game-time-wrap{grid-column:1/-1;text-align:left;border-top:1px dashed var(--line);padding-top:10px;margin-top:4px}
  .schedule-head{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   Topps collector destination hero -- AZUL as a collector, in his own
   album/collector-room photo (assets/topps-album-hero.png). The image is
   sized to fit (never forced/cover-cropped), so AZUL's face, eyes, hands and
   the open album can never be cropped out of frame regardless of viewport
   shape -- it simply shrinks within the available space instead. The dark
   gradient background behind it is the same wash the page used before this
   photo existed, so any leftover space around the (uncropped) photo still
   reads as intentional collector-room atmosphere, not empty space. ========= */
.topps-hero{
  position:relative;overflow:hidden;border-radius:32px;box-shadow:var(--shadow-lg);
  min-height:460px;display:flex;align-items:stretch;flex-wrap:wrap;
  color:#fff;background:
    radial-gradient(ellipse 700px 500px at 78% 20%,rgba(140,20,20,.35),transparent 60%),
    linear-gradient(135deg,#1c1c1c,#3a0a0a 60%,#0d0d0d);
}
.topps-hero-copy{position:relative;z-index:1;flex:1 1 380px;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.topps-hero-copy .eyebrow{color:rgba(255,255,255,.7);letter-spacing:.24em}
.topps-hero-title{font:600 clamp(32px,4.2vw,56px)/1.05 var(--serif);margin:10px 0 16px;letter-spacing:-.02em}
.topps-hero-accent{color:#ff4d4d}
.topps-hero-sub{color:rgba(255,255,255,.82);line-height:1.7;margin:0 0 18px;max-width:460px}
.topps-hero-guide{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.topps-hero-guide img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.18);flex-shrink:0}
.topps-hero-guide span{font-size:12px;color:#e0b3b3;font-style:italic}
.topps-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.topps-hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px}
.topps-hero-badges a{
  display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-pill);
  padding:9px 16px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;
  background:rgba(255,255,255,.06);transition:background .2s var(--ease),border-color .2s var(--ease);
}
.topps-hero-badges a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.topps-hero-visual{
  position:relative;z-index:1;flex:1 1 340px;min-width:0;
  display:flex;align-items:center;justify-content:flex-end;padding:24px 24px 24px 0;
}
.topps-hero-visual img{
  display:block;width:auto;height:auto;max-width:100%;max-height:520px;
  object-fit:contain;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.1);
}
@media(max-width:900px){
  .topps-hero{flex-direction:column;min-height:0}
  .topps-hero-copy{padding:32px 26px;text-align:center;align-items:center;order:2;flex:none}
  .topps-hero-ctas,.topps-hero-guide,.topps-hero-badges{justify-content:center}
  .topps-hero-sub{margin-left:auto;margin-right:auto}
  .topps-hero-visual{order:1;justify-content:center;padding:24px 24px 0;flex:none}
  .topps-hero-visual img{max-height:320px}
}

/* Topps category destination cards -- real lifestyle photography
   (assets/topps-category-<id>.png, cropped from the approved 8-panel
   collector-shop composite), not colored tiles with an emoji. Same
   image-forward/dark-gradient/bottom-copy pattern as the SEC team tiles,
   for one consistent card language across the site. */
.topps-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:20px 0 40px}
.topps-cat-card{
  position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;color:#fff;background:#0a0a0a;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.topps-cat-card:hover,.topps-cat-card:focus-visible{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.topps-cat-image{position:absolute;inset:0}
.topps-cat-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.topps-cat-card:hover .topps-cat-image img{transform:scale(1.06)}
.topps-cat-card:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,5,8,0) 42%,rgba(5,5,8,.6) 74%,rgba(5,5,8,.94) 100%);
}
.topps-cat-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px}
.topps-cat-body h3{font:600 19px var(--serif);margin:0 0 3px;color:#fff}
.topps-cat-body p{font-size:12px;color:rgba(255,255,255,.75);margin:0 0 8px}
.topps-cat-cta{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#ff6b6b}
.topps-cat-card.no-photo{background:linear-gradient(165deg,#241414,#0d0d0d)}

/* What's Hot -- two verified-fact editorial spotlight cards plus a short
   real-inventory teaser strip (topps-whats-hot-grid reuses .product-grid). */
.topps-editorial-spotlight{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:20px 0 28px}
.topps-spotlight-card{
  background:linear-gradient(165deg,#1c1010,#0d0d0d);border:1px solid rgba(255,80,80,.18);
  border-radius:var(--radius-lg);padding:26px 28px;color:#fff;
}
.topps-spotlight-card h3{font:600 19px var(--serif);margin:0 0 10px;color:#ff8080}
.topps-spotlight-card p{font-size:13px;line-height:1.7;color:rgba(255,255,255,.78);margin:0}
.topps-viewall{margin:14px 0 8px}
.topps-viewall a{font-size:13px;font-weight:600;color:var(--navy)}
.topps-viewall a:hover{text-decoration:underline}

/* On AZUL's Radar -- confirmed, dated upcoming releases (see
   TOPPS_UPCOMING_RELEASES in app.js). Never a guessed date. */
.topps-radar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 8px}
.topps-radar-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;box-shadow:var(--shadow-sm);
}
.topps-radar-status{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:10px;
}
.topps-radar-status.status-releasing{background:#fde3e3;color:#b91c1c}
.topps-radar-status.status-pre-order{background:#e3ecfd;color:#1d4ed8}
.topps-radar-card h3{font:600 17px var(--serif);margin:0 0 4px;color:var(--ink)}
.topps-radar-meta{font-size:11.5px;color:#84909b;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.topps-radar-desc{font-size:13px;color:#6f7e8b;line-height:1.6;margin:0 0 14px}
.topps-radar-cta{font-size:12.5px;font-weight:700;color:var(--navy)}
.topps-radar-cta:hover{text-decoration:underline}

/* How Do You Want to Chase -- three plain, honest paths (no implication
   that AskAzulNow itself runs breaks). */
.topps-chase-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 8px}
.topps-chase-method{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);text-align:center;
}
.topps-chase-method h3{font:600 19px var(--serif);margin:0 0 8px;color:var(--ink)}
.topps-chase-method p{font-size:13px;color:#6f7e8b;line-height:1.6;margin:0 0 16px}
.topps-chase-method a{font-size:12.5px;font-weight:700;color:var(--navy)}
.topps-chase-method a:hover{text-decoration:underline}

@media(max-width:900px){
  .topps-editorial-spotlight{grid-template-columns:1fr}
  .topps-radar-grid,.topps-chase-methods{grid-template-columns:1fr}
}

.topps-section{margin:44px 0}
.topps-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.topps-section-head h2{font:600 clamp(22px,2.6vw,28px)/1.2 var(--serif);margin:0;color:var(--ink)}
.topps-section-head a{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
.topps-section-head a:hover{text-decoration:underline}

.topps-filters{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;margin:26px 0 8px;
}
.topps-filters input[type="text"],
.topps-filters select{
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:11px 14px;font-size:13px;color:var(--ink);background:#fff;
}
.topps-filters input[type="text"]{flex:1 1 220px;min-width:180px}
.topps-filters select{flex:0 0 auto}
.topps-filters label{display:flex;align-items:center;gap:7px;font-size:13px;color:#556270;white-space:nowrap}
.topps-result-count{font-size:13px;color:#8a97a2;margin:14px 2px 4px}
.topps-cross-link{
  display:none;margin:6px 0 22px;padding:14px 18px;border-radius:var(--radius-md);
  background:#eef2f6;font-size:13.5px;color:var(--ink);
}
.topps-cross-link a{color:var(--navy);font-weight:600;text-decoration:underline}

@media(max-width:950px){
  .topps-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .topps-cat-grid{grid-template-columns:1fr}
  .topps-filters{flex-direction:column;align-items:stretch}
  .topps-filters select,.topps-filters input[type="text"]{width:100%}
}

.retailers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.retailer{
  display:block;
  background:#fff;
  border:1px solid rgba(18,34,52,.06);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
a.retailer{cursor:pointer}
.retailer:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.retailer small,.retailer strong,.retailer span{display:block}
.retailer small{font-size:10px;letter-spacing:.12em;color:#7d8a96;text-transform:uppercase}
.retailer strong{font:600 22px var(--serif);margin:10px 0;color:var(--ink)}
.retailer span{font-size:13px;color:var(--muted);line-height:1.6}

.legal-card{
  max-width:820px;
  background:#fff;
  border:1px solid rgba(18,34,52,.06);
  border-radius:var(--radius-lg);
  padding:36px;
  margin:28px 0;
  box-shadow:var(--shadow-sm);
}
.legal-card h2{font:600 30px var(--serif);color:var(--ink)}
.legal-card p{color:#6f7e8b;line-height:1.75}

.footer{
  margin-top:72px;
  padding:34px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#75828e;
  font-size:13px;
}
.footer-links{display:flex;gap:20px}
.footer-links a{transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--navy)}

.mobile-nav{display:none}

@media(max-width:950px){
  .solution-grid,.product-grid,.retailers{grid-template-columns:repeat(2,1fr)}
  .portals{grid-template-columns:1fr}
  .mission-hero{grid-template-columns:1fr}
  .mission-art{display:none}
}

@media(max-width:680px){
  /* env() is a no-op unless the viewport meta declares viewport-fit=cover
     (now set site-wide) -- without it this resolves to 0, which is still
     safe on non-notch phones. */
  body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .shell{padding:0 18px 28px}
  .product-image{height:180px}
  .product-body{padding:20px}
  .product-meta{font-size:9.5px;gap:5px 8px}
  .product h3{font-size:clamp(22px,6vw,26px);margin:12px 0 8px}
  .product p{margin:0 0 4px}
  .topbar{height:78px}
  .brand{gap:12px}
  .brand-mark{height:50px;width:50px}
  .brand-name{font-size:19px}
  .nav,.saved{display:none}
  .page{padding-top:22px}
  .hero{min-height:610px;border-radius:24px;padding:36px 22px;align-items:flex-start}
  .hero-mascot{
    width:128px;
    height:128px;
    margin-bottom:20px;
    box-shadow:0 0 0 4px rgba(255,255,255,.06),0 0 40px rgba(109,155,198,.4),var(--shadow-md);
  }
  .hero h1{font-size:clamp(44px,12vw,58px);margin-top:18px}
  .ask{grid-template-columns:1fr}
  .hero .ask button{border-left:0;border-top:1px solid var(--line)}
  .solution-grid,.product-grid,.retailers{grid-template-columns:1fr}
  .solution{min-height:205px}
  .page-title{display:block}
  .back{display:inline-block;margin-bottom:20px}
  .mission-hero{padding:36px 24px}
  .footer{display:block}
  .footer-links{margin-top:15px;flex-wrap:wrap}
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:70;
    background:rgba(7,25,47,.97);
    backdrop-filter:blur(18px);
    border-radius:20px;
    padding:8px;
    box-shadow:var(--shadow-lg);
  }
  .mobile-nav a{
    color:#aebdca;
    padding:9px 6px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:4px;
    border-radius:14px;
    transition:background .2s var(--ease),color .2s var(--ease);
  }
  .mobile-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
  .mobile-nav small{font-size:9px}
}
/* Narrowest phones only -- price and the View CTA stack full-width rather
   than getting squeezed onto one line. Wider phones keep the normal
   price-left/CTA-right row (already wraps safely via .product-foot's own
   flex-wrap if it ever needs to). */
@media(max-width:400px){
  .product-foot{justify-content:flex-start}
  .product-foot strong{flex:1 1 100%}
  .product-foot button{flex:1 1 100%}
}

/* ==========================================================================
   Lifestyle image system -- reusable across homepage editorial tiles, brand
   panels, category heroes and the SEC storefront. Every image referenced
   here comes from data/lifestyle-assets.json (real, already-approved
   advertiser/Fanatics product photography); nothing is hardcoded per-page.
   Aspect ratios are fixed up front to prevent layout shift while images
   load, and below-the-fold images use loading="lazy" (set in the HTML/JS
   that renders them, not here). ========================================== */

/* Editorial tiles -- homepage storytelling modules between shopping
   sections. Image-forward, dark gradient overlay, honest single-sentence
   copy, one clear CTA. */
.editorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 34px}
.editorial-tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/4;display:block;color:#fff;
  background:#0a1220;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.editorial-tile:hover,.editorial-tile:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.editorial-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.editorial-tile:hover img{transform:scale(1.05)}
.editorial-tile:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,12,22,.15) 0%,rgba(6,12,22,.55) 55%,rgba(6,12,22,.92) 100%);
}
.editorial-tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.editorial-tile-kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 6px}
.editorial-tile h3{font:600 21px var(--serif);margin:0 0 6px;line-height:1.15}
.editorial-tile p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5;margin:0 0 10px}
.editorial-tile-cta{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#fff}

/* Category hero -- a single large lifestyle hero (full width or large
   card), used for the SEC storefront hero and available for any future
   dedicated category landing. */
/* The source photo (assets/sec-landing-hero.png) already has its own full
   baked-in headline/copy/buttons/icon row composed into the left ~40% of
   the frame -- kept exactly as-is, never regenerated. Because this hero is
   always much wider than it is tall, object-fit:cover can only crop
   vertically here (the image's own aspect ratio is narrower than the
   container's, so cover always scales to match the container's width and
   there is no horizontal slack for object-position to use) -- so the baked
   design's left/right placement can't be cropped out, only trimmed top-to-
   bottom. The real HTML overlay is deliberately kept to a small top strip
   (eyebrow + a real, functioning "Find Your Team" link) rather than
   restating the same headline/copy the photo already carries -- one image
   doing the emotional work, one small real control doing the functional
   work, instead of two competing blocks of text. */
.category-hero{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:230px;display:flex;align-items:flex-start;color:#fff;
  background:#0a1220;box-shadow:var(--shadow-md);
}
.category-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
.category-hero:after{
  /* :after (not :before) -- pseudo-elements paint in DOM order alongside
     the real <img> child at the same stacking level; :before would sit
     UNDER the (later, opaque) prepended img and be invisible, while :after
     reliably paints above it without needing a z-index override. */
  content:"";position:absolute;top:0;left:0;right:0;height:96px;z-index:0;
  background:linear-gradient(180deg,rgba(6,12,22,.92) 0%,rgba(6,12,22,.5) 65%,transparent 100%);
}
.category-hero-body{
  position:relative;z-index:1;padding:20px 26px;width:100%;box-sizing:border-box;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
}
.category-hero .eyebrow{color:rgba(255,255,255,.75);margin:0}
.category-hero h2{font:600 17px var(--serif);margin:0;color:#fff}
.category-hero .brand-hero-cta{margin-left:auto;margin-top:0}

/* Story card -- image-forward product card (60-70% image) for a small set
   of visually strong picks, distinct from the denser default .product
   card used across full catalog grids. */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story-card{
  border:1px solid rgba(18,34,52,.06);background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.story-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.story-card-image{aspect-ratio:4/3;position:relative;overflow:hidden;background:linear-gradient(145deg,#eef2f6,#dbe3ea)}
.story-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;box-sizing:border-box}
.story-card-body{padding:18px 20px 20px}
.story-card-meta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#84909b;margin-bottom:8px}
.story-card h3{font:600 17px var(--serif);margin:0 0 8px;color:var(--ink);line-height:1.25}
.story-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.story-card-foot strong{font:600 17px var(--serif);color:var(--ink)}
.story-card-foot a{
  border:0;background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;
  border-radius:var(--radius-md);padding:10px 16px;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}

/* AZUL Pick badge -- editorial curation label, not a factual claim about
   the product itself. Used sparingly (see JS call sites). */
.azul-pick-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(47,124,255,.16);border:1px solid rgba(109,166,225,.5);
  color:#bfe0ff;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);margin-bottom:14px;
}

/* Brand panel additions: CTA + optional pick badge inside the existing
   .sec-hero.brand-hero-photo treatment (see app.js renderBrandPage()). */
.brand-hero-cta{
  margin-top:6px;border:0;background:#fff;color:var(--navy);
}
.brand-hero-cta:hover{background:#f3f6f8}

/* Brand page hero: copy column (with an inline AZUL guide badge, not a
   floating mascot) + ONE anchored featured-product card and an optional
   single smaller inset -- replaces the earlier 3-chip floating collage,
   which read as loose stickers rather than a composition. Used by every
   brand page via renderBrandPage() (one shared template, not a one-off
   layout per advertiser). The existing .brand-hero-photo full-bleed
   blurred backdrop (already real, already subtle/low-contrast) is kept
   as-is as the background layer; this adds the crisp foreground layer. */
.brand-hero-v2{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;overflow:hidden}
.brand-hero-copy-col{min-width:0}
.brand-hero-guide{display:flex;align-items:center;gap:10px;margin:-4px 0 16px}
.brand-hero-guide img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.18);flex-shrink:0}
.brand-hero-guide span{font-size:12px;color:#a9c2d8;font-style:italic}
.brand-hero-visual{position:relative;max-width:100%}
.brand-hero-image-main{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(255,255,255,.06);box-shadow:var(--shadow-lg);
}
.brand-hero-image-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:20px;box-sizing:border-box}
.brand-hero-image-secondary{
  position:absolute;right:14px;bottom:-16px;width:88px;height:88px;border-radius:12px;overflow:hidden;
  background:#fff;border:3px solid var(--navy,#0a1220);box-shadow:0 10px 22px -8px rgba(0,0,0,.5);
}
.brand-hero-image-secondary img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
@media(max-width:900px){
  .brand-hero-v2{grid-template-columns:1fr}
  .brand-hero-visual{order:-1;max-width:320px;margin:0 auto 8px}
}

/* "What You Can Find Here" -- real collection/category pills, driven by
   each brand's own actual inventory counts, not an invented taxonomy. */
.brand-find-here{margin:34px 0 8px}
.brand-find-here-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.brand-find-here-grid span{
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 18px;
  font-size:13px;color:var(--ink);background:#fff;
}

/* "AZUL's Take" editorial callout -- short, brand-specific, varies by
   page (see data/lifestyle-assets.json brands.<slug>.editorial.take). */
.brand-take{
  margin:40px 0;padding:32px 36px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#0e2035,#050d18);color:#fff;
  display:flex;align-items:center;gap:20px;
}
.brand-take img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 30px rgba(109,166,225,.45)}
.brand-take-body p{margin:0;font:400 17px/1.5 var(--serif);font-style:italic;color:#e6edf3}
.brand-take-body span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fbdea;margin-bottom:8px;font-style:normal}
@media(max-width:680px){.brand-take{flex-direction:column;text-align:center;padding:26px}}

/* ==========================================================================
   AZUL Deal Alert -- reusable promotional module (see renderDealAlert() in
   app.js and data/deal-alerts.json). An editorial "AZUL found a deal" card,
   not a loud affiliate banner: light, generous spacing, one large real
   product photo, one clear CTA. Image and copy live in separate columns/
   sections at every width, so text is never layered over product imagery. */
.deal-alert{
  margin:28px 0;border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.deal-alert-inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:340px}
.deal-alert-visual{
  position:relative;background:linear-gradient(160deg,#f3f6f8,#e4eaf0);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.deal-alert-visual img{
  max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(7,25,47,.18));
}
.deal-alert-body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.deal-alert-eyebrow{
  display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:14px;
}
.deal-alert-headline{font:600 clamp(26px,3.2vw,38px)/1.12 var(--serif);margin:0 0 12px;color:var(--ink)}
.deal-alert-copy{font-size:15px;color:#4a5561;line-height:1.7;margin:0 0 24px;max-width:420px}
.deal-alert-cta{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;
  border-radius:var(--radius-pill);padding:16px 30px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 10px 24px -8px rgba(7,25,47,.4);transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.deal-alert-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(7,25,47,.5)}
.deal-alert-disclaimer{font-size:11.5px;color:#9aa7b1;line-height:1.6;margin:18px 0 0;max-width:420px}

.deal-alert-products{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.deal-alert-product{background:#fff;padding:22px 24px;display:flex;align-items:center;gap:16px;transition:background .2s var(--ease)}
.deal-alert-product:hover{background:#f7f9fb}
.deal-alert-product-image{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f3f6f8;border-radius:var(--radius-md)}
.deal-alert-product-image img{max-width:100%;max-height:100%;object-fit:contain}
.deal-alert-product-name{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deal-alert-product-price{font-size:13px;font-weight:700;color:var(--navy);margin:0}

@media(max-width:900px){
  .deal-alert-inner{grid-template-columns:1fr}
  .deal-alert-visual{padding:28px;min-height:0}
  .deal-alert-visual img{max-height:240px}
  .deal-alert-body{padding:28px 24px}
  .deal-alert-products{grid-template-columns:1fr}
}
@media(max-width:480px){
  .deal-alert-cta{width:100%;justify-content:center}
}

/* Deal Alert brand tones -- same card, same layout, just a different
   accent so Brio/TENWAYS/GiftLab don't all read as one identical coupon.
   Untagged records keep the original amber (Brio) look. */
.deal-alert.tone-mobility .deal-alert-eyebrow{color:#0f766e;background:#ecfdf5;border-color:#a7f3d0}
.deal-alert.tone-mobility .deal-alert-cta{background:linear-gradient(180deg,#0f766e,#0b4f4a)}
.deal-alert.tone-mobility .deal-alert-cta:hover{box-shadow:0 14px 30px -8px rgba(15,118,110,.5)}
.deal-alert.tone-seasonal .deal-alert-eyebrow{color:#9a3412;background:#fff1e6;border-color:#fdba8c}
.deal-alert.tone-seasonal .deal-alert-cta{background:linear-gradient(180deg,#c2410c,#7c2d12)}
.deal-alert.tone-seasonal .deal-alert-cta:hover{box-shadow:0 14px 30px -8px rgba(194,65,12,.5)}

/* Homepage "AZUL Found It" preview row -- concise cards (image, eyebrow,
   headline, one CTA line) that link back into the brand's own AskAzul
   page, never straight to the affiliate URL (see renderHomeDealAlerts()).
   Same data source as .deal-alert, deliberately smaller/quieter so the
   homepage doesn't turn into a coupon page. */
#home-deal-alerts-section .sub{text-align:center;max-width:480px;margin:0 auto 26px}
.home-deal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 8px}
.home-deal-card{
  display:block;border-radius:var(--radius-lg);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.home-deal-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.home-deal-card-image{height:160px;background:linear-gradient(160deg,#f3f6f8,#e4eaf0);display:flex;align-items:center;justify-content:center;padding:16px}
.home-deal-card-image img{max-width:100%;max-height:100%;object-fit:contain}
.home-deal-card-body{padding:18px 20px 22px}
.home-deal-card-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#b45309;margin-bottom:8px}
.home-deal-card.tone-mobility .home-deal-card-eyebrow{color:#0f766e}
.home-deal-card.tone-seasonal .home-deal-card-eyebrow{color:#9a3412}
.home-deal-card-body h3{font:600 19px var(--serif);margin:0 0 10px;color:var(--ink)}
.home-deal-card-cta{font-size:12.5px;font-weight:700;color:var(--navy)}
.home-deal-card:hover .home-deal-card-cta{text-decoration:underline}
@media(max-width:900px){.home-deal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.home-deal-grid{grid-template-columns:1fr}}

/* SEC storefront: image-forward team tiles. Real product image occupies
   ~60% of the card height (a dedicated image block, not a full-bleed
   overlay), team name/count/CTA in a solid body below -- matches the
   "55-65% image" spec more literally than a full-bleed dark-overlay card. */
.sec-team-tile{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;border:1px solid rgba(18,34,52,.06);box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.sec-team-tile:hover,.sec-team-tile:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.sec-team-tile-image{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(165deg,var(--sec-c1,#0a1220),var(--sec-c2,#050a13));
}
.sec-team-tile-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;transition:transform .5s var(--ease)}
.sec-team-tile:hover .sec-team-tile-image img{transform:scale(1.06)}
.sec-team-tile-image:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);
}
.sec-team-tile-body{padding:16px 18px 18px;color:var(--ink)}
.sec-team-tile-body h3{font:600 17.5px var(--serif);margin:0 0 3px}
.sec-team-tile-body p{font-size:11.5px;color:#78858f;margin:0 0 10px}
.sec-team-tile-cta{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--navy);text-transform:uppercase}
.sec-team-tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 12px}

/* Cross-team shopping rows (Game Day Gear / Tailgate Ready / Fan Cave /
   Under $25 / AZUL's SEC Picks) -- reuse the standard .product-grid card
   shell (secProductCard()) for consistency with the rest of the site. */
.sec-shopping-row{margin:28px 0 12px}
.sec-shopping-row .product-grid{grid-template-columns:repeat(4,1fr)}

/* ==========================================================================
   Shared "Saturday with AZUL" hero copy classes -- used by the per-team
   hero (sec-team.html, inside .sec-hero.team-photo-hero). The SEC landing
   page (sec-only.html) no longer uses a rotating per-team hero of its own;
   it uses one static photographic hero (sec-landing-hero) with real
   controls below it -- see .sec-landing-hero-wrap / .sec-landing-controls
   further down. ========================================================= */
.sec-tailgate-headline{font:600 clamp(28px,3.2vw,42px)/1.1 var(--serif);margin:10px 0 14px}
.sec-tailgate-sub{color:rgba(255,255,255,.85);line-height:1.7;margin:0 0 24px;max-width:400px}
.sec-tailgate-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.sec-tailgate-cta{background:#fff;color:var(--team-c1,#2a0509)}
.sec-tailgate-secondary-ctas{display:flex;flex-wrap:wrap;gap:8px}
.sec-tailgate-secondary-ctas a{
  border-radius:var(--radius-pill);padding:9px 14px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;
}
.sec-tailgate-secondary-ctas a:hover{background:rgba(255,255,255,.18)}
@media(max-width:900px){
  .sec-tailgate-sub{margin-left:auto;margin-right:auto}
  .sec-tailgate-cta-row,.sec-tailgate-secondary-ctas{justify-content:center}
}

/* Landing-page-only intro tightening -- keeps the same identity block
   (eyebrow/H1/sub + back link) every other page uses, just compressed so
   the hero starts sooner. Scoped to this one page via .sec-landing-title;
   the shared .page-title/.page-title h1 rules are untouched. */
.page-title.sec-landing-title{margin-bottom:14px}
.page-title.sec-landing-title .eyebrow{margin-bottom:4px}
.page-title.sec-landing-title h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em}
.page-title.sec-landing-title .sub{margin-top:2px}

/* ==========================================================================
   SEC landing-page hero (sec-only.html) -- one static photograph (AZUL in
   blue Ask AZUL apparel at a mixed-school tailgate; "Saturdays are for
   you" and its buttons/category icons are already part of the artwork).
   Mobile: full aspect ratio, no crop, no hotspots (see initSecLandingHotspots()
   in app.js) -- the real controls below the image are the only interactive
   path there. Desktop: height is capped so the hero doesn't eat the whole
   first viewport; the two baked-in buttons ("Pick Your School"/"Explore
   SEC") become real, keyboard-accessible links via two <a> hotspots whose
   position/size are computed in JS from the image's actual rendered
   geometry (natural size, container size, object-position) every time it
   loads or the window resizes -- not static percentages -- so they track
   the real buttons correctly even though object-fit:cover is now cropping
   the image on desktop. */
.sec-landing-hero-wrap{
  position:relative;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:22px;
}
.sec-landing-hero-img{
  display:block;width:100%;height:auto;aspect-ratio:1693/929;object-fit:cover;
  object-position:center 28%;
}
.sec-landing-hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(2,5,12,.4));
}
.sec-landing-hotspot{
  position:absolute;display:none;border-radius:10px;background:transparent;cursor:pointer;
}
.sec-landing-hotspot:focus-visible{
  outline:3px solid rgba(255,255,255,.9);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(0,0,0,.25);
}
@media(min-width:901px){
  .sec-landing-hero-img{max-height:min(68vh,720px)}
  .sec-landing-mobile-cta{display:none}
}
.sec-landing-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 8px;
}
.sec-landing-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.sec-landing-chip-row a{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:10px 18px;font-size:12.5px;font-weight:600;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sec-landing-chip-row a:hover{border-color:var(--navy);color:var(--navy)}
@media(max-width:680px){
  .sec-landing-controls{justify-content:center;text-align:center}
  .sec-landing-chip-row{justify-content:center}
}

/* SEC storefront store-section quick links (Game Day Gear / Tailgate /
   Fan Cave / Gifts / Under $25 / AZUL's Picks). */
.sec-section-chips{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 30px}
.sec-section-chips a{
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 18px;
  font-size:13px;color:var(--ink);display:inline-block;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sec-section-chips a:hover{border-color:var(--navy);color:var(--navy)}

/* Arkansas feature module -- the one team getting the strongest visual
   treatment, per spec. Uses the approved "AZUL Calls the Hogs" lifestyle
   photo (AZUL is the actual subject -- face, raised arms and spread
   fingers -- not a product photo with a small mascot badge bolted on).
   object-position is biased hard toward the top of the source image so
   the cover-fit crop keeps his raised hands in frame and only trims the
   waist-down tailgate props at the bottom. */
.arkansas-feature{margin:8px 0 40px}
.arkansas-feature-inner{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:520px;display:flex;align-items:flex-end;color:#fff;
  background:#1a0508;box-shadow:var(--shadow-lg);
}
.arkansas-feature-inner img.arkansas-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 13%}
.arkansas-feature-inner:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,4,6,.95) 0%,rgba(20,4,6,.75) 45%,rgba(20,4,6,.3) 100%);
}
/* Extra bottom-anchored scrim (on top of the diagonal one above) -- the
   real copy block sits low, over AZUL's plain dark hoodie, well clear of
   the baked "WOOOOOOOOOO!" / "PIG SOOOIE!" art at the top of the photo and
   never over his raised hands. */
.arkansas-feature-inner:after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(0deg,rgba(10,3,4,.85) 0%,rgba(10,3,4,.35) 30%,transparent 55%);
}
.arkansas-feature-body{position:relative;z-index:1;padding:36px 48px;max-width:620px;display:flex;gap:20px;align-items:flex-end}
.arkansas-feature-text .eyebrow{color:rgba(255,255,255,.7)}
.arkansas-feature-text h2{font:600 clamp(30px,4.2vw,48px)/1.06 var(--serif);margin:6px 0 12px}
.arkansas-feature-text p{color:rgba(255,255,255,.85);line-height:1.7;margin:0 0 18px;max-width:480px}
.arkansas-feature-cta{
  display:inline-block;border:0;background:#fff;color:#7a1020;border-radius:var(--radius-md);
  padding:13px 24px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
}
.arkansas-feature-cta:hover{background:#f3f6f8}

@media(max-width:950px){
  .editorial-grid{grid-template-columns:repeat(2,1fr)}
  .sec-team-tile-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:repeat(2,1fr)}
  .sec-shopping-row .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .editorial-grid{grid-template-columns:1fr}
  .editorial-tile{aspect-ratio:16/10}
  .sec-team-tile-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .story-grid{grid-template-columns:1fr}
  /* This more-specific selector otherwise keeps winning over the generic
     .product-grid{grid-template-columns:1fr} mobile rule below, so these
     cross-team shopping rows (Under $25, AZUL's SEC Picks, etc.) were
     stuck at 2 narrow columns down to the smallest phone widths. */
  .sec-shopping-row .product-grid{grid-template-columns:1fr}
  /* Narrow mobile widths bring this hero's container aspect ratio much
     closer to the source photo's own shape than desktop, so cover-fit
     crops far less of it vertically -- the baked headline/copy/buttons
     that a desktop-width crop hides would otherwise flood back into view.
     A full-height wash (not just the desktop top-strip gradient) keeps the
     baked design as muted background texture so the small real text block
     stays the only thing that reads clearly. */
  .category-hero{min-height:150px}
  .category-hero-body{padding:16px 18px;flex-direction:column;align-items:flex-start;gap:8px}
  .category-hero:after{top:0;bottom:0;height:auto;background:linear-gradient(180deg,rgba(6,12,22,.88) 0%,rgba(6,12,22,.74) 100%)}
  .category-hero .brand-hero-cta{margin-left:0;width:100%}
  /* Same reasoning as above -- a fixed height close to the source's own
     aspect ratio plus a stronger uniform wash, rather than the desktop
     top/bottom-only gradients, so "WOOOOOOOOOO!" / "PIG SOOOIE!" read as
     dim background texture instead of competing with the real headline. */
  .arkansas-feature-inner{min-height:420px}
  .arkansas-feature-inner:before{background:linear-gradient(0deg,rgba(20,4,6,.92) 0%,rgba(20,4,6,.55) 55%,rgba(20,4,6,.4) 100%)}
  .arkansas-feature-body{padding:24px 22px;flex-direction:column;align-items:flex-start}
  .sec-hero-collage{height:220px}
  .sec-jersey-chip{width:120px;height:154px}
  .sec-jersey-chip.j-1{left:0;top:6%}
  .sec-jersey-chip.j-2{left:16%;top:22%}
  .sec-jersey-chip.j-3{left:32%;top:10%}
  .sec-jersey-chip.j-4{left:48%;top:24%}
}
@media(max-width:480px){
  .sec-team-tile-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Mystery Boxes: cinematic hero + premium category/glimpse cards. Real
   imagery only (Fanatics/Topps graded cards, GiftLab jewelry, via
   data/lifestyle-assets.json mysteryBoxes); categories with no real
   approved inventory (watches, tech, gaming, sneakers, gold chases) get an
   abstract glow/typographic treatment instead of a stretched or invented
   photo. All motion gated behind prefers-reduced-motion. ================ */

/* ==========================================================================
   HapaBox immersive experience (mystery-boxes.html) -- hero photo, copy,
   how-it-works, category picker, prize rail and the Keep It/Take Offer
   reveal all live inside ONE continuous dark navy/purple/magenta section
   (no white gaps between any of these pieces). The approved wizard-AZUL
   photograph (assets/hapabox-hero.png) is the dominant visual at the top;
   everything below continues the same color family. ==================== */
.hapabox-experience{
  position:relative;overflow:hidden;border-radius:32px;box-shadow:var(--shadow-lg);
  background:
    radial-gradient(circle at 15% 12%,rgba(180,90,255,.18),transparent 45%),
    radial-gradient(circle at 85% 55%,rgba(47,124,255,.14),transparent 50%),
    linear-gradient(180deg,#0a0616 0%,#150b2c 40%,#0a0616 100%);
  color:#fff;
}
.hapabox-hero-photo-wrap{position:relative;max-height:min(60vh,560px);overflow:hidden}
.hapabox-hero-photo{display:block;width:100%;height:auto;object-fit:cover;object-position:38% 30%}
/* Invisible, precisely-positioned hotspots over the baked-in look-alike
   controls in the hero photo (see HERO_HOTSPOTS in app.js, which measures
   and repositions these on load/resize -- never a fixed pixel guess). */
.hero-hotspot{position:absolute;display:block;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-hotspot:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.hapabox-experience-inner{position:relative;padding:44px 56px 56px}
.hapabox-experience .eyebrow{color:#c9a8f5;letter-spacing:.26em}
.mystery-hero-title{font:600 clamp(36px,4.8vw,54px)/1.08 var(--serif);margin:10px 0 18px}
.mh-accent-pink{background:linear-gradient(90deg,#ff5fa8,#c86bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mh-accent-blue{color:#5fa8ff}
.hapabox-lede{color:rgba(255,255,255,.82);line-height:1.7;max-width:480px;margin:0 0 14px}
.hapabox-disclaimer{max-width:640px}
.mystery-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 20px}
.mystery-cta.primary{background:linear-gradient(180deg,#3d8bff,#1f5fd6);color:#fff;box-shadow:0 10px 26px -10px rgba(47,124,255,.7)}
.mystery-cta.primary:hover{box-shadow:0 16px 34px -10px rgba(47,124,255,.85)}
.mystery-cta.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff}
.mystery-cta.secondary:hover{background:rgba(255,255,255,.16)}

.hapabox-subheading{font:600 clamp(24px,3vw,32px)/1.2 var(--serif);margin:48px 0 6px;color:#fff;letter-spacing:-.01em}
.hapabox-subheading:first-of-type{margin-top:44px}
.hapabox-subcopy{color:rgba(255,255,255,.62);margin:0 0 20px;max-width:560px}

.hapabox-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 8px}
.hapabox-step{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);
  padding:22px 20px;
}
.hapabox-step-num{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#c86bff,#5fa8ff);color:#0a0616;font-weight:700;font-size:14px;margin-bottom:12px;
}
.hapabox-step h3{font:600 16px var(--serif);margin:0 0 6px;color:#fff}
.hapabox-step p{font-size:12.5px;color:rgba(255,255,255,.65);margin:0;line-height:1.6}

.hapabox-note{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:-10px;margin-bottom:8px;text-align:center}

@media(max-width:900px){
  .hapabox-hero-photo-wrap{max-height:280px}
  .hapabox-hero-photo{object-position:34% 24%}
  .hapabox-experience-inner{padding:32px 24px 40px;text-align:center}
  .mystery-hero-ctas{justify-content:center}
  .hapabox-lede,.hapabox-disclaimer,.hapabox-subcopy{margin-left:auto;margin-right:auto}
  .hapabox-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hapabox-steps{grid-template-columns:1fr}
}

/* HapaBox category cards -- real lifestyle photography (assets/hapabox-
   category-<id>.png, cropped from the approved 8-panel composite), each
   one a real, clickable door straight into the prize rail above (see
   renderHapaboxCategoryCards() -- click both preselects the category on
   the rail's picker and scrolls up to it). Same image-forward/dark-
   gradient/bottom-copy card language as the Topps category cards. */
.hapabox-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:28px 0 8px}
.hapabox-cat-card{
  position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/4;color:#fff;background:#0a0a12;
  border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.hapabox-cat-card:hover,.hapabox-cat-card:focus-visible{
  transform:translateY(-6px);box-shadow:0 0 0 1px rgba(200,110,255,.4),0 20px 44px -16px rgba(160,110,255,.55);
  border-color:rgba(200,110,255,.5);
}
.hapabox-cat-image{position:absolute;inset:0}
.hapabox-cat-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hapabox-cat-card:hover .hapabox-cat-image img{transform:scale(1.06)}
.hapabox-cat-card:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,4,14,0) 40%,rgba(6,4,14,.62) 74%,rgba(6,4,14,.94) 100%)}
.hapabox-cat-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px}
.hapabox-cat-body h3{font:600 18px var(--serif);margin:0 0 3px;color:#fff}
.hapabox-cat-body p{font-size:11.5px;color:rgba(255,255,255,.7);margin:0 0 8px}
.hapabox-cat-cta{
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  display:inline-flex;align-items:center;gap:4px;transition:gap .2s var(--ease);
}
.hapabox-cat-card:hover .hapabox-cat-cta{gap:8px}
.hapabox-cat-card.no-photo{background:linear-gradient(165deg,#1a0f2e,#0a0616)}

/* AZUL personality line near the hero copy. */
.mystery-azul-line{
  font-size:13px;font-style:italic;color:#bfe0ff;margin:-4px 0 10px;
}

/* ==========================================================================
   Interactive prize-rail reveal -- illustrative demo only (see disclaimer
   in the markup), never a real HapaBox transaction. Idle state is a slow
   continuous right-to-left marquee; clicking Spin swaps in a fresh track
   and animates one CSS transition to a precomputed stop so the winning
   chip lands exactly under the center frame, then reveals the result.
   Larger/taller/more dramatic than the first pass, matching the approved
   mockup's premium-mystery-reveal energy (not a slot machine). */
.rail-cat-picker{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 28px}
.rail-cat-btn{
  display:flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--radius-pill);
  padding:10px 18px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.rail-cat-btn:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);transform:translateY(-1px)}
.rail-cat-btn.is-active{
  background:linear-gradient(135deg,#c86bff,#5fa8ff);border-color:transparent;color:#0a0616;
  box-shadow:0 8px 20px -8px rgba(160,110,255,.6);
}

.prize-rail-wrap{
  position:relative;border-radius:28px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%,rgba(140,80,255,.2),transparent 60%),linear-gradient(160deg,#170c34,#07030f);
  box-shadow:inset 0 0 60px rgba(120,70,255,.14);border:1px solid rgba(160,110,255,.2);
  padding:48px 0;
}
.prize-rail-viewport{
  overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.prize-rail-track{display:flex;gap:18px;will-change:transform;padding:0 50px}
.prize-rail-track.is-idle{animation:railIdleScroll 26s linear infinite}
@keyframes railIdleScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.prize-rail-track.is-idle{animation:none !important}}

.prize-chip{
  flex:0 0 auto;width:168px;height:210px;border-radius:var(--radius-lg);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;color:#fff;
  padding:12px 8px 12px;box-sizing:border-box;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.14);
  transform-origin:center center;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
/* Real product photo (or, for a raffle-ticket outcome, the ticket-card
   visual below) -- never the old giant emoji mark. */
.prize-chip-visual{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:4px}
.prize-chip-visual img{
  width:100%;height:100%;object-fit:contain;border-radius:8px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
.prize-chip-icon{width:52%;height:52%;color:rgba(220,205,255,.85);filter:drop-shadow(0 0 12px rgba(160,120,255,.4))}
.prize-chip.no-photo .prize-chip-visual{display:none}
.prize-chip-label{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-align:center;padding:6px 4px 0;color:rgba(255,255,255,.92)}
.prize-rail-track.is-spinning .prize-chip:not(.is-winner){opacity:.5}
.prize-chip.is-winner{
  border-color:rgba(255,255,255,.85);transform:scale(1.08);
  background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:0 0 0 4px rgba(255,255,255,.3),0 0 55px rgba(160,120,255,.9);
}

/* Raffle-ticket prize chips -- a premium digital ticket-stub look (never a
   casino chip, sportsbook graphic or payment button), so a ticket outcome
   reads as "still in the game," not the top prize. Colors/values come
   straight from UNIVERSAL_TICKETS in app.js. */
.ticket-card{
  position:relative;width:100%;height:100%;border-radius:12px;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;padding:10px 6px;text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
}
.ticket-card-value{font:800 24px var(--serif);letter-spacing:-.01em;line-height:1}
.ticket-card-band{position:relative;width:100%;height:0;border-top:2px dashed rgba(255,255,255,.42)}
.ticket-card-band:before,.ticket-card-band:after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:13px;height:13px;
  border-radius:50%;background:#0f0824;
}
.ticket-card-band:before{left:-13px}
.ticket-card-band:after{right:-13px}
.ticket-card-caption{font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.85;text-transform:uppercase}
.ticket-green .ticket-card{background:linear-gradient(160deg,#22c07f,#0b6b45)}
.ticket-blue .ticket-card{background:linear-gradient(160deg,#3f96ff,#0d4fa8)}
.ticket-black .ticket-card{background:linear-gradient(160deg,#33333d,#0a0a0d);border:1px solid rgba(255,255,255,.2)}
.rail-result-visual .ticket-card{padding:5px 3px;gap:3px;border-radius:8px}
.rail-result-visual .ticket-card-value{font-size:12px}
.rail-result-visual .ticket-card-caption{font-size:6.5px;letter-spacing:.1em}
.rail-result-visual .ticket-card-band:before,.rail-result-visual .ticket-card-band:after{width:6px;height:6px}
.rail-result-visual .ticket-card-band:before{left:-6px}
.rail-result-visual .ticket-card-band:after{right:-6px}

.prize-rail-frame{
  position:absolute;top:20px;bottom:20px;left:50%;transform:translateX(-50%);width:180px;
  border:3px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);z-index:2;pointer-events:none;
  box-shadow:0 0 50px rgba(160,110,255,.7),inset 0 0 30px rgba(160,110,255,.3);
}
.prize-rail-frame:before,.prize-rail-frame:after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:10px solid transparent;border-right:10px solid transparent;
}
.prize-rail-frame:before{top:-14px;border-top:14px solid rgba(255,255,255,.85)}
.prize-rail-frame:after{bottom:-14px;border-bottom:14px solid rgba(255,255,255,.85)}

.rail-controls{display:flex;justify-content:center;margin:30px 0 8px}
.rail-controls .mystery-cta:disabled{opacity:.5;cursor:not-allowed;transform:none}

.rail-result{text-align:center;margin:34px auto 8px;max-width:420px}
.rail-result[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){.rail-result{animation:railResultIn .45s var(--ease)}}
@keyframes railResultIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.rail-result-label{font-size:13px;font-weight:700;letter-spacing:.2em;color:#c9a8f5;margin:0 0 12px}
.rail-result-item{
  display:inline-flex;align-items:center;gap:14px;padding:18px 32px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#2a1750,#0f0824);color:#fff;font:600 22px var(--serif);
  box-shadow:0 0 50px rgba(160,120,255,.5),inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(200,160,255,.3);margin-bottom:18px;
}
.rail-result-visual{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden;
}
.rail-result-visual img{width:100%;height:100%;object-fit:contain}
.rail-result-visual .prize-chip-icon{width:70%;height:70%;color:rgba(220,205,255,.9)}
.rail-result-text{text-align:left}
@media(max-width:680px){
  .prize-chip{width:130px;height:168px}
  .prize-rail-frame{width:146px}
  .prize-rail-wrap{padding:32px 0}
}

/* Keep It / Take HapaBox Offer -- large, integrated dark-theme actions
   (not tiny dashed pills floating on white). Still visibly inert/example
   (see disclaimer copy), never a real transaction. */
.reveal-choice{display:flex;gap:16px;justify-content:center;margin:4px 0 8px;flex-wrap:wrap}
.reveal-btn{
  display:inline-flex;align-items:center;gap:8px;padding:18px 34px;border-radius:var(--radius-pill);
  font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;
  cursor:default;user-select:none;
}
.reveal-btn.keep{background:linear-gradient(135deg,#1fa06e,#0d5c3e);color:#fff;box-shadow:0 10px 26px -10px rgba(31,160,110,.6)}
.reveal-btn.offer{background:linear-gradient(135deg,#c86bff,#5fa8ff);color:#0a0616;box-shadow:0 10px 26px -10px rgba(160,110,255,.7)}

/* Post-reveal outbound CTA -- the actual conversion goal. Shown together
   with the rest of .rail-result (hero/hidden lifecycle unchanged), always
   below Keep It / Take the HapaBox Offer. Real tracked link via
   HAPABOX_OUTBOUND_URL, not an invented URL. */
.hapabox-outbound{
  margin-top:32px;padding:32px 24px 26px;text-align:center;border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse 320px 180px at 50% 0%,rgba(200,110,255,.28),transparent 70%),
    rgba(255,255,255,.03);
  border:1px solid rgba(200,160,255,.28);
}
.hapabox-outbound-azul{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:#c9a8f5;margin:0 0 8px;text-transform:uppercase}
.hapabox-outbound-title{font:600 clamp(22px,3vw,30px)/1.25 var(--serif);margin:0 0 8px;color:#fff}
.hapabox-outbound-energy{
  font:700 clamp(16px,2.1vw,20px)/1.4 var(--sans);margin:0 0 12px;color:#fff;letter-spacing:-.01em;
}
.hapabox-outbound-energy span{background:linear-gradient(90deg,#ff5fa8,#5fa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hapabox-outbound-sub{color:rgba(255,255,255,.68);max-width:420px;margin:0 auto 22px;line-height:1.6;font-size:13.5px}
.hapabox-outbound-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#c86bff,#5fa8ff);color:#0a0616;
  border-radius:var(--radius-pill);padding:20px 42px;font-weight:800;font-size:14.5px;
  letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 16px 38px -12px rgba(160,110,255,.75);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.hapabox-outbound-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(160,110,255,.9)}
.hapabox-outbound-disclaimer{font-size:11px;color:rgba(255,255,255,.48);max-width:440px;margin:16px auto 0;line-height:1.6}
@media(max-width:680px){
  .hapabox-outbound{padding:26px 18px 22px}
  .hapabox-outbound-cta{width:100%;padding:20px 24px}
}

@media(max-width:950px){
  .hapabox-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .hapabox-cat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .hapabox-cat-card{aspect-ratio:1/1}
  .hapabox-cat-body{padding:12px 14px}
  .hapabox-cat-body h3{font-size:15px}
  .hapabox-cat-body p{display:none}
}

/* ==========================================================================
   "TikTok Made Me Buy It" viral-discovery page. Deliberately warmer/louder
   than the rest of the site (hot-pink/orange gradient vs. the navy/paper
   palette everywhere else) so it reads as its own distinct destination, but
   still built from the same pill/radius/shadow tokens as every other page
   rather than a disconnected design system. */
.viral-hero{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  margin:0 0 30px;padding:56px 60px;color:#fff;
  background:radial-gradient(circle at 85% 20%,rgba(255,102,196,.35),transparent 55%),
             linear-gradient(135deg,#2b0a3d,#160418 60%,#0c0210);
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:24px;
}
.viral-hero-eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#ffe1f3;background:rgba(255,102,196,.16);border:1px solid rgba(255,102,196,.4);
  border-radius:var(--radius-pill);padding:7px 16px;margin:0 0 18px;
}
.viral-hero-title{
  font:800 clamp(34px,5vw,58px)/1.02 var(--serif);margin:0 0 14px;letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff,#ffd6ee 60%,#ffb3e0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.viral-hero-sub{font-size:17px;font-weight:600;color:#ffd6ee;margin:0 0 10px}
.viral-hero-copy{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.7;max-width:480px;margin:0 0 26px}
.viral-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.viral-hero-cta{
  border-radius:var(--radius-pill);padding:16px 26px;font-weight:800;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.28);transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.viral-hero-cta:hover{transform:translateY(-2px)}
.viral-hero-cta.primary{
  background:linear-gradient(180deg,#ff5fa8,#c81d6e);border-color:transparent;
  box-shadow:0 14px 30px -10px rgba(255,60,150,.6);
}
.viral-hero-cta.primary:hover{box-shadow:0 18px 36px -10px rgba(255,60,150,.75)}
.viral-hero-disclaimer{font-size:11px;color:rgba(255,255,255,.42);line-height:1.6;max-width:460px;margin:0}
.viral-hero-mascot{display:flex;align-items:center;justify-content:center}
.viral-hero-mascot img{width:100%;max-width:260px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}

.viral-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}
.viral-chip-row button{
  border:1px solid var(--line);background:#fff;border-radius:var(--radius-pill);
  padding:10px 16px;font-size:13px;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.viral-chip-row button:hover{border-color:#c81d6e;color:#c81d6e}
.viral-chip-row button.active{
  background:linear-gradient(180deg,#ff5fa8,#c81d6e);border-color:transparent;color:#fff;
  box-shadow:0 8px 18px -8px rgba(200,29,110,.55);
}
.viral-chip-count{opacity:.65;font-size:11px;margin-left:2px}

.viral-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.viral-card{
  border:1px solid rgba(18,34,52,.06);background:#fff;border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.viral-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.viral-card-image{position:relative;height:170px;background:linear-gradient(160deg,#f3f6f8,#e4eaf0);display:flex;align-items:center;justify-content:center;padding:14px;color:rgba(7,25,47,.5)}
.viral-card-image img{max-width:100%;max-height:100%;object-fit:contain}
.viral-card-image svg{width:30%;height:30%;min-width:56px;min-height:56px}
.viral-card-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:linear-gradient(180deg,#ff5fa8,#c81d6e);color:#fff;font:800 10.5px var(--sans);letter-spacing:.03em;
  padding:5px 9px;border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);text-transform:uppercase;
}
.viral-card-body{padding:16px 18px 18px}
.viral-card-merchant{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a97a2;margin-bottom:4px}
.viral-card-body h3{font:600 15px var(--serif);margin:0 0 10px;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.viral-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.viral-card-foot strong{font:600 16px var(--serif);color:var(--ink)}
.viral-card-foot button{
  border:0;background:var(--navy);color:#fff;border-radius:var(--radius-pill);
  padding:9px 14px;font-weight:700;font-size:11.5px;cursor:pointer;
  transition:background .2s var(--ease),transform .15s var(--ease);
}
.viral-card-foot button:hover{background:#c81d6e;transform:translateY(-1px)}

.viral-empty-note{text-align:center;color:var(--muted);padding:30px 0}

/* Dormant until data/mystery-box-of-week.json supplies a real referralUrl --
   see renderMysteryBoxOfWeek() in app.js. Deliberately reuses the same
   violet/purple palette as the real, already-live HapaBox conversion card
   (.hapabox-outbound on mystery-boxes.html) rather than this page's own
   pink/magenta accent, so it reads as HapaBox's own visual language dropped
   into an editorial break -- not just another viral-page product card. */
.viral-mystery-box{
  margin:30px 0;border-radius:var(--radius-lg);padding:36px 40px;text-align:center;
  background:radial-gradient(ellipse 320px 180px at 50% 0%,rgba(200,110,255,.28),transparent 70%),
             linear-gradient(135deg,#1a0f2e,#0a0616);color:#fff;
  border:1px solid rgba(200,160,255,.28);
}
.viral-mystery-box-eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#c9a8f5;background:rgba(200,110,255,.14);border:1px solid rgba(200,110,255,.35);
  border-radius:var(--radius-pill);padding:6px 14px;margin-bottom:14px;
}
.viral-mystery-box h3{font:600 clamp(22px,3vw,30px)/1.15 var(--serif);margin:0 0 10px}
.viral-mystery-box p{font-size:14px;color:rgba(255,255,255,.7);max-width:480px;margin:0 auto 20px}
.viral-mystery-box-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#c86bff,#5fa8ff);color:#0a0616;
  border-radius:var(--radius-pill);padding:16px 34px;font-weight:800;font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;box-shadow:0 16px 34px -12px rgba(160,110,255,.7);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.viral-mystery-box-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(160,110,255,.85)}
.viral-mystery-box .viral-mystery-box-disclosure{font-size:11px;color:rgba(255,255,255,.48);max-width:460px;margin:16px auto 0;line-height:1.6}
@media(max-width:680px){
  .viral-mystery-box{padding:26px 20px 22px}
  .viral-mystery-box-cta{width:100%;justify-content:center}
}
.viral-disclosure{font-size:11.5px;color:#9aa7b1;line-height:1.6;text-align:center;max-width:520px;margin:26px auto 10px}

/* Homepage compact module -- smaller/quieter than the dedicated page,
   same reuse-not-reinvent pattern as #home-deal-alerts-section. */
#viral-home-section .sub{text-align:center;max-width:480px;margin:0 auto 26px}
.viral-home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 22px}
.viral-home-card{
  border:1px solid rgba(18,34,52,.06);background:#fff;border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm);display:block;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.viral-home-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.viral-home-card-image{position:relative;height:130px;background:linear-gradient(160deg,#f3f6f8,#e4eaf0);display:flex;align-items:center;justify-content:center;padding:12px;color:rgba(7,25,47,.5)}
.viral-home-card-image img{max-width:100%;max-height:100%;object-fit:contain}
.viral-home-card-image svg{width:30%;height:30%;min-width:44px;min-height:44px}
.viral-home-card-body{padding:14px 16px 16px}
.viral-home-card-merchant{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a97a2;margin-bottom:4px}
.viral-home-card-body h3{font:600 13.5px var(--serif);margin:0 0 8px;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.viral-home-card-body strong{font:600 14px var(--serif);color:var(--navy)}
.viral-home-cta-wrap{display:flex;justify-content:center;margin:0 0 8px}
.viral-home-cta{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:var(--radius-pill);padding:13px 28px;font-weight:600;font-size:13px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.viral-home-cta:hover{border-color:#c81d6e;color:#c81d6e}

@media(max-width:950px){
  .viral-grid{grid-template-columns:repeat(3,1fr)}
  .viral-home-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .viral-hero{grid-template-columns:1fr;padding:32px 22px;text-align:left}
  .viral-hero-mascot{display:none}
  .viral-hero-ctas{flex-direction:column}
  .viral-hero-cta{width:100%;text-align:center}
  .viral-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .viral-card-image{height:130px}
  .viral-card-body{padding:12px 14px 14px}
  .viral-card-foot button{width:100%;text-align:center}
  .viral-home-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}