/* ─────────────────────────────────────────────
   ULTIMOKM — STICKER SHOP
   Aesthetic: Urban · Industrial · Distressed
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700&family=Barlow:wght@300;400;500&display=swap');

/* ── Variables ── */
:root {
  --black:    #0a0a0a;
  --black2:   #111111;
  --black3:   #1a1a1a;
  --white:    #e8e3d8;
  --offwhite: #c9c4b8;
  --grey:     #3a3a3a;
  --grey2:    #8a857a; /* WCAG AA fix: era #555 (2.66:1 su nero, non conforme). Nuovo valore ~5.1-5.4:1 su black/black2/black3 */
  --accent:   #e8e3d8;
  --font-display: 'Bebas Neue', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --cart-width: 420px;
  --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Niente zoom sul doppio tap negli elementi interattivi ──
   Su iOS (e su Android in alcuni casi) il browser aspetta ~300ms dopo ogni
   tap per capire se ne arriva un secondo: se arriva, invece di registrare
   due click fa lo ZOOM sulla pagina. Premendo "+" due volte di fila per
   aumentare la quantità si finiva quindi con la pagina ingrandita — e per
   tornare indietro bisognava fare pinch a mano.

   `manipulation` dice al browser: su questi elementi accetta lo scroll e il
   pinch-zoom a due dita, ma NON il doppio tap per ingrandire. Il secondo
   tap diventa semplicemente un secondo click, che è quello che l'utente
   voleva.

   È la soluzione corretta al problema. L'alternativa che si trova spesso in
   giro — `user-scalable=no` nel meta viewport — disattiva del tutto la
   possibilità di ingrandire la pagina, anche a chi ci vede poco: è una
   barriera di accessibilità (WCAG 1.4.4) e non va usata. */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
label,
select,
summary,
a {
  touch-action: manipulation;
}
html { scroll-behavior: smooth; }

/* ── Focus visibile (WCAG 2.4.7 / 2.4.11) ──
   Diversi elementi interattivi nel sito impostano "outline: none" e si affidano
   solo a un leggero cambio di border-color come indicatore di focus, spesso con
   contrasto insufficiente. Questa regola globale garantisce sempre un indicatore
   di focus visibile e ad alto contrasto per la navigazione da tastiera, senza
   mostrarlo sui click con il mouse. */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Grain overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9999;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--grey); }

/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 70px;
  border-bottom: 1px solid rgba(232,227,216,0.08);
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo img {
  height: 42px;
  width: 42px;
  object-fit: contain;
  filter: invert(0);
  opacity: 0.95;
}
.logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--white);
  line-height: 1;
}
.logo-sub {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--offwhite);
  font-weight: 300;
  text-transform: uppercase;
  display: block;
  margin-top: -2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--offwhite);
  text-decoration: none;
  transition: color var(--transition);
}
.nav-link:hover { color: var(--white); }

/* ── Menu mobile (hamburger) ──
   Su desktop .mobile-nav-toggle resta nascosto e .mobile-nav-panel è
   semplicemente il proseguimento in riga di .header-right (stesso
   aspetto di sempre). Sotto i 768px il pannello nav-link + login/utente
   diventa un menu a tendina sotto l'header, aperto dall'hamburger — il
   carrello resta invece sempre visibile in header (icona sola, senza
   testo, per non affollare la riga). */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  padding: 6px;
  cursor: pointer;
}
.mobile-nav-toggle svg { width: 24px; height: 24px; display: block; }
.mobile-nav-toggle .icon-close { display: none; }
.mobile-nav-toggle.is-open .icon-open { display: none; }
.mobile-nav-toggle.is-open .icon-close { display: block; }

.mobile-nav-panel {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cart-btn-label { display: inline; }

.cart-btn {
  position: relative;
  background: none;
  border: 1px solid rgba(232,227,216,0.25);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all var(--transition);
}
.cart-btn:hover {
  background: rgba(232,227,216,0.06);
  border-color: rgba(232,227,216,0.5);
}
.cart-btn svg { width: 17px; height: 17px; }
.cart-count {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  width: 19px; height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: all var(--transition);
}
.cart-count.visible {
  opacity: 1;
  transform: scale(1);
}

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 120px 40px 80px;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(232,227,216,0.04) 0%, transparent 70%);
}

.hero-badge {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--offwhite);
  font-weight: 300;
  border: 1px solid rgba(232,227,216,0.2);
  padding: 6px 18px;
  margin-bottom: 40px;
  display: inline-block;
  animation: fadeUp 0.8s ease both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 160px);
  line-height: 0.9;
  letter-spacing: 8px;
  color: var(--white);
  animation: fadeUp 0.8s 0.15s ease both;
  position: relative;
}
.hero-title span {
  display: block;
  font-size: 0.38em;
  letter-spacing: 12px;
  font-family: var(--font-cond);
  font-weight: 300;
  color: var(--offwhite);
  margin-top: 8px;
}

.hero-divider {
  width: 60px;
  height: 1px;
  background: rgba(232,227,216,0.3);
  margin: 36px auto;
  animation: fadeUp 0.8s 0.25s ease both;
}

.hero-desc {
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.5px;
  color: var(--offwhite);
  max-width: 480px;
  line-height: 1.7;
  animation: fadeUp 0.8s 0.35s ease both;
}

.hero-cta {
  margin-top: 48px;
  animation: fadeUp 0.8s 0.45s ease both;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 36px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); }

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fadeUp 1s 0.7s ease both;
}
.hero-scroll span {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2); /* WCAG AA fix: prima ereditava bianco con opacity:0.4 sul contenitore (~3.2:1). Ora testo pieno con colore accessibile */
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: var(--white);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50% { transform: scaleY(0.4); opacity: 0.1; }
}

/* ════════════════════════════════
   SHOP SECTION
════════════════════════════════ */
.shop {
  padding: 100px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
  padding-bottom: 24px;
}
.section-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--offwhite);
  font-weight: 300;
  margin-bottom: 6px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 4px;
  color: var(--white);
  line-height: 1;
}
.item-count {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--grey2);
  text-transform: uppercase;
}

/* ── Filter Bar ── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.filter-btn {
  background: none;
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 7px 18px;
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 1px;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* ── Product Grid ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
}

/* ── Product Card ── */
.product-card {
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.06);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: rgba(232,227,216,0.2);
  transform: translateY(-3px);
  z-index: 2;
}

.card-image {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--black3);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-image img {
  width: 75%;
  height: 75%;
  object-fit: contain;
  transition: transform 0.5s ease;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.product-card:hover .card-image img {
  transform: scale(1.06) rotate(-1deg);
}

.card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-cond);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 700;
}
.badge-new { background: var(--white); color: var(--black); }
.badge-limited { background: transparent; border: 1px solid var(--white); color: var(--white); }

.card-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.card-category {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2);
  font-weight: 400;
}
.card-name {
  font-family: var(--font-cond);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  line-height: 1.2;
}
.card-size {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--grey2);
  margin-top: 2px;
}

.card-price {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--white);
}
.card-price .currency {
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 300;
  margin-right: 2px;
  vertical-align: super;
  color: var(--offwhite);
}

.card-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid rgba(232,227,216,0.2);
  overflow: hidden;
}
.qty-btn {
  background: none;
  border: none;
  color: var(--white);
  width: 34px;
  height: 36px;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  font-family: var(--font-cond);
  line-height: 1;
}
.qty-btn:hover { background: rgba(232,227,216,0.1); }
.qty-input {
  background: none;
  border: none;
  border-left: 1px solid rgba(232,227,216,0.2);
  border-right: 1px solid rgba(232,227,216,0.2);
  color: var(--white);
  width: 40px;
  height: 36px;
  text-align: center;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 600;
  outline: none;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Niente zoom automatico quando si tocca un campo (iOS) ──
   Safari su iPhone ingrandisce la pagina ogni volta che si mette il fuoco
   su un input con font-size inferiore a 16px — e poi NON torna indietro da
   solo: resta tutto zoomato finché non si fa pinch a mano. È lo stesso
   fastidio del doppio tap sul "+", ma innescato dai campi di testo.

   Nel progetto c'erano nove campi sotto la soglia (quantità nel carrello,
   codice promo, login, ricerca, link invito, note personalizzazione, input
   del chatbot...). Invece di correggerli uno per uno e rischiare di
   dimenticarne uno la prossima volta, qui sotto vale la regola per tutti:
   sotto i 768px ogni campo di testo va almeno a 16px.

   Il layout non ne risente: i campi crescono di 1-4px su schermi dove c'è
   comunque più spazio verticale che orizzontale, e diventano anche più
   comodi da toccare. Sopra i 768px restano le dimensioni originali. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Stock badge — pezzi rimanenti sulla card prodotto */
.card-stock-badge {
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--offwhite);
  background: rgba(232,227,216,0.08);
  border: 1px solid rgba(232,227,216,0.18);
  padding: 4px 8px;
  display: inline-block;
  margin-bottom: 2px;
}
.card-stock-badge-urgent {
  color: #e8a87c;
  background: rgba(232,168,124,0.10);
  border-color: rgba(232,168,124,0.30);
}

.add-to-cart-btn {
  flex: 1;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  height: 36px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.add-to-cart-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--transition);
}
.add-to-cart-btn:hover::before { background: rgba(0,0,0,0.1); }
.add-to-cart-btn.added {
  background: var(--grey);
  color: var(--white);
}

