/* RELINK v6 — overrides production (caricato DOPO styles-v6.css, che resta
   byte-identico al design handoff e sopravvive a un re-handoff).
   Contenuto: (1) stati che il prototipo gestiva montando/smontando React,
   (2) hamburger mobile <760px (assente nel prototipo, requisito handoff),
   (3) accessibilità: reveal visibile senza JS, hit target ≥44px, safe-area,
   (4) shop enrichment: pill Facebook + griglia "Altri formati" plate/counter. */

/* ── 1. Reveal: mai contenuto invisibile senza JS / in print ────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 1; transform: none; }
  html.js .reveal { opacity: 0; transform: translateY(16px); }
  html.js .reveal.in { opacity: 1; transform: none; }
}
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── 2. Stati toggle (il prototipo montava/smontava i nodi) ─────────── */
.lang .lang-menu { display: none; }
.lang.open .lang-menu { display: block; }
.lang-item { text-decoration: none; color: inherit; box-sizing: border-box; }

.cart .cart-foot { display: none; }
.cart.has-items .cart-foot { display: block; }
.cart.has-items .cart-empty { display: none; }
.cart .badge, .nav .badge { pointer-events: none; }
.badge[hidden] { display: none !important; }
[data-checkout].co-off { opacity: 0.55; cursor: not-allowed; }
[data-checkout].shake { animation: rl-shake 0.4s ease; }
@keyframes rl-shake {
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Offset anchor sotto la nav sticky (~70px, handoff) */
section[id], #top { scroll-margin-top: 76px; }

/* ── 3. Hamburger + sheet mobile (<760px) ───────────────────────────── */
.menu-btn { display: none; position: relative; }
.mnav {
  position: fixed;
  inset: 0;
  /* sotto la nav sticky (50): brand+CTA+hamburger restano usabili per chiudere */
  z-index: 45;
  background: var(--bg);
  padding-top: 78px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mnav.open { opacity: 1; visibility: visible; transform: none; }
body.mnav-open { overflow: hidden; }
body.mnav-open .buybar { transform: translateY(110%); }
.mnav-in { display: flex; flex-direction: column; gap: 26px; padding-bottom: 40px; }
.mnav-links { display: flex; flex-direction: column; }
.mnav-links a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 4px 2px;
  font-size: 19px;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  letter-spacing: -0.02em;
}
.mnav-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
  position: relative;
}
.mnav-cart .badge { position: static; margin-left: auto; }
.mnav-lang-head {
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.mnav-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mnav-lang-grid .lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 13.5px;
}
.mnav-lang-grid .lang-item .c {
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 10px;
  color: var(--ink-3);
}
.mnav-lang-grid .lang-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  /* lang e cart vivono nel sheet; CTA resta sempre visibile (handoff) */
  .nav .lang, .nav .cart-btn { display: none; }
  .nav-cta { padding: 11px 14px !important; }
}

/* ── 4. Hit target ≥44px su mobile (handoff) ───────────────────────── */
@media (max-width: 760px) {
  .icon-btn, .lang-btn { min-width: 44px; min-height: 44px; }
  .plat { min-height: 44px; }
  .faq-q { min-height: 48px; }
  .cart .icon-btn.ci-rm { width: 38px; height: 38px; }
}

/* ── 5. Buy bar: safe-area iOS (handoff) + compattezza ≤640px ───────── */
.buybar { padding-bottom: env(safe-area-inset-bottom); }
body.has-buybar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  .buybar-in { gap: 10px; }
  .buybar-in > div:nth-child(2) { min-width: 0; }
  .buybar .bb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .bb-right { gap: 10px; }
  .buybar .bb-price { font-size: 17px; }
  .buybar .bb-was { display: none; }
  .buybar .btn { padding: 11px 14px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .buybar .bb-art { display: none; }
}

/* ── 6. Shop enrichment: pill Facebook + blocco "Altri formati" ─────── */
/* dot Facebook: pill assente nel vendor handoff (che resta byte-identico) */
.plat.p-facebook .dot { background: #1877f2; border-radius: 999px; }

/* Accessori plate/counter: card .plan riusate sotto la griglia .plans */
.formats { margin-top: 18px; }
.formats-head {
  font-family: var(--ff-mono, var(--mono, 'Geist Mono', monospace));
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.formats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.formats-grid .p-cta .btn { min-height: 44px; }
@media (max-width: 760px) {
  .formats-grid { grid-template-columns: 1fr; }
}

/* ── 7. Foto prodotto reali (harvest WP 2026-06-12, redesign post-feedback
   Sok: niente scatole bianche — le foto hanno fondo studio grigio uniforme,
   quindi full-bleed cover fino ai bordi della card, raccordata al radius.
   Solo sui formati plate/counter; swap per piattaforma in client.js. */
.p-img {
  /* annulla il padding della .plan (28px 26px, vendor) sui tre lati */
  margin: -28px -26px 18px;
  overflow: hidden;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  border-bottom: 1px solid var(--surface-border);
}
.p-img img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
@media (max-width: 760px) {
  .p-img img { height: 160px; }
}