/* =========================================================
   MINI GARAGE COLLECTIBLES — Design System
   Palette: matte graphite body / brushed steel / racing amber / deep red
   Type: Rajdhani (display, technical/motorsport) + Manrope (body) + JetBrains Mono (spec data)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Core palette — bright, airy, playful toy-shop showroom.
     Lighter than the old warm-cream scheme, with a set of candy accents
     used to colour-code the bays, chips and badges. */
  --bg:            #FFFDFA;
  --bg-panel:      #FFFFFF;
  --bg-panel-2:    #FFF4E7;
  --bg-tint:       #F6FAFF;
  --bg-elevated:   #FFFFFF;
  --line:          rgba(28,22,12,0.075);
  --line-strong:   rgba(28,22,12,0.14);

  --steel-100:     #1E1A14;
  --steel-300:     #453E33;
  --steel-500:     #8A8072;
  --steel-700:     #B6AB9A;

  --amber:         #FF8A1F;
  --amber-bright:  #FFAB35;
  --amber-dim:     #E0700D;

  --red:           #FF4F5A;
  --red-bright:    #FF6E70;

  /* Candy accents — one per bay / category */
  --sky:           #2FA7FF;
  --mint:          #14C4A0;
  --grape:         #8B5CF6;
  --sun:           #FFC93C;

  --ink:           #2B261F;
  --ink-dim:       #6F6658;
  --ink-faint:     #A2988A;

  /* Type */
  --f-display: 'Rajdhani', sans-serif;
  --f-body: 'Manrope', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22,.85,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 var(--pad); }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight:700;
  letter-spacing: .01em;
  margin:0;
  color: var(--steel-100);
  text-transform: uppercase;
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background: var(--amber);
  display:inline-block;
}

.text-dim{ color: var(--ink-dim); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 30px;
  font-family: var(--f-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), background .3s, border-color .3s, color .3s, box-shadow .3s;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--amber-bright), var(--amber));
  color:#151208;
  box-shadow: 0 8px 24px -8px rgba(211,169,77,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(211,169,77,.7); }
.btn-outline{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--steel-100);
}
.btn-outline:hover{ border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* ============ Header ============ */
#site-header{ position: sticky; top:0; z-index:100; }
.header{
  position:relative;
  background: rgba(251,248,242,.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: padding .35s var(--ease), background .35s;
}
.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: padding .35s var(--ease);
  gap: 14px;
}
.header.is-scrolled .container{ padding-top:10px; padding-bottom:10px; }

.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; }
.brand img{ height:34px; width:auto; flex-shrink:0; transition: height .35s var(--ease); }
.header.is-scrolled .brand img{ height:28px; }
.brand-word{ font-family: var(--f-display); font-weight:700; letter-spacing:.04em; font-size:18px; color: var(--steel-100); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-word span{ color: var(--amber); }

.nav{ display:flex; align-items:center; gap:36px; }
.nav a{
  font-family: var(--f-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--ink-dim);
  position:relative;
  padding:6px 0;
  transition: color .25s;
}
.nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0%; height:2px; background: var(--amber);
  transition: width .3s var(--ease);
}
.nav a:hover, .nav a.active{ color: var(--steel-100); }
.nav a:hover::after, .nav a.active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.icon-btn{
  position:relative;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color: var(--steel-100);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.icon-btn:hover{ border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
.icon-btn svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background: var(--red-bright);
  color:#fff;
  font-family: var(--f-mono);
  font-size:10px;
  min-width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0 2px;
}

.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:50%; background:none; color:var(--steel-100); }
.nav-toggle svg{ width:18px; height:18px; }

/* ============ Marquee strip ============ */
.marquee-strip{
  background: var(--bg-panel);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  padding: 10px 0;
}
.marquee-track{ display:inline-flex; animation: marquee 26s linear infinite; }
.marquee-track span{
  font-family: var(--f-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--ink-dim);
  padding: 0 28px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.marquee-track span::before{ content:'◆'; color: var(--amber); font-size:8px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ Hero / Garage Door ============ */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  /* Scoped dark "showroom at night" theme — rest of the site stays light */
  --bg: #0A0C0F;
  --bg-panel: #14171C;
  --bg-elevated: #1B1F26;
  --steel-100: #F5F3EE;
  --steel-300: #C7CCD3;
  --ink: #EDEEF0;
  --ink-dim: #ADB2B9;
  --ink-faint: #767C85;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.20);
  --amber: #E8A23D;
  --amber-bright: #F6C878;
  background:
    radial-gradient(1100px 560px at 78% 18%, rgba(242,169,59,.16), transparent 60%),
    radial-gradient(900px 500px at 15% 85%, rgba(214,48,63,.16), transparent 60%),
    var(--bg);
}
.hero-grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 65% 40%, black, transparent 75%);
  pointer-events:none;
}