/* ════════════════════════════════
   CART SIDEBAR
════════════════════════════════ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--cart-width);
  max-width: 100vw;
  background: var(--black2);
  border-left: 1px solid rgba(232,227,216,0.1);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.cart-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--white);
}
.cart-close {
  background: none;
  border: 1px solid rgba(232,227,216,0.2);
  color: var(--white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 18px;
}
.cart-close:hover { background: rgba(232,227,216,0.1); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-items::-webkit-scrollbar { width: 3px; }
.cart-items::-webkit-scrollbar-thumb { background: var(--grey); }

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
}
.cart-empty svg { width: 48px; height: 48px; opacity: 0.5; } /* icona decorativa, non testo: esente da contrasto testo */
.cart-empty p {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--offwhite); /* WCAG AA fix: prima il contenitore aveva opacity:0.4 che abbassava il contrasto a ~3.2:1 */
}

.cart-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(232,227,216,0.07);
  animation: slideIn 0.3s ease both;
}
.cart-item-img {
  width: 64px;
  height: 64px;
  background: var(--black3);
  border: 1px solid rgba(232,227,216,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-img img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.cart-item-info { flex: 1; }
.cart-item-name {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  margin-bottom: 3px;
}
.cart-item-size {
  font-size: 11px;
  color: var(--grey2);
  letter-spacing: 1px;
}
.cart-item-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.cart-item-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(232,227,216,0.15);
}
.cart-item-qty-ctrl .qty-btn {
  width: 26px;
  height: 26px;
  font-size: 14px;
}
.cart-item-qty-ctrl .qty-input {
  width: 32px;
  height: 26px;
  font-size: 12px;
}
.cart-item-subtotal {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--white);
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--grey2);
  cursor: pointer;
  font-size: 18px;
  align-self: flex-start;
  transition: color var(--transition);
  padding: 0 2px;
  line-height: 1;
}
.cart-item-remove:hover { color: var(--white); }

.cart-footer {
  padding: 24px 28px;
  border-top: 1px solid rgba(232,227,216,0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-row-label {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey2);
}
.cart-row-val {
  font-family: var(--font-cond);
  font-size: 14px;
  color: var(--offwhite);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(232,227,216,0.1);
  padding-top: 12px;
  margin-top: 4px;
}
.cart-total-label {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
}
.cart-total-price {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--white);
}

.vinted-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  width: 100%;
}
.vinted-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.vinted-btn svg { width: 16px; height: 16px; }

.vinted-note {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  text-align: center;
  line-height: 1.6;
}

/* ── Riga sconto (quantità / promo) nel riepilogo carrello ── */
.cart-row-discount .cart-row-label { color: #09b2a0; }
.cart-row-discount-val { color: #09b2a0 !important; }

/* ── Badge sconto quantità sulla singola riga del carrello ── */
.cart-item-discount-badge {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #09b2a0;
  margin-top: 2px;
}

/* ── Box codice promozionale ── */
.cart-promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-promo-input-row {
  display: flex;
  gap: 8px;
}
.cart-promo-input-row.hidden { display: none; }
.cart-promo-input {
  flex: 1;
  min-width: 0;
  background: rgba(232,227,216,0.04);
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--transition);
}
.cart-promo-input::placeholder { color: var(--grey2); text-transform: none; letter-spacing: 0; }
.cart-promo-input:focus { border-color: rgba(232,227,216,0.4); }
.cart-promo-btn {
  background: none;
  border: 1px solid rgba(232,227,216,0.3);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.cart-promo-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.cart-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(9,178,160,0.08);
  border: 1px solid rgba(9,178,160,0.3);
  padding: 10px 12px;
}
.cart-promo-applied.hidden { display: none; }
.cart-promo-applied-label {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #09b2a0;
}
.cart-promo-remove {
  background: none;
  border: none;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.cart-promo-remove:hover { color: var(--white); }
.cart-promo-error {
  font-family: var(--font-cond);
  font-size: 11px;
  color: #d9534f;
  letter-spacing: 0.5px;
  min-height: 0;
}

/* ── Righe sconto nel modale di conferma ordine ── */
.order-discount-row { margin-bottom: 6px; }

/* ════════════════════════════════
   ABOUT STRIP
════════════════════════════════ */
.about-strip {
  border-top: 1px solid rgba(232,227,216,0.08);
  border-bottom: 1px solid rgba(232,227,216,0.08);
  padding: 70px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  text-align: center;
  flex-wrap: wrap;
}
.about-stat {}
.about-stat-num {
  font-family: var(--font-display);
  font-size: 52px;
  letter-spacing: 3px;
  color: var(--white);
  line-height: 1;
}
.about-stat-label {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-top: 5px;
}
.about-divider {
  width: 1px;
  height: 60px;
  background: rgba(232,227,216,0.1);
}

/* ════════════════════════════════
   LA NUOVA USCITA
   Testo grande a sinistra, immagine in evidenza a destra.
════════════════════════════════ */
.new-release {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px;
  border-bottom: 1px solid rgba(232,227,216,0.08);
}
.new-release-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--offwhite);
  font-weight: 300;
  border: 1px solid rgba(232,227,216,0.2);
  padding: 6px 18px;
  display: inline-block;
  margin-bottom: 28px;
}
.new-release-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 0.95;
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 24px;
}
.new-release-desc {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--offwhite);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 20px;
}
.new-release-price {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 36px;
}
.new-release-media {
  aspect-ratio: 1;
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.new-release-media img,
.new-release-media svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.6));
  transition: transform 0.5s ease;
}
.new-release-media:hover img,
.new-release-media:hover svg {
  transform: scale(1.04) rotate(-1deg);
}

@media (max-width: 860px) {
  .new-release {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 70px 24px;
    text-align: center;
  }
  .new-release-text { display: flex; flex-direction: column; align-items: center; }
  .new-release-desc { max-width: 100%; }
  .new-release-media { order: -1; max-width: 380px; margin: 0 auto; padding: 40px; }
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer {
  padding: 50px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  border-top: 1px solid rgba(232,227,216,0.08);
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 8px;
  color: var(--white);
  opacity: 0.7;
}
.footer-links {
  display: flex;
  gap: 32px;
}
.footer-link {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey2);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-link:hover { color: var(--white); }
.footer-copy {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  text-align: center;
}

/* ════════════════════════════════
   TOAST
════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.4s ease both;
  white-space: nowrap;
}
.toast.out { animation: toastOut 0.3s ease both; }

/* ════════════════════════════════
   ANIMATIONS
════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 768px) {
  .header { padding: 0 16px; }
  .mobile-nav-toggle { display: block; }
  .cart-btn-label { display: none; }
  .cart-btn { padding: 10px 12px; }
  .mobile-nav-panel {
    position: fixed;
    top: 70px; left: 0; right: 0;
    z-index: 150;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black2);
    border-bottom: 1px solid rgba(232,227,216,0.1);
    box-shadow: 0 16px 32px rgba(0,0,0,0.4);
    padding: 8px 20px 20px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .mobile-nav-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: all; }
  .mobile-nav-panel .nav-link { padding: 14px 0; border-bottom: 1px solid rgba(232,227,216,0.06); }
  .mobile-nav-panel .auth-logged-out { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; }
  .mobile-nav-panel .auth-logged-in { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
  .mobile-nav-panel .user-chip { justify-content: flex-start; }
  .hero { padding: 100px 20px 60px; }
  .shop { padding: 60px 16px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; }
  /* Il controllo quantità (larghezza fissa ~108px) + il pulsante
     "Aggiungi" (flex:1) non hanno più spazio a sufficienza nelle card
     strette della griglia mobile — impilarli invece di affiancarli
     risolve alla radice, indipendentemente da quanto si restringe la card. */
  /* Card body: less padding on mobile so controls have more room */
  .card-body { padding: 12px 14px 14px; gap: 10px; }
  .card-name { font-size: 17px; }
  .card-price { font-size: 24px; }

  .card-controls { flex-direction: column; align-items: stretch; gap: 6px; }
  /* qty-ctrl: full width, centered content */
  .card-controls .qty-ctrl { align-self: stretch; justify-content: center; }
  .card-controls .qty-btn { flex: 1; height: 44px; font-size: 22px; }
  .card-controls .qty-input { width: 50px; height: 44px; font-size: 16px; }
  /* Aggiungi button: large, clear tap target */
  .add-to-cart-btn {
    width: 100%;
    height: 48px;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 800;
  }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cart-sidebar { width: 100vw; }
  .about-strip { gap: 40px; padding: 50px 20px; }
  .about-divider { display: none; }
  .footer { padding: 40px 20px 24px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 20px; }

  /* Zoom automatico iOS: Safari ingrandisce la pagina quando un campo
     va a fuoco con font-size sotto i 16px. Applicato qui a tutti i
     controlli di testo del sito in un colpo solo, invece che campo per
     campo — nessuna delle dimensioni desktop (13-15px, scelte per
     motivi estetici) cambia sopra i 768px. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════
   AUTH — Hidden utility
════════════════════════════════ */
.hidden { display: none !important; }

/* ─── Header Auth Area ─── */
.auth-logged-out {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-ghost {
  background: none;
  border: 1px solid rgba(232,227,216,0.2);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 1px;
}
.btn-ghost:hover {
  background: rgba(232,227,216,0.07);
  color: var(--white);
}
.btn-outline-white {
  background: none;
  border: 1px solid var(--white);
  color: var(--white);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--black);
}

.auth-logged-in {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(232,227,216,0.15);
  padding: 5px 14px 5px 6px;
  border-radius: 30px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.user-chip:hover {
  border-color: rgba(232,227,216,0.35);
  background: rgba(232,227,216,0.04);
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.user-name {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--white);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-logout {
  background: none;
  border: none;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition);
  padding: 0;
}
.btn-logout:hover { color: var(--white); }

/* ════════════════════════════════
   AUTH MODAL
════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.auth-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  z-index: 301;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.12);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
}
.auth-modal-brand {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--white);
}
.auth-modal-close {
  background: none;
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition);
}
.auth-modal-close:hover { background: rgba(232,227,216,0.1); }

.auth-tabs {
  display: flex;
  margin: 20px 28px 0;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.auth-tab {
  background: none;
  border: none;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 0;
  margin-right: 28px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
}
.auth-tab.active {
  color: var(--white);
  border-bottom-color: var(--white);
}
.auth-tab:hover { color: var(--offwhite); }

.auth-panel {
  padding: 28px 28px 32px;
}
.auth-panel.hidden { display: none; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.auth-label {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--offwhite);
}
.auth-input {
  background: var(--black3);
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--transition);
  border-radius: 1px;
  width: 100%;
}
.auth-input:focus {
  border-color: rgba(232,227,216,0.5);
}
.auth-input::placeholder { color: var(--grey2); }

.auth-error {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #e07070;
  margin-bottom: 12px;
  min-height: 16px;
  opacity: 0;
  transition: opacity var(--transition);
}
.auth-error.visible { opacity: 1; }

.auth-success {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #09b2a0;
  margin-bottom: 12px;
}
.auth-success.hidden { display: none; }

.auth-submit-btn {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 4px;
}
.auth-submit-btn:hover { opacity: 0.88; }
.auth-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.auth-footer-note {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  text-align: center;
  margin-top: 16px;
  line-height: 1.7;
}
.auth-footer-note a {
  color: var(--offwhite);
  cursor: pointer;
  text-decoration: underline;
}
.auth-footer-note a:hover { color: var(--white); }

/* ════════════════════════════════
   REVIEWS SECTION
════════════════════════════════ */
.reviews-section {
  padding: 90px 40px;
  border-top: 1px solid rgba(232,227,216,0.08);
  overflow: hidden;
}
.reviews-section .section-header {
  margin-bottom: 50px;
}

.vinted-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey2);
  border: 1px solid rgba(232,227,216,0.1);
  padding: 5px 12px;
  margin-bottom: 12px;
}
.vinted-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #09b2a0;
  flex-shrink: 0;
}

