/* =====================================================================
   ReyBox — styles.css
   Sistema unico per home + ecommerce. Mobile-first, no-overflow.
   Palette: navy / arancio / giallo / cream.  Display: Barlow Condensed.
   ===================================================================== */

:root{
  --navy:#102A4C;
  --navy-2:#0c2140;
  --orange:#F4661E;
  --orange-bright:#FF6A1A;
  --yellow:#FFC72C;
  --cream:#FAF3E4;
  --cream-2:#F3E8CF;
  --ink:#16202B;
  --paper:#ffffff;
  --muted:rgba(22,32,43,.66);
  --muted-light:rgba(255,255,255,.74);
  --line:rgba(22,32,43,.12);

  --display:'Barlow Condensed',system-ui,'Arial Narrow',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --wrap:1180px;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 40px -22px rgba(16,42,76,.45);
  --shadow-soft:0 10px 30px -18px rgba(16,42,76,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; text-wrap:pretty; overflow-wrap:anywhere; }
h1,h2,h3,h4{ margin:0; overflow-wrap:break-word; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,5vw,40px); }
main{ display:block; }

/* ---------- typography scale ---------- */
.h1{
  font-family:var(--display);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.01em;
  font-size:clamp(2.6rem,8.4vw,5.6rem);
  text-transform:uppercase;
}
.h2{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.005em;
  font-size:clamp(1.85rem,4.6vw,3.1rem);
  text-transform:uppercase;
}
.h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.05;
  font-size:clamp(1.3rem,2.8vw,1.7rem);
  text-transform:uppercase;
  letter-spacing:.005em;
}
h4{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:1.02rem; }
.lead{ font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.55; }
.muted{ color:var(--muted); }
.text-yellow{ color:var(--yellow); }
.text-orange{ color:var(--orange); }

/* ---------- topbar marquee ---------- */
.topbar{ background:var(--navy); color:#fff; overflow:hidden; border-bottom:2px solid rgba(255,255,255,.06); }
.topbarTrack{
  display:flex; gap:42px; align-items:center; width:max-content;
  padding:9px 0; white-space:nowrap;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.84rem;
  animation:marquee 26s linear infinite;
}
.topbarTrack span{ display:inline-flex; gap:.5ch; align-items:center; opacity:.92; }
.topbarTrack b{ color:var(--yellow); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,243,228,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.headerInner{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:66px; }

.brandLogo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); }
.logoImg{ height:42px; width:auto; flex:none; }
.footer .logoImg{ height:48px; }
@media (max-width:380px){ .logoImg{ height:36px; } }

.navLinks{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.navLinks a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; font-size:.98rem; color:var(--navy);
  padding:6px 2px; transition:color .2s var(--ease);
}
.navLinks a:hover{ color:var(--orange); }
.navLinks a.shop{
  background:var(--navy); color:#fff; padding:9px 16px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
}
.navLinks a.shop:hover{ background:var(--orange); color:#fff; }
.cartBadge{
  background:var(--orange); color:#fff; font-size:.74rem; min-width:20px; height:20px;
  border-radius:999px; display:inline-grid; place-items:center; padding:0 5px; font-weight:800;
}

/* hamburger */
.hamb{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:#fff; position:relative; }
.hamb span,.hamb span::before,.hamb span::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:2.4px; background:var(--navy);
  border-radius:2px; transform:translate(-50%,-50%); transition:.25s var(--ease);
}
.hamb span::before{ transform:translate(-50%,-7px); }
.hamb span::after{ transform:translate(-50%,5px); }

/* mobile menu */
.mobileMenu{
  position:fixed; inset:0; z-index:90; background:var(--navy); color:#fff;
  padding:84px clamp(22px,7vw,48px) 40px; display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%); transition:transform .34s var(--ease); visibility:hidden;
}
.mobileMenu.open{ transform:none; visibility:visible; }
.mobileMenu a{
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.7rem;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); display:flex;
  justify-content:space-between; align-items:center; color:#fff;
}
.mobileMenu a span{ color:var(--yellow); }
.mobileMenu .mobileCta{
  margin-top:22px; background:var(--orange); border-radius:14px; justify-content:center;
  border:none; padding:18px; font-size:1.4rem;
}
.mobileClose{
  position:absolute; top:20px; right:20px; width:48px; height:48px; border-radius:12px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff;
  font-size:2rem; line-height:1; display:grid; place-items:center;
}
body.menu-open{ overflow:hidden; }