.hero .container{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items:center;
  width:100%;
}
.hero-copy .eyebrow{ margin-bottom:18px; }
.hero-copy h1{
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: .98;
  margin-bottom: 22px;
}
.hero-copy h1 .accent{ color: var(--amber); }
.hero-copy p{
  max-width: 480px;
  color: var(--ink-dim);
  font-size:17px;
  margin-bottom:34px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero-stats{ display:flex; gap:38px; flex-wrap:wrap; }
.hero-stat b{
  display:block;
  font-family: var(--f-display);
  font-size: 30px;
  color: var(--steel-100);
}
.hero-stat span{ font-family: var(--f-mono); font-size:11px; letter-spacing:.1em; color: var(--ink-faint); text-transform:uppercase; }

.hero-visual{ position:relative; }
.spotlight{
  position:absolute;
  width:520px; height:520px;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(211,169,77,.20), transparent 68%);
  filter: blur(4px);
  pointer-events:none;
}
.hero-visual-card{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  background: var(--bg-panel);
  transform: perspective(1000px) rotateY(-6deg) rotateX(2deg);
  transition: transform .5s var(--ease-soft);
  box-shadow: 0 30px 60px -24px rgba(60,45,20,.28);
}
.hero-visual-card:hover{ transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
.hero-visual-card img, .hero-visual-card video{ width:100%; height:100%; object-fit:cover; object-position:center; aspect-ratio: 4/4.15; display:block; }
.hero-tag{
  position:absolute; left:18px; bottom:18px;
  background: rgba(20,16,10,.82);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 16px;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size:11px;
  color: rgba(255,255,255,.72);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-tag b{ display:block; color: var(--amber-bright); font-size:14px; font-family:var(--f-display); text-transform:none; letter-spacing:0; margin-top:2px;}

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.2em; color: var(--ink-faint);
  text-transform:uppercase;
  z-index:3;
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--amber), transparent); animation: scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* ============ Section basics ============ */
.section{ padding: 110px 0; position:relative; }
.section-tight{ padding: 70px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:52px; flex-wrap:wrap;
}
.section-head h2{ font-size: clamp(30px, 4vw, 46px); margin-top:14px; max-width:640px; }
.section-head p{ color:var(--ink-dim); max-width:420px; font-size:15px; }

.panel-alt{ background: var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* reveal-on-scroll — fades up with a slight 3D flip for depth */
.reveal{
  opacity:0;
  transform: translateY(40px) rotateX(10deg);
  transform-origin: bottom center;
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *{ }

/* ============ Bays (categories) ============ */
.bays{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; perspective: 1400px; }
.bays-hint{
  display:none; align-items:center; gap:8px; justify-content:center;
  margin-top:4px; font-family: var(--f-mono); font-size:11px; color: var(--ink-faint);
  letter-spacing:.08em; text-transform:uppercase;
}
.bays-hint svg{ width:14px; height:14px; animation: swipe-nudge 1.6s ease-in-out infinite; }
@keyframes swipe-nudge{ 0%,100%{ transform:translateX(0); opacity:.5; } 50%{ transform:translateX(5px); opacity:1; } }
.bay-card{
  position:relative;
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--bg-panel);
  min-height: 420px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bay-card:hover{ border-color: var(--amber); transform: translateY(-8px) rotateX(3deg) scale(1.01); box-shadow: 0 30px 55px -24px rgba(193,120,23,.35); }
.bay-media{ position:absolute; inset:0; }
.bay-media img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(.25) brightness(.62);
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-soft), filter .6s;
}
.bay-card:hover .bay-media img{ transform: scale(1.14); filter: grayscale(0) brightness(.75); }
.bay-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(8,9,11,.94) 8%, rgba(8,9,11,.15) 62%);
}
.bay-num{
  position:relative; z-index:2;
  font-family: var(--f-mono);
  font-size:12px;
  color: var(--amber-bright);
  letter-spacing:.15em;
  padding: 24px 24px 0;
}
.bay-body{ position:relative; z-index:2; padding: 10px 24px 28px; }
.bay-body h3{ font-size:26px; margin-bottom:8px; color:#FBF8F2; }
.bay-body p{ color: rgba(255,255,255,.72); font-size:14px; margin-bottom:16px; }
.bay-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-display); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color: #FBF8F2;
}
.bay-link svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.bay-card:hover .bay-link svg{ transform: translateX(5px); }

/* ============ Product grid / cards ============ */
.product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; perspective: 1400px; }
.product-card{
  position:relative;
  background: var(--bg-panel);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-8px) rotateX(3deg) scale(1.015); border-color: var(--amber); box-shadow: 0 28px 50px -24px rgba(193,120,23,.30); }