/* ─── Stats Row ─── */
#reviews-stats {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.reviews-avg-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.reviews-big-num {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--white);
}
.reviews-stars-row {
  display: flex;
  gap: 3px;
}
.reviews-total-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  text-align: center;
  line-height: 1.5;
  max-width: 150px;
}

.reviews-dist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  max-width: 340px;
}
.dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dist-label {
  font-family: var(--font-cond);
  font-size: 12px;
  color: var(--offwhite);
  width: 22px;
  text-align: right;
  letter-spacing: 0.5px;
}
.dist-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(232,227,216,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.dist-bar-fill {
  height: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: width 1s ease;
}
.dist-count {
  font-family: var(--font-cond);
  font-size: 11px;
  color: var(--grey2);
  width: 18px;
}

/* ─── Carousel Controls ─── */
.reviews-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 20px;
}
.rev-arrow {
  background: none;
  border: 1px solid rgba(232,227,216,0.2);
  color: var(--white);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  font-size: 18px;
}
.rev-arrow:hover {
  background: rgba(232,227,216,0.08);
  border-color: rgba(232,227,216,0.4);
}

/* ─── Reviews Carousel ─── */
#reviews-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#reviews-grid::-webkit-scrollbar { display: none; }

/* ─── Review Card ─── */
.review-card {
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.08);
  padding: 24px;
  min-width: 320px;
  max-width: 320px;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--transition), transform var(--transition);
  animation: fadeUp 0.5s ease both;
}
.review-card:hover {
  border-color: rgba(232,227,216,0.2);
  transform: translateY(-3px);
}

.review-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;   /* allows stars to drop to next line when space is tight */
}
.review-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(232,227,216,0.12);
  border: 1px solid rgba(232,227,216,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--white);
  flex-shrink: 0;
}
.review-author-info { flex: 1; min-width: 0; }
.review-author {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #09b2a0;
  font-weight: 400;
}
.review-date {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  margin-top: 3px;
  text-transform: uppercase;
}
.review-stars {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  /* When flex-wrap kicks in, stars sit below the avatar+author on their own line */
  align-self: flex-start;
}

.review-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--offwhite);
  font-style: italic;
  flex: 1;
}

.review-product {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey2);
  border-top: 1px solid rgba(232,227,216,0.07);
  padding-top: 14px;
  margin-top: auto;
}

@media (max-width: 768px) {
  .reviews-section { padding: 60px 16px; }
  #reviews-stats { gap: 28px; }
  .reviews-big-num { font-size: 56px; }
  .reviews-dist { max-width: 100%; }
  .review-card { min-width: 270px; max-width: 270px; }
  /* Stars: always on their own row on mobile (avatar + author already fill the row) */
  .review-header { flex-wrap: wrap; row-gap: 8px; }
  .review-stars {
    /* Push stars to a new row: order puts them after avatar and author-info */
    order: 3;
    flex-basis: 100%;      /* take full width on their own line */
    padding-left: 50px;    /* align under author name (avatar 38px + gap 12px) */
  }
  .auth-logged-out .btn-ghost { display: none; }
}

/* ════════════════════════════════
   ORDER CONFIRMATION MODAL
════════════════════════════════ */
.order-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.order-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 401;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s cubic-bezier(0.34,1.2,0.64,1),
              transform 0.45s cubic-bezier(0.34,1.2,0.64,1);
}
.order-modal.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.order-modal-inner {
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.12);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.order-modal-inner::-webkit-scrollbar { width: 3px; }
.order-modal-inner::-webkit-scrollbar-thumb { background: var(--grey); }

/* ── Topbar ── */
.order-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(232,227,216,0.08);
  flex-shrink: 0;
}
.order-modal-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-modal-eyebrow {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--grey2);
}
.order-modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--white);
  line-height: 1;
}
.order-modal-close {
  background: none;
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 17px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.order-modal-close:hover { background: rgba(232,227,216,0.1); }

/* ── Body ── */
.order-modal-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Order Summary ── */
.order-section-label {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 14px;
}

.order-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(232,227,216,0.08);
}
.order-summary-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(232,227,216,0.06);
  transition: background var(--transition);
}
.order-summary-item:last-child { border-bottom: none; }
.order-summary-item:hover { background: rgba(232,227,216,0.02); }

.order-summary-img {
  width: 48px; height: 48px;
  background: var(--black3);
  border: 1px solid rgba(232,227,216,0.1);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.order-summary-img svg { width: 100%; height: 100%; }
.order-summary-img img { width: 100%; height: 100%; object-fit: contain; }

.order-summary-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-item-name {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}
.order-item-detail {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  text-transform: uppercase;
}
.order-item-price {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--white);
  flex-shrink: 0;
}

.order-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 0;
}
.order-total-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--offwhite);
}
.order-total-price {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--white);
}

/* ── Divider ── */
.order-divider {
  height: 1px;
  background: rgba(232,227,216,0.08);
  margin: 0 -28px;
}

/* ── Info box ── */
.order-info-box {
  background: rgba(232,227,216,0.04);
  border: 1px solid rgba(232,227,216,0.1);
  border-left: 3px solid rgba(232,227,216,0.5);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.order-info-icon {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.7;
}
.order-info-icon svg { width: 18px; height: 18px; }
.order-info-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--offwhite);
}
.order-info-text strong {
  font-weight: 500;
  color: var(--white);
  font-family: var(--font-cond);
  letter-spacing: 0.5px;
}

/* ── Contact type radio ── */
.contact-type-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.contact-radio-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--offwhite);
  cursor: pointer;
  border: 1px solid rgba(232,227,216,0.15);
  padding: 7px 16px;
  transition: all var(--transition);
  flex: 1;
  justify-content: center;
}
.contact-radio-label:hover {
  border-color: rgba(232,227,216,0.35);
  color: var(--white);
}
.contact-radio-label input[type="radio"] {
  display: none;
}
.contact-radio-label.selected {
  background: rgba(232,227,216,0.08);
  border-color: rgba(232,227,216,0.5);
  color: var(--white);
}
.radio-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,227,216,0.4);
  transition: all var(--transition);
  flex-shrink: 0;
}
.contact-radio-label.selected .radio-dot {
  background: var(--white);
  border-color: var(--white);
}

.order-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-contact-label {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--offwhite);
}
.order-contact-input {
  background: var(--black3);
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}
.order-contact-input:focus { border-color: rgba(232,227,216,0.45); }
.order-contact-input::placeholder { color: var(--grey2); }

.order-contact-error {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #e07070;
  min-height: 16px;
  opacity: 0;
  transition: opacity var(--transition);
}
.order-contact-error.visible { opacity: 1; }

