/*
  Shop Walk 3D — componenti di vendita (scheda con foto, colori, stampa del logo, incentivi, soglie del carrello,
  benvenuto). Usa SOLO le variabili del tema in app.css: il tema ne cambia i valori, qui si cambia la struttura.
*/

/* ---------- foto grande del prodotto ---------- */
.scheda-foto { margin: -4px 0 14px; border-radius: calc(var(--raggio) - 4px); background: #fff; border: var(--bordo); overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: 34vh; }
.scheda-foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; }
@media (max-width: 640px) { .scheda-foto { max-height: 22vh; aspect-ratio: 16 / 9; } }

.scaglione-nota { margin: -8px 0 14px; font-size: 13px; color: var(--inchiostro-2); line-height: 1.45; }
.scaglione-nota b { color: var(--inchiostro); }

/* ---------- colori e versioni ---------- */
.scelta-colori, .scelta-opzioni { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.scelta-colori legend, .scelta-opzioni legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--inchiostro-2); letter-spacing: .01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scelta-val { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.scelta-val b { color: var(--inchiostro); font-weight: 700; }
.pallini { display: flex; flex-wrap: wrap; gap: 6px; }
.pallino-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 11px 4px 5px; border: var(--bordo); border-radius: 99px; background: var(--cartoncino); color: var(--inchiostro); font: 500 13px/1.1 var(--testo); cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pallino-btn:hover { border-color: var(--inchiostro-2); }
.pallino-btn[aria-checked="true"] { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); background: var(--cartoncino-2); font-weight: 700; }
.pallino-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.pallino-col, .pallino-mini { display: inline-block; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inchiostro) 22%, transparent); }
.pallino-col { width: 28px; height: 28px; }
.pallino-mini { width: 14px; height: 14px; vertical-align: -2px; }
.campo-errore { margin: 8px 0 0; color: var(--accento-scuro); font-size: 13px; font-weight: 700; }

.pulsanti-opz { display: flex; flex-wrap: wrap; gap: 6px; }
.pulsanti-opz button { min-height: 40px; padding: 6px 14px; border: var(--bordo); border-radius: 8px; background: var(--cartoncino); color: var(--inchiostro); font: 600 14px/1.1 var(--testo); cursor: pointer; transition: border-color .2s, background-color .2s; }
.pulsanti-opz button:hover { border-color: var(--inchiostro-2); }
.pulsanti-opz button[aria-checked="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--cartoncino); }
.pulsanti-opz button:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ---------- incentivi ---------- */
.incentivo, .conto-spinta { font-size: 13.5px; line-height: 1.45; color: var(--inchiostro); }
.incentivo { margin: -4px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--cartoncino-2); border: var(--bordo); }
.incentivo .link, .conto-spinta .link { margin-left: 4px; white-space: nowrap; }