.product-media{
  position:relative; aspect-ratio: 4/3.1; overflow:hidden;
  background: #F3ECDD;
}
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-soft); }
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background: rgba(20,16,10,.85); border:1px solid rgba(255,255,255,.14);
  color: var(--amber-bright); font-family: var(--f-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-radius:20px;
}
.product-quickadd{
  position:absolute; right:14px; bottom:-46px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background: var(--amber); color:#151208;
  display:flex; align-items:center; justify-content:center;
  border:none; transition: bottom .4s var(--ease), transform .3s;
}
.product-card:hover .product-quickadd{ bottom:14px; }
.product-quickadd:hover{ transform: scale(1.08); }
.product-quickadd svg{ width:18px; height:18px; }

.product-info{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-cat{ font-family: var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); }
.product-info h3{ font-family: var(--f-display); font-size:19px; text-transform:none; letter-spacing:0; font-weight:600; color: var(--steel-100); }
/* The whole card is clickable via a stretched pseudo-element on the title
   link. Keeps the markup valid (no anchor nested inside an anchor, which
   is what used to split each card into blank grid tiles) while leaving the
   "Buy on Noon" button on top and independently clickable. */
.product-info h3 a{ color:inherit; text-decoration:none; }
.product-info h3 a::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius: var(--radius-lg);
}
.product-price-row{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; }
.price{ font-family: var(--f-mono); font-size:16px; color: var(--amber); font-weight:600; }
.price-old{ font-family: var(--f-mono); font-size:12px; color: var(--ink-faint); text-decoration: line-through; margin-right:8px; }
.stars{ display:flex; gap:2px; color: var(--amber); }
.stars svg{ width:12px; height:12px; }

/* ============ Feature split ============ */
.feature-split{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.feature-media{ position:relative; }
.feature-media-frame{
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line-strong);
  transform: rotate(-1.4deg);
  box-shadow: 0 30px 55px -28px rgba(60,45,20,.30);
}
.feature-media-frame img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.feature-media .plate{
  position:absolute; bottom:-22px; right:-18px;
  background: var(--bg-elevated); border:1px solid var(--line-strong);
  padding:14px 18px; border-radius: var(--radius);
  font-family: var(--f-mono); font-size:11px; color: var(--ink-dim); text-transform:uppercase; letter-spacing:.08em;
  box-shadow: 0 18px 34px -18px rgba(60,45,20,.22);
}
.feature-media .plate b{ display:block; color: var(--amber); font-size:20px; font-family: var(--f-display); letter-spacing:0; text-transform:none; }
.feature-copy .checklist{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.feature-copy .checklist li{ display:flex; gap:12px; align-items:flex-start; color: var(--ink-dim); font-size:15px; }
.feature-copy .checklist svg{ width:18px; height:18px; flex-shrink:0; color: var(--amber); margin-top:2px; }

/* ============ Testimonials ============ */
.testi-track{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; perspective: 1400px; }
.testi-card{
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding:30px; display:flex; flex-direction:column; gap:18px;
}
.testi-card .stars{ color: var(--amber); }
.testi-card p{ color: var(--steel-300); font-size:15px; line-height:1.7; }
.testi-user{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-avatar{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--amber), var(--red));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-weight:700; color:#151208; font-size:14px;
}
.testi-user b{ display:block; font-size:13px; color: var(--steel-100); }
.testi-user span{ font-size:11px; color: var(--ink-faint); font-family: var(--f-mono); }