/* ── CTA ── */
.order-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-confirm-btn {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.order-confirm-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.order-confirm-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.order-confirm-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.order-back-btn {
  background: none;
  border: 1px solid rgba(232,227,216,0.12);
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
}
.order-back-btn:hover {
  border-color: rgba(232,227,216,0.3);
  color: var(--offwhite);
}

/* ════════════════════════
   STEP 2 — Conferma
════════════════════════ */
#order-step-2 {
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.order-success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(232,227,216,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: successPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.order-success-icon svg {
  width: 32px; height: 32px;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.5s 0.2s ease forwards;
}
@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.order-success-title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 5px;
  color: var(--white);
  margin-bottom: 14px;
  animation: fadeUp 0.5s 0.15s ease both;
}
.order-success-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--offwhite);
  max-width: 380px;
  margin-bottom: 10px;
  animation: fadeUp 0.5s 0.25s ease both;
}
.order-success-contact-highlight {
  display: inline-block;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  border: 1px solid rgba(232,227,216,0.25);
  padding: 6px 16px;
  margin-bottom: 28px;
  animation: fadeUp 0.5s 0.3s ease both;
}

.order-success-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(232,227,216,0.08);
  width: 100%;
  margin-bottom: 28px;
  animation: fadeUp 0.5s 0.35s ease both;
}
.order-success-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(232,227,216,0.06);
  text-align: left;
}
.order-success-step:last-child { border-bottom: none; }
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(232,227,216,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--white);
  flex-shrink: 0;
}
.step-text {
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--offwhite);
  line-height: 1.45;
}
.step-text strong {
  color: var(--white);
  font-weight: 700;
}

.order-success-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  animation: fadeUp 0.5s 0.4s ease both;
}
.btn-close-success {
  width: 100%;
  background: none;
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 13px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-close-success:hover {
  border-color: rgba(232,227,216,0.3);
  color: var(--white);
}

@media (max-width: 768px) {
  .order-modal-inner { max-height: 100dvh; border-radius: 0; }
  .order-modal { padding: 0; align-items: flex-end; }
  .order-modal-body { padding: 20px; }
  #order-step-2 { padding: 24px 20px; }
  .contact-type-row { flex-direction: column; }
}

/* ════════════════════════════════════════════════════
   COOKIE CONSENT — Banner + Modale Preferenze
════════════════════════════════════════════════════ */

/* ─── Banner in basso ─── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--black2);
  border-top: 1px solid rgba(232,227,216,0.12);
  padding: 24px 40px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25,0.8,0.4,1), opacity 0.4s ease;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.cookie-banner-text { flex: 1; min-width: 260px; }

.cookie-banner-title {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 6px;
}

.cookie-banner-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--offwhite);
}
.cookie-banner-desc a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-desc a:hover { color: var(--offwhite); }

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ─── Bottoni condivisi banner + modale ─── */
.cookie-btn {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 1px;
  transition: all var(--transition);
  white-space: nowrap;
}
.cookie-btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--grey2);
}
.cookie-btn-ghost:hover { color: var(--white); }

.cookie-btn-outline {
  background: none;
  border: 1px solid rgba(232,227,216,0.3);
  color: var(--offwhite);
}
.cookie-btn-outline:hover {
  border-color: rgba(232,227,216,0.6);
  color: var(--white);
}

.cookie-btn-solid {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
}
.cookie-btn-solid:hover { opacity: 0.88; }

/* ─── Modale preferenze ─── */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.cookie-modal-overlay.open { opacity: 1; pointer-events: all; }

.cookie-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  z-index: 601;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.12);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.cookie-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.cookie-modal::-webkit-scrollbar { width: 3px; }
.cookie-modal::-webkit-scrollbar-thumb { background: var(--grey); }

.cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid rgba(232,227,216,0.08);
  position: sticky;
  top: 0;
  background: var(--black2);
  z-index: 2;
}
.cookie-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--white);
}
.cookie-modal-close {
  background: none;
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.cookie-modal-close:hover { background: rgba(232,227,216,0.1); }

.cookie-modal-body { padding: 24px 28px; }

.cookie-modal-intro {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--offwhite);
  margin-bottom: 24px;
}

.cookie-category-row {
  border: 1px solid rgba(232,227,216,0.08);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.cookie-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cookie-category-label {
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cookie-required-tag {
  font-family: var(--font-cond);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey2);
  border: 1px solid rgba(232,227,216,0.15);
  padding: 2px 8px;
}

.cookie-category-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--grey2);
}

/* ─── Toggle switch ─── */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(232,227,216,0.15);
  border: 1px solid rgba(232,227,216,0.2);
  transition: var(--transition);
  border-radius: 24px;
}
.cookie-switch-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--grey2);
  transition: var(--transition);
  border-radius: 50%;
}
.cookie-switch input:checked + .cookie-switch-slider {
  background-color: var(--white);
  border-color: var(--white);
}
.cookie-switch input:checked + .cookie-switch-slider::before {
  background-color: var(--black);
  transform: translateX(18px);
}
.cookie-switch input:disabled + .cookie-switch-slider {
  background-color: var(--white);
  border-color: var(--white);
  opacity: 0.5;
  cursor: not-allowed;
}
.cookie-switch input:disabled + .cookie-switch-slider::before {
  background-color: var(--black);
  transform: translateX(18px);
}

.cookie-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 20px 28px 24px;
  border-top: 1px solid rgba(232,227,216,0.08);
  position: sticky;
  bottom: 0;
  background: var(--black2);
}
.cookie-modal-footer .cookie-btn { flex: 1; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .cookie-banner { padding: 20px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner-actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie-banner-actions .cookie-btn { width: 100%; text-align: center; }
  .cookie-modal { width: calc(100vw - 24px); }
  .cookie-modal-footer { flex-direction: column-reverse; }
}

/* ════════════════════════════════════════════════════
   SEARCH BAR (shop)
════════════════════════════════════════════════════ */
.shop-search-row {
  margin-bottom: 24px;
}
.shop-search-box {
  position: relative;
  max-width: 480px;
}
.shop-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey2);
  pointer-events: none;
}
.shop-search-input {
  width: 100%;
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 13px 44px 13px 44px;
  outline: none;
  transition: border-color var(--transition);
}
.shop-search-input:focus { border-color: rgba(232,227,216,0.4); }
.shop-search-input::placeholder { color: var(--grey2); }

.shop-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--grey2);
  font-size: 18px;
  cursor: pointer;
  width: 26px; height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}
.shop-search-clear.visible { display: flex; }
.shop-search-clear:hover { color: var(--white); }

/* Evidenziazione risultati ricerca */
mark {
  background: rgba(232,227,216,0.9);
  color: var(--black);
  padding: 0 2px;
  border-radius: 1px;
}

/* ════════════════════════════════════════════════════
   PRODUCT PAGE (product.html)
════════════════════════════════════════════════════ */
.product-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 130px 40px 100px;
}

.breadcrumb {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--grey2);
  margin-bottom: 40px;
}
.breadcrumb a { color: var(--grey2); text-decoration: none; transition: color var(--transition); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.4; }
.breadcrumb .current { color: var(--offwhite); }

.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 100px;
}

.product-hero-image {
  aspect-ratio: 1;
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px;
}
.product-hero-image svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.6));
}
.product-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.6));
}

/* ── Galleria (più foto per prodotto, caricate dal pannello admin) ──
   .product-hero-image di base è pensato per UNA sola immagine centrata
   in un riquadro quadrato — quando c'è una galleria, il contenitore
   diventa una colonna (foto grande sopra, miniature sotto) invece di
   forzare tutto nello stesso riquadro quadrato fisso. */
.product-hero-image.has-gallery {
  aspect-ratio: auto;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
}
.product-gallery-main {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.6));
}
.product-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid rgba(232,227,216,0.08);
  overflow-x: auto;
}
.product-gallery-thumb {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border: 1px solid rgba(232,227,216,0.14);
  background: var(--black3);
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--transition), border-color var(--transition);
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumb:hover { opacity: 0.8; }
.product-gallery-thumb.is-active { opacity: 1; border-color: var(--white); }

.product-hero-badge {
  position: absolute;
  top: 20px; left: 20px;
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  font-weight: 700;
}

.product-hero-info { display: flex; flex-direction: column; }

.product-hero-category {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 10px;
}
.product-hero-name {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1;
  margin-bottom: 10px;
}
.product-hero-size {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grey2);
  margin-bottom: 24px;
}
.product-hero-price {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 28px;
}
.product-hero-price .currency {
  font-family: var(--font-cond);
  font-size: 20px;
  font-weight: 300;
  margin-right: 4px;
  vertical-align: super;
  color: var(--offwhite);
}

.product-hero-desc {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--offwhite);
  margin-bottom: 28px;
}

.product-details-list {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-details-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--offwhite);
}
.product-details-list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--grey2);
}

.product-hero-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(232,227,216,0.08);
}
.product-hero-controls .qty-ctrl { flex-shrink: 0; }
.product-hero-controls .qty-btn { width: 42px; height: 46px; font-size: 19px; }
.product-hero-controls .qty-input { width: 50px; height: 46px; font-size: 16px; }
.product-hero-add-btn {
  flex: 1;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  height: 46px;
  cursor: pointer;
  transition: all var(--transition);
}
.product-hero-add-btn:hover { opacity: 0.88; }
.product-hero-add-btn.added { background: var(--grey); color: var(--white); }
.product-hero-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.product-stock-note {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-top: 14px;
}
.product-stock-note.out { color: #e07070; }

/* ─── Prodotti simili ─── */
.related-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: 3px;
  color: var(--white);
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
  padding-bottom: 16px;
}

