/* ============================================================
   GRAZIA COLLECTIVE — design system
   Two worlds under one house:
   · GRAZIA      — elegant, editorial, serif, cream-on-charcoal
   · BENCH CULTURE — bold, sporting, condensed, club-color accents
   ============================================================ */

:root{
  /* warm near-black (matches the supplied logo plates) */
  --bg:        #1a1815;
  --bg-soft:   #211e1a;
  --bg-panel:  #262219;
  --ink:       #121110;     /* true dark for footers / overlays */

  /* bone / cream foreground */
  --cream:     #ece5d6;
  --cream-2:   #d8d0bf;
  --muted:     #968c79;
  --muted-2:   #6f6759;
  --line:      rgba(236,229,214,.14);
  --line-2:    rgba(236,229,214,.08);

  /* light product surfaces (the studio flats live here) */
  --paper:     #f4f0e7;
  --paper-2:   #ebe5d8;
  --paper-ink: #1f1c18;

  /* sub-brand signatures */
  --grazia-gold: #b89968;
  --bench-red:   #cf2c2c;   /* Ronaldo / Portugal */
  --bench-blue:  #3f93d4;   /* Messi / Argentina */
  --bench-gold:  #c6a233;   /* Neymar / Brazil */

  --radius:  3px;
  --ease:    cubic-bezier(.4,.01,.2,1);

  --ff-cinzel:   "Cinzel", Georgia, serif;
  --ff-cormorant:"Cormorant Garamond", Georgia, serif;
  --ff-anton:    "Anton", Impact, sans-serif;
  --ff-grotesk:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--ff-grotesk);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--cream); color:var(--bg); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#3a352c; border-radius:99px; border:3px solid var(--bg); }

/* ---- type helpers ---- */
.u-eyebrow{
  font-family:var(--ff-grotesk);
  font-size:11px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.u-serif{ font-family:var(--ff-cormorant); }
.u-cinzel{ font-family:var(--ff-cinzel); letter-spacing:.08em; }
.u-anton{ font-family:var(--ff-anton); letter-spacing:.01em; text-transform:uppercase; }

/* ---- layout ---- */
.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; }
.wrap-wide{ width:100%; max-width:1480px; margin:0 auto; padding:0 32px; }
@media(max-width:640px){ .wrap,.wrap-wide{ padding:0 18px; } }

/* fade-in on mount */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.anim{ animation:fadeUp .7s var(--ease) both; }

/* checkout step — NO entrance animation: this is critical content and the
   preview iframe can freeze CSS animations at frame 0, hiding the form. */
.ck-step{ opacity:1; }

/* generic divider */
.rule{ height:1px; background:var(--line); border:0; }

/* buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-grotesk); font-weight:600;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 30px; border-radius:var(--radius);
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-cream{ background:var(--cream); color:var(--bg); }
.btn-cream:hover{ background:#fff; transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--cream); background:rgba(236,229,214,.05); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:#000; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* link with underline grow */
.link-u{ position:relative; }
.link-u::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.link-u:hover::after{ transform:scaleX(1); }

/* marquee */
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-33.33%);} }
.mq{ animation:marquee 32s linear infinite; }
.mq:hover{ animation-play-state:paused; }

/* index links */
.idx-link{ transition:transform .4s var(--ease); }
.idx-link:hover{ transform:translateY(-3px); }

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .grid-4{ grid-template-columns:repeat(3,1fr) !important; }
  .pdp-grid{ grid-template-columns:1fr !important; gap:34px !important; }
  .pdp-gallery{ position:static !important; }
  .checkout-grid{ grid-template-columns:1fr !important; gap:36px !important; }
}
@media(max-width:760px){
  .nav-main{ gap:18px !important; }
  .nav-main button{ font-size:11px !important; }
  .nav-bag-label{ display:none; }
  .grid-3{ grid-template-columns:repeat(2,1fr) !important; }
  .grid-4{ grid-template-columns:repeat(2,1fr) !important; }
  .two-world{ grid-template-columns:1fr !important; }
  .bench-feats{ grid-template-columns:1fr !important; }
  .split-gate{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:560px){
  .grid-3{ grid-template-columns:1fr 1fr !important; gap:14px !important; }
  .nav-main{ gap:14px !important; }
  .nav-main button{ font-size:10px !important; letter-spacing:.1em !important; }
}