/* =========================================================
   SUPERKART — SHARED STYLESHEET
   Stessa palette, stessa tipografia, stesso linguaggio visivo
   usato in tutte le pagine del sito (home + pagine prodotto).
========================================================= */

:root{ scroll-behavior:smooth; }
::selection{ background:#C8102E; color:#F5F5F2; }
body{ background:#08090B; }

/* ---------- Film grain (very subtle, cinematic) ---------- */
.grain-overlay{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23g%29%22/%3E%3C/svg%3E");
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:#F5F5F2; color:#08090B; padding:12px 18px; font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid #C8102E; outline-offset:3px;
}

/* ---------- Header ---------- */
#site-header{ transition:background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease; }
#site-header.scrolled{
  background-color:rgba(8,9,11,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(197,199,209,0.08);
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}

/* ---------- Mobile menu ---------- */
#mobile-menu{
  transform:translateY(-100%); visibility:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .5s;
}
#mobile-menu.open{
  transform:translateY(0); visibility:visible;
  transition:transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear;
}

/* ---------- Text reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- Hero ---------- */
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
.scroll-indicator{ animation:bob 2.6s ease-in-out infinite; }
@keyframes lightsweep{
  0%{ transform:translateX(-120%) skewX(-12deg); }
  100%{ transform:translateX(220%) skewX(-12deg); }
}
.light-sweep{ animation:lightsweep 7s ease-in-out infinite; }

/* ---------- Car silhouette placeholder panels ---------- */
.spec-panel{
  background:
    repeating-linear-gradient(0deg, rgba(197,199,209,0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(197,199,209,0.05) 0 1px, transparent 1px 34px),
    radial-gradient(120% 100% at 30% 15%, #171A20 0%, #0D0F12 70%);
}

/* ---------- Tilt cards ---------- */
.tilt-card{ transform-style:preserve-3d; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; will-change:transform; }
.tilt-card:hover{ box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); }
.tilt-inner{ transform:translateZ(30px); }
.card-image-zoom{ transition:transform 1s cubic-bezier(.16,1,.3,1); }
.tilt-card:hover .card-image-zoom{ transform:scale(1.06); }
.glow-border{ position:relative; }
.glow-border::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(200,16,46,0.5), rgba(197,199,209,0.15), rgba(27,62,111,0.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.glow-border:hover::after{ opacity:1; }

/* ---------- Magnetic buttons ---------- */
.magnetic{ transition:transform .25s cubic-bezier(.16,1,.3,1); display:inline-flex; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .tilt-card{ transform:none !important; }
}

/* ---------- Utility ---------- */
.text-balance{ text-wrap:balance; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- Color chips ---------- */
.color-chip{ cursor:pointer; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; display:inline-block; }
.color-chip:hover{ filter:brightness(1.15); transform:scale(1.15); box-shadow:0 0 0 3px rgba(245,245,242,0.15); }
.color-chip.active{ box-shadow:0 0 0 3px rgba(245,245,242,0.4); }

/* ---------- Cart drawer ---------- */
#cart-panel{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s linear .35s; }
#cart-panel.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s ease; }
#cart-panel .cart-drawer{ transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
#cart-panel.open .cart-drawer{ transform:translateX(0); }

/* =========================================================
   PAGINA PRODOTTO — galleria, breadcrumb, accordion
   (stesso linguaggio visivo della scheda prodotto: sfondo
   scuro, testo offwhite/secondary, accenti rossi, bordi
   white/10, tipografia invariata)
========================================================= */

/* ---------- Gallery ---------- */
.pdp-thumb{
  cursor:pointer; opacity:.5; transition:opacity .2s ease, border-color .2s ease;
  border:1px solid rgba(255,255,255,0.1);
}
.pdp-thumb:hover{ opacity:.85; }
.pdp-thumb.active{ opacity:1; border-color:#F5F5F2; }

.pdp-gallery-nav{
  transition:background-color .2s ease;
}

/* ---------- Accordion ---------- */
.accordion-item{ border-top:1px solid rgba(255,255,255,0.1); }
.accordion-item:last-child{ border-bottom:1px solid rgba(255,255,255,0.1); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; text-align:left; background:none; border:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#F5F5F2; transition:color .2s ease;
}
.accordion-trigger:hover{ color:#FFFFFF; }
.accordion-chevron{ transition:transform .3s cubic-bezier(.16,1,.3,1); flex-shrink:0; color:#A5A7AC; }
.accordion-item.open .accordion-chevron{ transform:rotate(180deg); }
.accordion-panel{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1);
}
.accordion-item.open .accordion-panel{ grid-template-rows:1fr; }
.accordion-panel-inner{ overflow:hidden; }
.accordion-panel-content{ padding-bottom:1.5rem; color:#A5A7AC; font-size:14px; line-height:1.7; }

/* ---------- Breadcrumb ---------- */
.breadcrumb-link{ color:#A5A7AC; transition:color .2s ease; }
.breadcrumb-link:hover{ color:#F5F5F2; }