@media (max-width: 860px) {
  .product-page { padding: 110px 20px 70px; }
  .product-hero { grid-template-columns: 1fr; gap: 32px; }
  .product-hero-image { padding: 40px; }
  .product-gallery-main { padding: 32px; }
}

/* ── Pagina prodotto su telefono ──
   Prima di questo blocco il layout scendeva a una colonna a 860px e poi
   non cambiava più: un iPhone da 375px riceveva le stesse misure di un
   tablet da 800px. Le cose che si rompevano davvero, in ordine di quanto
   si notano:

   1. Il nome del prodotto. `clamp(38px, 5vw, 56px)` su schermo stretto
      finisce sempre sul minimo di 38px, che con Bebas Neue e 2px di
      spaziatura è troppo largo per 335px utili: i nomi lunghi andavano a
      capo male o sbordavano.
   2. La riga dei controlli. Quantità (134px) e "Aggiungi al carrello"
      stavano affiancati sulla stessa riga: al pulsante restavano ~190px
      per una scritta di venti caratteri maiuscoli spaziati. Qui sotto
      diventano due righe piene, che è anche più comodo da toccare.
   3. Lo spazio verticale sprecato: 110px di padding sopra, 40px sotto le
      briciole di pane, 100px sotto l'hero. Su desktop respirano, su un
      telefono sono tre schermate di vuoto prima di arrivare al prezzo.
   4. La foto: un quadrato a tutta larghezza con 40px di margine interno
      occupava quasi tutto lo schermo prima ancora di vedere il nome. */
@media (max-width: 560px) {
  .product-page { padding: 90px 16px 56px; }

  .breadcrumb { margin-bottom: 20px; font-size: 11px; }
  .breadcrumb .sep { margin: 0 5px; }

  .product-hero { gap: 24px; margin-bottom: 56px; }

  .product-hero-image { padding: 24px; }
  .product-gallery-main { padding: 20px; }
  .product-gallery-thumbs { padding: 10px 12px; gap: 6px; }
  .product-gallery-thumb { width: 48px; height: 48px; }

  .product-hero-name {
    font-size: clamp(28px, 8.5vw, 38px);
    letter-spacing: 1px;
    /* I nomi lunghi senza spazi (codici, sigle) non devono sbordare */
    overflow-wrap: anywhere;
  }
  .product-hero-size { margin-bottom: 16px; }
  .product-hero-price { font-size: 34px; margin-bottom: 20px; }
  .product-hero-price .currency { font-size: 17px; }
  .product-hero-desc { font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; }
  .product-details-list { margin-bottom: 24px; gap: 9px; }

  /* Controlli su due righe: quantità sopra, pulsante sotto a tutta larghezza */
  .product-hero-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 18px;
  }
  .product-hero-controls .qty-ctrl {
    align-self: flex-start;   /* non si stira a tutta larghezza: resta compatto */
  }
  /* 48px: dimensione minima consigliata per un bersaglio tattile */
  .product-hero-controls .qty-btn { width: 52px; height: 48px; font-size: 20px; }
  .product-hero-controls .qty-input { width: 56px; height: 48px; }
  .product-hero-add-btn {
    flex: none;
    width: 100%;
    height: 52px;
  }
}

/* ════════════════════════════════════════════════════
   ACCOUNT PAGE — Profilo + Storico Ordini
════════════════════════════════════════════════════ */
.account-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 130px 24px 100px;
}

/* ─── Header profilo ─── */
.account-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.account-avatar-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(232,227,216,0.1);
  border: 1px solid rgba(232,227,216,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--white);
  flex-shrink: 0;
}
.account-header-info { flex: 1; min-width: 0; }
.account-name {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1.1;
}
.account-email {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grey2);
  margin-top: 4px;
  word-break: break-word;
}
.account-member-since {
  font-family: var(--font-cond);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-top: 8px;
}

/* ─── Sezione storico ordini ─── */
.account-section-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 6px;
}
.account-section-title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 28px;
}

/* ─── Empty state ─── */
.account-empty {
  text-align: center;
  padding: 60px 20px;
  border: 1px solid rgba(232,227,216,0.08);
}
.account-empty svg { opacity: 0.3; margin-bottom: 16px; }
.account-empty p {
  font-family: var(--font-cond);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--offwhite);
  margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════
   PROGRAMMA FEDELTÀ (account.html)
════════════════════════════════════════════════════ */
.loyalty-section {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.loyalty-balance-card {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border: 1px solid rgba(9,178,160,0.25);
  background: rgba(9,178,160,0.05);
  padding: 22px 26px;
  margin-bottom: 24px;
}
.loyalty-balance-value {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 1px;
  color: #09b2a0;
}
.loyalty-balance-label {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey2);
}
.loyalty-info-box { margin-bottom: 24px; }
.loyalty-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.loyalty-reward-card {
  border: 1px solid rgba(232,227,216,0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--transition);
}
.loyalty-reward-card:hover { border-color: rgba(232,227,216,0.22); }
.loyalty-reward-name {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}
.loyalty-reward-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--grey2);
  line-height: 1.5;
  flex: 1;
}
.loyalty-reward-cost {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 1px;
  color: #09b2a0;
}
.loyalty-reward-btn {
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 11px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.loyalty-reward-btn:hover { opacity: 0.88; }
.loyalty-reward-btn:disabled {
  background: rgba(232,227,216,0.08);
  color: var(--grey2);
  cursor: not-allowed;
}
.loyalty-history-toggle {
  background: none;
  border: none;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.loyalty-history-toggle:hover { color: var(--white); }
.loyalty-history-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loyalty-history-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(232,227,216,0.06);
  font-family: var(--font-body);
  font-size: 12.5px;
}
.loyalty-history-desc { color: var(--offwhite); }
.loyalty-history-date { color: var(--grey2); font-size: 11px; margin-left: 8px; }
.loyalty-history-points { font-family: var(--font-cond); font-weight: 700; }
.loyalty-history-points.earned { color: #09b2a0; }
.loyalty-history-points.redeemed { color: #d4b86a; }

/* ── Referral ("invita un amico") ── */
.referral-section {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.referral-info-box { margin-bottom: 24px; }
.referral-link-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.referral-link-input {
  flex: 1;
  background: rgba(232,227,216,0.05);
  border: 1px solid rgba(232,227,216,0.14);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 12px 14px;
  outline: none;
}
.referral-link-input:focus { border-color: rgba(232,227,216,0.4); }
.referral-copy-btn {
  flex-shrink: 0;
  background: var(--white);
  color: var(--black);
  border: none;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 22px;
  cursor: pointer;
  transition: opacity var(--transition);
}
.referral-copy-btn:hover { opacity: 0.85; }
.referral-history-list { margin-top: 14px; }

/* ── Avviso sconto quantità ("ti mancano N adesivi...") ──
   Usato in 4 punti: card dello shop, hero prodotto, prodotti simili,
   righe del carrello (js/app.js: qtyDiscountHintHTML). Stessa resa
   ovunque, pensata per restare leggibile anche nelle card più strette
   della griglia prodotti. */
.qty-discount-hint {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qty-discount-hint span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--grey2);
  line-height: 1.4;
}
.qty-discount-hint-reached span {
  color: #09b2a0;
  font-weight: 500;
}
.qty-discount-bar {
  height: 4px;
  width: 100%;
  background: rgba(232,227,216,0.1);
  overflow: hidden;
}
.qty-discount-bar-fill {
  height: 100%;
  background: #09b2a0;
  transition: width 0.3s ease;
}
.qty-discount-hint-wrap:empty { display: none; }

/* ════════════════════════════════════════════════════
   MODIFICA DATI ACCOUNT (account.html)
════════════════════════════════════════════════════ */
.account-edit-section {
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
}
.account-edit-form { max-width: 420px; }
.account-edit-current {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--grey2);
  margin: 0 0 16px;
}
.account-edit-current strong { color: var(--offwhite); font-weight: 500; }

.account-edit-divider {
  height: 1px;
  background: rgba(232,227,216,0.08);
  margin: 28px 0;
  max-width: 420px;
}

.account-edit-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 420px;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
}
.account-edit-toggle-icon {
  color: var(--grey2);
  font-size: 18px;
  transition: transform var(--transition);
}
.account-edit-toggle[aria-expanded="true"] .account-edit-toggle-icon { transform: rotate(90deg); }

.account-edit-panel {
  max-width: 420px;
  margin-top: 18px;
}

.account-edit-cancel {
  background: none;
  border: none;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}
.account-edit-cancel:hover { color: var(--white); }

/* ─── Order card ─── */
.order-history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-card {
  border: 1px solid rgba(232,227,216,0.08);
  transition: border-color var(--transition);
}
.order-card:hover { border-color: rgba(232,227,216,0.18); }

.order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(232,227,216,0.06);
}
.order-card-id-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.order-card-id {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}
.order-card-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--grey2);
}