/* ============ Newsletter / CTA band ============ */
.cta-band{
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #F2A93B, #E63946);
  border:1px solid rgba(255,255,255,.25);
  padding: 60px clamp(24px,5vw,70px);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  position:relative; overflow:hidden;
  box-shadow: 0 30px 60px -26px rgba(214,66,40,.45);
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(600px 260px at 85% 20%, rgba(255,255,255,.18), transparent 70%);
}
.cta-band h2{ font-size: clamp(26px,3.2vw,38px); max-width:460px; position:relative; color:#fff; }
.cta-form{ display:flex; gap:10px; position:relative; min-width:320px; flex:1; max-width:440px; }
.cta-form input{
  flex:1; background: rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.4); border-radius: var(--radius);
  padding:15px 16px; color: var(--ink); font-size:14px;
}
.cta-form input:focus{ outline:2px solid #fff; outline-offset:2px; }
.cta-band .btn-primary{
  background: #1F1B15; color:#fff; box-shadow:none;
}
.cta-band .btn-primary:hover{ background:#000; }

/* ============ Footer ============ */
.footer{ background: var(--bg-panel); border-top:1px solid var(--line); padding-top:70px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer-brand img{ height:32px; margin-bottom:16px; }
.footer-brand p{ color: var(--ink-faint); font-size:14px; max-width:280px; }
.footer h4{ font-size:13px; letter-spacing:.1em; color: var(--steel-100); margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:11px; }
.footer-links a{ color: var(--ink-dim); font-size:14px; transition: color .25s, padding-left .25s; }
.footer-links a:hover{ color: var(--amber); padding-left:4px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-bottom{
  border-top:1px solid var(--line); padding:22px 0; display:flex;
  justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family: var(--f-mono); font-size:11px; color: var(--ink-faint); letter-spacing:.05em;
}
.footer-bottom a{ color: var(--ink-faint); }
.footer-bottom a:hover{ color: var(--amber); }
.payment-icons{ display:flex; gap:8px; align-items:center; color: var(--ink-faint); font-family:var(--f-mono); font-size:11px; }

/* ============ Page header (interior pages) ============ */
.page-header{
  padding: 160px 0 60px;
  position:relative;
  background: radial-gradient(900px 420px at 80% 0%, rgba(211,169,77,.10), transparent 65%), var(--bg);
  border-bottom:1px solid var(--line);
}
.breadcrumb{ font-family: var(--f-mono); font-size:12px; color: var(--ink-faint); margin-bottom:18px; letter-spacing:.05em; }
.breadcrumb a{ color: var(--ink-dim); }
.breadcrumb a:hover{ color: var(--amber); }
.page-header h1{ font-size: clamp(34px,5vw,58px); }

/* ============ Shop filters ============ */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding: 26px 0; border-bottom:1px solid var(--line); margin-bottom:40px;
}
.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:9px 18px; border:1px solid var(--line-strong); border-radius:30px;
  font-family: var(--f-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--ink-dim); transition: all .3s;
  background:none; cursor:pointer;
}
.chip:hover{ border-color: var(--amber); color: var(--amber); }
.chip.active{ background: var(--amber); border-color: var(--amber); color:#151208; }
.sort-select{
  background: var(--bg-panel); border:1px solid var(--line-strong); color: var(--ink);
  padding:10px 14px; border-radius: var(--radius); font-family: var(--f-mono); font-size:12px;
}

/* ============ Product detail ============ */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:flex-start; min-width:0; }
.gallery{ min-width:0; }
.gallery-main{
  aspect-ratio: 4/3.4; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background:#F3ECDD; margin-bottom:16px; position:relative;
}
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:12px; min-width:0; }
.gallery-thumbs button{
  width:78px; height:66px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  background:#F3ECDD; padding:0; opacity:.6; transition: opacity .3s, border-color .3s;
}
.gallery-thumbs button.active, .gallery-thumbs button:hover{ opacity:1; border-color: var(--amber); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; }

.pd-cat{ font-family: var(--f-mono); font-size:12px; color: var(--amber); letter-spacing:.14em; text-transform:uppercase; }
.pd-title{ font-size: clamp(28px,3.4vw,42px); margin: 12px 0 16px; }
.pd-rating{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.pd-rating span{ font-family: var(--f-mono); font-size:12px; color: var(--ink-faint); }
.pd-price{ font-family: var(--f-mono); font-size:30px; color: var(--amber); margin-bottom:22px; }
.pd-desc{ color: var(--ink-dim); font-size:15px; line-height:1.8; margin-bottom:26px; }

.qty-row{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
.qty-stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius: var(--radius); }
.qty-stepper button{ width:42px; height:44px; background:none; border:none; color: var(--steel-100); font-size:18px; }
.qty-stepper button:hover{ color: var(--amber); }
.qty-stepper span{ width:40px; text-align:center; font-family: var(--f-mono); }
.stock-ok{ font-family: var(--f-mono); font-size:12px; color:#7bc47f; display:flex; align-items:center; gap:6px; }
.stock-ok::before{ content:''; width:7px; height:7px; border-radius:50%; background:#7bc47f; }

.pd-actions{ display:flex; gap:14px; margin-bottom:30px; }
.pd-meta{ display:flex; flex-direction:column; gap:10px; padding-top:26px; border-top:1px solid var(--line); font-family: var(--f-mono); font-size:12px; color: var(--ink-faint); }
.pd-meta b{ color: var(--ink-dim); }

.specs-table{ width:100%; border-collapse:collapse; margin-top:14px; }
.specs-table tr{ border-bottom:1px solid var(--line); }
.specs-table td{ padding:14px 6px; font-size:14px; }
.specs-table td:first-child{ color: var(--ink-faint); font-family: var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; width:40%; }
.specs-table td:last-child{ color: var(--steel-300); }

.pd-tabs{ display:flex; gap:8px; margin: 60px 0 0; border-bottom:1px solid var(--line); }
.pd-tab{ background:none; border:none; padding:14px 6px; margin-right:26px; font-family: var(--f-display); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:13px; color: var(--ink-faint); position:relative; }
.pd-tab.active{ color: var(--steel-100); }
.pd-tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--amber); }
.pd-tab-panel{ display:none; padding: 30px 0; color: var(--ink-dim); font-size:15px; line-height:1.8; max-width:760px; }
.pd-tab-panel.active{ display:block; }

/* ============ Cart page ============ */
.cart-layout{ display:grid; grid-template-columns: 1.7fr 1fr; gap:50px; align-items:flex-start; }
.cart-row{
  display:grid; grid-template-columns: 90px 1fr auto auto auto; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.cart-row img{ width:90px; height:70px; object-fit:cover; border-radius: var(--radius); border:1px solid var(--line); }
.cart-row h4{ font-family: var(--f-display); font-size:16px; text-transform:none; letter-spacing:0; color: var(--steel-100); font-weight:600; }
.cart-row .cart-cat{ font-family: var(--f-mono); font-size:11px; color: var(--ink-faint); text-transform:uppercase; margin-top:4px; }
.cart-remove{ background:none; border:none; color: var(--ink-faint); transition: color .3s; }
.cart-remove:hover{ color: var(--red-bright); }
.cart-price{ font-family: var(--f-mono); color: var(--amber); font-weight:600; }
.summary-card{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px; position:sticky; top:110px; }
.summary-row{ display:flex; justify-content:space-between; padding:12px 0; font-size:14px; color: var(--ink-dim); border-bottom:1px solid var(--line); }
.summary-row.total{ color: var(--steel-100); font-family: var(--f-display); font-size:20px; border-bottom:none; padding-top:18px; }
.empty-state{ text-align:center; padding:100px 20px; }
.empty-state svg{ width:64px; height:64px; color: var(--ink-faint); margin-bottom:20px; }

/* ============ Forms (contact) ============ */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field.full{ grid-column: 1/-1; }
.form-field label{ font-family: var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.form-field input, .form-field textarea{
  background: var(--bg-panel); border:1px solid var(--line-strong); border-radius: var(--radius);
  padding:14px 16px; color: var(--ink); font-size:14px; transition: border-color .3s;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color: var(--amber); }

/* ============ Misc ============ */
.divider-dashed{ border:none; border-top:2px dashed var(--line-strong); margin: 0; }
.badge-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line-strong); padding:8px 14px; border-radius:30px; }

.toast{
  position:fixed; bottom:26px; right:26px; z-index:999;
  background: var(--bg-elevated); border:1px solid var(--line-strong); color: var(--steel-100);
  padding:16px 22px; border-radius: var(--radius); font-size:14px;
  display:flex; align-items:center; gap:12px;
  transform: translateY(30px); opacity:0; pointer-events:none;
  transition: transform .5s var(--ease), opacity .5s;
  box-shadow: 0 18px 36px -14px rgba(60,45,20,.28);
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:20px; height:20px; color:#7bc47f; }

.back-to-top{
  position:fixed; right:26px; bottom:26px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background: var(--bg-elevated); border:1px solid var(--line-strong); color: var(--steel-100);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .4s var(--ease);
  box-shadow: 0 14px 30px -12px rgba(60,45,20,.25);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ border-color: var(--amber); color: var(--amber); }
.back-to-top svg{ width:18px; height:18px; }

/* ============ Loader ============ */
#page-loader{
  position:fixed; inset:0; z-index:9999; background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s var(--ease), visibility .35s;
}
#page-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#page-loader img{ height:44px; animation: pulse-fade 1.4s ease-in-out infinite; }
@keyframes pulse-fade{ 0%,100%{ opacity:.4;} 50%{ opacity:1;} }

/* ============ Responsive ============ */
@media (max-width: 1150px){
  .bays{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; margin:0 auto; }
  .bays{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .feature-split{ grid-template-columns:1fr; gap:50px; }
  .testi-track{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .product-detail{ grid-template-columns:1fr; gap:40px; }
  .cart-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .nav{
    position:fixed; inset: 0 0 0 30%; top:0; height:100vh;
    background: var(--bg-panel); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding: 100px 30px; gap:26px;
    transform: translateX(100%); transition: transform .45s var(--ease);
    z-index:90;
  }
  .nav.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .header-actions .icon-btn.acct{ display:none; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
  .cart-row{ grid-template-columns: 60px 1fr; grid-template-areas: "img title" "img price" "img qty"; row-gap:8px; }
  .cart-row img{ grid-area:img; width:60px; height:60px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .section{ padding:70px 0; }

  /* Bays become a swipeable showroom strip instead of a flat stack —
     snap-scroll with a peek of the next card so it reads as browsable. */
  .bays{
    display:flex;
    grid-template-columns: none;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:14px;
    margin:0 calc(var(--pad) * -1);
    padding: 4px var(--pad) 18px;
  }
  .bays::-webkit-scrollbar{ display:none; }
  .bay-card{
    flex: 0 0 82%;
    scroll-snap-align:center;
    min-height:360px;
  }
  .bays-hint{ display:flex; }
}
@media (max-width: 520px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
  .hero-stats{ gap:22px; }
  .brand-word{ display:none; }
  .header-actions{ gap:8px; }
  .icon-btn{ width:36px; height:36px; }
  .icon-btn svg{ width:16px; height:16px; }
}

/* =========================================================
   CUSTOM CURSOR
   Two layers: #bay-cursor carries POSITION ONLY (no transition,
   so it never lags behind the pointer), .cursor-shape carries the
   visible ring and every morph transition. Desktop (fine pointer)
   only — never shown on touch devices.

   ---- Swapping in your own cursor artwork ----
   Drop the file at images/brand/cursor.png and uncomment the
   .cursor-shape rule marked CUSTOM ARTWORK below.
   ========================================================= */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor input,
.has-custom-cursor select,
.has-custom-cursor textarea{ cursor:none; }

#bay-cursor{
  position:fixed; top:0; left:0; z-index:10000;
  pointer-events:none;
  width:0; height:0;
  opacity:0;
  transition: opacity .18s linear;
  will-change: transform;
}
#bay-cursor.ready{ opacity:1; }

.cursor-shape{
  position:absolute; top:0; left:0;
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  border:1.5px solid var(--amber);
  background: transparent;
  display:flex; align-items:center; justify-content:center;
  transition: width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease),
              border-radius .22s var(--ease), background-color .22s var(--ease),
              border-color .22s var(--ease), transform .16s var(--ease);
}
/* centre dot */
.cursor-shape::before{
  content:"";
  width:4px; height:4px; border-radius:50%;
  background: var(--amber);
  transition: opacity .16s linear, transform .22s var(--ease);
}

/* ---- CUSTOM ARTWORK (uncomment once images/brand/cursor.png exists) ----
.cursor-shape{
  border:none;
  background: url("../images/brand/cursor.png") center/contain no-repeat;
}
.cursor-shape::before{ display:none; }
------------------------------------------------------------------------ */

.cursor-label{
  font-family: var(--f-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#151208;
  opacity:0;
  white-space:nowrap;
  position:absolute;
  transition: opacity .16s linear;
}

/* Labelled targets ("Enter", "Buy", ...) — morph into an amber pill */
.cursor-shape.is-hover{
  width:auto; min-width:72px; height:34px;
  padding:0 16px;
  border-radius:30px;
  background: var(--amber);
  border-color: var(--amber);
  margin:-17px 0 0 -36px;
}
.cursor-shape.is-hover::before{ opacity:0; }
.cursor-shape.is-hover .cursor-label{ opacity:1; position:static; }

/* Plain links / buttons / fields — soft amber disc */
.cursor-shape.is-hover-simple{
  width:40px; height:40px;
  margin:-20px 0 0 -20px;
  background: rgba(224,138,43,.14);
  border-color: rgba(224,138,43,.55);
}
.cursor-shape.is-hover-simple::before{ transform: scale(.6); }

.cursor-shape.is-down{ transform: scale(.85); }

/* Entrance for the page you land on (no overlay, no navigation delay) */
.blur-in{
  filter: blur(8px);
  opacity:0;
  transform: translateY(10px);
  transition: filter .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}
.blur-in.is-in{ filter: blur(0); opacity:1; transform:none; }

/* =========================================================
   MOBILE STICKY BUY BAR (product detail page)
   ========================================================= */
.mobile-buy-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background: rgba(251,248,242,.96);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line-strong);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:14px;
  box-shadow: 0 -14px 30px -20px rgba(0,0,0,.25);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.mobile-buy-bar.show{ transform:translateY(0); }
.mobile-buy-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.mobile-buy-price{ font-family: var(--f-mono); font-weight:700; color: var(--amber); font-size:16px; }
.mobile-buy-name{ font-size:12px; color: var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-buy-bar .btn{ flex-shrink:0; padding:13px 20px; font-size:13px; }

@media (max-width: 760px){
  .mobile-buy-bar{ display:flex; }
  body[data-page="shop"] .pd-actions{ /* desktop CTA stays visible too; both work */ }
}

/* Tap/press feedback for touch — every primary interactive surface gets a
   tactile little press-down instead of relying on :hover, which touch
   devices fake awkwardly. */
@media (hover: none) and (pointer: coarse){
  .product-card:active{ transform: scale(.97); transition: transform .15s var(--ease); }
  .bay-card:active{ transform: scale(.97); transition: transform .15s var(--ease); }
  .btn:active{ transform: scale(.96); }
  .icon-btn:active{ transform: scale(.92); }
  .chip:active{ transform: scale(.95); }
  .product-quickadd:active{ transform: scale(.9); }
  /* Disable heavier hover-only transforms on touch so nothing feels stuck mid-hover */
  .product-card:hover, .bay-card:hover{ transform:none; }
}

/* Swipeable gallery hint on mobile product pages */
@media (max-width: 760px){
  .gallery-thumbs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .gallery-thumbs::-webkit-scrollbar{ display:none; }
  .gallery-thumbs button{ flex-shrink:0; }
  .gallery-main{ touch-action: pan-y; }
  .pd-actions{ margin-bottom:90px; } /* clear the sticky bar */
  .product-detail{ padding-bottom:0; }
}


/* =========================================================
   SIGNATURE BUILD SHOWCASE (home page — matte red Aventador)
   Light gradient panel: one hero still, a strip of supporting stills,
   spec chips and the two buying routes.
   ========================================================= */
.showcase{
  position:relative;
  background: linear-gradient(140deg, #FFF3E8 0%, #FFEDEE 45%, #F2F7FF 100%);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(255,79,90,.35);
  padding: clamp(28px, 4vw, 56px);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items:center;
}
.showcase::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(70% 60% at 18% 18%, rgba(255,79,90,.16), transparent 65%),
              radial-gradient(60% 60% at 92% 88%, rgba(47,167,255,.14), transparent 65%);
  pointer-events:none;
}
.showcase > *{ position:relative; z-index:1; }

.showcase-stage{ display:flex; flex-direction:column; gap:14px; }
.showcase-hero{
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--bg-panel);
  box-shadow: 0 18px 40px -22px rgba(30,26,20,.45);
}
.showcase-hero img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease-soft);
}
.showcase-stage:hover .showcase-hero img{ transform: scale(1.04); }
.showcase-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.showcase-strip img{
  width:100%; aspect-ratio: 4/3; object-fit:cover;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--bg-panel);
  opacity:.9; transition: opacity .35s var(--ease), transform .5s var(--ease-bounce), border-color .3s;
}
.showcase-strip img:hover{ opacity:1; transform: translateY(-4px); border-color: var(--red); }

.showcase-copy .eyebrow{ color: var(--red); }
.showcase-copy h2{ color: var(--steel-100); margin-top:10px; }
.showcase-copy h2 .accent{ color: var(--red); }
.showcase-copy p{ color: var(--ink-dim); margin-top:16px; line-height:1.8; font-size:15px; }

.showcase-specs{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(2,1fr); gap:10px;
}
.showcase-specs li{
  font-family: var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-dim);
  background: rgba(255,255,255,.72);
  border:1px solid var(--line-strong);
  border-radius:30px; padding:8px 14px; text-align:center;
  transition: transform .3s var(--ease-bounce), border-color .3s, color .3s;
}
.showcase-specs li:hover{ transform: translateY(-2px); border-color: var(--red); color: var(--red); }
.showcase-price{
  display:flex; align-items:baseline; gap:12px;
  margin-top:28px;
  font-family: var(--f-mono);
}
.showcase-price b{ font-size:30px; color: var(--red); font-weight:600; }
.showcase-price s{ font-size:14px; color: var(--ink-faint); }
.showcase-price em{
  font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background: var(--red);
  border-radius:20px; padding:5px 11px;
}
.showcase-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.showcase-cta .btn-outline{ background: rgba(255,255,255,.7); border-color: var(--line-strong); color: var(--steel-100); }
.showcase-cta .btn-outline:hover{ border-color: var(--red); color: var(--red); }