/* ---------- buttons / badges ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.02rem;
  padding:14px 24px; border-radius:999px; border:2px solid transparent; line-height:1;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.orangeBtn{ background:var(--orange); color:#fff; }
.orangeBtn:hover{ background:#d8530f; }
.whiteBtn{ background:#fff; color:var(--navy); border-color:var(--navy); }
.whiteBtn:hover{ background:var(--navy); color:#fff; }
.navyBtn{ background:var(--navy); color:#fff; }
.navyBtn:hover{ background:#0a1d36; }
.ctaRow{ display:flex; flex-wrap:wrap; gap:14px; }

.badge{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem;
  background:rgba(16,42,76,.08); color:var(--navy); padding:8px 14px; border-radius:999px;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none; }
.orangeBadge{ background:rgba(244,102,30,.16); color:#a23c0c; }
.navy .badge,.orange .badge,.dark .badge{ background:rgba(255,255,255,.14); color:#fff; }
.navy .orangeBadge,.orange .orangeBadge{ background:rgba(255,255,255,.18); color:#fff; }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--orange); color:#fff; overflow:hidden;
  padding:clamp(54px,9vw,104px) 0 clamp(120px,16vw,180px);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, rgba(255,199,44,.35), transparent 60%);
}
.heroInner{ position:relative; z-index:2; text-align:center; max-width:880px; }
.hero .badge{ background:rgba(255,255,255,.16); color:#fff; }
.heroTitle{ margin:20px auto 0; max-width:14ch; }
.heroTitle span{ display:block; }
.heroTitle .plate{
  color:var(--navy);
  -webkit-text-stroke:0;
}
.heroCopy{ margin:22px auto 0; max-width:60ch; color:rgba(255,255,255,.92); }
.hero .ctaRow{ justify-content:center; margin-top:30px; }
.hero .whiteBtn{ border-color:#fff; }

/* floating pills */
.heroPills{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.heroPill{
  position:absolute; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(.72rem,1.4vw,.95rem); letter-spacing:.03em; white-space:nowrap;
  background:#fff; color:var(--navy); padding:9px 16px; border-radius:999px;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.5); animation:floatPill 6s ease-in-out infinite;
}
.heroPill::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--orange); margin-right:8px; vertical-align:middle; }
.heroPill.p1{ top:9%; left:3%; animation-delay:0s; }
.heroPill.p2{ top:11%; right:3%; background:var(--yellow); animation-delay:.8s; }
.heroPill.p3{ bottom:11%; left:4%; background:var(--navy); color:#fff; animation-delay:1.6s; }
.heroPill.p3::before{ background:var(--yellow); }
.heroPill.p4{ bottom:13%; right:4%; background:var(--navy); color:#fff; animation-delay:2.2s; }
.heroPill.p4::before{ background:var(--orange); }
.heroPill.p5{ top:32%; left:1%; background:#fff; animation-delay:1.1s; }
.heroPill.p6{ top:36%; right:1%; background:var(--yellow); animation-delay:2.7s; }
@keyframes floatPill{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media (max-width:980px){
  .heroPill.p5,.heroPill.p6{ display:none; }
}
@media (max-width:760px){
  .heroPill.p4{ display:none; }
  .heroPill.p1{ top:6%; left:3%; }
  .heroPill.p2{ top:9%; right:3%; }
  .heroPill.p3{ bottom:6%; left:4%; }
}

/* ---------- video / laptop scroll ---------- */
.videoScroll{
  position:relative; height:210vh; z-index:5;
  background:linear-gradient(180deg,var(--orange) 0%, var(--orange) 20%, #f4894e 40%, var(--cream) 68%);
}
.videoSticky{
  position:sticky; top:0; height:100vh; display:grid; place-items:center;
  perspective:1500px; padding:0 clamp(16px,5vw,40px);
}
.laptopShell{
  width:min(960px,92vw); border-radius:16px 16px 10px 10px; overflow:hidden;
  background:#0a1424; box-shadow:0 50px 90px -40px rgba(7,16,30,.85), 0 0 0 2px rgba(255,255,255,.04) inset;
  transform-origin:50% 78%; will-change:transform;
}
.browserBar{
  display:flex; align-items:center; gap:8px; padding:11px 16px; background:#14233c;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.browserBar i{ width:11px; height:11px; border-radius:50%; background:#33455f; flex:none; }
.browserBar i:nth-child(1){ background:#ff5f57; }
.browserBar i:nth-child(2){ background:#febc2e; }
.browserBar i:nth-child(3){ background:#28c840; }
.browserBar strong{
  margin-left:10px; font-family:var(--body); font-weight:600; font-size:.82rem;
  color:rgba(255,255,255,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.laptopShell video{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; display:block; }

/* ---------- sections ---------- */
.section{ padding:clamp(56px,8vw,104px) 0; position:relative; }
.section.cream{ background:var(--cream); }
.section.navy{ background:var(--navy); color:#fff; }
.section.orange{ background:var(--orange); color:#fff; }
.section.yellow{ background:var(--yellow); color:var(--navy); }
.section.navy .muted,.section.orange .muted{ color:rgba(255,255,255,.78); }
.section.yellow .muted{ color:rgba(16,42,76,.72); }

.sectionHead{ max-width:720px; margin-bottom:clamp(30px,5vw,52px); }
.sectionHead .h2{ margin-top:16px; }
.sectionHead .lead{ margin-top:16px; }

/* ---------- grids ---------- */
.grid{ display:grid; gap:clamp(16px,2.4vw,24px); }
.grid3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.grid4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-soft); height:100%;
  display:flex; flex-direction:column; gap:12px;
}
.card p{ color:var(--muted); }
.card .h3{ margin-top:2px; }
.card.dark{ background:var(--navy); color:#fff; border-color:transparent; }
.card.dark p{ color:rgba(255,255,255,.76); }
.card.yellowCard{ background:var(--yellow); border-color:transparent; color:var(--navy); }
.card.yellowCard p{ color:rgba(16,42,76,.74); }
.navy .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#fff; box-shadow:none; }
.navy .card p{ color:rgba(255,255,255,.72); }

/* icon chip — always high contrast */
.cardIcon{
  width:52px; height:52px; border-radius:14px; flex:none;
  display:grid; place-items:center; background:var(--navy); color:#fff;
}
.cardIcon svg{ width:26px; height:26px; }
.yellowCard .cardIcon{ background:var(--navy); color:var(--yellow); }
.dark .cardIcon{ background:var(--orange); color:#fff; }
.navy .cardIcon{ background:var(--orange); color:#fff; }
.categoryCard .cardIcon{ background:var(--orange); color:#fff; }

/* ---------- minigame ---------- */
.minigameGrid{ display:grid; gap:clamp(16px,2.4vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.minigameCard{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--navy-2);
  box-shadow:var(--shadow); aspect-ratio:4/5;
}
.minigameCard img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.minigameCard:hover img{ transform:scale(1.04); }

/* ---------- store cards ---------- */
.storeCard{ padding:0; overflow:hidden; }
.storeImage{ aspect-ratio:16/10; overflow:hidden; background:var(--navy-2); }
.storeImage img{ width:100%; height:100%; object-fit:cover; }
.soonVisual{
  aspect-ratio:16/10; display:grid; place-items:center; text-align:center;
  background:repeating-linear-gradient(135deg,var(--navy) 0 22px,#15325a 22px 44px); color:#fff;
}
.soonVisual b{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.05; }
.storeBody{ padding:clamp(20px,3vw,26px); display:flex; flex-direction:column; gap:8px; }
.storeBody p{ color:var(--muted); }
.status{
  align-self:flex-start; font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:.78rem; padding:5px 12px; border-radius:999px;
  background:#1f8a4d; color:#fff;
}
.status.opening{ background:var(--orange); }
.status.soon{ background:var(--navy); }

/* ---------- shop band / weights (home) ---------- */
.shopBand{ display:grid; gap:clamp(26px,4vw,48px); align-items:center; grid-template-columns:1.2fr .8fr; }
.shopBand .sectionHead{ margin-bottom:0; }
.weights{ display:grid; gap:14px; }
.weight{
  background:rgba(16,42,76,.92); color:#fff; border-radius:var(--radius); padding:20px 24px;
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.weight b{ font-family:var(--display); font-size:clamp(1.7rem,4vw,2.4rem); line-height:1; color:var(--yellow); }
.weight span{ font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; opacity:.85; }
@media (max-width:820px){ .shopBand{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faqList{ display:grid; gap:14px; max-width:820px; }
.faqItem{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.faqQ{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px clamp(18px,3vw,26px); background:none; border:none; text-align:left;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.12rem; color:var(--navy);
}
.faqPlus{ font-size:1.6rem; line-height:1; color:var(--orange); transition:transform .3s var(--ease); flex:none; }
.faqItem.open .faqPlus{ transform:rotate(45deg); }
.faqA{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.faqItem.open .faqA{ grid-template-rows:1fr; }
.faqA>div{ overflow:hidden; }
.faqAInner{
  padding:0 clamp(18px,3vw,26px);
  color:var(--muted); font-size:1rem; line-height:1.6;
  opacity:0; transition:opacity .25s var(--ease), padding .32s var(--ease);
}
.faqItem.open .faqAInner{ padding:4px clamp(18px,3vw,26px) 24px; opacity:1; }

/* =====================================================================
   ECOMMERCE
   ===================================================================== */
.shopHero{ background:var(--navy); color:#fff; padding:clamp(46px,7vw,84px) 0; }
.shopHeroInner{ display:grid; gap:clamp(30px,5vw,56px); grid-template-columns:1.05fr .95fr; align-items:center; }
.shopHeroInner .h1{ line-height:.96; }
.shopHeroInner .lead{ margin-top:18px; color:rgba(255,255,255,.8); max-width:48ch; }
.shopHero .badge{ background:rgba(255,255,255,.14); color:#fff; }
@media (max-width:880px){ .shopHeroInner{ grid-template-columns:1fr; } }

.splitChoice{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.choiceBox{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:4px; transition:.2s var(--ease);
}
.choiceBox:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
.choiceBox b{ font-family:var(--display); text-transform:uppercase; font-size:1.3rem; line-height:1; }
.choiceBox span{ font-size:.9rem; color:rgba(255,255,255,.72); }
@media (max-width:420px){ .splitChoice{ grid-template-columns:1fr; } }

.portalCards{ display:grid; gap:16px; }
.portalCard{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:clamp(22px,3vw,30px); color:#fff;
}
.portalCard p{ color:rgba(255,255,255,.76); margin-top:10px; }
.portalCard.yellowCard{ background:var(--yellow); color:var(--navy); border-color:transparent; }
.portalCard.yellowCard p{ color:rgba(16,42,76,.78); }

.marketingStrip{ background:var(--cream); padding:clamp(34px,5vw,56px) 0; }
.marketingGrid{ display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.marketingItem{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); }
.marketingItem b{ font-family:var(--display); text-transform:uppercase; font-size:1.5rem; line-height:1; display:block; color:var(--navy); }
.marketingItem p{ margin-top:8px; color:var(--muted); }
.navy .marketingItem{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
.navy .marketingItem b{ color:#fff; }
.navy .marketingItem p{ color:rgba(255,255,255,.72); }

/* carousel */
.boxCarousel .sectionHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; max-width:none; flex-wrap:wrap; }
.boxCarousel .sectionHead>div{ max-width:620px; }
.carouselControls{ display:flex; gap:10px; }
.carouselBtn{
  width:50px; height:50px; border-radius:50%; border:2px solid var(--navy); background:#fff; color:var(--navy);
  font-size:1.3rem; display:grid; place-items:center; transition:.2s var(--ease); flex:none;
}
.carouselBtn:hover{ background:var(--navy); color:#fff; }
.carouselShell{ position:relative; }
.carouselShell::after{
  content:""; position:absolute; top:0; right:0; bottom:14px; width:90px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cream)); z-index:2;
}
.boxTrack{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 90px 18px 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.boxTrack::-webkit-scrollbar{ display:none; }
.boxTrack>*{ scroll-snap-align:start; flex:0 0 clamp(230px,72vw,290px); }

/* product visual (CSS-drawn, no image asset needed) */
.pVisual{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; background:
    radial-gradient(120% 120% at 70% 0%, #1b3a63, var(--navy));
}
.pVisual.box{ background:radial-gradient(120% 120% at 70% 0%, #f4894e, var(--orange)); }
.pVisual.pallet{ background:radial-gradient(120% 120% at 70% 0%, #1b3a63, var(--navy)); }
.pVisual .pIcon{ width:46%; max-width:120px; opacity:.95; }
.pVisual .pWeight{
  position:absolute; right:12px; bottom:12px; font-family:var(--display); font-weight:900;
  text-transform:uppercase; font-size:1.5rem; line-height:1; color:#fff;
  background:rgba(0,0,0,.22); padding:6px 12px; border-radius:999px; backdrop-filter:blur(2px);
}
.pVisual .pTag{
  position:absolute; left:12px; top:12px; font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; padding:5px 11px;
  border-radius:999px; background:#fff; color:var(--navy);
}

/* product card */
.productGrid{ display:grid; gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.productCard{
  background:#fff; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-soft); height:100%;
}
.productCard .pVisual{ border-radius:0; }
.productBody{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.productBody h3{ font-family:var(--display); text-transform:uppercase; font-size:1.22rem; line-height:1.05; color:var(--navy); }
.productMeta{ display:flex; flex-wrap:wrap; gap:6px; }
.metaPill{ font-size:.74rem; font-weight:700; background:rgba(16,42,76,.08); color:var(--navy); padding:4px 9px; border-radius:999px; }
.productDesc{ font-size:.9rem; color:var(--muted); flex:1; }
.priceRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.price{ font-family:var(--display); font-weight:900; font-size:1.55rem; color:var(--navy); line-height:1; }
.price small{ font-size:.78rem; font-weight:600; color:var(--muted); font-family:var(--body); }
.addBtn{
  background:var(--orange); color:#fff; border:none; border-radius:999px; padding:10px 16px;
  font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:.9rem; transition:.2s var(--ease);
  display:inline-flex; align-items:center; gap:7px;
}
.addBtn:hover{ background:#d8530f; transform:translateY(-2px); }
.addBtn.added{ background:#1f8a4d; }

.productSection.navy .productCard{ color:var(--ink); }
.productToolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.filterPill{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:.82rem;
  background:rgba(255,255,255,.12); color:#fff; padding:7px 14px; border-radius:999px; }

/* come acquistare / panel */
.ecomBand{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,44px); align-items:center; }
.ecomBand .sectionHead{ margin-bottom:0; }
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,34px); box-shadow:var(--shadow-soft);
}
.section.navy .panel{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#fff; }
.miniList{ display:grid; gap:14px; }
.miniList li{
  display:flex; gap:12px; font-weight:600; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.miniList li:last-child{ border-bottom:none; padding-bottom:0; }
@media (max-width:820px){ .ecomBand{ grid-template-columns:1fr; } }

/* newsletter */
.newsletter{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,44px); align-items:center; }
.newsletterForm{ display:flex; gap:12px; flex-wrap:wrap; }
.newsletterForm input{
  flex:1 1 200px; min-width:0; padding:15px 18px; border-radius:999px; border:2px solid var(--navy);
  font:inherit; background:#fff; color:var(--ink);
}
@media (max-width:760px){ .newsletter{ grid-template-columns:1fr; } }

/* =====================================================================
   CARRELLO / CHECKOUT / PRODOTTO
   ===================================================================== */
.cartLayout{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(22px,3.5vw,36px); align-items:start; }
@media (max-width:900px){ .cartLayout{ grid-template-columns:1fr; } }

.cartList{ display:grid; gap:14px; }
.cartRow{
  display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px;
}
.cartRow .pVisual{ width:88px; aspect-ratio:1; border-radius:12px; }
.cartRow .pVisual .pWeight{ font-size:1rem; right:6px; bottom:6px; padding:3px 8px; }
.cartRow .pVisual .pIcon{ max-width:54px; }
.cartInfo h4{ font-size:1.18rem; color:var(--navy); }
.cartInfo .small{ font-size:.84rem; color:var(--muted); margin-top:3px; }
.cartControls{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.qtyBox{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qtyBox button{ width:34px; height:34px; background:#fff; border:none; font-size:1.2rem; color:var(--navy); }
.qtyBox button:hover{ background:var(--cream); }
.qtyBox span{ min-width:34px; text-align:center; font-weight:700; }
.lineTotal{ font-family:var(--display); font-weight:900; font-size:1.3rem; color:var(--navy); }
.removeBtn{ background:none; border:none; color:var(--muted); font-size:.82rem; text-decoration:underline; padding:0; }
.removeBtn:hover{ color:var(--orange); }
@media (max-width:520px){
  .cartRow{ grid-template-columns:64px 1fr; }
  .cartRow .pVisual{ width:64px; }
  .cartControls{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
}

.summary{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3.5vw,30px); box-shadow:var(--shadow-soft); position:sticky; top:84px;
}
.summary h2{ margin-bottom:18px; }
.sumRow{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-weight:600; }
.sumRow span:first-child{ color:var(--muted); }
.sumRow.total{ border-bottom:none; padding-top:16px; font-family:var(--display); text-transform:uppercase; }
.sumRow.total .val{ font-size:1.7rem; font-weight:900; color:var(--navy); }
.sumNote{
  margin-top:14px; background:rgba(244,102,30,.1); color:#a23c0c; border-radius:12px;
  padding:13px 15px; font-size:.88rem; font-weight:600; line-height:1.45;
}
.summary .btn{ width:100%; justify-content:center; margin-top:18px; }
.emptyCart{ text-align:center; padding:40px 20px; }
.emptyCart h3{ color:var(--navy); margin-bottom:10px; }
.emptyCart p{ color:var(--muted); margin-bottom:20px; }

/* forms */
.formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.formGrid .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:.82rem; letter-spacing:.04em; color:var(--navy); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font:inherit;
  background:#fff; color:var(--ink); transition:border .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--orange); }
.field textarea{ resize:vertical; min-height:96px; }
@media (max-width:560px){ .formGrid{ grid-template-columns:1fr; } }

/* product detail */
.productDetail{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,48px); align-items:start; }
.productDetail .pVisual{ aspect-ratio:1; border-radius:var(--radius); }
.productInfo h1{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,5vw,3rem); line-height:.98; color:var(--navy); }
.productInfo .price{ font-size:2.4rem; margin:8px 0; }
.productInfo .lead{ margin:6px 0 18px; }
.detailMeta{ display:grid; gap:10px; margin:18px 0; }
.detailMeta .row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.detailMeta .row b{ color:var(--navy); font-family:var(--display); text-transform:uppercase; font-size:.95rem; }
.detailBuy{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media (max-width:760px){ .productDetail{ grid-template-columns:1fr; } }

/* =====================================================================
   FOOTER + BEAM
   ===================================================================== */
.footer{ background:var(--navy); color:#fff; position:relative; overflow:hidden; padding-top:clamp(60px,9vw,96px); }
.footerBeam{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(4rem,20vw,15rem); line-height:.8; text-align:center; letter-spacing:-.02em;
  margin:0 0 -.12em; pointer-events:none; user-select:none; white-space:nowrap;
  background:linear-gradient(100deg,
    rgba(255,255,255,.06) 0%, rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.85) 44%, var(--orange-bright) 50%, rgba(255,255,255,.85) 56%,
    rgba(255,255,255,.06) 68%, rgba(255,255,255,.06) 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:beamSweep 6.5s ease-in-out infinite;
}
@keyframes beamSweep{ 0%{ background-position:140% 0 } 100%{ background-position:-40% 0 } }

.footer .wrap{ position:relative; z-index:2; }
.footerGrid{
  display:grid; gap:clamp(26px,4vw,40px); padding:clamp(30px,5vw,48px) 0;
  grid-template-columns:1.4fr .8fr 1fr 1fr;
}
.footerGrid p{ color:var(--muted-light); margin-top:14px; font-size:.95rem; max-width:34ch; }
.footerGrid h4{ color:#fff; margin-bottom:14px; }
.footerGrid a{ display:block; color:rgba(255,255,255,.74); padding:5px 0; font-size:.95rem; }
.footerGrid a:hover{ color:var(--yellow); }
.footerGrid .brandLogo{ margin-bottom:0; }
.footerGrid li{ color:rgba(255,255,255,.74); font-size:.95rem; line-height:1.5; }
.bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding:22px 0 30px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem; color:rgba(255,255,255,.6);
}
@media (max-width:880px){ .footerGrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footerGrid{ grid-template-columns:1fr; } }

/* ---------- reveal (default visibile; JS aggiunge willReveal/in) ---------- */
.reveal{ opacity:1; }
.willReveal{ opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.willReveal.in{ opacity:1; transform:none; }

/* ---------- responsive header ---------- */
@media (max-width:920px){
  .navLinks{ display:none; }
  .hamb{ display:block; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .topbarTrack{ animation:none; }
  .heroPill{ animation:none; }
  .footerBeam{ animation:none; background-position:50% 0; }
  .videoScroll{ height:auto; padding:0; background:var(--orange); }
  .videoSticky{ position:static; height:auto; padding:clamp(40px,6vw,80px) clamp(16px,5vw,40px); }
  .laptopShell{ transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- tiny screens safety ---------- */
@media (max-width:360px){
  .logoType{ font-size:1.3rem; }
  .btn{ padding:13px 18px; font-size:.95rem; }
}