/* ---------- personalizza con il logo ---------- */
.personalizza { margin: 4px 0 16px; padding: 16px 0 4px; border-top: 1px solid var(--filo); }
.personalizza h3, .abbina h3 { margin: 0 0 10px; font: 400 21px/1.15 var(--display); color: var(--inchiostro); }
.tecniche { display: grid; gap: 6px; margin-bottom: 12px; }
.tecnica { display: grid; gap: 3px; width: 100%; padding: 10px 12px; text-align: left; border: var(--bordo); border-radius: 10px; background: var(--cartoncino); color: var(--inchiostro); font: 400 13px/1.4 var(--testo); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.tecnica:hover { border-color: var(--inchiostro-2); }
.tecnica[aria-checked="true"] { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); background: var(--cartoncino-2); }
.tecnica:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.tecnica-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tecnica-testa b { font-size: 14.5px; font-weight: 700; }
.tecnica-testa span { font-size: 12.5px; font-weight: 600; color: var(--inchiostro-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tecnica-rende { color: var(--inchiostro-2); }
.stampa-scelta { display: grid; gap: 6px; margin-bottom: 10px; }
.stampa-scelta > span { font-size: 13px; font-weight: 600; color: var(--inchiostro-2); }
.stampa-conti { display: grid; gap: 6px; margin: 4px 0 10px; padding: 12px; border-radius: 10px; background: var(--cartoncino-2); }
.stampa-conti p { margin: 0; }
.stampa-conti .conto-riga { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--inchiostro-2); }
.stampa-conti .conto-riga > b { color: var(--inchiostro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conto-spinta { padding-top: 6px; border-top: 1px dashed var(--filo); }
.conto-spinta.ok { color: var(--verde); font-weight: 600; }
.conto-nota { font-size: 13.5px; color: var(--inchiostro-2); }
.consiglio { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; border: var(--bordo); font-size: 13.5px; line-height: 1.45; color: var(--inchiostro-2); }
.consiglio b { color: var(--inchiostro); }

.scheda-totale { padding-top: 12px; border-top: 1px solid var(--filo); }
.scheda-totale .subtotale { margin-bottom: 2px; }
.subtotale-dett { margin: 0 0 14px; font-size: 12.5px; color: var(--inchiostro-2); text-align: right; }
#schedaAggiungi + .pagina-catalogo { margin-top: 18px; }

/* ---------- abbinalo con ---------- */
.abbina { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--filo); }
.abbina-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.abbina-lista button { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 8px; border: var(--bordo); border-radius: 10px; background: #fff; color: var(--inchiostro); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.abbina-lista button:hover { border-color: var(--inchiostro-2); transform: translateY(-1px); }
.abbina-lista img, .abbina-segno { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.abbina-segno { border-radius: 8px; background: color-mix(in srgb, var(--c) 30%, var(--cartoncino-2)); }
.abbina-nome { font-size: 12px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.abbina-prezzo { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- carrello: stampa, soglie, conti ---------- */
.riga-stampa { color: var(--inchiostro) !important; }
.soglie { display: grid; gap: 10px; margin: 4px 0 12px; }
.soglia p { margin: 0 0 6px; display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: var(--inchiostro-2); }
.soglia p b { color: var(--inchiostro); }
.soglia svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.soglia-barra { display: block; height: 6px; border-radius: 99px; background: var(--cartoncino-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--filo); }
.soglia-barra i { display: block; height: 100%; border-radius: inherit; background: var(--verde); transition: width .6s var(--ease); }
.conti { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0 0 6px; font-size: 14px; color: var(--inchiostro-2); }
.conti dt, .conti dd { margin: 0; }
.conti dd { text-align: right; color: var(--inchiostro); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- benvenuto all'ingresso ---------- */
.benvenuto { position: fixed; left: 50%; top: 22%; z-index: 30; transform: translate(-50%, 10px); width: max-content; max-width: calc(100vw - 32px); padding: 16px 26px 18px; text-align: center; pointer-events: none; opacity: 0; color: var(--cartoncino); background: color-mix(in srgb, var(--inchiostro) 78%, transparent); backdrop-filter: blur(6px); border-radius: var(--raggio); box-shadow: var(--ombra); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.benvenuto.in { opacity: 1; transform: translate(-50%, 0); }
.benvenuto.via { opacity: 0; transform: translate(-50%, -8px); }
.benvenuto p { margin: 0; font: 400 clamp(20px, 3.2vw, 32px)/1.15 var(--display); letter-spacing: .005em; text-wrap: balance; }
.benvenuto-filo { display: block; width: 44px; height: 1px; margin: 0 auto 10px; background: var(--nastro); }
@media (prefers-reduced-motion: reduce) { .benvenuto { transition: opacity .3s linear; transform: translate(-50%, 0); } }
.totale-iva { font: 600 13px/1 var(--testo); color: var(--inchiostro-2); letter-spacing: 0; }
.scheda-sito { display: block; margin: 12px 0 0; text-align: center; font-size: 14px; }
#chiediPreventivo { margin-top: 8px; }
.riga-altri .riga-nome small { margin-top: 4px; }

/* ================= v1.2 — prima persona: mirino, pilota automatico, riquadro d'acquisto ================= */
#scena.trascina { cursor: grabbing; }

/* mirino discreto: un punto; sopra un prodotto a portata di mano diventa un anello d'ottone */
.mirino { position: fixed; z-index: 3; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; }
.mirino::before, .mirino::after { content: ""; position: absolute; inset: 0; border-radius: 50%; transition: transform .25s var(--ease), opacity .25s; }
.mirino::after { inset: 8px; background: rgba(251, 248, 242, .85); box-shadow: 0 0 0 1px rgba(29, 25, 21, .45); }
.mirino::before { box-shadow: 0 0 0 1.5px var(--nastro), inset 0 0 0 1px rgba(29, 25, 21, .25), 0 1px 4px rgba(0, 0, 0, .25); opacity: 0; transform: scale(.3); }
.mirino.attivo::before { opacity: 1; transform: none; }
.mirino.attivo::after { transform: scale(.5); }
.tocco .mirino { display: none; }

/* "Vado a: …" mentre il cliente cammina da solo */
.pilota { position: fixed; z-index: 12; left: 50%; top: calc(var(--alto) + 64px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 6px 6px 6px 14px; border-radius: 99px; background: rgba(29, 25, 21, .86); color: #f6efe2; font-size: 14px; font-weight: 500; box-shadow: var(--ombra); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: entra-su .45s var(--ease); }
.pilota svg { width: 18px; height: 18px; color: var(--nastro); }
.pilota > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pilota b { font-weight: 700; }
.pilota button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(246, 239, 226, .35); background: transparent; color: #f6efe2; font-size: 13px; font-weight: 700; transition: background-color .2s; }
.pilota button:hover { background: rgba(246, 239, 226, .12); }

/* pulsante Reparti nell'HUD */
.tasto-reparti { padding: 0 14px 0 12px; font-weight: 700; font-size: 14px; }

/* ---------- riquadro d'acquisto: il cartellino che compare accanto al prodotto in mano ---------- */
.presa {
  position: fixed; z-index: 18; right: var(--dx); top: calc(var(--alto) + 66px);
  width: min(344px, calc(100vw - 32px)); max-height: calc(100vh - var(--alto) - 66px - var(--basso));
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0; background: var(--cartoncino); border: var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 30px 60px -28px rgba(40, 28, 16, .55), 0 2px 10px rgba(40, 28, 16, .08);
  animation: presa-entra .5s var(--ease) both;
}
.presa[hidden] { display: none; }
/* contenuto che scorre sopra, pulsanti d'acquisto sempre visibili in fondo */
.presa-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cdbfa8 transparent; padding: 20px 20px 10px; }
.presa-piede { flex: none; padding: 10px 20px 14px; border-top: 1px solid var(--filo); background: var(--cartoncino); }
.presa-azioni { display: grid; grid-template-columns: 1fr; gap: 8px; }
.presa-dettagli { display: block; margin: 8px auto 0; font-size: 14px; }
.presa-logo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin: 4px 0 8px; padding: 0 12px; border: 1.5px dashed var(--inchiostro-2); border-radius: 10px; background: transparent; color: var(--inchiostro); font: 700 14px/1 var(--testo); transition: background-color .2s, border-color .2s; }
.presa-logo:hover { background: var(--cartoncino-2); border-color: var(--inchiostro); }
.presa-logo:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.presa-logo svg { width: 20px; height: 20px; }
.presa-logo.fatto { border-style: solid; }
/* link "Versione accessibile" nel menu: come le altre voci */
.menu-funzioni { display: contents; }
.menu-link { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 4px; border-bottom: 1px solid var(--filo); color: inherit; font-weight: 600; text-decoration: none; transition: color .2s; }
.menu-link svg { color: var(--inchiostro-2); }
.menu-link:hover { color: var(--accento-scuro); }
.carica-accessibile a { color: inherit; font-weight: 700; }
/* cartellini sugli scaffali: prezzo "da" + Novità in piccolo */
.cartellino small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accento-scuro, #8f2e12); line-height: 1.1; }
.cartellino.attivo small { color: #ffd9a8; }
.presa::before { content: ""; position: absolute; top: 0; left: 20px; width: 44px; height: 3px; border-radius: 0 0 2px 2px; background: var(--nastro); }
@keyframes presa-entra { from { opacity: 0; transform: translateX(18px); filter: blur(3px); } }
.presa-testa { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.presa h2 { margin: 0 0 6px; font: 400 23px/1.12 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.presa-prezzo { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.presa-prezzo strong { font: 400 32px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.presa-prezzo span { color: var(--inchiostro-2); font-size: 12.5px; }
.presa-nota { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--inchiostro-2); }
.presa-nota b { color: var(--inchiostro); }
.presa-blocco { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--filo); }
.presa-etich { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--inchiostro-2); }
.presa-etich span { font-weight: 500; }
.presa-etich b { color: var(--inchiostro); }
.presa-pallini { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.presa-pallino { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; transition: box-shadow .2s, transform .2s var(--ease); }
.presa-pallino .pallino-col { width: 26px; height: 26px; }
.presa-pallino:hover { transform: translateY(-1px); }
.presa-pallino[aria-checked="true"] { box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.presa-pallino:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.presa .pulsanti-opz { margin-bottom: 10px; }
.presa-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 10px; border-top: 1px solid var(--filo); }
.presa-riga .presa-etich { margin: 0; }
.presa .stepper input { width: 64px; min-height: 40px; }
.presa .stepper button { width: 40px; }
.presa-spinta { display: grid; gap: 6px; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; background: var(--cartoncino-2); font-size: 12.5px; line-height: 1.45; }
.presa-spinta .link { white-space: nowrap; margin-left: 2px; }
.presa-spinta .ok { color: var(--verde); font-weight: 600; }
.presa-chip { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.presa-chip button { min-height: 36px; padding: 0 12px; border: var(--bordo); border-radius: 99px; background: transparent; color: var(--inchiostro); font: 600 13px/1 var(--testo); transition: background-color .2s, border-color .2s, color .2s; }
.presa-chip button:hover { border-color: var(--inchiostro-2); }
.presa-chip button[aria-checked="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--cartoncino); }
.presa-chip button:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.presa-stampa-opz { display: flex; gap: 14px; margin: 0 0 8px; }
.presa-spunta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--inchiostro); cursor: pointer; }
.presa-spunta input { width: 18px; height: 18px; margin: 0; accent-color: var(--inchiostro); }
.presa .campo-errore { margin: 0 0 8px; }
.presa-totale { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--filo); color: var(--inchiostro-2); font-weight: 600; }
.presa-totale strong { font-size: 21px; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.presa-dett { margin: 2px 0 10px; font-size: 12px; color: var(--inchiostro-2); text-align: right; }
.presa #presaMetti { min-height: 52px; font-size: 16px; }
#presaRimetti { min-height: 44px; font-size: 15px; }
.presa-aiuto { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--inchiostro-2); }
@media (max-width: 640px) {
  .presa { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 45vh; max-height: 45dvh; border-radius: 18px 18px 0 0; border-bottom: 0; animation-name: presa-foglio; }
  .presa-corpo { padding: 14px 16px 6px; }
  .presa-piede { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
  .presa-totale { padding-top: 0; border-top: 0; }
  .presa-totale strong { font-size: 19px; }
  .presa-dett { display: none; }
  .presa-azioni { grid-template-columns: 1.4fr 1fr; margin-top: 6px; }
  .presa #presaMetti, #presaRimetti { min-height: 46px; font-size: 14.5px; padding: 0 10px; }
  .presa-dettagli { margin-top: 4px; font-size: 13px; min-height: 32px; }
  .presa::before { left: 50%; margin-left: -22px; }
  @keyframes presa-foglio { from { opacity: 0; transform: translateY(24%); } }
  .presa h2 { font-size: 19px; margin-bottom: 4px; }
  .presa-testa { margin-bottom: 4px; }
  .presa-prezzo strong { font-size: 27px; }
  .presa-aiuto { display: none; }
}

/* ---------- ricerca: filtri rapidi, recenti, miniature ---------- */
.cerca-filtri, .cerca-recenti { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.cerca-recenti { align-items: center; }
.cerca-recenti > span, .cerca-sotto { flex-basis: 100%; margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--inchiostro-2); }
.cerca-sotto { margin: 16px 0 -6px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: var(--bordo); border-radius: 99px; background: #fff; color: var(--inchiostro); font: 600 13px/1 var(--testo); transition: background-color .2s, border-color .2s, color .2s; }
.filtro:hover { border-color: var(--inchiostro-2); }
.filtro[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--cartoncino); }
.filtro-col { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .25); }
.cerca-testa-ris { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; min-height: 40px; }
.cerca-conta { margin: 0; font-size: 13px; color: var(--inchiostro-2); font-weight: 600; }
.tasto-piccolo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--accento); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(143, 46, 18, .8); transition: background-color .2s, transform .2s var(--ease); }
.tasto-piccolo:hover { background: #a8340f; transform: translateY(-1px); }
.tasto-piccolo svg { width: 18px; height: 18px; }
.cerca-risultati img, .cerca-segno { width: 44px; height: 44px; border-radius: 8px; background: #fff; object-fit: contain; display: block; box-shadow: inset 0 0 0 1px var(--filo); }
.cerca-segno { background: color-mix(in srgb, var(--c) 30%, var(--cartoncino-2)); }

/* ---------- reparti ---------- */
.reparti-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--filo); }
.reparti-lista button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--filo); background: transparent; text-align: left; font-weight: 600; transition: color .2s; }
.reparti-lista button:hover { color: var(--accento-scuro); }
.reparti-lista .pallino { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.reparti-lista small { color: var(--inchiostro-2); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .reparti-lista { grid-template-columns: 1fr; } }