@media (max-width: 980px){
  .showcase{ grid-template-columns:1fr; }
  .showcase-copy{ order:-1; }
}
@media (max-width: 560px){
  .showcase-specs{ grid-template-columns:1fr; }
  .showcase-strip{ gap:10px; }
}

/* =========================================================
   PLAY LAYER
   Colour-coding and springy micro-interactions that make the
   shop feel like a toy shop rather than a spec sheet.
   Every rule here is additive — remove this block and the
   site still works, it just gets quieter.
   ========================================================= */

/* ---- Colour-coded bays ---------------------------------- */
.bays .bay-card:nth-child(1){ --bay: var(--red); }
.bays .bay-card:nth-child(2){ --bay: var(--sky); }
.bays .bay-card:nth-child(3){ --bay: var(--grape); }
.bays .bay-card:nth-child(4){ --bay: var(--mint); }

.bay-num{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff;
}
.bay-num::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background: var(--bay, var(--amber));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bay, var(--amber)) 28%, transparent);
}
.bay-card:hover{
  border-color: var(--bay, var(--amber));
  box-shadow: 0 30px 55px -24px color-mix(in srgb, var(--bay, var(--amber)) 55%, transparent);
}
.bay-card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3;
  background: var(--bay, var(--amber));
  transform: scaleX(0); transform-origin:left;
  transition: transform .45s var(--ease);
}
.bay-card:hover::after{ transform: scaleX(1); }
.bay-card:hover .bay-link{ color: var(--bay, var(--amber)); }

