/* Intestazione comune a tutte le pagine */
.sh{position:sticky;top:0;z-index:35;background:rgba(247,245,242,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.08);padding-top:env(safe-area-inset-top,0px)}
.sh--fixed{position:fixed;left:0;right:0}
.sh-in{max-width:1280px;margin:0 auto;padding:0 32px;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.sh-in>:last-child,.sh-in>.sh-btn{justify-self:end}
.sh-logo{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.sh-logo img{display:block;width:220px;height:auto;max-height:48px}
.sh-nav{display:flex;gap:28px}
.sh-nav a{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b665f;text-decoration:none;transition:color .2s}
.sh-nav a:hover{color:#1a1814}
.sh-has{position:relative;display:inline-flex;align-items:center}
.sh-sub{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:18px;z-index:40}
.sh-has:hover .sh-sub,.sh-has:focus-within .sh-sub{display:block}
.sh-sub a{display:block;white-space:nowrap;background:#f7f5f2;padding:13px 22px;border:1px solid rgba(0,0,0,.08);border-bottom:none;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.sh-sub a:first-child{border-radius:12px 12px 0 0}
.sh-sub a:last-child{border-bottom:1px solid rgba(0,0,0,.08);border-radius:0 0 12px 12px}
.sh-sub a:hover{background:#ece8e2;color:#1a1814}
.sh-nav a[aria-current]{color:#fff;background:#34303D;border-radius:100px;padding:6px 12px;margin:-6px -12px}
.sh-nav a.buy:not([aria-current]){color:#34303D}

.sh-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:#34303D;color:#fff;border:none;border-radius:6px;padding:10px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s}
.sh-btn:hover{background:#5a5266}
.sh-btn .n{background:#fff;color:#34303D;border-radius:100px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0;padding:0 6px;font-variant-numeric:tabular-nums}
@media (max-width:1150px){.sh-nav{gap:16px}.sh-nav a{font-size:11px;letter-spacing:.08em}.sh-nav a[aria-current]{padding:5px 8px;margin:-5px -8px}.sh-in{padding:0 20px}}
.sh-menu{display:none}
.sh-drop{display:none}
@media (max-width:900px){
  .sh-nav{display:none}
  .sh-in{padding:0 12px 0 16px;height:56px;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
  .sh-logo{min-width:0}
  .sh-logo img{width:178px;max-width:100%;max-height:42px}
  .sh-in>.sh-btn{justify-self:end}
  .sh-btn{font-size:11px;padding:8px 14px}
  .sh-menu{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:none;background:none;cursor:pointer;border-radius:8px;padding:0}
  .sh-menu span{display:block;width:22px;height:2px;background:#1a1814;border-radius:2px;transition:transform .2s,opacity .2s}
  .sh-menu.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .sh-menu.open span:nth-child(2){opacity:0}
  .sh-menu.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .sh-drop:not([hidden]){display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#f7f5f2;border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 14px 30px rgba(0,0,0,.12);padding:6px 16px 12px}
  .sh-drop a{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;font-weight:700;color:#1a1814;text-decoration:none;padding:14px 4px;border-bottom:1px solid rgba(0,0,0,.07)}
  .sh-drop a:last-child{border-bottom:none}
  .sh-drop a.sub{font-size:14px;font-weight:600;padding:11px 4px 11px 20px;color:#3d3a35}
  .sh-drop a.sub::before{content:'› ';color:#6b665f}
  .sh-drop a[aria-current]{color:#fff;background:#34303D;border-radius:8px;padding:14px;margin:4px 0;border-bottom:none}
}

/* Animazioni leggere (header.js aggiunge .anim solo ai blocchi sotto lo schermo, e solo se le animazioni sono attive) */
.anim{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.anim.on{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .rv-card,.pbox,.box{transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms),box-shadow .25s ease}
  .rv-card.on:hover,.rv-card:not(.anim):hover,.pbox:hover,.box:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(26,24,20,.28)}
}

/* Piccole animazioni utili (solo transform/opacity; spente con "riduci movimento") */
@media (prefers-reduced-motion:no-preference){
  /* card prodotto (Acquista, "Confronta con…", "Altri dispositivi"): si alzano e la foto si avvicina */
  #grid .card,.pp-cmp>a,.altri-row>a{transition:opacity .6s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),box-shadow .25s ease}
  #grid .card:hover,.pp-cmp>a:hover,.altri-row>a:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(26,24,20,.28)}
  #grid .card .media img,.pp-cmp>a img,.altri-row>a img{transition:transform .4s ease}
  #grid .card:hover .media img,.pp-cmp>a:hover img,.altri-row>a:hover img{transform:scale(1.04)}
  /* numero del carrello che "salta" quando cambia */
  .sh-btn .n.bump,#cartCount.bump{animation:riv98-bump .45s cubic-bezier(.2,.7,.2,1)}
  /* badge "€9 primo acquisto": un solo brillio all'apertura */
  .chip.promo.shine{overflow:hidden}  /* resta position:absolute nell'angolo della foto */
  .chip.promo.shine::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:riv98-shine .7s ease .5s 1 forwards;pointer-events:none}
}
@keyframes riv98-bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes riv98-shine{to{transform:translateX(120%)}}