/* ── ordine-vintage.css ───────────────────────────────────────────
   Stili specifici ordine vintage. Carica DOPO ordini-common.css.
   Le variabili e i componenti base sono in ordini-common.css.
   ────────────────────────────────────────────────────────────── */

/* ── Variabili aggiuntive specifiche di vintage ────────────────── */
/* --blue/--blue-soft rimappati sul rosso del brand invece di un azzurro
   estraneo: tutte le card formato, i pulsanti orientamento, gli swatch
   colore, i toggle e le tab che usavano var(--blue*) ereditano il rosso
   senza dover toccare ogni singola regola. */
/* --accent qui viene sovrascritto sul rosso: in questo file lo si usa sempre
   insieme a --blue nello stesso stato "selezionato" (mai per la distinzione
   ferie attive/imminenti, che vive solo in ordini-common.css), quindi deve
   restare coerente con --blue invece di ereditare l'ambra condiviso. */
:root {
  --blue:      var(--red);
  --blue-soft: var(--red-soft);
  --accent:      var(--red);
  --accent-soft: var(--red-soft);
  --red-soft:  rgba(185,11,16,0.18); /* vintage usa opacità 0.18, common usa 0.15 */
}
body.theme-light {
  --blue:      var(--red);
  --blue-soft: var(--red-soft);
  --accent:      var(--red);
  --accent-soft: var(--red-soft);
  --red-soft:  rgba(185,11,16,0.12);
}

/* ── Override prog-step: dimensione leggermente più piccola in vintage ── */
.prog-step { width: 28px; height: 28px; font-size: 0.65rem; }
/* Riallinea la linea di connessione al centro del cerchio 28px: (28/2) - 1 = 13px */
.prog-line { margin-top: 13px; }

/* ── Override theme-toggle hover (vintage usa rosso, common usa text-sub) ── */
.theme-toggle:hover { border-color: var(--red); }

/* ── Elemento logo-text (vintage-specific) ─────────────────────── */
.logo-text { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── Override site-back (font-size vintage: 0.72rem vs common 0.75rem) ── */
.site-back { font-size: 0.72rem; color: var(--muted); }

.steps-container { flex: 1; overflow-x: hidden; }
.step-wrap {
  display: none;
  min-height: calc(100vh - 52px);
  width: 100%;
  flex-direction: column;
}
.step-wrap.active { display: flex; }

.step1-wrap { flex-direction: column; overflow-y: auto; align-items: center; }
.step1-inner { max-width: 620px; width: 100%; margin: 0 auto; padding: 36px 20px; }
.step1-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; min-height: 38px; }
.step-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; margin-bottom: 8px; }
.step-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.7; margin-bottom: 26px; }
.upload-counter { font-size: 0.7rem; color: var(--muted); margin-bottom: 6px; }
.btn-to-next {
  width: 100%; padding: 13px; border-radius: 9px; background: var(--red); border: none; color: #fff;
  font-size: 0.86rem; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; margin-top: 6px;
}
.btn-to-next:disabled { background: var(--mid); cursor: not-allowed; opacity: 0.6; }
.btn-to-next:not(:disabled):hover { background: #900; transform: translateY(-1px); }
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: rgba(255,255,255,.02);
  margin-bottom: 20px;
}
.upload-zone:hover { border-color: var(--blue); background: var(--blue-soft); }
.upload-zone.dragover { border-color: var(--accent); background: var(--blue-soft); }
.upload-icon { font-size: 2.2rem; margin-bottom: 10px; opacity: 0.7; }
.upload-text { font-size: 0.85rem; color: var(--text); margin-bottom: 4px; }
.upload-hint { font-size: 0.7rem; color: var(--text-sub); }
#fileInput { display: none; }