/* ---- Filter chips get their category colour -------------- */
.chip[data-cat="diecast"]{ --chip: var(--red); }
.chip[data-cat="rc"]{ --chip: var(--sky); }
.chip[data-cat="keychains"]{ --chip: var(--grape); }
.chip[data-cat="educational"]{ --chip: var(--mint); }
.chip[data-cat="all"]{ --chip: var(--amber); }
.chip{ transition: transform .3s var(--ease-bounce), background .25s, border-color .25s, color .25s; }
.chip:hover{ border-color: var(--chip, var(--amber)); color: var(--chip, var(--amber)); transform: translateY(-2px); }
.chip.active{
  background: var(--chip, var(--amber));
  border-color: var(--chip, var(--amber));
  color:#fff;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--chip, var(--amber)) 75%, transparent);
}

/* ---- Springy buttons and cards --------------------------- */
.btn{ transition: transform .35s var(--ease-bounce), background .3s, border-color .3s, color .3s, box-shadow .3s; }
.btn-primary{ box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--amber) 80%, transparent); }
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--amber) 85%, transparent); }
.btn:active{ transform: translateY(0) scale(.97); }

.product-card{ transition: transform .45s var(--ease-bounce), border-color .3s, box-shadow .45s; }
.product-card:hover{ box-shadow: 0 28px 50px -24px color-mix(in srgb, var(--amber) 55%, transparent); }