/* ─── Status badge ─── */
.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-cond);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid transparent;
}
.order-status-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-pending    { color: #d4b86a; border-color: rgba(212,184,106,0.35); background: rgba(212,184,106,0.06); }
.status-pending .dot { background: #d4b86a; }
.status-processing { color: #6ab0d4; border-color: rgba(106,176,212,0.35); background: rgba(106,176,212,0.06); }
.status-processing .dot { background: #6ab0d4; }
.status-link_sent  { color: #09b2a0; border-color: rgba(9,178,160,0.35); background: rgba(9,178,160,0.06); }
.status-link_sent .dot { background: #09b2a0; }
.status-completed  { color: var(--white); border-color: rgba(232,227,216,0.3); background: rgba(232,227,216,0.06); }
.status-completed .dot { background: var(--white); }
.status-cancelled  { color: #e07070; border-color: rgba(224,112,112,0.35); background: rgba(224,112,112,0.06); }
.status-cancelled .dot { background: #e07070; }

/* ─── Order card body ─── */
.order-card-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-card-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.order-card-item-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--offwhite);
}
.order-card-item-name .qty {
  color: var(--grey2);
  font-size: 12px;
}
.order-card-item-price {
  font-family: var(--font-cond);
  font-size: 13px;
  color: var(--white);
  flex-shrink: 0;
}

.order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid rgba(232,227,216,0.06);
}
.order-card-total-label {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey2);
}
.order-card-total-price {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--white);
  margin-left: 8px;
}

.order-vinted-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-cond);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 18px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.order-vinted-link-btn:hover { opacity: 0.88; }

.order-card-loading, .account-loading {
  text-align: center;
  padding: 60px 0;
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--grey2);
}

@media (max-width: 640px) {
  .account-page { padding: 110px 18px 70px; }
  .account-header { flex-wrap: wrap; }
  .order-card-header, .order-card-footer { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════
   DANGER ZONE — Eliminazione account (account.html)
════════════════════════════════════════════════════ */
.danger-zone {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(224,112,112,0.15);
}

.danger-zone-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 2px;
  color: #e07070;
  margin-bottom: 14px;
}

.danger-zone-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--offwhite);
  max-width: 560px;
  margin-bottom: 22px;
}
.danger-zone-desc strong { color: #e07070; font-weight: 500; }

.danger-zone-btn {
  background: none;
  border: 1px solid rgba(224,112,112,0.5);
  color: #e07070;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
  transition: all var(--transition);
}
.danger-zone-btn:hover {
  background: rgba(224,112,112,0.1);
  border-color: #e07070;
}
.danger-zone-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Modale conferma eliminazione ─── */
.delete-account-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.delete-account-overlay.open { opacity: 1; pointer-events: all; }

.delete-account-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  z-index: 701;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--black2);
  border: 1px solid rgba(224,112,112,0.3);
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.delete-account-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.delete-account-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.delete-account-icon {
  font-size: 22px;
  color: #e07070;
}
.delete-account-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--white);
}

.delete-account-warning {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--offwhite);
  background: rgba(224,112,112,0.06);
  border: 1px solid rgba(224,112,112,0.2);
  border-left: 3px solid #e07070;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.delete-account-warning strong { color: #e07070; font-weight: 500; }

.delete-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.delete-account-actions .cookie-btn,
.delete-account-actions .danger-zone-btn {
  flex: 1;
  text-align: center;
}

@media (max-width: 640px) {
  .delete-account-modal { padding: 24px; }
  .delete-account-actions { flex-direction: column-reverse; }
}

/* Nota di personalizzazione mostrata nel carrello */
.cart-item-notes {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--grey2);
  margin-top: 4px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════
   PERSONALIZZA — Adesivi personalizzati (personalizza.html)
════════════════════════════════════════════════════ */
.custom-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 130px 24px 100px;
}

.custom-hero {
  text-align: center;
  margin-bottom: 56px;
}
.custom-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 54px);
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 16px;
}
.custom-hero-desc {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--offwhite);
  max-width: 520px;
  margin: 0 auto;
}

.custom-step {
  margin-bottom: 48px;
}
.custom-step-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  margin-bottom: 20px;
}
.step-num-inline {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(232,227,216,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--white);
  flex-shrink: 0;
}

.custom-loading {
  font-family: var(--font-cond);
  font-size: 13px;
  color: var(--grey2);
  letter-spacing: 1px;
  padding: 20px 0;
}

/* ─── Griglia forme ─── */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.shape-card {
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.1);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--offwhite);
  font-family: inherit;
}
.shape-card:hover {
  border-color: rgba(232,227,216,0.3);
  transform: translateY(-2px);
}
.shape-card.selected {
  border-color: var(--white);
  background: rgba(232,227,216,0.06);
}
.shape-icon {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shape-icon svg { width: 100%; height: 100%; }
.shape-name {
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}

/* ─── Griglia dimensioni ─── */
.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.size-card {
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.size-card:hover { border-color: rgba(232,227,216,0.3); }
.size-card.selected {
  border-color: var(--white);
  background: rgba(232,227,216,0.06);
}
.size-label {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.5px;
}
.size-price {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--offwhite);
}

/* ─── Textarea note ─── */
.custom-form-field { margin-bottom: 16px; }
.custom-textarea {
  width: 100%;
  min-height: 110px;
  background: var(--black3);
  border: 1px solid rgba(232,227,216,0.15);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 14px 16px;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition);
}
.custom-textarea:focus { border-color: rgba(232,227,216,0.5); }
.custom-textarea::placeholder { color: var(--grey2); }
.custom-char-count {
  text-align: right;
  font-family: var(--font-cond);
  font-size: 11px;
  color: var(--grey2);
  margin-top: 6px;
}

.custom-info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(232,227,216,0.04);
  border: 1px solid rgba(232,227,216,0.1);
  border-left: 3px solid rgba(232,227,216,0.4);
  padding: 14px 16px;
  margin-bottom: 24px;
}
.custom-info-box svg { flex-shrink: 0; margin-top: 2px; color: var(--offwhite); }
.custom-info-box p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--offwhite);
}
.custom-info-box a { color: var(--white); text-decoration: underline; }

/* ─── Upload grafica (pagina personalizza) ─── */
.custom-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px dashed rgba(232,227,216,0.25);
  background: rgba(232,227,216,0.02);
  padding: 30px 20px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.custom-upload-zone:hover,
.custom-upload-zone:focus-visible {
  border-color: rgba(232,227,216,0.5);
  background: rgba(232,227,216,0.04);
  outline: none;
}
.upload-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.upload-state svg { color: var(--grey2); }
.upload-cta {
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}
.upload-hint {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--grey2);
}
.upload-filename {
  color: #09b2a0;
  word-break: break-all;
  max-width: 100%;
}
#upload-error-msg { color: #d9534f; }
.upload-remove-btn {
  background: none;
  border: 1px solid rgba(232,227,216,0.3);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 2px;
}
.upload-remove-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.upload-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(232,227,216,0.15);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: upload-spin 0.7s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }

.custom-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--grey2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.custom-or-divider::before,
.custom-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(232,227,216,0.1);
}

.custom-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.custom-qty-label {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--offwhite);
}

/* ─── Riepilogo finale ─── */
.custom-summary {
  border: 1px solid rgba(232,227,216,0.12);
  padding: 24px;
  margin-top: 8px;
}
.custom-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.custom-summary-label {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey2);
}
.custom-summary-value {
  font-family: var(--font-cond);
  font-size: 15px;
  color: var(--white);
}
.custom-summary-total {
  border-top: 1px solid rgba(232,227,216,0.1);
  margin-top: 6px;
  padding-top: 14px;
}
.custom-summary-total .custom-summary-label { color: var(--offwhite); font-size: 13px; font-weight: 700; }
.custom-summary-total .custom-summary-value {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
}
.custom-summary .product-hero-add-btn { margin-top: 18px; }

/* ════════════════════════════════════════════════════
   UPLOAD GRAFICA (personalizza.html)
════════════════════════════════════════════════════ */
.custom-upload-zone {
  border: 1.5px dashed rgba(232,227,216,0.2);
  background: var(--black2);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 20px;
}
.custom-upload-zone:hover {
  border-color: rgba(232,227,216,0.4);
  background: rgba(232,227,216,0.03);
}
.custom-upload-zone svg { color: var(--offwhite); margin-bottom: 10px; }
.upload-zone-title {
  font-family: var(--font-cond);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  margin-bottom: 4px;
}
.upload-zone-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 300;
  color: var(--grey2);
}
.upload-remove-btn {
  background: none;
  border: 1px solid rgba(224,112,112,0.4);
  color: #e07070;
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-top: 8px;
  cursor: pointer;
  transition: all var(--transition);
}
.upload-remove-btn:hover { background: rgba(224,112,112,0.08); }

/* ════════════════════════════════════════════════════
   ASSISTENTE FAQ — bottone flottante + pannello chat
   (js/faq-vocabulary.js + js/faq-bot.js)
════════════════════════════════════════════════════ */
.faqbot-toggle {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 800;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}
.faqbot-toggle:hover { transform: scale(1.06); box-shadow: 0 10px 32px rgba(0,0,0,0.55); }
.faqbot-toggle svg { width: 24px; height: 24px; position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; }
.faqbot-toggle-icon-close { opacity: 0; transform: scale(0.6) rotate(-45deg); }
.faqbot-toggle-icon-open  { opacity: 1; transform: scale(1) rotate(0deg); }
.faqbot-toggle.faqbot-toggle-open .faqbot-toggle-icon-open  { opacity: 0; transform: scale(0.6) rotate(45deg); }
.faqbot-toggle.faqbot-toggle-open .faqbot-toggle-icon-close { opacity: 1; transform: scale(1) rotate(0deg); }