.upload-list { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.upload-item { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 0.78rem; }
.upload-item:last-child { border-bottom: none; }
.upload-item-thumb-wrap { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.upload-item-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
/* Fallback se l'anteprima non riesce a caricarsi: icona coerente col brand
   invece dell'icona di immagine rotta di sistema. */
.upload-item-thumb-fallback {
  width: 42px; height: 42px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--muted);
  align-items: center; justify-content: center; font-size: 1.1rem;
}
.upload-item-info { flex: 1; min-width: 0; }
.upload-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-item-size { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }
.upload-item-remove { color: var(--red); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; }

.step1-bottom { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.step-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.step-btn-next { background: var(--red); color: white; }
.step-btn-next:hover { background: #900; }
.step-btn-back { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text-sub); }
.step-btn-back:hover { background: rgba(255,255,255,.08); }

.step2-layout { display: flex; align-items: flex-start; }
.photo-gallery {
  width: 100%;
  padding: 12px 14px 68px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  align-content: start;
  box-sizing: border-box;
}
/* Card verticali (aspect-ratio 3/4): a differenza di stampa (card 4/3,
   orizzontali) qui la stessa larghezza minima produce card molto piu' alte.
   Livelli tarati sulla larghezza reale disponibile — sotto i 780px il pannello
   globale diventa overlay a tutto schermo (vedi @media 780px piu' sotto),
   quindi la gallery ha l'intera larghezza viewport; da 781px in su condivide
   lo spazio con la sidebar fissa da 290px. */
@media (max-width: 480px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 10px 68px; }
}
@media (min-width: 481px) and (max-width: 780px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (min-width: 781px) and (max-width: 1023px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 1400px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

.photo-card {
  background: var(--anthracite);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
}
.card-thumb-wrap { position: relative; aspect-ratio: 3/4; background: var(--mid); overflow: hidden; cursor: grab; touch-action: pan-y; }
/* aspect-ratio è override inline dinamico in renderGalleryV (3/4 portrait, 4/3 landscape) */
.card-canvas { width: 100%; height: 100%; display: block; }
.card-header-strip { padding: 6px 8px 4px; display: flex; align-items: center; gap: 6px; }
.card-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.s-pending { background: #e55; }
.s-ok { background: #4caf80; }
.card-body { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.card-row1 { display: flex; align-items: center; gap: 5px; }
.card-row2 { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.card-name { font-size: 0.65rem; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.card-ff {
  padding: 3px 7px;
  font-size: 0.62rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.card-ff.ff-on { background: var(--blue-soft); border-color: var(--blue); color: var(--accent); }
.card-qty { display: flex; align-items: center; gap: 3px; }
.cqb {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-qty-val { font-size: 0.75rem; min-width: 18px; text-align: center; color: var(--text); }
.card-zoom-row { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.card-zoom-ico { font-size: 0.7rem; }
.card-zoom-sl {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
  background: linear-gradient(to right, var(--red) 0%, var(--red) 50%, rgba(255,255,255,0.28) 50%);
}
.card-zoom-sl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.card-zoom-lbl { font-size: 0.6rem; color: var(--muted); min-width: 26px; text-align: right; }
/* Fix 4C: zoom slider track visibile in tema chiaro */
body.theme-light .card-zoom-sl {
  background: linear-gradient(to right, var(--red) 0%, var(--red) 0%, #d0d3d8 0%);
}
.card-side-btns { position: absolute; right: 4px; top: 4px; display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity .15s; }
.card-thumb-wrap:hover .card-side-btns { opacity: 1; }
/* Su dispositivi senza hover affidabile (touch) i bottoni elimina/ruota
   restano sempre visibili, indipendentemente dalla larghezza schermo —
   prima erano raggiungibili solo sotto i 780px (vedi @media piu' sotto),
   quindi un iPad o un 2-in-1 in orizzontale li rendeva invisibili e
   inutilizzabili anche se il dito non puo' fare hover per rivelarli. */
@media (hover: none) {
  .card-side-btns { opacity: 1; }
}
.card-side-btn {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: rgba(15,16,20,.7);
  color: #e8e8e8;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.card-side-btn.del { color: #e87070; }
.card-done .card-header-strip { background: rgba(76,175,130,.06); }
.card-drag-hint {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.52); backdrop-filter: blur(2px); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  border-radius: inherit;
}
.card-thumb-wrap.hinting .card-drag-hint { opacity: 1; }

/* ── Two-finger hint overlay (mobile, modal immagine) ── */
.two-finger-hint {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(0,0,0,0.52); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: #fff; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
  border-radius: inherit;
}
.two-finger-hint.visible { opacity: 1; }
.two-finger-hint .tf-icon { font-size: 2rem; line-height: 1; }
.two-finger-hint .tf-text { font-size: 0.72rem; text-align: center; line-height: 1.5; }
.card-fmt-badge { position: absolute; bottom: 5px; left: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 0.55rem; padding: 2px 5px; border-radius: 3px; backdrop-filter: blur(4px); }

.global-panel { width: 290px; flex-shrink: 0; background: var(--anthracite); border-left: 1px solid var(--border); overflow-y: auto; padding-bottom: 80px; position: sticky; top: 0; max-height: 100vh; align-self: flex-start; }
.gp-mobile-bar { display: none; }
.gp-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.gp-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); }
.gp-section { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gp-lbl { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.gp-fmt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gp-fmt-card {
  padding: 9px 8px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.gp-fmt-card.on { border-color: var(--blue); background: var(--blue-soft); }
.gp-fmt-card-icon { display: flex; flex-direction: column; border: 1.5px solid currentColor; border-radius: 1px; overflow: hidden; }
.gp-fmt-photo { background: rgba(255,255,255,.12); flex: 1; }
.gp-fmt-bottom { background: rgba(255,255,255,.25); }
.gp-fmt-card.on .gp-fmt-photo { background: rgba(185,11,16,.2); }
.gp-fmt-card.on .gp-fmt-bottom { background: rgba(185,11,16,.35); }
.gp-fmt-name { font-size: 0.68rem; font-weight: 600; color: var(--text); }
.gp-fmt-sub { font-size: 0.55rem; color: var(--muted); }
.or-row { display: flex; gap: 6px; }
.ob {
  flex: 1;
  padding: 7px 6px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-sub);
  font-size: 0.68rem;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.ob.on { border-color: var(--blue); background: var(--blue-soft); color: var(--accent); }
.or-icon { width: 22px; height: 28px; border: 1.5px solid currentColor; border-radius: 2px; }
.ob.landscape .or-icon { width: 28px; height: 20px; }
.band-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 5px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .12s;
}
.band-item.on { border-color: var(--blue); background: var(--blue-soft); }
.band-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(128,128,128,.25); }
.band-item-label { font-size: 0.58rem; color: var(--muted); text-align: center; line-height: 1.1; }
.band-picker-wrap { position: relative; width: 28px; height: 28px; cursor: pointer; }
.band-picker-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.3);
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.band-picker-btn.on { border-color: var(--blue); }
.band-picker-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.band-label { display: flex; align-items: center; gap: 5px; font-size: 0.62rem; color: var(--text-sub); }
.band-label-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gp-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; cursor: pointer; }
.toggle-track { position: absolute; inset: 0; border-radius: 20px; background: rgba(255,255,255,.15); transition: background .2s; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle-switch input:checked ~ .toggle-track { background: var(--red); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(18px); }
.toggle-switch input { display: none; }

.caption-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.caption-panel.open { max-height: 800px; }
.caption-templates { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tpl-chip { padding: 3px 8px; border-radius: 12px; border: 1px solid var(--border); font-size: 0.6rem; color: var(--text-sub); cursor: pointer; font-family: inherit; transition: all .12s; }
.tpl-chip.on { background: var(--red-soft); border-color: rgba(185,11,16,.4); color: #e8a0a2; }
.tpl-emoji { padding: 4px 7px; font-size: 1rem; line-height: 1; }
.caption-emoji-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.caption-input {
  width: 100%;
  padding: 7px 9px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.caption-input:focus { border-color: var(--red); }
.font-picker { display: flex; flex-direction: column; gap: 4px; }
.font-opt {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--text-sub);
  transition: all .12s;
}
.font-opt.on { border-color: var(--blue); background: var(--blue-soft); color: var(--accent); }
.font-preview { font-size: 1rem; }
.size-row { display: flex; align-items: center; gap: 6px; }
.size-sl {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.size-sl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.size-lbl { font-size: 0.65rem; color: var(--muted); min-width: 28px; text-align: right; }
/* Fix 3B: traccia size-sl visibile in entrambi i temi */
.size-sl { background: rgba(255,255,255,.18); }
body.theme-light .size-sl { background: rgba(0,0,0,.13); }
body.theme-light .em-bc-sl { background: rgba(0,0,0,.13); }
/* Placeholder per contenteditable gpCaptionText */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: rgba(120,120,120,0.55);
  pointer-events: none;
}
/* Palette colori testo */
.text-color-palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tcp-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid rgba(128,128,128,.2); cursor: pointer; transition: transform .1s; flex-shrink: 0; }
.tcp-swatch:hover { transform: scale(1.2); }
.tcp-swatch.on { border-color: var(--blue); border-width: 2px; }
.caption-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text-sub);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.tb-btn.on { background: var(--blue-soft); border-color: var(--blue); color: var(--accent); }
.tb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
.text-color-wrap { position: relative; width: 26px; height: 26px; cursor: pointer; }
.text-color-btn { width: 26px; height: 26px; border-radius: 5px; border: 1.5px solid var(--border); cursor: pointer; }
.text-color-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.gp-footer { padding: 12px 16px; }
.gp-apply-btn { width: 100%; padding: 8px; background: rgba(185,11,16,.12); border: 1px solid rgba(185,11,16,.3); border-radius: 7px; color: #e8a0a2; font-size: 0.72rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; }
.gp-apply-btn:hover { background: rgba(185,11,16,.2); }
.gp-qty-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bqb {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step2-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--anthracite);
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
}
.step2-total { flex: 1; }
.step2-total-lbl { font-size: 0.6rem; color: var(--muted); }
.step2-total-amt { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.total-discount { font-size: 0.6rem; margin-left: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(76,175,130,.12); color: #6fd4a8; font-weight: 700; }
.total-breakdown { font-size: 0.62rem; color: rgba(232,232,232,0.80); margin-top: 2px; }
.btn-conferma-tutto {
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-conferma-tutto:hover { background: #900; }
.btn-i-tuoi-dati { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text-sub); font-size: 0.75rem; font-family: inherit; cursor: pointer; }

.edit-modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; padding: 10px; backdrop-filter: blur(6px); }
.edit-modal-overlay.open { display: flex; }
.edit-modal-box {
  background: var(--anthracite);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 760px;
  height: calc(100vh - 20px);
  max-height: calc(100vh - 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.em-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.em-photo-name { font-size: 0.82rem; font-weight: 600; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text-sub);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.em-left { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; background: var(--dark); min-height: 0; overflow: hidden; gap: 10px; }
.em-right { width: 280px; flex-shrink: 0; overflow-y: auto; border-left: 1px solid var(--border); }
.em-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--anthracite); }
.em-tab {
  flex: 1;
  padding: 9px 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  border-bottom: 2px solid transparent;
}
.em-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.em-tab-panel { display: none; padding: 12px 14px; }
.em-tab-panel.on { display: block; }
.em-section { margin-bottom: 14px; }
.em-lbl { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }

#polaroidPreview {
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  cursor: grab;
  flex-shrink: 0;
}
#polaroidPreview:active { cursor: grabbing; }
#borderTop, #borderLeft, #borderRight, #borderBottom { position: absolute; background: white; }
#borderTop { top: 0; left: 0; right: 0; height: 20px; }
#borderLeft { top: 0; left: 0; bottom: 0; width: 20px; }
#borderRight { top: 0; right: 0; bottom: 0; width: 20px; }
#borderBottom { bottom: 0; left: 0; right: 0; height: 40px; }
#polaroidFrame { position: absolute; overflow: hidden; cursor: grab; background: #fff; }
#framePhoto { position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center; cursor: grab; }

.em-bottom-row { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.em-confirm-btn {
  flex: 1;
  padding: 8px;
  border-radius: 7px;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.em-confirm-btn.confirmed { background: rgba(76,175,130,.2); border: 1px solid rgba(76,175,130,.4); color: #6fd4a8; }
.em-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text-sub);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-dpi-badge { font-size: 0.6rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; align-self: flex-start; }
.em-dpi-badge.good { background: rgba(76,175,130,.15); color: #6fd4a8; }
.em-dpi-badge.warn { background: rgba(220,170,50,.15); color: #e0c060; }
.em-dpi-badge.bad { background: rgba(200,50,50,.15); color: #e08080; }

.mode-badge { font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.mode-badge.fit { background: rgba(76,175,130,.15); color: #6fd4a8; }
.mode-badge.fill { background: rgba(185,11,16,.15); color: #e8a0a2; }

.em-bc-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; }
.em-bc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.em-bc-lbl { font-size: 0.62rem; color: var(--text-sub); min-width: 36px; }
.em-bc-sl {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  background: rgba(255,255,255,.18);
}
.em-bc-sl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
}
.em-bc-val { font-size: 0.6rem; color: var(--muted); min-width: 26px; text-align: right; }
.em-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.em-filter-btn {
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,.03);
  color: var(--text-sub);
  font-size: 0.6rem;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all .12s;
}
.em-filter-btn.on { border-color: var(--blue); background: var(--blue-soft); color: var(--accent); }

.c-bianco { background: #ffffff; }
.c-avorio { background: #fdf6e3; }
.c-crema { background: #fce8c0; }
.c-vaniglia { background: #fde8a0; }
.c-giallo { background: #fff176; }
.c-cipria { background: #fde0d0; }
.c-pesca { background: #ffccb3; }
.c-rosa { background: #fce4ec; }
.c-confetto { background: #f8bbd0; }
.c-peonia { background: #f48fb1; }
.c-lilla { background: #e8d5f5; }
.c-lavanda { background: #d1c4e9; }
.c-azzurro { background: #e3f2fd; }
.c-celeste { background: #b3e5fc; }
.c-salvia { background: #dcedc8; }
.c-menta { background: #c8e6c9; }
.c-tortora { background: #d7ccc8; }
.c-nocciola { background: #c49a6c; }
.c-antracite { background: #4a4e5a; }
.c-nero { background: #1a1c22; }

.step-wrap-3, .step-wrap-4 { padding: 20px; overflow-y: auto; }
.step-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 16px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; }
.form-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.form-input:focus { border-color: var(--red); background: rgba(185,11,16,.08); }
.form-input.error { border-color: var(--red); background: var(--red-soft); }
.form-alert-banner {
  background: var(--red-soft);
  border: 1px solid rgba(185,11,16,.3);
  color: #e8a0a2;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 0.75rem;
  margin-bottom: 14px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.form-alert-banner.visible { opacity: 1; pointer-events: auto; }

.privacy-check-block { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; margin-bottom: 14px; }
.privacy-check-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.privacy-check-item:last-child { margin-bottom: 0; }
.privacy-check-item input[type="checkbox"] { margin-top: 4px; cursor: pointer; accent-color: var(--red); }
.privacy-check-item label { font-size: 0.73rem; color: var(--text-sub); cursor: pointer; line-height: 1.3; }
.privacy-check-error { color: #e87070; font-size: 0.65rem; margin-top: 6px; display: none; }
.privacy-check-error.visible { display: block; }

.opt-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.opt-card {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.opt-card input[type="radio"] { cursor: pointer; }
.opt-card-info { flex: 1; }
.opt-card-title { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.opt-card-desc { font-size: 0.68rem; color: var(--text-sub); margin-top: 2px; }
.opt-card-price { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.opt-card:hover { border-color: var(--blue); }
.opt-card input:checked ~ .opt-card-info .opt-card-title { color: var(--accent); }

.step-wrap-3 { max-width: 600px; margin: 0 auto; }

.btt-btn {
  position: fixed; bottom: 70px; right: 28px; z-index: 1200;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.2s;
}
.btt-btn.btt-visible { opacity: 1; visibility: visible; }
.btt-btn:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

.totale-box { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
.totale-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 8px; }
.totale-row.bold { font-weight: 700; font-size: 0.9rem; border-top: 1px solid var(--border); padding-top: 8px; }
.totale-row.green { color: #6fd4a8; }
.totale-row.finale { font-weight: 700; font-size: 0.95rem; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.totale-val { color: var(--accent); }
.totale-disclaimer-v { font-size: 0.65rem; color: var(--text-sub); margin-top: 10px; line-height: 1.4; }

/* ── Step 3: blocks ── */
.step3-block { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.step3-block-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.step3-block-title i { color: var(--blue); }

/* ── Opt cards selected ── */
.opt-card.on { border-color: var(--blue); background: var(--blue-soft); }
.opt-card.on .opt-card-title, .opt-card.on .opt-label { color: var(--accent); }
#v-consegna-grid .opt-card, #v-pagamento-grid .opt-card { flex-direction: column; align-items: flex-start; gap: 4px; }
.opt-label { font-size: 0.82rem; font-weight: 600; }
.opt-magg  { font-size: 0.68rem; color: var(--text-sub); margin-left: auto; }
.opt-magg.disc { color: #6fd4a8; }
.opt-giorni { font-size: 0.7rem; color: var(--text-sub); }
.opt-desc   { font-size: 0.68rem; color: var(--muted); }
.opt-orario { font-size: 0.63rem; color: #e8a0a2; margin-left: 6px; }
.opt-pag-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.opt-pag-sub  { font-size: 0.68rem; color: var(--text-sub); }
.opt-badge    { font-size: 0.6rem; background: var(--blue-soft); color: var(--accent); border-radius: 4px; padding: 2px 5px; margin-left: auto; font-weight: 700; }
.warn-nota    { font-size: 0.68rem; color: #e8a000; background: rgba(232,160,0,.08); border: 1px solid rgba(232,160,0,.2); border-radius: 5px; padding: 6px 10px; margin-top: 8px; }

/* ── Incomplete banner ── */
.incomplete-banner { background: rgba(232,160,0,.08); border: 1px solid rgba(232,160,0,.3); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; display: none; gap: 10px; align-items: flex-start; }
.incomplete-banner.visible { display: flex; }
.incomplete-banner > i { color: #e8a000; flex-shrink: 0; margin-top: 2px; }
.incomplete-banner-text { flex: 1; font-size: 0.75rem; }
.incomplete-banner-list { margin: 6px 0 0 16px; padding: 0; font-size: 0.68rem; color: var(--text-sub); }

/* ── Step 4: riepilogo ── */
.riepilogo-block { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.riepilogo-row-v { display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.78rem; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text-sub); gap: 8px; }
.riepilogo-row-v:last-child { border-bottom: none; }
.riepilogo-row-v strong { color: var(--text); font-weight: 500; text-align: right; max-width: 65%; overflow-wrap: break-word; word-break: break-word; }
.riepilogo-row-v.total strong { font-size: 1.05rem; color: var(--accent); }
/* Collapsible lista foto */
.riepilogo-foto-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.riepilogo-foto-body.open { max-height: 4000px; }
.riepilogo-foto-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.riepilogo-foto-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.02); border-radius: 6px; padding: 6px 8px; }
.riepilogo-foto-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.riepilogo-foto-info  { flex: 1; min-width: 0; }
.riepilogo-foto-name  { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riepilogo-foto-meta  { font-size: 0.65rem; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Invio / progress ── */
.invio-box  { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.invio-nota { font-size: 0.72rem; color: var(--text-sub); display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; line-height: 1.5; }
.invio-nota i { color: var(--blue); flex-shrink: 0; margin-top: 2px; }
.invio-error { background: rgba(185,11,16,.12); border: 1px solid rgba(185,11,16,.3); border-radius: 6px; padding: 10px 14px; font-size: 0.75rem; color: #e8a0a2; margin-bottom: 10px; }
.upload-progress-wrap { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; display: none; }
.upload-progress-wrap.visible { display: block; }
.upload-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.upload-progress-label  { font-size: 0.78rem; color: var(--text-sub); }
.upload-progress-pct    { font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.upload-progress-track  { height: 6px; background: var(--mid); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.upload-progress-bar    { height: 100%; background: var(--accent); border-radius: 3px; width: 0%; transition: width .3s; }
.upload-progress-files  { font-size: 0.65rem; color: var(--muted); }
.btn-invia { width: 100%; padding: 14px; border: none; border-radius: 8px; background: var(--red); color: white; font-size: 0.88rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; }
.btn-invia:hover { background: #900; }
.btn-invia:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-invia-row { display: flex; gap: 10px; }
.btn-invia-row .btn-invia { flex: 2; }
#v-btn-cart { flex: 1 !important; background: rgba(255,255,255,0.07) !important; border: 1.5px solid rgba(255,255,255,0.22) !important; color: rgba(255,255,255,0.85) !important; min-width: 120px; }
#v-btn-cart:hover { background: rgba(255,255,255,0.13) !important; }
body.theme-light #v-btn-cart { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.2) !important; color: var(--text) !important; }
.btn-back-text { background: none; border: none; color: var(--text-sub); font-size: 0.78rem; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.btn-back-text:hover { color: var(--text); }

/* ── Light theme overrides for new elements ── */
body.theme-light .step3-block   { background: #f0f2f5; border-color: rgba(0,0,0,.08); }
body.theme-light .riepilogo-block { background: #f0f2f5; border-color: rgba(0,0,0,.08); }
body.theme-light .riepilogo-row-v { border-bottom-color: rgba(0,0,0,.07); }
body.theme-light .riepilogo-row-v strong { color: var(--text); }
body.theme-light .riepilogo-row-v.total strong { color: var(--accent); }
body.theme-light .riepilogo-foto-item { background: rgba(0,0,0,.03); }
body.theme-light .invio-box  { background: #f0f2f5; border-color: rgba(0,0,0,.08); }
body.theme-light .totale-box { background: #f0f2f5; border-color: rgba(0,0,0,.08); }
body.theme-light .opt-card.on { background: var(--blue-soft); border-color: var(--blue); }
/* Fix 4: didascalia / toggle visibility in light theme */
body.theme-light .toggle-track { background: rgba(0,0,0,.15); }
body.theme-light .gp-lbl { color: rgba(26,28,34,.5); }
body.theme-light .caption-input { background: rgba(0,0,0,.04); color: var(--text); }
body.theme-light .gp-apply-btn { background: rgba(185,11,16,.08); }
/* Fix 3: step-sub in light theme */
body.theme-light .step-sub { color: var(--muted); }
body.theme-light .total-breakdown { color: rgba(0,0,0,0.55); }
body.theme-light .upload-zone { border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.02); }
body.theme-light .upload-zone:hover { border-color: var(--blue); background: var(--blue-soft); }
/* Fix 7: card grey background — stacco tra bianco del frame Polaroid e sfondo card */
body.theme-light .photo-card { background: #e0e3e8; border-color: rgba(0,0,0,.1); }
body.theme-light .card-thumb-wrap { background: #c8ccd4; }
body.theme-light .card-name { color: rgba(26,28,34,.6); }

.step-wrap-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.success-icon { font-size: 3rem; margin-bottom: 12px; color: #4caf80; }
.success-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; color: #4caf80; }
.success-msg { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 20px; max-width: 400px; }
.success-order-id { background: rgba(76,175,130,.1); border: 1px solid rgba(76,175,130,.3); padding: 12px 14px; border-radius: 7px; font-size: 0.75rem; margin-bottom: 20px; font-family: monospace; color: #6fd4a8; }

/* Rete di sicurezza tra 781 e 1023px: la barra fissa di step 2 ha 5 elementi
   (indietro, carrello, totale, conferma tutto, procedi) su una sola riga senza
   wrap fino a 780px. Sotto quella soglia il wrap arriva insieme al redesign
   compatto per mobile; qui sopra basta impedire che il testo si comprima o
   esca dallo schermo, senza toccare l'ordine/padding pensati per il mobile. */
@media (max-width: 1023px) and (min-width: 781px) {
  .step2-bottom { flex-wrap: wrap; row-gap: 8px; }
  .step2-total { flex: 1 1 auto; }
}

@media (max-width: 780px) {
  .global-panel { display: none; position: fixed; inset: 0; z-index: 200; overflow-y: auto; width: 100%; border-left: none; border-right: 1px solid var(--border); padding-bottom: 40px; }
  .global-panel.gp-open { display: block; }
  .gp-mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--anthracite); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .gp-mobile-open-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,.05); color: var(--text); font-size: 0.72rem; font-family: inherit; cursor: pointer; }
  .photo-gallery { padding-bottom: 80px; }
  .edit-modal-box { max-width: 95vw; }
  .em-body { flex-direction: column; }
  .em-right { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 240px; }
  .em-left { min-height: 180px; padding: 8px; gap: 5px; }
  /* Badge DPI: nascosto in em-left su mobile (già visibile nella barra Conferma) */
  #emDpiBadge { display: none; }
  /* Format cards: riga compatta con icona ridotta */
  .em-right .gp-fmt-card { flex-direction: row; padding: 5px 8px; gap: 6px; align-items: center; }
  .em-right .gp-fmt-card .gp-fmt-card-icon { width: 18px !important; height: 24px !important; flex-shrink: 0; }
  .em-right .gp-fmt-card .gp-fmt-sub { display: none; }
  /* Orientation buttons: riga compatta senza icona */
  .em-right .ob { flex-direction: row; padding: 5px 12px; gap: 6px; }
  .em-right .or-icon { display: none; }
  /* Sezioni em-right più compatte */
  .em-right .em-section { margin-bottom: 8px; }
  .em-right .em-lbl { margin-bottom: 3px; }
  /* Compact bottom bar: due righe su mobile — riga 1 = upload/carrello/totale,
     riga 2 = conferma + procedi a tutta larghezza (prima finivano fuori
     schermo perché la barra restava su un'unica riga senza andare a capo) */
  .step2-bottom { flex-wrap: wrap; padding: 8px 10px 9px; gap: 6px 8px; }
  .step-btn-back { order: 1; flex: 0 0 auto; }
  #vBtnStep2Cart {
    order: 2; flex: 0 0 auto;
    padding: 7px 10px; font-size: 0; line-height: 0;
  }
  #vBtnStep2Cart i { font-size: 0.85rem; line-height: 1; }
  .step2-total { order: 3; flex: 1 1 auto; text-align: right; }
  .step2-total-lbl { display: none; }
  .step2-total-amt { font-size: 0.9rem; }
  .total-breakdown { font-size: 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-conferma-tutto { order: 4; flex: 1 1 40%; padding: 8px 10px; font-size: 0.68rem; white-space: nowrap; }
  #vBtnStep2Procedi {
    order: 5; flex: 1 1 55%;
    padding: 8px 10px; font-size: 0.7rem; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  /* btt-btn sopra la barra compatta, che qui va su 2 righe (vedi sopra) ed
     e' alta ~90-95px, non ~46px come stimato prima. */
  .btt-btn { bottom: 104px; right: 10px; width: 36px; height: 36px; font-size: 0.9rem; }
  /* Pulsanti card: sempre visibili e più grandi su touch */
  .card-side-btns { opacity: 1; }
  .card-side-btn { width: 32px; height: 32px; font-size: 0.9rem; }
  .card-zoom-sl::-webkit-slider-thumb { width: 16px; height: 16px; }
}

@media (max-width: 500px) {
  .page-header { flex-wrap: wrap; gap: 6px 12px; padding: 8px 14px; }
  .site-brand { flex: 1; }
  .header-actions { flex-shrink: 0; }
  .progress-bar-wrap { order: 3; flex: 0 0 100%; max-width: 100%; margin: 0; padding-bottom: 4px; }
  .card-controls { flex-wrap: wrap; }
  .step-wrap-3 { max-width: 100%; }
  .btt-btn { bottom: 56px; }
}

/* ════════════════════════════════
   TARGET DI TOCCO — dispositivi con puntatore impreciso (dito)
   Stessa logica di ordine-stampa.css: non ridimensiona i bottoni raggruppati
   stretti (cqb/bqb/tb-btn sono affiancati con pochi px di distanza, farli
   crescere sposterebbe le righe che li contengono) ma aumenta lo spazio tra
   loro, la mitigazione che WCAG 2.5.8 prevede per target sotto i 44px.
   .em-close-btn e' isolato nell'header del modal (nessun vicino stretto) e
   puo' quindi crescere in sicurezza. */
@media (pointer: coarse) {
  .card-qty { gap: 8px; }
  .gp-qty-row { gap: 12px; }
  .caption-toolbar { gap: 8px; }

  .em-close-btn {
    width: 34px; height: 34px;
  }
}