/* ---- Badges pop into place ------------------------------- */
.product-badge{
  background: linear-gradient(135deg, var(--amber-bright), var(--amber));
  border:none; color:#fff;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--amber) 85%, transparent);
  animation: badge-pop .5s var(--ease-bounce) both;
}
@keyframes badge-pop{ from{ transform: scale(.6) rotate(-6deg); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- Quick-buy button gets a little nudge ---------------- */
.product-quickadd{ transition: bottom .4s var(--ease-bounce), transform .3s var(--ease-bounce); }
.product-quickadd:hover{ transform: scale(1.14) rotate(-8deg); }

/* ---- Marquee dots cycle through the accent colours ------- */
.marquee-track span:nth-child(4n+1)::before{ color: var(--red); }
.marquee-track span:nth-child(4n+2)::before{ color: var(--sky); }
.marquee-track span:nth-child(4n+3)::before{ color: var(--grape); }
.marquee-track span:nth-child(4n+4)::before{ color: var(--mint); }

/* ---- Alternating sections pick up a soft tint ------------ */
.panel-alt{ background: var(--bg-tint); }

/* ---- CTA band: slow-drifting colour ---------------------- */
.cta-band{
  background: linear-gradient(120deg, var(--amber-bright), var(--red), var(--grape));
  background-size: 220% 220%;
  animation: cta-drift 16s ease-in-out infinite;
}
@keyframes cta-drift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

/* ---- Gallery thumbs feel clickable ----------------------- */
.gallery-thumbs button{ transition: opacity .3s, border-color .3s, transform .3s var(--ease-bounce); }
.gallery-thumbs button:hover{ transform: translateY(-3px); }

/* ---- Stars twinkle on card hover ------------------------- */
.product-card:hover .stars svg{ animation: star-pop .45s var(--ease-bounce) both; }
.product-card:hover .stars svg:nth-child(2){ animation-delay:.05s; }
.product-card:hover .stars svg:nth-child(3){ animation-delay:.1s; }
.product-card:hover .stars svg:nth-child(4){ animation-delay:.15s; }
.product-card:hover .stars svg:nth-child(5){ animation-delay:.2s; }
@keyframes star-pop{ 50%{ transform: scale(1.4) rotate(12deg); } to{ transform:none; } }

/* ---- Contact form: honeypot + status note ---------------- */
/* Kept out of the layout and out of the accessibility tree, but still
   a real focusable field so form-filling bots take the bait. */
.hp-field{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form-note{
  margin-top:14px;
  font-family: var(--f-mono);
  font-size:12px;
  line-height:1.6;
  color: var(--ink-faint);
}
.form-note.is-ok{ color: var(--mint); }
.form-note.is-error{ color: var(--red); }