.faqbot-panel {
  position: fixed;
  right: 24px; bottom: 92px;
  z-index: 801;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 140px));
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.faqbot-panel.faqbot-panel-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.faqbot-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(232,227,216,0.1);
  background: var(--black3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.faqbot-header-text { min-width: 0; }

/* Chiusura del pannello. Indispensabile su telefono, dove il pannello è a
   tutto schermo e copre il pulsante flottante che l'ha aperto: senza questa
   X non ci sarebbe modo di tornare al sito. Su desktop è comunque comoda. */
.faqbot-close-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  margin: -4px -4px 0 0;
  background: none;
  border: none;
  color: var(--grey2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.faqbot-close-btn:hover { color: var(--white); background: rgba(232,227,216,0.08); }
.faqbot-close-btn svg { width: 18px; height: 18px; }
.faqbot-header-title {
  display: block;
  font-family: var(--font-cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}
.faqbot-header-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--grey2);
  margin-top: 2px;
}

.faqbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Senza questo, arrivati in fondo alla chat il gesto di scorrimento
     "sfonda" e continua sulla pagina sotto: si scrollava il sito mentre si
     leggeva una risposta, e viceversa. `contain` ferma la catena al bordo
     di questo riquadro. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.faqbot-bubble {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  padding: 10px 13px;
  max-width: 85%;
  white-space: pre-line;
}
.faqbot-bubble-bot {
  align-self: flex-start;
  background: rgba(232,227,216,0.06);
  border: 1px solid rgba(232,227,216,0.1);
  color: var(--offwhite);
}
.faqbot-bubble-user {
  align-self: flex-end;
  background: var(--white);
  color: var(--black);
  font-weight: 500;
}

.faqbot-feedback-row {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--grey2);
}
.faqbot-feedback-btn {
  background: rgba(232,227,216,0.06);
  border: 1px solid rgba(232,227,216,0.14);
  cursor: pointer;
  font-size: 14px;
  padding: 3px 9px;
  transition: background var(--transition);
}
.faqbot-feedback-btn:hover:not(:disabled) { background: rgba(232,227,216,0.14); }
.faqbot-feedback-btn:disabled { cursor: default; opacity: 0.5; }
.faqbot-feedback-row.faqbot-feedback-answered .faqbot-feedback-label { display: none; }

.faqbot-escalation { align-self: flex-start; }
.faqbot-escalation-btn {
  display: inline-block;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--black);
  background: var(--white);
  padding: 9px 16px;
  text-decoration: none;
  transition: opacity var(--transition);
}
.faqbot-escalation-btn:hover { opacity: 0.85; }

.faqbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.faqbot-chip {
  background: none;
  border: 1px solid rgba(232,227,216,0.18);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 11.5px;
  padding: 6px 11px;
  cursor: pointer;
  transition: all var(--transition);
}
.faqbot-chip:hover { border-color: rgba(232,227,216,0.4); color: var(--white); }

.faqbot-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(232,227,216,0.1);
}
.faqbot-input {
  flex: 1;
  background: rgba(232,227,216,0.05);
  border: 1px solid rgba(232,227,216,0.14);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
}
.faqbot-input:focus { border-color: rgba(232,227,216,0.4); }
.faqbot-input::placeholder { color: var(--grey2); }
.faqbot-send-btn {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--white);
  color: var(--black);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition);
}
.faqbot-send-btn:hover { opacity: 0.85; }
.faqbot-send-btn svg { width: 16px; height: 16px; }

/* ── Chatbot su telefono: pannello a tutto schermo ──
   Prima era un riquadro sospeso a 16px dai bordi, e da lì nascevano quattro
   problemi che si sommavano:

   1. SCORRIMENTO. Il pannello galleggiava sopra la pagina, che restava
      visibile e scorribile intorno. Il dito finiva per muovere ora la chat
      ora il sito, a seconda di dove capitava. A tutto schermo l'ambiguità
      sparisce: c'è una cosa sola da scorrere. (In più `overscroll-behavior`
      sui messaggi impedisce allo scroll di sfondare sulla pagina, e
      faq-bot.js blocca lo scroll del body mentre il pannello è aperto.)

   2. ALTEZZA. `calc(100vh - 140px)` non funziona sui browser mobile: 100vh
      conta anche la barra degli indirizzi, che è sovrapposta al contenuto.
      Il pannello risultava più alto dello spazio davvero visibile e la riga
      di scrittura finiva sotto la barra del browser, irraggiungibile. `dvh`
      è l'unità che tiene conto della barra e si aggiorna quando compare o
      scompare. La riga con `vh` resta come ripiego per i browser vecchi che
      non conoscono `dvh` e la ignorano.

   3. DOMANDE SUGGERITE. Cinque pillole con domande intere, mandate a capo
      (`flex-wrap: wrap`) dentro un pannello stretto: diventavano cinque
      righe che si mangiavano un terzo dell'altezza, spingendo la
      conversazione fuori dallo schermo. Qui diventano una riga sola che
      scorre in orizzontale.

   4. TASTIERA. Il campo di scrittura era a 13px: sotto i 16px iOS ingrandisce
      la pagina appena lo tocchi (vedi la regola generale più in alto), e con
      il pannello già a tutto schermo il risultato era illeggibile. */
@media (max-width: 560px) {
  .faqbot-toggle { right: 16px; bottom: 16px; }

  .faqbot-panel {
    right: 0; left: 0; bottom: 0; top: 0;
    width: auto;
    height: 100vh;   /* ripiego per browser senza dvh */
    height: 100dvh;  /* altezza reale, barra del browser esclusa */
    max-height: none;
    border: none;
    /* Non parte più dal basso: a tutto schermo una salita darebbe l'idea
       sbagliata di un pannellino, e sfarfalla con la tastiera aperta. */
    transform: translateY(0) scale(1);
  }
  .faqbot-panel.faqbot-panel-open { transform: translateY(0) scale(1); }

  /* Tacca / barra di stato in cima e barra gesti in fondo (iPhone recenti) */
  .faqbot-header { padding-top: calc(16px + env(safe-area-inset-top)); }
  .faqbot-input-row { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Bersagli più comodi da toccare */
  .faqbot-header-title { font-size: 17px; }
  .faqbot-close-btn { width: 44px; height: 44px; margin: -8px -10px 0 0; }
  .faqbot-close-btn svg { width: 22px; height: 22px; }
  .faqbot-messages { padding: 16px 14px; gap: 12px; }
  .faqbot-input { font-size: 16px; padding: 12px; }
  .faqbot-send-btn { width: 44px; height: 44px; }

  /* Suggerimenti: una riga sola che scorre, non un muro di pillole */
  .faqbot-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 14px 12px;
    gap: 8px;
    scrollbar-width: none;
  }
  .faqbot-suggestions::-webkit-scrollbar { display: none; }
  .faqbot-chip {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12.5px;
    padding: 9px 14px;
  }
}

/* ════════════════════════════════════════════════════
   INVITO A INSTALLARE L'APP (js/pwa-install.js)
   Scheda che sale dal basso, sopra il resto della pagina.
   Compare solo su telefono e solo se il sito non è già installato.
════════════════════════════════════════════════════ */
.pwa-install-card {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  /* 799: SOTTO il pulsante del chatbot (800) e sotto il suo pannello (801).
     Su telefono il pannello della chat è a tutto schermo: se questa scheda
     stesse più in alto, resterebbe appiccicata sopra la conversazione. */
  z-index: 799;
  background: var(--black2);
  border: 1px solid rgba(232,227,216,0.14);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
  padding: 18px 18px 16px;

  /* Stato di partenza dell'animazione: fuori dallo schermo e trasparente.
     La classe -in (aggiunta dal JS un frame dopo l'inserimento) porta agli
     stati finali, e la transizione fa il resto. */
  opacity: 0;
  transform: translateY(120%);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.pwa-install-card.pwa-install-card-in {
  opacity: 1;
  transform: translateY(0);
}

.pwa-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  background: none; border: none;
  color: var(--grey2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--transition);
}
.pwa-close:hover { color: var(--white); }
.pwa-close svg { width: 17px; height: 17px; }

.pwa-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 32px;    /* spazio per la X */
}

.pwa-icon-wrap { position: relative; flex-shrink: 0; }
.pwa-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: block;
  position: relative;
  z-index: 1;
  /* Piccolo ingresso a molla: l'icona "atterra" mezzo secondo dopo la scheda */
  animation: pwa-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}
/* Alone che pulsa dietro l'icona: attira l'occhio senza lampeggiare */
.pwa-icon-glow {
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(232,227,216,0.22) 0%, transparent 70%);
  animation: pwa-glow 2.6s ease-in-out infinite;
}

.pwa-head-text { min-width: 0; }
.pwa-title {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 1.2px;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 5px;
}
.pwa-sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--offwhite);
}

/* ─── Istruzioni iOS ───
   Su iPhone non esiste un pulsante "installa": si può solo spiegare il
   gesto. I due passaggi entrano in sequenza, così l'occhio li legge
   nell'ordine giusto invece di trovarseli già lì tutti insieme. */
.pwa-steps {
  list-style: none;
  margin: 16px 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(232,227,216,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pwa-step {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: pwa-step-in 0.45s ease forwards;
}
.pwa-step:nth-child(1) { animation-delay: 0.34s; }
.pwa-step:nth-child(2) { animation-delay: 0.50s; }

.pwa-step-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: 1px solid rgba(232,227,216,0.18);
  background: rgba(232,227,216,0.05);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.pwa-step-icon svg { width: 19px; height: 19px; }

/* L'icona Condividi pulsa: è quella che la persona deve cercare nella barra
   di Safari, ed è il passaggio dove si perde di più. */
.pwa-step-icon-pulse { animation: pwa-pulse 1.9s ease-in-out 1.1s infinite; }

.pwa-step-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--offwhite);
}
.pwa-step-text strong { font-weight: 600; color: var(--white); }

/* ─── Pulsanti ─── */
.pwa-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.pwa-btn {
  flex: 1;
  height: 46px;
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity var(--transition), background var(--transition), border-color var(--transition);
}
.pwa-btn-primary { background: var(--white); color: var(--black); }
.pwa-btn-primary:hover { opacity: 0.88; }
.pwa-btn-ghost {
  background: none;
  color: var(--offwhite);
  border-color: rgba(232,227,216,0.2);
}
.pwa-btn-ghost:hover { border-color: rgba(232,227,216,0.45); color: var(--white); }

/* Il pulsante del chatbot vive nello stesso angolo in basso a destra:
   finché l'invito è aperto lo spostiamo in alto, altrimenti si sovrappongono
   e si finisce per toccare quello sbagliato. */
body.pwa-install-visible .faqbot-toggle {
  transform: translateY(-150px);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Chat aperta: la scheda sparisce del tutto e il pulsante torna al suo
   posto. `visibility` invece di `display` per non spezzare la transizione. */
body.faqbot-open .pwa-install-card { opacity: 0; visibility: hidden; pointer-events: none; }
body.faqbot-open.pwa-install-visible .faqbot-toggle { transform: translateY(0); }

@keyframes pwa-icon-pop {
  from { opacity: 0; transform: scale(0.55) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes pwa-glow {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
@keyframes pwa-step-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pwa-pulse {
  0%, 100% { transform: scale(1);    border-color: rgba(232,227,216,0.18); }
  50%      { transform: scale(1.12); border-color: rgba(232,227,216,0.55); }
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non deve
   vedere niente muoversi: la scheda appare e basta. Il resto del sito ha
   già la stessa accortezza più in basso (prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  .pwa-install-card { transition: opacity 0.2s ease; transform: none; }
  .pwa-install-card.pwa-install-card-in { transform: none; }
  .pwa-icon, .pwa-icon-glow, .pwa-step, .pwa-step-icon-pulse { animation: none; }
  .pwa-step { opacity: 1; }
  body.pwa-install-visible .faqbot-toggle { transition: none; }
}

/* Da 420px in giù (iPhone SE e simili) la scheda tocca i bordi */
@media (max-width: 420px) {
  .pwa-install-card { left: 0; right: 0; bottom: 0; border-left: none; border-right: none;
                      padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .pwa-title { font-size: 19px; }
}

/* ══════════════════════════════════
   SELETTORE LINGUA
══════════════════════════════════ */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(232,227,216,0.18);
  color: var(--offwhite);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.lang-switcher-btn:hover {
  border-color: rgba(232,227,216,0.4);
  background: rgba(232,227,216,0.04);
}
.lang-flag { font-size: 15px; line-height: 1; }
.lang-code { font-size: 11px; }
.lang-chevron { transition: transform 0.2s; opacity: 0.6; }
.lang-switcher-menu.open ~ .lang-switcher-btn .lang-chevron,
.lang-switcher-btn[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--black-soft, #111);
  border: 1px solid rgba(232,227,216,0.14);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 500;
  display: none;
  animation: langMenuIn 0.16s ease;
}
.lang-switcher-menu.open { display: block; }
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.lang-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--grey2, #c9c4b8);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.lang-switcher-item:hover { background: rgba(232,227,216,0.05); color: var(--offwhite); }
.lang-switcher-item.active { color: var(--offwhite); }
.lang-switcher-item .lang-name { flex: 1; }
.lang-check { color: var(--offwhite); font-size: 12px; }

/* Mobile: switcher più compatto */
@media (max-width: 768px) {
  .lang-switcher-btn { padding: 6px 8px; }
  .lang-code { display: none; }
  .lang-switcher-menu {
    right: 0;
    min-width: 150px;
  }
}

/* Avviso "solo italiano" sulle pagine legali */
.legal-lang-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(232,227,216,0.05);
  border: 1px solid rgba(232,227,216,0.15);
  border-left: 3px solid var(--offwhite, #e8e3d8);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 24px 0 40px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--grey2, #c9c4b8);
}
.legal-lang-notice::before {
  content: "ⓘ";
  font-size: 16px;
  line-height: 1.4;
  color: var(--offwhite, #e8e3d8);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   ANIMAZIONI NARRATIVE (js/animations.js)
═══════════════════════════════════════════════════ */

/* ─── Overlay cinematico ─── */
.ukm-anim-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ukmOverlayIn 0.3s ease;
}
.ukm-anim-overlay-out { animation: ukmOverlayOut 0.3s ease forwards; }
@keyframes ukmOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ukmOverlayOut { from { opacity: 1; } to { opacity: 0; } }

.ukm-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ukm-scene-label {
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--offwhite);
  opacity: 0.9;
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 12px;
}
/* Trattino brand sotto la scritta */
.ukm-scene-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--white);
  transform: translateX(-50%);
  opacity: 0.4;
}
.ukm-label-success { color: #6bcf8e; }

/* ─── 1. Fly to cart ─── */
.ukm-fly-sticker {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  will-change: transform, opacity;
}

/* Il carrello "sobbalza" quando riceve un articolo */
.ukm-cart-bump { animation: ukmCartBump 0.55s cubic-bezier(.36,.07,.19,.97); }
@keyframes ukmCartBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22) rotate(-6deg); }
  55%  { transform: scale(0.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ─── 2. Vinted checkout: telefono → pacco ─── */
.ukm-vinted-svg { filter: drop-shadow(0 12px 30px rgba(0,0,0,0.5)); }
.ukm-phone {
  transform-origin: 100px 115px;
  transition: transform 0.5s cubic-bezier(.5,-0.3,.5,1.3), opacity 0.4s ease;
}
.ukm-phone-morph {
  transform: scale(0.85) rotate(-4deg);
  opacity: 0;
}
.ukm-parcel { transform-origin: 100px 122px; }
.ukm-parcel-launch {
  animation: ukmParcelLaunch 0.7s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes ukmParcelLaunch {
  0%   { transform: translate(0,0) scale(1) rotate(0); opacity: 1; }
  40%  { transform: translate(0,-14px) scale(1.05) rotate(-3deg); opacity: 1; }
  100% { transform: translate(180px,-220px) scale(0.4) rotate(24deg); opacity: 0; }
}

/* ─── 3. Paper plane email ─── */
.ukm-plane-svg { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); }
.ukm-plane { will-change: transform, opacity; }
.ukm-plane-trail {
  stroke-dashoffset: 0;
  animation: ukmTrailFade 1.6s ease forwards;
}
@keyframes ukmTrailFade {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0.4; }
}
/* La bandierina della cassetta si alza alla consegna */
.ukm-mailbox-flag {
  transform-origin: 0 0;
  transform: rotate(90deg);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.ukm-mailbox-flag.ukm-flag-up { transform: rotate(0deg); }

/* ─── Riduzione movimento (accessibilità) ─── */
@media (prefers-reduced-motion: reduce) {
  .ukm-anim-overlay,
  .ukm-fly-sticker,
  .ukm-parcel-launch,
  .ukm-cart-bump { animation: none !important; }
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITÀ
═══════════════════════════════════════════════════ */

/* Nasconde visivamente ma resta leggibile dagli screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "salta al contenuto" — visibile solo quando riceve focus da tastiera */
.skip-to-content {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 10000;
  background: var(--white);
  color: var(--black);
  padding: 12px 20px;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 12px;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Focus visibile e coerente su tutti gli elementi interattivi da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   HOME — Story teaser (rimanda a Chi Siamo)
═══════════════════════════════════════════ */
.home-story {
  position: relative;
  padding: clamp(80px, 14vh, 160px) clamp(24px, 8vw, 140px);
  overflow: hidden;
  border-top: 1px solid rgba(232,227,216,0.07);
  background:
    radial-gradient(ellipse at 80% 30%, rgba(232,227,216,0.04), transparent 55%),
    var(--black2);
}
.home-story-ghost {
  position: absolute;
  top: 50%;
  left: -3vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(160px, 32vw, 460px);
  line-height: 0.8;
  color: var(--white);
  opacity: 0.03;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.home-story-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-left: auto; /* testo allineato a destra per bilanciare il ghost a sinistra */
  text-align: right;
}
.home-story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--grey2);
  margin-bottom: 22px;
}
.home-story-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--grey2);
}
.home-story-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 0.98;
  letter-spacing: 1px;
  color: var(--white);
  margin: 0 0 22px;
}
.home-story-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.75;
  color: var(--offwhite);
  margin: 0 0 32px;
  margin-left: auto;
  max-width: 520px;
}
.home-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--white);
  transition: gap 0.3s ease, opacity 0.3s ease;
}
.home-story-cta:hover { gap: 20px; opacity: 0.85; }

@media (max-width: 700px) {
  .home-story-inner { text-align: left; margin-left: 0; }
  .home-story-eyebrow::after { display: none; }
  .home-story-text { margin-left: 0; }
}