:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-card-bg: #f5f5f5;
  --color-product-bg: #eeeeee;
  --color-ink: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-border: #e2e2e2;
  --color-accent: #1a1a1a;
  --color-accent-dark: #000000;
  --color-success: #3d7a4f;
  --color-danger: #b3432b;
  --radius: 8px;
  --radius-lg: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.5;
}

a { color: var(--color-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 40px;
}

.announce-bar {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: 10px 16px;
}
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px;
  gap: 20px;
}
.header-social { display: flex; align-items: center; gap: 16px; flex: 1; }
.header-social-icons { display: flex; align-items: center; gap: 16px; }
.header-social a { color: var(--color-ink); display: inline-flex; }
.header-social a:hover { opacity: .65; }

.lang-switcher { position: relative; }
.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--color-ink);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  padding: 2px 0;
}
.lang-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px;
  z-index: 1100;
  white-space: nowrap;
}
.lang-switcher-menu.open { display: flex; align-items: center; }
.lang-switcher-menu a {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-muted);
}
.lang-switcher-menu a:hover { background: var(--color-product-bg, #f4f4f2); text-decoration: none; }
.lang-switcher-menu a.active { font-weight: 700; color: var(--color-ink); background: var(--color-card-bg); }

/* Opener cambio lingua: overlay nero semi-trasparente (lo sfondo del sito resta
   intravisto) con il logo che "carica". Attivato aggiungendo .locale-loading a <html>. */
html.locale-loading { cursor: wait; }
.locale-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
html.locale-loading .locale-overlay { opacity: 1; visibility: visible; }
.locale-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.locale-overlay-logo {
  width: 220px;
  max-width: 60vw;
  height: auto;
  display: block;
  animation: locale-logo-pulse 1.5s ease-in-out infinite;
}
.locale-overlay-loader {
  position: relative;
  width: 130px;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.locale-overlay-loader span {
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background: rgba(255, 255, 255, 0.9);
  animation: locale-loader-slide 1.1s ease-in-out infinite;
}
@keyframes locale-logo-pulse {
  0%, 100% { opacity: .5; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes locale-loader-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .locale-overlay-logo, .locale-overlay-loader span { animation: none; }
}
.logo { display: block; flex-shrink: 0; }
.logo img { height: 41px; width: auto; display: block; }
.footer-logo { height: 36px; width: auto; margin-bottom: 14px; }

.header-icons { display: flex; gap: 20px; align-items: center; flex: 1; justify-content: flex-end; }
.header-icons a, .header-icon-static { color: var(--color-ink); display: inline-flex; align-items: center; }
.header-icons a:hover { opacity: .65; }
.header-icon-static { cursor: default; }
.cart-link, .wishlist-link { position: relative; }
.cart-badge {
  position: absolute;
  top: -7px; right: -9px;
  background: #000;
  color: #fff;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Menu orizzontale da desktop. #mainNav e' lo stesso elemento riusato come pannello
   dell'hamburger da mobile (position:fixed, vedi sotto): non va mai nascosto con
   display:none su un antenato, altrimenti sparisce anche il pannello. */
.main-nav-row { border-top: 1px solid var(--color-border); }
.main-nav-inner { display: flex; align-items: center; justify-content: center; position: relative; padding: 13px 20px; }
.main-nav { display: block; }
.main-nav-links { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
.main-nav-links a { color: var(--color-ink); font-weight: 500; font-size: .88rem; }
.main-nav-links a.active-link { border-bottom: 2px solid var(--color-ink); padding-bottom: 4px; }
.main-nav-head { display: none; }
.main-nav-footer { display: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,16,10,.45);
  z-index: 1000;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-overlay.open { display: block; opacity: 1; }

@media (max-width: 800px) {
  /* Il contenuto stava a 40px dal bordo mentre l'header a 14-16px: su schermi
     stretti si perdevano ~50px di larghezza utile e le colonne non erano in
     linea con logo e icone. Tutto allineato a 16px. */
  .container { padding-left: 16px; padding-right: 16px; }

  .logo img { height: 45px; }
  .header-social-icons { display: none; }
  .header-social { flex: none; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); gap: 10px; }
  .header-top { justify-content: center; position: relative; padding: 14px 16px; }
  .header-icons { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); flex: none; gap: 14px; }
  .nav-toggle { display: inline-flex; }
  .main-nav-row { border-top: none; }
  .main-nav-inner { padding: 0; }
  .main-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    /* 100vh su Safari iOS misura la finestra SENZA sottrarre la barra degli
       strumenti: il fondo del pannello (contatti e social) finiva nascosto
       sotto di essa e non era raggiungibile nemmeno scorrendo. dvh segue
       l'area realmente visibile; vh resta come ripiego per browser vecchi. */
    height: 100vh;
    height: 100dvh;
    width: 82%;
    max-width: 320px;
    background: #fff;
    border-bottom: none;
    box-shadow: none;
    z-index: 1001;
    overflow-y: auto;
    padding: 0;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  /* L'ombra vale solo a pannello aperto: a pannello chiuso (fuori schermo a sinistra)
     sbavava sul bordo della pagina come una striscia grigia. */
  .main-nav.open { transform: translateX(0); box-shadow: 24px 0 60px -20px rgba(0,0,0,.25); }
  .main-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .main-nav-logo img { height: 40px; width: auto; display: block; }
  .main-nav-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-ink); cursor: pointer; padding: 0 4px; }
  .main-nav-links { display: block; padding-top: 4px; }
  .main-nav-links a {
    display: block;
    padding: 15px 22px;
    width: 100%;
    font-size: .95rem;
    border-bottom: 1px solid rgba(20,16,10,.06);
  }
  /* padding-bottom va riportato a 15px: la regola desktop .active-link usa
     padding-bottom:4px per staccare l'underline del menu orizzontale, e senza
     azzerarlo qui la voce attiva nel pannello risulta schiacciata rispetto
     alle altre (sembra tagliata a meta'). */
  .main-nav-links a.active-link {
    border-bottom: 1px solid rgba(20,16,10,.06);
    background: var(--color-card-bg);
    font-weight: 700;
    padding-bottom: 15px;
  }
  .main-nav-footer {
    display: block;
    margin-top: auto;
    padding: 20px 22px 26px;
    border-top: 1px solid var(--color-border);
    background: var(--color-card-bg);
  }
  .main-nav-contact { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .main-nav-contact a { color: var(--color-ink); font-size: .85rem; font-weight: 500; }
  .main-nav-social { display: flex; gap: 16px; }
  .main-nav-social a { color: var(--color-ink); display: inline-flex; }
  .main-nav-social a:hover { opacity: .7; }
  body.nav-open { overflow: hidden; }
}

main.container { min-height: 60vh; padding-top: 32px; padding-bottom: 60px; }
/* Le pagine che finiscono con la fascia newsletter (shop e scheda prodotto) si
   chiudono gia' da sole con una banda scura a tutta larghezza: i 60px di
   padding di main piu' i 60px di margine del footer le lasciavano sotto una
   striscia bianca di 120px che sembrava un errore. Dove c'e' la fascia, la
   banda tocca il footer, che ha comunque i suoi 48px di respiro interno.
   Sulle altre pagine, che finiscono con del testo, la spaziatura resta. */
main.container:has(> .newsletter-banner) { padding-bottom: 0; }
main.container:has(> .newsletter-banner) + .site-footer { margin-top: 0; }

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 48px 0 0;
  color: var(--color-muted);
  font-size: .88rem;
  margin-top: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 32px;
}
.footer-brand p { line-height: 1.6; }
.footer-grid h4 { color: var(--color-ink); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.footer-grid p { margin: 0 0 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--color-muted); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 22px 0;
  font-size: .8rem;
  background: #f7f7f7;
}
.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.footer-legal a { color: var(--color-muted); }
.footer-legal a:hover { color: var(--color-ink); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  main.container { padding-bottom: 36px; }
  .site-footer { padding-top: 40px; font-size: .92rem; margin-top: 36px; }
  .footer-logo { height: 55px; margin-bottom: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 8px; }
  .footer-grid > div {
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border);
  }
  .footer-grid > div:last-child { border-bottom: none; }
  .footer-grid h4 { font-size: .84rem; margin-bottom: 12px; }
  .footer-grid p { margin: 0 0 14px; }
  .footer-links li { margin-bottom: 10px; }
}

/* Newsletter (Brevo) */
.newsletter-form { margin: 0 0 16px; }
.newsletter-form-row { display: flex; gap: 8px; }
.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: .85rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-ink);
}
.newsletter-submit { padding: 14px 18px; border-radius: var(--radius); font-size: .78rem; flex-shrink: 0; }
.newsletter-submit.is-loading { opacity: .6; cursor: wait; }
.newsletter-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .76rem; color: var(--color-muted); line-height: 1.4; cursor: pointer; }
.newsletter-consent input { width: auto; margin-top: 2px; accent-color: var(--color-ink); }
.newsletter-consent a { color: var(--color-muted); text-decoration: underline; }
.newsletter-message { font-size: .78rem; margin: 8px 0 0; min-height: 1em; }
.newsletter-message.success { color: var(--color-success); }
.newsletter-message.error { color: var(--color-danger); }

h1 { font-size: 1.9rem; margin: 0 0 24px; }
h2 { font-size: 1.4rem; }

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: none;
  background: var(--color-ink, #1a1a1a);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.btn:hover { background: #000; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--color-accent-dark); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-surface); }
.btn-danger { background: var(--color-danger); }
.btn-small { padding: 6px 14px; font-size: .85rem; }
.filters-apply-btn { border-radius: var(--radius-lg); padding: 12px 20px; font-size: .8rem; }
.btn-block { display: block; width: 100%; text-align: center; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; }
.alert-error { background: #fbeae6; color: var(--color-danger); border: 1px solid #f0c8bd; }
.alert-success { background: #e9f4ec; color: var(--color-success); border: 1px solid #c6e3cd; }

/* Category navigation (in cima allo shop) */
.category-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  margin: 4px 0 40px;
}
@media (max-width: 640px) {
  /* Due colonne: con tre, nomi lunghi come "Centrotavola" e "Complementi
     d'Arredo" non ci stavano e venivano troncati. */
  .category-nav { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 28px; }
  .category-tile-name { font-size: .78rem; }
  .category-tile-overlay { padding: 10px; }
}
.category-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-ink);
}
.category-tile:hover { text-decoration: none; }
.category-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-card-bg);
  /* niente bordo trasparente: lasciava vedere lo sfondo grigio come cornice attorno alla foto */
  transition: transform .2s ease, box-shadow .2s ease;
}
.category-tile:hover .category-tile-img { transform: translateY(-5px); }
.category-tile.active .category-tile-img { box-shadow: 0 0 0 2px var(--color-ink); }
/* Il quadrato 1:1 e' pensato per colonne larghe: strette a due per riga su
   mobile, la stessa proporzione le fa alte quasi quanto lo schermo e' largo.
   Un rettangolo orizzontale sta alla larghezza della tile senza dominare la
   pagina. Deve stare DOPO la regola base qui sopra: stessa specificita', a
   parita' vince chi e' scritto dopo nel file, non chi ha la media query. */
@media (max-width: 640px) {
  .category-tile-img { aspect-ratio: 4 / 3; }
}
.category-tile-img { position: relative; }
.category-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.category-tile:hover .category-tile-img img { transform: scale(1.08); }
.category-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}
.category-tile-name {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.category-tile-arrow {
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .category-tile:hover .category-tile-arrow { opacity: 1; transform: translateX(0); }
}
@media (hover: none) { .category-tile-arrow { opacity: 1; } }

/* Shop toolbar (filtri a pillola con popover, desktop) */
.shop-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 4px 0 32px; }
.filter-pill-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px;
}
.filter-pill-sep { width: 1px; height: 22px; background: var(--color-border); flex-shrink: 0; }
.filter-pill { position: relative; }
.filter-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 11px 18px;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.filter-pill-btn:hover { background: var(--color-product-bg, #f4f4f2); }
.filter-pill-btn.active { background: var(--color-ink); color: #fff; }
.pill-icon { flex-shrink: 0; opacity: .8; }
.filter-pill-btn.active .pill-icon { opacity: 1; }
.pill-chevron { flex-shrink: 0; opacity: .5; transition: transform .2s ease; }
.filter-pill.open .pill-chevron { transform: rotate(180deg); }
.filter-pill-clear {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-pill-clear:hover { color: var(--color-ink); text-decoration: none; }
.shop-results-count { margin-left: auto; font-size: .82rem; color: var(--color-muted); font-weight: 500; }
.shop-results-count strong { color: var(--color-ink); }

.filter-popover {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.filter-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}
.filter-popover.open { opacity: 1; visibility: visible; transform: translateY(0); }
.filter-popover .filter-checklist { margin-top: 0; max-height: 320px; overflow-y: auto; }

/* Drawer filtri (solo mobile, vedi media query) */
.filters-drawer { display: none; }
.filters-panel-head { display: flex; align-items: center; justify-content: space-between; }
.filters-close { display: none; background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 0 4px; }
.filters-label { font-size: .95rem; font-weight: 700; color: var(--color-ink); margin: 0; letter-spacing: .01em; }
.filter-rule { border: none; border-top: 1px solid var(--color-border); margin: 12px 0; }
.filters-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filters-clear:hover { text-decoration: none; color: var(--color-ink); }

.filter-accordion summary {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-ink);
  transition: color .15s ease;
  padding: 4px 0;
}
.filter-accordion summary:hover { color: var(--color-muted); }
.filter-accordion summary::-webkit-details-marker { display: none; }
.filter-accordion summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(-135deg);
  transition: transform .2s ease;
}
.filter-accordion[open] summary::after { transform: rotate(45deg); }

.filter-checklist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 1px; }
.filter-checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: var(--color-ink);
  cursor: pointer;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--radius);
  transition: background .15s ease;
}
.filter-checklist input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease;
}
.filter-checklist input[type=radio]:hover { border-color: var(--color-ink); }
.filter-checklist input[type=radio]:checked { border-color: var(--color-ink); border-width: 5px; }
.filter-checklist label:hover { background: var(--color-product-bg, #f4f4f2); }
.filter-checklist input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.filter-checklist input[type=checkbox]:hover { border-color: var(--color-ink); }
.filter-checklist input[type=checkbox]:checked { background: var(--color-ink); border-color: var(--color-ink); }
.filter-checklist input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent;
  flex-shrink: 0;
  transition: box-shadow .15s ease;
}
.filter-checklist label:hover .filter-color-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-border); }
.filter-checklist input[type=checkbox]:checked ~ .filter-color-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-ink); }

.price-values { font-size: .9rem; font-weight: 600; color: var(--color-ink); margin: 18px 0 14px; }
.dual-range { position: relative; height: 28px; }
.dual-range input[type=range] {
  position: absolute;
  width: 100%;
  margin: 0;
  top: 10px;
  height: 4px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dual-range input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--color-border); border-radius: 2px; }
.dual-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--color-ink);
  cursor: pointer;
  margin-top: -5.5px;
}
.dual-range input[type=range]::-moz-range-track { height: 4px; background: var(--color-border); border-radius: 2px; }
.dual-range input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 15px; height: 15px;
  border: none;
  border-radius: 50%;
  background: var(--color-ink);
  cursor: pointer;
}

.filters-mobile-row { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
/* Stesso conteggio della toolbar desktop (.shop-results-count), qui in forma
   di badge come .wishlist-tab-count: un numero merita un contenitore, non solo
   un colore diverso dal resto della riga. */
.filters-mobile-count {
  flex-shrink: 0;
  background: rgba(0,0,0,.06);
  color: var(--color-ink);
  font-size: .74rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.filters-mobile-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.filters-mobile-toggle svg { opacity: .8; flex-shrink: 0; }
.filters-mobile-toggle:active { background: var(--color-product-bg); box-shadow: none; }
.filters-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1000;
  opacity: 0;
  transition: opacity .25s ease;
}
.filters-overlay.open { display: block; opacity: 1; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 32px; } }
/* Card unica per tutte le larghezze: il riquadro è solo attorno alla foto, le
   informazioni stanno fuori dal bordo. Prima il desktop aveva una scatola con
   bordo, sollevamento e ombra all'hover, e le info colore/misure comparivano
   come pillole sopra la foto: due impaginazioni diverse da mantenere. Ora vale
   ovunque quella pensata per mobile, dove il cuore sta accanto alla categoria e
   colori/misure sono sempre leggibili sotto il prezzo. */
.product-card {
  position: relative; /* aggancio per il badge "Esaurito" sopra la foto */
  background: #fff;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  border-radius: 0;
  padding: 0 0 4px;
}
.card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-product-bg);
}
.card-media-link { display: block; }
/* Molte foto hanno il fondo bianco: "multiply" lo fonde con il grigio della
   scheda, cosi' non resta un riquadro bianco (la "cornice") attorno al pezzo. */
.product-card .card-image, .main-product-image, .gallery-thumb img, .cart-line-img { mix-blend-mode: multiply; }
.product-card .card-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
  padding: 22px;
  box-sizing: border-box;
  background: transparent;
  display: block;
  transition: transform .5s ease;
}
.product-card:hover .card-image { transform: scale(1.045); }
.card-tags {
  position: absolute;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.card-tags-left { left: 12px; align-items: flex-start; }
.card-tags-right { right: 12px; align-items: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .card-tags { opacity: 1; transform: translateY(0); }
}
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-lg);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-ink);
  white-space: nowrap;
}
.card-color-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }

/* Wishlist */
.card-media .wishlist-toggle-form { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.wishlist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 0;
  background: none;
  color: var(--color-ink); cursor: pointer;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.2));
  transition: transform .15s ease;
}
.wishlist-btn:hover { transform: scale(1.1); }
.wishlist-heart { fill: none; transition: fill .15s ease; }
/* In hover la foto passa alla seconda immagine, spesso scura: il cuore scuro con
   ombra bianca ci si perde dentro. Lo si porta a bianco pieno con ombra scura.
   Escluso .is-active, che deve restare rosso per dire "già nei preferiti". */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .card-media .wishlist-btn:not(.is-active) {
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.4));
  }
}
.wishlist-btn.is-active { color: var(--color-danger); }
.wishlist-btn.is-active .wishlist-heart { fill: currentColor; }
.wishlist-btn-label { display: none; }

/* Cuore accanto al pulsante "Aggiungi al carrello" (pagina prodotto): solo l'icona,
   nessun riquadro; cambia colore a seconda che il prodotto sia in lista o meno. */
.wishlist-heart-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.wishlist-heart-btn:hover { color: var(--color-ink); transform: scale(1.12); }
.wishlist-heart-btn.is-active { color: var(--color-danger); }
.wishlist-heart-btn.is-active .wishlist-heart { fill: currentColor; }

/* Pagina wishlist */
.wishlist-head { margin-bottom: 24px; }
.wishlist-head h1 { margin: 0 0 6px; }
.wishlist-guest { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: #f5f5f5; border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 24px; }
.wishlist-guest-title { margin: 0 0 4px; font-weight: 600; }
.wishlist-guest-note { color: var(--color-muted); font-size: .9rem; margin: 0; max-width: 60ch; }
.wishlist-guest-actions { display: flex; gap: 10px; flex-shrink: 0; }
.wishlist-empty { text-align: center; padding: 72px 20px 56px; color: var(--color-muted); }
.wishlist-empty svg { color: var(--color-ink); margin-bottom: 18px; }
.wishlist-empty h2 { margin: 0 0 10px; color: var(--color-ink); font-size: 1.5rem; }
.wishlist-empty p { margin: 0 auto 26px; font-size: 1rem; max-width: 42ch; line-height: 1.6; }
.wishlist-start { margin-top: 16px; }
.wishlist-start h2 { font-size: 1.15rem; margin: 0 0 16px; }
@media (max-width: 640px) {
  .wishlist-guest { flex-direction: column; align-items: stretch; padding: 20px; }
  .wishlist-guest-actions .btn { flex: 1; text-align: center; }
}

/* Selettore delle liste (tab) e creazione nuova lista */
.wishlist-lists {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.wishlist-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.wishlist-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--color-border);
  font-size: .85rem; font-weight: 600; color: var(--color-ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wishlist-tab:hover { border-color: var(--color-ink); text-decoration: none; }
.wishlist-tab.active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.wishlist-tab-count {
  font-size: .74rem; font-weight: 700; opacity: .7;
  background: rgba(0,0,0,.07); padding: 1px 7px; border-radius: 999px;
}
.wishlist-tab.active .wishlist-tab-count { background: rgba(255,255,255,.22); opacity: 1; }
.wishlist-new-list { display: flex; gap: 8px; align-items: center; margin: 0; }
.wishlist-new-list input { width: 190px; padding: 7px 10px; font-size: .85rem; }

/* Azioni sulla lista corrente (rinomina / condividi / elimina) */
.wishlist-manage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.wishlist-manage input[type=text] { width: 220px; padding: 7px 10px; font-size: .85rem; }
.wishlist-share-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--color-product-bg); border: 1px solid var(--color-border);
  padding: 12px 16px; margin-bottom: 20px; font-size: .85rem;
}
.wishlist-share-label { color: var(--color-muted); }
.wishlist-share-url { flex: 1; min-width: 240px; padding: 7px 10px; font-size: .82rem; background: #fff; }

/* Riepilogo e azioni di massa */
.wishlist-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 24px; padding: 14px 18px;
  background: var(--color-product-bg); border: 1px solid var(--color-border);
}
.wishlist-summary { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; font-size: .9rem; }
.wishlist-total { color: var(--color-muted); }
.wishlist-bulk { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cuore di rimozione: è un button diretto nella card (non più dentro un form) */
.card-media .wishlist-remove-btn { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* Azioni per prodotto nella card */
.wishlist-card-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px 0; }
.wishlist-size-select, .wishlist-move select {
  width: 100%; padding: 8px 10px; font-size: .82rem;
  border: 1px solid var(--color-border); background: #fff;
}
.wishlist-add-btn { width: 100%; }
.wishlist-note {
  width: 100%; padding: 8px 10px; font-size: .82rem; resize: vertical;
  border: 1px solid var(--color-border); font-family: inherit;
}
.wishlist-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: .78rem; color: var(--color-muted); text-decoration: underline;
  align-self: flex-start; font-family: inherit;
}
.wishlist-link-btn:hover { color: var(--color-ink); }
.wishlist-move { display: flex; align-items: center; gap: 8px; }
.wishlist-move select { flex: 1; }
.wishlist-shared-note {
  margin: 10px 8px 0; padding: 10px 12px; font-size: .82rem; line-height: 1.5;
  color: var(--color-muted); background: var(--color-product-bg);
}
@media (max-width: 700px) {
  .wishlist-lists, .wishlist-toolbar { flex-direction: column; align-items: stretch; }
  .wishlist-new-list input { width: 100%; }
}

.quick-add-form { margin: 0; }
.quick-add-btn {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: block;
  width: calc(100% - 28px);
  border: none;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-ink);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  padding: 11px 10px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .quick-add-btn { opacity: 1; transform: translateY(0); }
}
.quick-add-btn:hover { background: var(--color-ink); color: #fff; text-decoration: none; }

.card-link { display: block; }
.card-link:hover { text-decoration: none; }
.product-card .info { padding: 14px 2px 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card-category { font-size: .74rem; font-weight: 600; letter-spacing: .01em; color: var(--color-muted); }
.card-category-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-category-row .card-category { flex: 1; min-width: 0; }
/* Cuore in linea accanto alla categoria: sulla foto sarebbe in conflitto con il
   badge "Esaurito", che occupa lo stesso angolo. */
.wishlist-card-inline { display: inline-flex; flex-shrink: 0; }
.wishlist-card-inline .wishlist-btn { width: 24px; height: 24px; filter: none; color: var(--color-ink); }
.wishlist-card-inline .wishlist-heart { width: 19px; height: 19px; }
.product-card h3 {
  font-size: .95rem;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.4;
  min-height: 2.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  color: var(--color-ink);
  transition: opacity .15s ease;
}
.card-link:hover h3 { opacity: .6; }
.product-card .price { font-weight: 700; color: var(--color-ink); font-size: 1rem; }
.product-card .price .price-from { font-weight: 400; color: var(--color-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }

/* Colori disponibili e numero di misure sotto il prezzo. Sostituiscono le
   pillole che comparivano in hover sopra la foto: quelle erano invisibili su
   touch e, su desktop, costringevano a passare il mouse per sapere in quanti
   colori esiste un prodotto. */
.card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--color-muted);
}
.card-meta-swatches { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0 3px 4px; margin-left: -1px; }
.card-meta-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  box-sizing: border-box;
}
.card-meta-dot.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--color-ink); }
.card-meta-sep { color: var(--color-border); }

/* Card mobile (2 colonne, ~140px di larghezza reale): stessa impaginazione del
   desktop, solo rimpicciolita. Il maiuscolo grassetto compresso in una colonna
   stretta leggeva come un volantino, non come un sito di prodotti di lusso:
   nome prodotto con peso leggero su una riga sola, testi e pallini più piccoli. */
@media (max-width: 640px) {
  /* Hover inesistente su touch: il pulsante resterebbe "incollato" dopo un tap. */
  .product-grid .card-tags, .product-grid .quick-add-btn { display: none; }
  .product-grid .product-card .card-image { padding: 6px; }
  .product-grid .product-card .info { padding: 12px 2px 0; gap: 5px; }
  .product-grid .card-category {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
  }
  .product-grid .product-card h3 {
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.35;
    /* due righe: i nomi si distinguono spesso solo dall'ultima parola (Natura / Pacri) */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .product-grid .product-card .price { font-size: .84rem; font-weight: 600; }
  .product-grid .product-card .price .price-from { font-size: .62rem; }

  .product-grid .card-meta { gap: 6px; margin-top: 4px; font-size: .72rem; }
  .product-grid .card-meta-swatches { gap: 4px; }
  .product-grid .card-meta-dot { width: 11px; height: 11px; }

  .product-grid .wishlist-card-inline .wishlist-btn { width: 20px; height: 20px; }
  .product-grid .wishlist-card-inline .wishlist-heart { width: 16px; height: 16px; }

  .product-grid .card-badge-out { top: 10px; right: 10px; font-size: .58rem; padding: 4px 8px; }
}

/* Badge "Esaurito", sempre nell'angolo in alto a destra della foto: il cuore
   della wishlist non sta più lì ma accanto alla categoria, quindi l'angolo è
   libero a ogni larghezza. Sta nel markup dentro .card-price-row per restare
   vicino al prezzo nel flusso del documento (lettori di schermo), ma è ancorato
   a .product-card, che per questo ha position: relative. */
.card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-badge-out {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  flex-shrink: 0;
  background: var(--color-danger);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
  white-space: nowrap;
}

.pagination { display: flex; gap: 8px; margin-top: 32px; justify-content: center; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 6px; }
.pagination .current { background: var(--color-accent); color: #fff; }

/* Product page */
/* Nascosto su richiesta ("nascondiamo anche breadcrumb"). display:none e non
   rimozione dai 7 template che lo usano: un solo togli-riga per riattivarlo. */
.breadcrumb { display: none; font-size: .82rem; color: var(--color-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--color-muted); }
.product-view { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.product-gallery { position: sticky; top: 20px; }
.gallery-main { position: relative; background: var(--color-product-bg); margin-bottom: 12px; }
.main-product-image { width: 100%; border-radius: var(--radius); background: transparent; aspect-ratio: 1/1; object-fit: cover; display: block; }
@media (max-width: 900px) { .product-gallery { position: static; } .product-view { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.product-title-row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 22px; }
.product-view h1 { font-size: 1.7rem; letter-spacing: -.01em; margin: 0; }
.product-price { font-size: 1.5rem; font-weight: 300; color: var(--color-ink); margin: 0; }

.variant-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.variant-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.variant-pill-name { font-size: .84rem; font-weight: 600; color: var(--color-ink); }
.variant-pill-price { font-size: .74rem; color: var(--color-muted); }
.variant-pill:hover { border-color: var(--color-ink); }
.variant-pill.selected { border-color: var(--color-ink); background: var(--color-ink); }
.variant-pill.selected .variant-pill-name,
.variant-pill.selected .variant-pill-price { color: #fff; }
.variant-pill.disabled { opacity: .45; cursor: not-allowed; }
.variant-pill.disabled:hover { border-color: var(--color-border); }
.variant-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.color-selector { margin: 26px 0 6px; }
.color-options { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; min-height: 44px; }
.color-dot {
  width: 30px; height: 30px;
  border-radius: var(--radius);
  display: inline-block;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 0 0 2px #fff, 0 0 0 2px transparent;
  transition: box-shadow .15s ease, transform .15s ease;
  cursor: pointer;
}
.color-dot:hover { transform: scale(1.1); }
.color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--color-ink); cursor: default; }
.color-selected-name { font-size: .8rem; color: var(--color-muted); margin: 10px 0 0; }
.color-selected-name span { font-weight: 700; color: var(--color-ink); }
.size-selected-name { font-size: .8rem; color: var(--color-muted); margin: 10px 0 0; }
.size-selected-name span { font-weight: 700; color: var(--color-ink); }

.purchase-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 22px;
  background: #fff;
}
.purchase-box .color-selector { margin: 0 0 22px; display: flex; flex-direction: column; }
.variant-field { display: flex; flex-direction: column; }

.cart-action-row { display: flex; align-items: stretch; gap: 10px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--color-border); }
/* Senza selettori sopra (nessuna variante/colore): niente separatore né spazio vuoto */
.cart-action-row--bare { margin-top: 0; padding-top: 0; border-top: none; }
.qty-stepper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
}
/* Selettori annidati sotto .qty-stepper: servono a battere in specificità la
   regola generica "input[type=number]" più sotto nel foglio di stile, che
   altrimenti (stessa specificità di .qty-input, ma dichiarata dopo) vince e
   forza il campo a width:100%, gonfiando il selettore a dismisura. Le
   dimensioni restano quelle originali: il bug era solo la larghezza. */
.qty-stepper .qty-step-btn {
  width: 32px;
  border: none;
  background: none;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.qty-stepper .qty-step-btn:hover { background: var(--color-product-bg, #f4f4f2); }
.qty-stepper .qty-input {
  width: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-left: 1.5px solid var(--color-border);
  border-right: 1.5px solid var(--color-border);
  border-radius: 0;
  margin-right: 0;
  text-align: center;
  font-weight: 600;
  font-size: .88rem;
  -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button, .qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-action-row .btn {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-add-to-cart {
  background: var(--color-ink);
  font-size: .78rem;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Su schermi stretti quantita', pulsante e cuore restano sulla stessa riga:
   mandare il pulsante a capo a tutta larghezza spezzava il blocco in due e
   lasciava il cuore orfano a destra. Il pulsante e' l'unico elemento elastico,
   gli altri due mantengono la loro dimensione. */
@media (max-width: 480px) {
  .cart-action-row { flex-wrap: nowrap; gap: 8px; }
  .cart-action-row .qty-stepper { flex: 0 0 auto; }
  .cart-action-row .btn-add-to-cart {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .72rem;
    letter-spacing: .01em;
  }
  /* Senza icona l'etichetta entra intera anche in tedesco e francese. */
  .cart-action-row .btn-add-to-cart::before { display: none; }
  .cart-action-row .wishlist-heart-btn { flex: 0 0 auto; width: 38px; }
  .purchase-box { padding: 20px 16px; }
}
/* Sotto i 380px l'etichetta piu' lunga ("Aggiungi al carrello") non entra
   accanto a quantita' e cuore: si toglie l'icona per recuperare lo spazio. */
@media (max-width: 380px) {
  .cart-action-row .btn-add-to-cart { font-size: .66rem; padding-left: 6px; padding-right: 6px; }
  .cart-action-row .btn-add-to-cart::before { display: none; }
  .cart-action-row .wishlist-heart-btn { width: 32px; }
  /* Il selettore quantita' da solo occupa ~100px: su schermi molto stretti
     lascia troppo poco al pulsante e l'etichetta viene tagliata. */
  .cart-action-row .qty-stepper .qty-step-btn { width: 26px; }
  .cart-action-row .qty-stepper .qty-input { width: 26px; }
  /* Sotto i 340px nemmeno cosi' ci sta: si lascia andare a capo il testo
     dentro al pulsante, che diventa alto due righe. I tre elementi restano
     comunque affiancati sulla stessa riga. */
  .cart-action-row .btn-add-to-cart { white-space: normal; line-height: 1.2; }
}
.btn-add-to-cart:hover { background: #000; }
/* Esaurito: grigio spento, niente hover, niente icona carrello e cursore che
   dice chiaramente "non ci si clicca". Il disabled è sul markup, questo è solo
   il segnale visivo corrispondente. */
.btn-add-to-cart.is-sold-out,
.btn-add-to-cart.is-sold-out:hover {
  background: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}
.btn-add-to-cart.is-sold-out::before { display: none; }
.btn-add-to-cart::before {
  content: "";
  width: 17px; height: 17px;
  flex-shrink: 0;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}
.stock-note { font-size: .9rem; color: var(--color-muted); margin-bottom: 16px; }
.product-description { white-space: pre-line; margin: 14px 0; color: var(--color-muted); font-size: .92rem; line-height: 1.6; }

.trust-banners { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.info-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-ink);
}
.info-banner::before {
  content: "";
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-success);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpath d='M16 8h4l3 3v5h-7V8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.payment-banner { align-items: center; font-weight: 400; flex-wrap: wrap; row-gap: 12px; }
.payment-banner::before {
  background-color: var(--color-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.payment-banner-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; flex: 1; min-width: 0; }
.payment-banner-text { color: var(--color-ink); }
.payment-banner-text strong { font-weight: 700; }
.payment-banner-logos { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.payment-logo { height: 30px; width: auto; display: block; }
.handmade-note { font-size: .82rem; color: var(--color-muted); line-height: 1.6; margin: 22px 0 0; }

.sku-note { font-size: .76rem; color: var(--color-muted); margin-top: 18px; letter-spacing: .03em; }

/* Tab full-width sotto la scheda prodotto */
.product-tabs { margin-top: 56px; }
.product-tabs-nav { display: flex; width: 100%; border-bottom: 1px solid var(--color-border); }
.product-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 16px 12px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
  margin-bottom: -1px;
}
.product-tab-btn:hover { color: var(--color-ink); }
.product-tab-btn.active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.product-tab-panel { display: none; width: 100%; padding: 28px 4px 8px; font-size: .92rem; color: var(--color-muted); line-height: 1.75; }
.product-tab-panel.active { display: block; }
.product-tab-panel .product-description { color: var(--color-muted); white-space: pre-line; margin: 0 0 16px; }
.product-tab-panel .handmade-note { font-size: .82rem; margin: 0; border-top: 1px solid var(--color-border); padding-top: 16px; }
.product-tab-panel a { color: var(--color-ink); text-decoration: underline; }

@media (max-width: 800px) {
  .product-tabs-nav { flex-direction: column; border-bottom: none; gap: 8px; }
  .product-tab-btn {
    flex: none;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  .product-tab-btn.active { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
  .product-tab-btn::after { content: "+"; font-size: 1rem; font-weight: 400; }
  .product-tab-btn.active::after { content: "\2212"; }
  .product-tab-panel { padding: 16px 4px 8px; }
}

.related-products { margin-top: 60px; border-top: 1px solid var(--color-border); padding-top: 32px; }
.related-products .product-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .related-products .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .related-products .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.newsletter-banner {
  position: relative;
  margin-top: 56px;
  /* Simmetrica al margin-top: prima lo spazio sopra c'era e sotto no (il
     padding-bottom di main e il margin-top del footer erano stati azzerati
     per togliere una striscia bianca troppo larga, ma azzerarli ha tolto
     anche lo spazio che doveva restare tra la fascia e il footer). */
  margin-bottom: 56px;
  padding: 72px 24px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(10,10,10,.82), rgba(10,10,10,.62) 55%, rgba(10,10,10,.8)),
    url('/assets/img/categories/vasi.jpg') center 35% / cover no-repeat;
  color: #fff;
  text-align: center;
}
.newsletter-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 44px 36px;
  border: 1px solid rgba(255,255,255,.22);
}
.newsletter-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.newsletter-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.35); flex-shrink: 0; }
.newsletter-banner h2 {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.newsletter-banner p { margin: 0 0 32px; color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; }
@media (max-width: 480px) {
  .newsletter-banner { padding: 48px 16px; }
  .newsletter-banner-inner { padding: 36px 22px; }
  .newsletter-banner h2 { font-size: 1.6rem; }
}
.newsletter-banner .newsletter-form-row {
  max-width: 420px;
  margin: 0 auto 6px;
  gap: 0;
  border-bottom: 1.5px solid rgba(255,255,255,.4);
  transition: border-color .2s ease;
}
.newsletter-banner .newsletter-form-row:focus-within { border-color: #fff; }
.newsletter-banner .newsletter-input {
  background: none;
  border: none;
  border-radius: 0;
  color: #fff;
  padding: 10px 6px;
}
.newsletter-banner .newsletter-input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-banner .newsletter-submit {
  background: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 10px 16px;
  flex-shrink: 0;
}
.newsletter-banner .newsletter-submit:hover { color: rgba(255,255,255,.7); background: none; }
.newsletter-banner .newsletter-consent { color: rgba(255,255,255,.65); margin-top: 14px; }
.newsletter-banner .newsletter-consent a { color: rgba(255,255,255,.85); }
.newsletter-banner .newsletter-message.success { color: #8fe0a6; }
.newsletter-banner .newsletter-message.error { color: #ff9b85; }

/* Cart */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.cart-account-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  margin-top: 40px; padding: 28px 32px;
  background: var(--color-product-bg); border: 1px solid var(--color-border);
}
.cart-account-intro h2 { margin: 0 0 8px; font-size: 1.15rem; }
.cart-account-intro p { margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.5; }
.cart-account-form .form-group { margin-bottom: 12px; }
.cart-account-form .btn { width: 100%; }
.cart-account-login { font-size: .84rem; color: var(--color-muted); margin: 12px 0 0; text-align: center; }
@media (max-width: 700px) { .cart-account-box { grid-template-columns: 1fr; gap: 20px; } }
.cart-lines { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border); }
/* La riga ha quattro elementi in griglia (foto, descrizione, quantita', totale);
   la "x" per togliere l'articolo sta fuori dal flusso, ancorata all'angolo in
   alto a destra, e il padding destro della riga le lascia lo spazio. */
.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  grid-template-areas: "img info qty total";
  align-items: center;
  column-gap: 24px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 20px 48px 20px 0;
}
.cart-line-media { grid-area: img; display: block; }
.cart-line-media { display: block; background: var(--color-product-bg); border-radius: var(--radius-lg); }
.cart-line-img { width: 96px; height: 96px; object-fit: contain; padding: 8px; box-sizing: border-box; display: block; }
.cart-line-info { grid-area: info; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.cart-line-variant { font-size: .82rem; color: var(--color-muted); margin-top: 3px; }
.cart-line-unit { font-size: .8rem; color: var(--color-muted); margin-top: 6px; }
/* justify-self: start perche' come cella di griglia lo stepper verrebbe stirato
   per tutta la colonna invece di restare largo quanto i suoi tre pulsanti. */
.cart-line-qty { grid-area: qty; justify-self: start; margin: 0; height: 38px; }
.qty-stepper .qty-value {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 0 4px;
  border-left: 1.5px solid var(--color-border);
  border-right: 1.5px solid var(--color-border);
  font-weight: 600; font-size: .88rem;
}
.qty-stepper .qty-step-btn[disabled] { opacity: .3; cursor: not-allowed; }
.qty-stepper .qty-step-btn[disabled]:hover { background: none; }
.cart-line-total { grid-area: total; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.cart-line-remove { position: absolute; top: 10px; right: 10px; margin: 0; }
.cart-line-remove button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: none; border-radius: 50%;
  color: var(--color-muted); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.cart-line-remove button:hover { color: var(--color-danger); background: var(--color-product-bg); }
.row { display: flex; justify-content: space-between; margin-bottom: 10px; }
.row.total { font-weight: 700; font-size: 1.15rem; border-top: 1px solid rgba(0,0,0,.1); padding-top: 10px; margin-top: 4px; }
/* Su schermi stretti le quattro colonne non ci stanno affiancate: la foto resta
   a sinistra per tutta l'altezza, la descrizione prende la riga in alto e
   quantita' e totale scendono sotto, agli estremi opposti. */
@media (max-width: 800px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-line {
    grid-template-columns: 84px 1fr auto;
    grid-template-areas:
      "img  info  info"
      "img  qty   total";
    align-items: start;
    column-gap: 14px;
    row-gap: 12px;
    padding: 14px;
  }
  .cart-line-img { width: 84px; height: 84px; }
  .cart-line-info { padding-right: 26px; } /* lascia libera la "x" in alto a destra */
  .cart-line-qty { align-self: center; }
  .cart-line-total { align-self: center; justify-self: end; font-size: .98rem; }
}

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
/* nella griglia lo spazio lo da' il gap: il margine del singolo campo lo raddoppiava */
.form-grid > .form-group { margin-bottom: 0; }
.form-group { margin-bottom: 16px; }
.form-group.full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 1rem; font-family: inherit;
}
textarea { resize: vertical; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }
.admin-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .admin-dashboard-grid { grid-template-columns: 1fr; } }
.auth-card { max-width: 480px; margin: 32px auto; }
/* Accedi / Registrati: modulo a sinistra, vantaggi dell'account a destra. */
.auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; max-width: 1040px; margin: 48px auto 24px; align-items: start; }
.auth-main h1 { margin: 0 0 10px; }
.auth-lead { color: var(--color-muted); line-height: 1.6; margin: 0 0 32px; max-width: 44ch; }
.auth-main .form-link { display: block; margin-top: 18px; font-size: .9rem; color: var(--color-muted); }
.auth-main .form-link a { color: var(--color-ink); text-decoration: underline; }
.auth-benefits { background: #f5f5f5; border-radius: var(--radius-lg); padding: 40px; }
.auth-benefits-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.auth-benefits h2 { margin: 0 0 24px; font-size: 1.4rem; }
.auth-benefits ul { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
.auth-benefits li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.5; }
.auth-benefits li svg { flex-shrink: 0; margin-top: 1px; }
.auth-benefits-note { margin: 16px 0 0; font-size: .85rem; color: var(--color-muted); }
@media (max-width: 800px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
  .auth-benefits { padding: 28px 22px; }
}
.auth-card .form-link { display: block; margin-top: 16px; font-size: .88rem; color: var(--color-muted); }

/* Account */
.account-layout { display: grid; grid-template-columns: 210px 1fr; gap: 40px; }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a { padding: 10px 14px; border-radius: var(--radius-lg); color: var(--color-muted); font-size: .92rem; font-weight: 500; transition: background .15s ease, color .15s ease; }
.account-nav a:hover { background: var(--color-card-bg); color: var(--color-ink); text-decoration: none; }
.account-nav a.active { background: var(--color-ink); color: #fff; font-weight: 600; }
.account-nav form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.account-nav .btn-secondary { width: 100%; border-radius: var(--radius-lg); }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.address-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; background: #fff; display: flex; flex-direction: column; }
.address-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.address-card p { margin: 0 0 14px; font-size: .88rem; line-height: 1.6; color: var(--color-muted); flex: 1; }
.address-card-actions { display: flex; gap: 8px; }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { padding: 10px; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); border-bottom: 1px solid var(--color-border); }
table.data-table td { padding: 14px 10px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: .9rem; }
table.data-table tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 4px 12px; border-radius: var(--radius-lg); font-size: .74rem; font-weight: 600; }
.badge-pending { background: #fdf1d6; color: #8a6416; }
.badge-processing { background: #dde8fb; color: #2b57a3; }
.badge-shipped { background: #e2e0fb; color: #4b3aa3; }
.badge-delivered { background: #e0f3e3; color: var(--color-success); }
.badge-cancelled { background: #fbe1de; color: var(--color-danger); }
.badge-paid { background: #e0f3e3; color: var(--color-success); }
.badge-refunded { background: #f0e0f8; color: #7a2ba3; }
.badge-requested { background: #fdf1d6; color: #8a6416; }
.badge-approved { background: #dde8fb; color: #2b57a3; }
.badge-rejected { background: #fbe1de; color: var(--color-danger); }
.badge-failed { background: #fbe1de; color: var(--color-danger); }

.order-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.order-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.return-form { margin-top: 12px; padding: 14px; background: var(--color-card-bg); border-radius: var(--radius-lg); max-width: 320px; }
.return-form .form-group { margin-bottom: 10px; }
.return-form .form-group:last-of-type { margin-bottom: 12px; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.checkout-step { background: #f5f5f5; border: 0; border-radius: var(--radius-lg); padding: 28px; margin-bottom: 16px; }
.checkout-step input:not([type=checkbox]):not([type=radio]), .checkout-step select { background: #fff; }
.checkout-step-title { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-ink); color: #fff;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.checkout-hint { font-size: .85rem; color: var(--color-muted); margin: 10px 0 0; }
.checkout-field-hint { font-size: .78rem; color: var(--color-muted); margin: 6px 0 0; }
.btn-checkout-submit { width: 100%; padding: 16px; font-size: .9rem; }
.checkout-secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: .8rem; color: var(--color-muted); margin: 12px 0 0; }
.secure-note-icon { flex-shrink: 0; color: var(--color-muted); }
.invoice-toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin: 0; }
.invoice-toggle input { width: 17px; height: 17px; accent-color: var(--color-ink); margin: 0; flex-shrink: 0; }
.invoice-fields { margin-top: 18px; }
.invoice-fields[hidden] { display: none; }
.checkout-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; font-size: .85rem; color: var(--color-muted); line-height: 1.5; cursor: pointer; }
.checkout-consent input { width: 17px; height: 17px; accent-color: var(--color-ink); margin: 2px 0 0; flex-shrink: 0; }
.checkout-consent a { color: var(--color-ink); text-decoration: underline; }

.payment-methods { display: flex; gap: 14px; margin-bottom: 20px; }
.payment-method-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  padding: 20px 14px; flex: 1; cursor: pointer; font-weight: 500;
  transition: border-color .15s ease, background .15s ease;
}
.payment-method-card:hover { border-color: #b8b8b8; }
.payment-method-card.selected { border-color: var(--color-ink); background: #fafafa; }
.payment-method-card input { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; accent-color: var(--color-ink); margin: 0; }
.payment-method-icon { display: flex; align-items: center; justify-content: center; height: 32px; }
.payment-method-icon img { display: block; }
.payment-method-icon-group { gap: 4px; }
.payment-method-label { font-size: .88rem; }

.order-summary { background: var(--color-product-bg); border-radius: var(--radius); padding: 24px; position: sticky; top: 24px; }
.order-summary-title { font-size: 1rem; margin: 0 0 18px; text-transform: uppercase; letter-spacing: .03em; }
.order-summary-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
.order-summary-item { display: flex; align-items: center; gap: 12px; }
.order-summary-item-img { position: relative; flex-shrink: 0; }
.order-summary-item-img img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #fff; display: block; }
.order-summary-qty {
  position: absolute; top: -8px; right: -8px;
  background: var(--color-ink); color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.order-summary-item-info { flex: 1; min-width: 0; }
.order-summary-item-name { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.order-summary-item-variant { font-size: .76rem; color: var(--color-muted); }
.order-summary-item-price { font-size: .84rem; font-weight: 600; white-space: nowrap; }
.order-summary .row { font-size: .88rem; }

.payment-page { background: var(--color-product-bg); min-height: 100vh; }
.payment-page-container { max-width: 480px; padding-top: 60px; padding-bottom: 60px; }
.payment-page-logo { text-align: center; margin-bottom: 32px; }
.payment-page-logo img { height: 34px; margin: 0 auto; }
.payment-page-card { background: var(--color-surface); margin-bottom: 0; }
.payment-total-due {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--color-card-bg); border-radius: 6px;
  padding: 14px 18px; margin-bottom: 20px;
  font-size: .88rem;
}
.payment-total-due strong { font-size: 1.3rem; }

@media (max-width: 800px) {
  .product-view, .account-layout, .form-grid, .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .order-summary { position: static; order: -1; }

  .shop-toolbar { display: none; }
  .filters-mobile-row { display: flex; }
  .filters-mobile-toggle { display: inline-flex; }
  .filters-close { display: block; }
  .filters-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 86%;
    max-width: 340px;
    background: #fff;
    border-radius: 0;
    border: none;
    padding: 20px 18px;
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .filters-drawer.open { transform: translateX(0); }
  body.filters-open { overflow: hidden; }
}

/* ==========================================================================
   Banner cookie: informativo, un solo pulsante ("Ho capito") perché il sito
   usa solo cookie tecnici e per quelli la legge non richiede un vero consenso
   accetta/rifiuta. Fissato in basso, non blocca il resto della pagina.
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--color-ink);
  color: #fff;
  animation: cookie-banner-in .35s ease both;
}
.cookie-banner.is-dismissed {
  animation: cookie-banner-out .3s ease both;
}
@keyframes cookie-banner-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes cookie-banner-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}

.cookie-banner-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cookie-banner-inner p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.cookie-banner-inner a { color: #fff; text-decoration: underline; }
.cookie-banner-inner form { flex-shrink: 0; }
.cookie-banner-inner .btn {
  background: #fff;
  color: var(--color-ink);
}
.cookie-banner-inner .btn:hover { background: #eee; }

@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .cookie-banner-inner p { font-size: .75rem; line-height: 1.4; }
  .cookie-banner-inner form { align-self: flex-end; }
  .cookie-banner-inner .btn { padding: 8px 18px; min-height: 0; }
}

/* ==========================================================================
   Centro legale: privacy, termini, recesso, cookie.
   Riusa deliberatamente i componenti già esistenti delle pagine account
   (.account-layout, .account-nav, .card, table.data-table): sono pagine
   interne di testo come quelle, non vetrina prodotti, quindi devono avere
   lo stesso linguaggio visivo invece di uno nuovo inventato apposta.
   ========================================================================== */

.legal-aside { align-self: start; position: sticky; top: 110px; }
.account-layout > .legal-aside + div { min-width: 0; max-width: 760px; }
.legal-updated { font-size: .92rem; line-height: 1.6; color: var(--color-muted); margin: -6px 0 32px; max-width: 60ch; }


.legal-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 12px;
  font-size: .82rem;
  color: var(--color-muted);
}
.legal-nav-back:hover { color: var(--color-ink); text-decoration: none; }
.legal-nav-back svg { flex-shrink: 0; }

.legal-nav-title {
  padding: 0 14px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.legal-nav { display: flex; flex-direction: column; gap: 2px; }
.legal-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.legal-nav a svg { flex-shrink: 0; opacity: .75; }
.legal-nav a:hover { background: #f5f5f5; color: var(--color-ink); text-decoration: none; }
.legal-nav a.is-active { background: var(--color-ink); color: #fff; font-weight: 600; }
.legal-nav a.is-active svg { opacity: 1; }

.legal-content p { margin: 0 0 14px; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content ul { margin: 0 0 14px; padding-left: 20px; }
.legal-content li { margin-bottom: 6px; }
.legal-content h2 { margin: 30px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content .card + .card { margin-top: 0; }

.legal-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
@media (max-width: 640px) { .legal-links-grid { grid-template-columns: 1fr; } }

.legal-link-card {
  display: block;
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  background: #f5f5f5;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.legal-link-card:hover { background: #ececec; text-decoration: none; }
/* Testi legali a pagina aperta, senza riquadro; il riquadro "aiuto" resta, grigio e senza bordo. */
.card.legal-content { border: 0; padding: 0; background: none; }
.legal-links-grid ~ .card { border: 0; background: #f5f5f5; }
.legal-link-card h2 { font-size: 1.05rem; margin: 0 0 8px; }
.legal-link-card p { margin: 0; color: var(--color-muted); font-size: .88rem; line-height: 1.55; }

.legal-form-sample { background: #f5f5f5; border-radius: var(--radius-lg); padding: 18px 20px; font-size: .9rem; }
.legal-form-sample p { margin: 0 0 10px; }
.legal-form-sample p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .legal-aside { position: static; }
  .legal-nav-title { display: none; }
  .legal-nav-back { padding: 0 0 12px; }
  .legal-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .legal-nav a { padding: 8px 14px; font-size: .85rem; border-radius: var(--radius); }
  .legal-nav a:not(.is-active) { background: #f5f5f5; color: var(--color-ink); }
  .legal-nav a svg { display: none; }
}
/* Codice sconto nel riepilogo carrello e scelta cookie.
   Il pulsante "rifiuta" del banner usa .btn-outline: stesso ingombro di "accetta",
   perche' rifiutare non deve costare piu' fatica che accettare. */
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid #c9c9c9;
}
.btn-outline:hover { background: rgba(0, 0, 0, .04); }

.cart-discount-row span:last-child { color: var(--color-success); }

.cart-coupon-form { margin-top: 14px; }
.cart-coupon-label { display: block; font-size: .85rem; margin-bottom: 6px; color: var(--color-muted); }
.cart-coupon-controls { display: flex; gap: 8px; }
.cart-coupon-controls input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d8d8d8;
  border-radius: var(--radius);
  font-size: .9rem;
  text-transform: uppercase;
}
.cart-coupon-controls .btn { white-space: nowrap; }
.cart-country-form { margin: 14px 0 6px; }
.cart-country-form label { display: block; font-size: .85rem; margin-bottom: 6px; color: var(--color-muted); }
.cart-country-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; font: inherit; }
.cart-coupon-error { margin: 8px 0 0; font-size: .85rem; color: var(--color-danger); }

.btn-link-plain {
  background: none;
  border: none;
  padding: 0;
  font-size: .85rem;
  color: var(--color-muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Spedizioni e resi ---------- */
.story { padding: 48px 0 72px; }
.story-eyebrow { margin: 0 0 14px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.story h1 { margin: 0 0 28px; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.story-text h2 { margin: 36px 0 12px; font-size: 1.1rem; font-weight: 500; }
.story-text p, .story-text ul { max-width: 760px; margin: 0 0 16px; line-height: 1.7; }
.story-text ul { padding-left: 20px; }
.ship-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 56px; margin: 24px 0 8px; max-width: 980px; }
.ship-zone h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 500; }
.ship-zone .ship-where { margin: 0 0 12px; font-size: .8rem; line-height: 1.5; color: var(--color-muted); }
.ship-zone dl { margin: 0; }
.ship-zone dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.ship-zone dt, .ship-zone dd { margin: 0; }
@media (max-width: 860px) { .story { padding: 28px 0 48px; } }

.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-thumb { padding: 0; border: 0; background: var(--color-product-bg); cursor: pointer; aspect-ratio: 1/1; opacity: .55; transition: opacity .2s; }
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 901px) {
  /* Miniature sotto la foto principale (scelta del cliente), non di lato. */
  .product-gallery { display: block; }
  .product-gallery .gallery-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Area account su telefono: menu a pillole in una riga invece di una colonna
   che occupava mezzo schermo; ordini come schede invece di tabella tagliata. */
@media (max-width: 800px) {
  .account-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .account-nav a { padding: 8px 14px; font-size: .85rem; border-radius: 999px; }
  .account-nav a:not(.active) { background: var(--color-card-bg); color: var(--color-ink); }
  .account-nav form { margin: 0 0 0 auto; padding: 0; border: 0; }
  .account-nav .btn-secondary { width: auto; padding: 8px 14px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; }
  .account-layout h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
}

/* Tessere categoria: "Complementi d'Arredo" e la freccia non entravano.
   Decide la larghezza della tessera, non dello schermo: a 320 e a 768-820
   le tessere scendono sotto i 150px in entrambi i casi. */
.category-tile-img { container-type: inline-size; }
@container (max-width: 150px) {
  .category-tile-overlay { padding: 12px 10px; }
  .category-tile-name { font-size: .68rem; letter-spacing: 0; }
  .category-tile-arrow { display: none; }
}
@media (max-width: 480px) {
  .legal-content table.data-table th, .legal-content table.data-table td { padding: 10px 6px; overflow-wrap: anywhere; font-size: .82rem; }
}

/* Ordini a schede finche' la tabella non ci sta accanto al menu account. */
@media (max-width: 1100px) {
  .data-table--orders thead { display: none; }
  .data-table--orders tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
  .data-table--orders tr:first-child { padding-top: 0; }
  .data-table--orders tr:last-child { border-bottom: none; padding-bottom: 0; }
  .data-table--orders td { padding: 0; border: none; }
  .data-table--orders .o-num { font-weight: 600; overflow-wrap: anywhere; }
  .data-table--orders .o-total { text-align: right; font-weight: 600; }
  .data-table--orders .o-date { color: var(--color-muted); font-size: .85rem; }
  .data-table--orders .o-link { text-align: right; font-size: .85rem; }
  .data-table--orders .o-num { grid-area: 1 / 1; }
  .data-table--orders .o-total { grid-area: 1 / 2; }
  .data-table--orders .o-date { grid-area: 2 / 1; }
  .data-table--orders .o-link { grid-area: 2 / 2; }
  .data-table--orders .o-status { grid-area: 3 / 1; }
  .data-table--orders .o-pay { grid-area: 3 / 2; text-align: right; }
}

/* Paga in 3 rate (Klarna / PayPal): pagina prodotto, carrello, checkout. */
.installments { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
.installments[hidden] { display: none; }
.installments-text { margin: 0; font-size: .88rem; color: var(--color-muted); line-height: 1.45; }
.installments-text strong { color: var(--color-ink); font-weight: 600; }
.installments-logos { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.installments-logos img { display: block; }
.order-summary .installments { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }

.footer-payments { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-payments span { margin-right: 6px; }
.footer-payments img { display: block; }

/* Shop: filtri in colonna a sinistra da 801px in su; sotto resta il pannello a scomparsa. */
.shop-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 18px; }
.shop-results-count { margin: 0; font-size: .85rem; color: var(--color-muted); }
.sort-select { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: .85rem; color: var(--color-muted); margin-left: auto; }
.sort-select select { appearance: none; -webkit-appearance: none; border: 0; background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; border-radius: var(--radius); padding: 10px 38px 10px 16px; font: inherit; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.color-swatch { cursor: pointer; display: block; }
.color-swatch span { display: block; width: 28px; height: 28px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: box-shadow .15s; }
.color-swatch:hover span { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px #fff, 0 0 0 3px var(--color-border); }
.color-swatch input:checked + span { box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px #fff, 0 0 0 3.5px var(--color-ink); }
.color-swatch input:focus-visible + span { outline: 2px solid var(--color-ink); outline-offset: 3px; }
@media (min-width: 801px) {
  .shop-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
  .shop-layout .filters-drawer { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 4px; }
  .shop-layout .filters-drawer .filters-close { display: none; }
  .shop-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) { .shop-main .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px) { .shop-main .shop-results-count { display: none; } .sort-select > span { display: none; } }

/* Carrello: soglia spedizione gratuita, rassicurazioni, torna allo shop. */
.free-ship { margin: 28px 0 0; }
.free-ship p { margin: 0 0 10px; font-size: .92rem; }
.free-ship-bar { height: 4px; background: #ececec; border-radius: 4px; overflow: hidden; }
.free-ship-bar span { display: block; height: 100%; background: var(--color-ink); border-radius: 4px; }
.cart-reassure { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.cart-reassure li { display: flex; gap: 12px; align-items: center; font-size: .9rem; color: var(--color-muted); }
.cart-reassure svg { color: var(--color-ink); flex-shrink: 0; }
.cart-continue { display: inline-block; margin-top: 28px; font-size: .9rem; font-weight: 600; }
.order-summary { background: #f5f5f5; }

.footer-payments img[alt="Carta"] { border: 0; }

/* Pagina prodotto: riquadro d'acquisto aperto, senza cornice. */
.purchase-box { border: 0; padding: 0; margin: 28px 0 0; background: none; }
.purchase-box .color-selector { margin: 0 0 26px; }
.variant-label { display: block; margin: 0 0 12px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.variant-label-value { margin-left: 6px; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 600; color: var(--color-ink); }
.color-options { gap: 14px; min-height: 0; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: box-shadow .15s ease; }
.color-dot:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px #fff, 0 0 0 4px var(--color-border); }
.color-dot.active { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px #fff, 0 0 0 4.5px var(--color-ink); }
.variant-pills { gap: 8px; }
.variant-pill { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); padding: 12px 18px; min-width: 0; transition: background .15s ease; }
.variant-pill:hover { background: #ececec; }
.variant-pill.selected { background: var(--color-ink); }
.variant-pill.disabled:hover { background: #f5f5f5; }
.variant-pill-name { font-size: .88rem; }
.variant-pill-price { font-size: .78rem; }
.cart-action-row { margin: 28px 0 0; padding-top: 0; border-top: 0; gap: 10px; align-items: stretch; }
.qty-stepper { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); overflow: hidden; }
.qty-stepper .qty-step-btn { background: transparent; border: 0; }
.qty-stepper .qty-step-btn:hover { background: #ececec; }
.qty-stepper .qty-input { background: transparent; border: 0; }
.cart-action-row .btn-add-to-cart { border-radius: var(--radius-lg); min-height: 54px; }
.cart-action-row .wishlist-heart-btn { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); min-width: 54px; }
.cart-action-row .wishlist-heart-btn:hover { background: #ececec; }
.trust-banners { gap: 8px; margin: 28px 0; }
.info-banner { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); padding: 16px 18px; font-weight: 500; }
.info-banner::before { width: 36px; height: 36px; background-color: var(--color-ink); background-size: 17px 17px; }

/* Prezzo e rate sulla stessa riga: prezzo a sinistra, rate a destra. */
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 6px 0 4px; }
.price-row .product-price { margin: 0; }
.price-row .installments { margin: 0; gap: 10px; flex-wrap: nowrap; background: #f5f5f5; border-radius: var(--radius); padding: 7px 8px 7px 16px; }
.price-row .installments-text { font-size: .82rem; white-space: nowrap; }
.price-row .installments-logos { gap: 6px; }
.price-row .installments-logos img[alt="PayPal"] { height: 15px; width: auto; }
.price-row .installments-logos img[alt="Klarna"] { height: 20px; width: auto; }
@media (max-width: 480px) { .price-row .installments-text { white-space: normal; } }

/* Pagina non trovata e "password dimenticata": stesso stile aperto della pagina di accesso. */
.not-found { text-align: center; padding: 72px 20px 48px; }
.not-found-code { margin: 0 0 8px; font-size: .8rem; letter-spacing: .14em; color: var(--color-muted); }
.not-found h1 { margin: 0 0 12px; }
.not-found-text { margin: 0 auto 28px; max-width: 46ch; color: var(--color-muted); line-height: 1.6; }
.auth-card.card { border: 0; background: none; padding: 0; max-width: 460px; margin: 56px auto 24px; }

/* Area cliente: riquadri senza bordo, scorciatoie in panoramica. */
.account-layout .card { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); }
.account-layout .card .data-table { background: transparent; }
.account-lead { color: var(--color-muted); margin: -6px 0 28px; max-width: 60ch; line-height: 1.6; }
.account-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.account-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-lg); background: #f5f5f5; color: var(--color-ink); transition: background .15s ease; }
.account-tile:hover { background: #ececec; text-decoration: none; }
.account-tile svg { margin-bottom: 8px; }
.account-tile strong { font-size: .95rem; }
.account-tile span { font-size: .82rem; color: var(--color-muted); line-height: 1.4; }
@media (max-width: 1100px) { .account-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.account-nav form { border-top: 0; margin-top: 12px; padding-top: 0; }
.account-nav .btn-secondary { background: none; border: 0; color: var(--color-muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .92rem; text-align: left; padding: 10px 14px; width: auto; }
.account-nav .btn-secondary:hover { color: var(--color-ink); background: none; }
.address-card { border: 0; background: #f5f5f5; border-radius: var(--radius-lg); }
.address-card .btn-danger { background: none; border: 0; color: var(--color-danger, #b3261e); padding-left: 6px; padding-right: 6px; }
.address-card .btn-danger:hover { background: none; text-decoration: underline; }
/* Foto nelle schede +20% (le foto hanno gia' molto margine bianco attorno al pezzo). */
.product-card .card-image { transform: scale(1.2); }
.product-card:hover .card-image { transform: scale(1.26); }
/* Colonna filtri: niente barre di scorrimento visibili (la rotella scorre lo stesso). */
@media (min-width: 801px) {
  .shop-layout .filters-drawer { overflow-x: hidden; scrollbar-width: none; padding: 0 8px 8px 2px; }
  .shop-layout .filters-drawer::-webkit-scrollbar { display: none; }
}

/* Pagina prodotto: categoria sopra il titolo, introduzione, disponibilita', rassicurazioni compatte. */
.product-eyebrow { display: inline-block; margin-bottom: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.product-eyebrow:hover { color: var(--color-ink); text-decoration: none; }
.product-lead { margin: 18px 0 0; color: var(--color-muted); line-height: 1.6; max-width: 56ch; }
.product-availability { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .88rem; font-weight: 500; }
.product-availability span { width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; flex-shrink: 0; }
.product-reassure { list-style: none; margin: 28px 0 20px; padding: 22px 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 14px; }
.product-reassure li { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; line-height: 1.5; color: var(--color-ink); }
.product-reassure li > svg { flex-shrink: 0; margin-top: 1px; }
.product-pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.product-pay-logos img { display: block; height: 24px; width: auto; }
.product-pay-logos img[alt="PayPal"] { height: 15px; }
.product-pay-logos img[alt="Klarna"] { height: 19px; }
.sku-note { font-size: .75rem; }
/* Telefoni stretti: il logo +20% toccherebbe le icone dell'header. */
@media (max-width: 420px) { .logo img { height: 36px; } }
@media (max-width: 400px) { .logo img { height: 32px; } }
@media (max-width: 370px) { .logo img { height: 30px; } }
@media (max-width: 340px) { .logo img { height: 22px; } }
/* Accedi / Registrati: le due colonne centrate fra loro e il blocco centrato nella pagina. */
.auth-split { align-items: center; margin: 0 auto; min-height: calc(100vh - 340px); padding: 56px 0; box-sizing: border-box; align-content: center; }
@media (max-width: 800px) { .auth-split { min-height: 0; padding: 24px 0; align-items: stretch; } }

/* Lista dei desideri vuota: un solo blocco centrato. */
.wishlist-empty { background: #f5f5f5; border-radius: var(--radius-lg); padding: 64px 24px; margin: 8px 0 48px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wishlist-empty h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.wishlist-empty h2 { font-size: 1.1rem; font-weight: 500; color: var(--color-muted); margin: 0 0 8px; }
.wishlist-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wishlist-empty-note { margin: 22px auto 0; font-size: .85rem; max-width: 52ch; }
.wishlist-empty-note a { color: var(--color-ink); text-decoration: underline; }
.wishlist-start h2 { text-align: center; margin-bottom: 20px; }
/* Riquadro vantaggi account. */
.auth-benefits { padding: 44px; border-radius: var(--radius-lg); }
.auth-benefits h2 { font-size: 1.55rem; margin-bottom: 28px; }
.auth-benefits ul { gap: 16px; margin-bottom: 34px; }
.auth-benefits li { align-items: center; gap: 16px; font-size: .95rem; }
.auth-benefits li svg { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; background: #fff; border-radius: 50%; margin-top: 0; }
.auth-benefits .btn { border-radius: var(--radius-lg); min-height: 52px; display: flex; align-items: center; justify-content: center; }
.auth-main .btn { border-radius: var(--radius-lg); min-height: 52px; }
.auth-main input { border-radius: var(--radius-lg); }
.auth-benefits-note { text-align: center; }

/* ---------- Gift card ---------- */
.gift-visual {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.586; max-width: 100%; padding: 7% 8%; border-radius: var(--radius-lg);
  background: #1a1a1a; color: #fff; box-sizing: border-box; overflow: hidden; isolation: isolate;
}
.gift-visual-photo {
  background:
    linear-gradient(160deg, rgba(10,10,10,.55), rgba(10,10,10,.82)),
    url('/assets/img/categories/vasi.jpg') center 40% / cover no-repeat;
}
.gift-visual-brand img { height: 40px; width: auto; display: block; }
.gift-visual-amount { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.gift-visual-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.gift-visual-names { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; min-height: 2.6em; justify-content: flex-end; }
.gift-visual-names span:last-child { opacity: .75; font-size: .85rem; }
.gift-visual-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.gift-visual-small { width: 96px; height: 96px; aspect-ratio: auto; padding: 0; border-radius: var(--radius-lg); align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; }
.order-summary-item-img .gift-visual-small { width: 100%; height: 100%; font-size: .7rem; }

.giftcard-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; align-items: start; padding: 16px 0 88px; }
.giftcard-preview { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 36px; }
.giftcard-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.giftcard-facts li { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; line-height: 1.45; color: var(--color-muted); }
.giftcard-facts svg { color: var(--color-ink); }
.giftcard-main h1 { margin: 0 0 14px; font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.giftcard-lead { margin: 0 0 40px; color: var(--color-muted); max-width: 48ch; font-size: 1.05rem; line-height: 1.6; }
.giftcard-step { border: 0; margin: 0 0 40px; padding: 0; min-width: 0; }
.giftcard-step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px; font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.giftcard-step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-ink); color: #fff; font-size: .78rem; }
.giftcard-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.giftcard-amount input, .giftcard-for-option input, .giftcard-custom > input { position: absolute; opacity: 0; pointer-events: none; }
.giftcard-amount span, .giftcard-for-option span {
  display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; font-size: 1.05rem; font-weight: 600; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.giftcard-for-option span { font-size: .95rem; min-height: 52px; }
.giftcard-amount span:hover, .giftcard-for-option span:hover, .giftcard-custom-box:hover { border-color: var(--color-ink); }
.giftcard-amount input:checked + span, .giftcard-for-option input:checked + span { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.giftcard-amount input:focus-visible + span, .giftcard-for-option input:focus-visible + span, .giftcard-custom > input:focus-visible + .giftcard-custom-box { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.giftcard-custom { display: block; margin-top: 10px; cursor: pointer; }
.giftcard-custom-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 0 8px 0 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color .15s; }
.giftcard-custom > input:checked + .giftcard-custom-box { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.giftcard-custom-label { font-weight: 600; }
.giftcard-custom-input { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.giftcard-custom-input input { width: 110px; text-align: right; border: 0; background: var(--color-product-bg); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.giftcard-custom-input input::-webkit-outer-spin-button, .giftcard-custom-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.giftcard-hint { margin: 10px 0 0; font-size: .82rem; color: var(--color-muted); }
.giftcard-for { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.giftcard-recipient { display: none; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin-top: 22px; }
.giftcard-form:has(#forGift:checked) .giftcard-recipient { display: grid; }
.giftcard-recipient .form-group { margin: 0; }
.giftcard-full { grid-column: 1 / -1; }
.giftcard-recipient label { display: flex; justify-content: space-between; }
.giftcard-count { font-weight: 400; color: var(--color-muted); font-size: .8rem; }
.giftcard-recipient textarea { width: 100%; resize: vertical; font: inherit; }
.giftcard-submit { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; font-size: .95rem; }

.giftcard-steps { padding: 72px 0; border-top: 1px solid var(--color-border); }
.giftcard-steps h2 { margin: 0 0 40px; font-size: 1.6rem; letter-spacing: -.01em; }
.giftcard-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.giftcard-steps li span { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--color-muted); margin-bottom: 14px; }
.giftcard-steps h3 { margin: 0 0 8px; font-size: 1.1rem; }
.giftcard-steps p { margin: 0; color: var(--color-muted); line-height: 1.6; max-width: 38ch; }

.giftcard-check-band { margin: 0 calc(50% - 50vw) 0; padding: 64px max(40px, calc(50vw - 860px)); background: var(--color-product-bg); }
.giftcard-check { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1800px; margin: 0 auto; }
.giftcard-check h2 { margin: 0 0 8px; font-size: 1.4rem; }
.giftcard-check p { margin: 0; color: var(--color-muted); }
.giftcard-check-controls { display: flex; gap: 10px; }
.giftcard-check-controls input { flex: 1; min-width: 0; padding: 15px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; font: inherit; letter-spacing: .06em; text-transform: uppercase; }
.giftcard-check-controls .btn { padding: 15px 24px; }
.giftcard-check-result { margin-top: 12px !important; color: var(--color-ink) !important; }
.giftcard-check .cart-coupon-error { margin-top: 12px; }
main.container:has(.giftcard-check-band) { padding-bottom: 0; }
main.container:has(.giftcard-check-band) + .site-footer { margin-top: 0; }

@media (max-width: 1100px) { .giftcard-page { gap: 48px; } .giftcard-facts { grid-template-columns: 1fr; gap: 12px; } .giftcard-facts li { flex-direction: row; align-items: center; } }
@media (max-width: 900px) {
  .giftcard-page { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; }
  .giftcard-preview { position: static; }
  .giftcard-steps ol { grid-template-columns: 1fr; gap: 28px; }
  .giftcard-steps { padding: 48px 0; }
  .giftcard-check { grid-template-columns: 1fr; gap: 20px; }
  .giftcard-check-band { padding: 48px 16px; }
}
@media (max-width: 520px) {
  .giftcard-recipient { grid-template-columns: 1fr; }
  .gift-visual-brand img { height: 28px; }
  .gift-visual-names { font-size: .82rem; }
  .giftcard-custom-input input { width: 90px; }
  .gift-visual-small { width: 84px; height: 84px; }
}

/* ---------- Correzioni audit 30/10 ---------- */
/* Telefono: categorie in una striscia che scorre, non una griglia che spinge giu' i prodotti. */
@media (max-width: 640px) {
  .category-nav {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: 10px; margin: 4px -16px 22px; padding: 0 16px; scroll-padding-inline: 16px;
  }
  .category-nav::-webkit-scrollbar { display: none; }
  .category-tile { flex: 0 0 40%; scroll-snap-align: start; }
  .category-tile-img { aspect-ratio: 1 / 1; }
  .category-tile:hover .category-tile-img { transform: none; }
}
/* Carrello su telefono: prima cosa si compra, poi il riepilogo. */
@media (max-width: 1024px) { .cart-layout .order-summary { order: 0; } }
/* Riga unica "Filtri" + ordinamento; la barra risultati sopra la griglia non serve. */
@media (max-width: 800px) {
  .shop-main .shop-results-bar { display: none; }
  .filters-mobile-row .sort-select select { padding-top: 11px; padding-bottom: 11px; font-size: .8rem; }
}
/* Descrizione prodotto: righe leggibili anche su schermi larghi. */
.product-tab-panel > * { max-width: 760px; }
/* Correlati a 3 colonne (iPad): il quarto restava da solo su una riga. */
@media (min-width: 641px) and (max-width: 1200px) {
  .related-products .product-grid > :nth-child(n+4) { display: none; }
}
.newsletter-banner { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 800px) {
  .filters-mobile-toggle { white-space: nowrap; padding: 12px 16px; }
}
@media (max-width: 900px) {
  /* Telefono e tablet: carta, poi titolo e modulo, poi i vantaggi. */
  .giftcard-preview { display: contents; }
  .giftcard-preview .gift-visual { order: 0; width: 100%; max-width: 520px; }
  .giftcard-main { order: 1; }
  .giftcard-facts { order: 2; }
}
/* Categorie: righe sempre piene (6 tessere = 6 o 3 per riga), niente tessere sole sotto. */
@media (min-width: 641px) { .category-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1100px) { .category-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Accanto alla colonna filtri, su schermi stretti, tre schede diventavano troppo piccole. */
@media (min-width: 801px) and (max-width: 1100px) { .shop-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Menu telefono: pannello a tutto schermo, voci grandi, niente fondi colorati ---------- */
.main-nav-quick, .main-nav-langs { display: none; }
.filter-sort-mobile, .filters-label-mobile, .filters-panel-foot { display: none; }
@media (max-width: 800px) {
  .main-nav { width: 100%; max-width: none; }
  .main-nav.open { box-shadow: none; }
  .main-nav-head { padding: 14px 16px 14px 24px; border-bottom: 0; }
  .main-nav-logo img { height: 36px; }
  .main-nav-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 300; }
  .main-nav-links { padding: 8px 0 20px; }
  .main-nav-links a, .main-nav-links a.active-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 24px; border-bottom: 0; background: none;
    font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em;
  }
  .main-nav-links a::after {
    content: ""; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 1.5px solid var(--color-muted); border-top: 1.5px solid var(--color-muted); transform: rotate(45deg);
  }
  .main-nav-links a.active-link { font-weight: 700; }
  .main-nav-links a.active-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink); margin-right: 10px; order: -1; }
  .main-nav-links a.active-link { justify-content: flex-start; }
  .main-nav-links a.active-link::after { margin-left: auto; }
  .main-nav-links a:hover { text-decoration: none; color: var(--color-muted); }
  .main-nav.open .main-nav-links a { animation: navIn .35s ease both; }
  .main-nav.open .main-nav-links a:nth-child(2) { animation-delay: .03s; }
  .main-nav.open .main-nav-links a:nth-child(3) { animation-delay: .06s; }
  .main-nav.open .main-nav-links a:nth-child(4) { animation-delay: .09s; }
  .main-nav.open .main-nav-links a:nth-child(5) { animation-delay: .12s; }
  .main-nav.open .main-nav-links a:nth-child(6) { animation-delay: .15s; }
  .main-nav.open .main-nav-links a:nth-child(7) { animation-delay: .18s; }
  .main-nav.open .main-nav-links a:nth-child(n+8) { animation-delay: .21s; }
  .main-nav-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 24px; padding: 20px 0; border-top: 1px solid var(--color-border); }
  .main-nav-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-ink); font-size: .8rem; font-weight: 500; text-align: center; }
  .main-nav-quick a:hover { text-decoration: none; border-color: var(--color-ink); }
  .main-nav-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius); background: var(--color-ink); color: #fff; font-size: .7rem; line-height: 18px; }
  .main-nav-langs { display: flex; gap: 8px; margin: 0 24px 8px; }
  .main-nav-langs a { flex: 1; text-align: center; padding: 9px 0; border-radius: var(--radius); font-size: .78rem; font-weight: 600; color: var(--color-muted); border: 1px solid var(--color-border); }
  .main-nav-langs a.active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
  .main-nav-langs a:hover { text-decoration: none; }
  .main-nav-footer { background: none; border-top: 0; padding: 20px 24px calc(26px + env(safe-area-inset-bottom, 0px)); }
  .main-nav-contact a { color: var(--color-muted); }

  /* ---------- Pannello filtri telefono ---------- */
  .filters-drawer { width: 100%; max-width: 440px; padding: 0; display: flex; flex-direction: column; height: 100dvh; }
  .filters-drawer > :not(.filters-panel-head):not(.filters-panel-foot) { margin-left: 24px; margin-right: 24px; }
  .filters-panel-head { position: sticky; top: 0; z-index: 2; background: #fff; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--color-border); }
  .filters-label { font-size: 1.1rem; }
  .filters-label-desktop { display: none; }
  .filters-label-mobile { display: inline; }
  .filters-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 300; color: var(--color-ink); }
  .filters-drawer > .filters-clear { display: none; }
  .filters-drawer .filter-rule:first-of-type { display: none; }
  .filters-drawer .filter-accordion { padding: 10px 0; }
  .filters-drawer .filter-accordion summary { font-size: .82rem; padding: 6px 0; }
  .filter-sort-mobile { display: block; }
  hr.filter-sort-mobile { display: block; }
  .filters-drawer .filter-checklist label { padding: 10px 8px; font-size: .95rem; }
  .filters-drawer .color-swatch span { width: 36px; height: 36px; }
  .filters-panel-foot {
    display: flex; gap: 10px; margin-top: auto; position: sticky; bottom: 0; background: #fff;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-border);
  }
  .filters-panel-foot .btn { flex: 1; padding: 15px 12px; text-align: center; }
  .filters-panel-foot .btn-outline { flex: 0 0 auto; }
  .filters-drawer .filters-apply-btn { background: #fff; color: var(--color-ink); border: 1px solid var(--color-ink); }
  .filters-drawer .filter-accordion:last-of-type { padding-bottom: 24px; }
}
@keyframes navIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .main-nav.open .main-nav-links a { animation: none; } }

/* Vantaggi gift card: tre colonne centrate, icona in cerchio, titolo e riga breve. */
.giftcard-facts { grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 28px; border-top: 1px solid var(--color-border); }
.giftcard-facts li { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 12px; color: var(--color-muted); font-size: .85rem; }
.giftcard-facts li + li { border-left: 1px solid var(--color-border); }
.giftcard-fact-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--color-ink); color: #fff; }
.giftcard-facts svg { color: #fff; }
.giftcard-facts strong { color: var(--color-ink); font-size: .95rem; font-weight: 600; }
@media (max-width: 1100px) { .giftcard-facts { grid-template-columns: repeat(3, 1fr); gap: 0; } .giftcard-facts li { flex-direction: column; align-items: center; } }
@media (max-width: 420px) { .giftcard-facts li { padding: 0 6px; font-size: .78rem; } .giftcard-facts strong { font-size: .86rem; } }

/* ---------- Gift card delle feste ---------- */
.gift-visual-xmas {
  --gold: linear-gradient(115deg, #f6e3a6 0%, #d4a94f 45%, #f3dc9a 60%, #9c7230 100%);
  background:
    radial-gradient(120% 90% at 15% 10%, #1d5a45 0%, #0f3b2e 48%, #082419 100%);
  box-shadow: inset 0 0 0 1px rgba(212,169,79,.35);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.gift-visual-xmas:hover { transform: translateY(-4px) rotate(-.6deg); }
.gift-visual-xmas > * { position: relative; z-index: 2; }
.gift-xmas-pattern {
  position: absolute !important; inset: 0; z-index: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d4a94f' stroke-width='1'%3E%3Cpath d='M22 4 40 22 22 40 4 22Z'/%3E%3Cpath d='M22 13 31 22 22 31 13 22Z'/%3E%3C/g%3E%3Cpath d='M22 19.5 24.5 22 22 24.5 19.5 22Z' fill='%23d4a94f'/%3E%3Cpath d='M0 0h3v3H0zM41 0h3v3h-3zM0 41h3v3H0zM41 41h3v3h-3z' fill='%23d4a94f'/%3E%3C/svg%3E") 0 0 / 44px 44px;
  opacity: .22;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
          mask-image: linear-gradient(105deg, transparent 30%, #000 75%);
}
.gift-xmas-ribbon {
  position: absolute !important; z-index: 1 !important; top: 0; bottom: 0; right: 17%; width: 30px;
  background: var(--gold); box-shadow: -1px 0 0 rgba(0,0,0,.15), 1px 0 0 rgba(0,0,0,.15);
}
.gift-xmas-bow { position: absolute !important; z-index: 3 !important; right: calc(17% - 45px); top: 14%; width: 120px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.gift-visual-xmas .gift-visual-brand img { height: 34px; opacity: .95; }
.gift-xmas-greeting {
  margin-top: auto; margin-bottom: 4px;
  font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #f3dc9a; letter-spacing: .01em;
}
.gift-visual-xmas .gift-visual-amount {
  background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: auto; padding-bottom: .05em;
}
.gift-visual-xmas .gift-visual-foot { padding-right: calc(17% + 20px); }
.gift-visual-xmas .gift-visual-foot { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 10px; }
.gift-visual-xmas .gift-visual-label { color: #f3dc9a; opacity: .85; order: -1; }
.gift-visual-xmas .gift-visual-names { min-height: 0; }
.gift-xmas-shine {
  position: absolute !important; inset: 0; z-index: 4 !important; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0; transition: background-position 1s ease;
}
.gift-visual-xmas:hover .gift-xmas-shine { background-position: -30% 0; }
@media (max-width: 520px) {
  .gift-xmas-ribbon { width: 22px; }
  .gift-xmas-bow { width: 88px; right: calc(17% - 33px); }
  .gift-visual-xmas .gift-visual-brand img { height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .gift-visual-xmas, .gift-xmas-shine { transition: none; } }
/* Foto principale prodotto +20%, come nelle schede dello shop. */
.gallery-main { overflow: hidden; }
.main-product-image { transform: scale(1.2); }

/* Angoli: una sola misura in tutto il sito. 8px per tasti, campi, foto e tessere; 12px per riquadri grandi. */
.gallery-main, .card-media, .gallery-thumb, .gallery-thumb img { border-radius: var(--radius); overflow: hidden; }
.cart-line-media, .order-summary-item-img { border-radius: var(--radius); }
/* Pagina prodotto: categoria, nome e prezzo come un unico blocco. */
.product-title-row { gap: 0; }
.product-title-row .product-eyebrow { margin-bottom: 8px; }
.product-view h1 { line-height: 1.15; text-wrap: balance; }
.product-title-row .price-row { margin: 12px 0 0; row-gap: 14px; }
.product-view .product-price { line-height: 1.1; }
/* Rassicurazioni prodotto: una riga, tre voci brevi con icona sopra. */
.product-reassure { grid-template-columns: repeat(3, 1fr); gap: 0; margin: 28px 0 0; padding: 24px 0 0; }
.product-reassure li { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 8px; font-size: .82rem; color: var(--color-muted); }
.product-reassure li + li { border-left: 1px solid var(--color-border); }
.product-reassure li > svg { color: var(--color-ink); margin: 0; }
/* Modulo gift card: tagli compatti, importo libero come settima scelta, campi allineati. */
.giftcard-step { margin-bottom: 36px; }
.giftcard-step legend { margin-bottom: 14px; }
.giftcard-amounts { gap: 8px; }
.giftcard-amount span { min-height: 50px; font-size: 1rem; border-radius: var(--radius); }
.giftcard-custom { margin-top: 8px; }
.giftcard-custom-box { min-height: 50px; padding: 0 6px 0 18px; border-radius: var(--radius); }
.giftcard-custom > input:checked + .giftcard-custom-box { background: var(--color-ink); border-color: var(--color-ink); box-shadow: none; color: #fff; }
.giftcard-custom-input { gap: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; padding-left: 12px; color: var(--color-muted); }
.giftcard-custom-input input { width: 96px; background: transparent; padding: 9px 12px 9px 6px; color: var(--color-ink); }
.giftcard-custom-input input:focus { outline: none; }
.giftcard-custom > input:checked + .giftcard-custom-box .giftcard-custom-input { border-color: #fff; }
.giftcard-for { gap: 8px; }
.giftcard-for-option span { min-height: 50px; border-radius: var(--radius); }
.giftcard-recipient { gap: 16px 12px; margin-top: 20px; }
.giftcard-recipient input, .giftcard-recipient textarea { border-radius: var(--radius); }
/* Come funziona: titolo centrato, tre passi collegati da una linea. */
.giftcard-steps { text-align: center; padding: 80px 0 88px; }
.giftcard-steps .product-eyebrow { margin-bottom: 8px; }
.giftcard-steps h2 { margin: 0 0 48px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.02em; }
.giftcard-steps ol { position: relative; max-width: 1080px; margin: 0 auto; gap: 32px; }
.giftcard-steps ol::before { content: ""; position: absolute; top: 24px; left: 16.66%; right: 16.66%; height: 1px; background: var(--color-border); }
.giftcard-steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
.giftcard-steps li .giftcard-steps-n {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 0 20px;
  border-radius: 50%; background: var(--color-ink); color: #fff; font-size: 1.05rem; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 0 0 10px var(--color-bg);
}
.giftcard-steps h3 { margin: 0 0 8px; font-size: 1.12rem; }
.giftcard-steps p { margin: 0 auto; max-width: 30ch; font-size: .95rem; }
@media (max-width: 900px) {
  .giftcard-steps { padding: 56px 0 64px; }
  .giftcard-steps h2 { margin-bottom: 32px; }
  .giftcard-steps ol::before { top: 24px; bottom: 24px; left: 50%; right: auto; width: 1px; height: auto; display: none; }
  .giftcard-steps ol { gap: 36px; }
}
/* Saldo gift card: fascia verde come la carta, tutto centrato, risultato ben leggibile. */
.giftcard-check-band { background: radial-gradient(120% 140% at 50% 0%, #1d5a45 0%, #0f3b2e 55%, #082419 100%); color: #fff; padding-top: 88px; padding-bottom: 96px; }
.giftcard-check { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 620px; gap: 0; }
.giftcard-check-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(243,220,154,.14); color: #f3dc9a; margin-bottom: 20px; }
.giftcard-check h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; text-wrap: balance; }
.giftcard-check > p { margin: 0 0 28px; color: rgba(255,255,255,.72); }
.giftcard-check-controls { display: flex; gap: 8px; width: 100%; padding: 6px; background: #fff; border-radius: var(--radius-lg); }
.giftcard-check-controls input { flex: 1; border: 0; background: transparent; padding: 12px 14px; font-family: Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink); }
.giftcard-check-controls input:focus { outline: none; }
.giftcard-check-controls .btn { padding: 14px 26px; border-radius: var(--radius); }
.giftcard-check-msg { margin: 16px 0 0; font-size: .92rem; }
.giftcard-check-msg.is-error { color: #ffc9bd; }
.giftcard-check-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: 16px; padding: 22px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,.08); border: 1px solid rgba(243,220,154,.35); text-align: left; }
.giftcard-check-result > div { display: flex; flex-direction: column; gap: 2px; }
.giftcard-check-label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.giftcard-check-result strong { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; color: #f3dc9a; }
.giftcard-check-sub { font-size: .85rem; color: rgba(255,255,255,.7); }
.giftcard-check-result .btn { background: #fff; color: var(--color-ink); border-color: #fff; white-space: nowrap; }
@media (max-width: 520px) {
  .giftcard-check-band { padding-top: 56px; padding-bottom: 64px; }
  .giftcard-check-controls { flex-direction: column; }
  .giftcard-check-result { flex-direction: column; align-items: flex-start; }
  .giftcard-check-result .btn { width: 100%; text-align: center; }
}
/* Logo sulla carta +40% */
.gift-visual-xmas .gift-visual-brand img { height: 48px; }
@media (max-width: 520px) { .gift-visual-xmas .gift-visual-brand img { height: 34px; } }
/* Carta e fascia saldo: antracite invece del verde, oro invariato. */
.gift-visual-xmas { background: radial-gradient(120% 90% at 15% 10%, #4a4a4a 0%, #2c2c2c 48%, #171717 100%); box-shadow: inset 0 0 0 1px rgba(212,169,79,.3); }
.giftcard-check-band { background: radial-gradient(120% 140% at 50% 0%, #444 0%, #2a2a2a 55%, #161616 100%); }
/* Invio programmato gift card */
.giftcard-when { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; }
.giftcard-when legend { padding: 0; margin-bottom: 10px; font-size: .9rem; font-weight: 600; }
.giftcard-when-fields { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.giftcard-form:has(#whenLater:checked) .giftcard-when-fields { display: grid; }
.giftcard-when-fields .form-group { margin: 0; }
.giftcard-when-fields input, .giftcard-when-fields select { width: 100%; border-radius: var(--radius); }
.giftcard-when-fields .giftcard-hint { margin: 0; }
/* La carta sta in un riquadro quadrato come le foto prodotto. */
.giftcard-stage { aspect-ratio: 1 / 1; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 10%; background: var(--color-product-bg); border-radius: var(--radius); }
.giftcard-stage .gift-visual { width: 100%; }
.giftcard-stage .gift-visual-amount { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
@media (max-width: 900px) {
  .giftcard-preview .giftcard-stage { order: 0; width: 100%; padding: 8%; }
  .giftcard-preview .giftcard-stage .gift-visual { max-width: none; }
}
.giftcard-recipient .giftcard-for-option { display: block; }
.giftcard-recipient .giftcard-for-option span { width: 100%; box-sizing: border-box; }
.giftcard-when-fields input[type=date], .giftcard-when-fields select { min-height: 46px; padding: 10px 14px; border: 1px solid var(--color-border); font: inherit; background-color: #fff; color: var(--color-ink); box-sizing: border-box; }

/* ---------- Carta gift card (variante 01 scelta): antracite, rosette ricamate prese dal logo ---------- */
.gift-visual-xmas { background: #3a3a3a; box-shadow: none; }
.gift-visual-xmas:hover { transform: none; }
.gift-xmas-pattern {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2221.6%22%20height%3D%2221.6%22%3E%3Cg%20fill%3D%22%238a8a8a%22%3E%3Crect%20x%3D%224.8%22%20y%3D%220.0%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%222.4%22%20y%3D%222.4%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%222.4%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%227.2%22%20y%3D%222.4%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%220.0%22%20y%3D%224.8%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%222.4%22%20y%3D%224.8%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%227.2%22%20y%3D%224.8%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%229.6%22%20y%3D%224.8%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%222.4%22%20y%3D%227.2%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%227.2%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%227.2%22%20y%3D%227.2%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%229.6%22%20width%3D%222.0%22%20height%3D%222.0%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 21.6px 21.6px; opacity: 1; image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 78%); mask-image: linear-gradient(90deg, transparent 42%, #000 78%);
}
.gift-xmas-ribbon, .gift-xmas-bow, .gift-xmas-shine { display: none !important; }
.gift-xmas-greeting { color: #fff; }
.gift-visual-xmas .gift-visual-amount { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.gift-visual-xmas .gift-visual-label { color: #cfcfcf; opacity: 1; }
.gift-visual-xmas .gift-visual-foot { padding-right: 0; }
.gift-visual-small { background: #3a3a3a url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214.4%22%20height%3D%2214.4%22%3E%3Cg%20fill%3D%22%238a8a8a%22%3E%3Crect%20x%3D%223.2%22%20y%3D%220.0%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%221.6%22%20y%3D%221.6%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%221.6%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%221.6%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%220.0%22%20y%3D%223.2%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%221.6%22%20y%3D%223.2%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%223.2%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%226.4%22%20y%3D%223.2%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%221.6%22%20y%3D%224.8%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%224.8%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%224.8%22%20y%3D%224.8%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3Crect%20x%3D%223.2%22%20y%3D%226.4%22%20width%3D%221.2%22%20height%3D%221.2%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 14.4px 14.4px; color: #fff; }
.giftcard-check-band { background: #3a3a3a; }
.giftcard-check-icon { background: rgba(255,255,255,.1); color: #fff; }
.giftcard-check-result { border-color: rgba(255,255,255,.25); }
.giftcard-check-result strong { color: #fff; }
/* Trama vera del logo (corpo dell'uccello) e importo in basso a destra. */
.gift-xmas-pattern { background: url('/assets/img/giftcard-texture.png') 0 0 / 42px auto; image-rendering: auto; }
.gift-visual-xmas .gift-xmas-greeting { margin-top: auto; }
.gift-visual-xmas .gift-visual-foot { margin-top: 10px; }
.gift-visual-xmas .gift-visual-amount { position: absolute; right: 8%; bottom: 8%; margin: 0; padding: 0; text-align: right; }
/* La trama sfuma anche verso il basso: l'importo in basso a destra resta su fondo pulito. */
.gift-xmas-pattern {
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 78%), linear-gradient(180deg, #000 30%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 42%, #000 78%), linear-gradient(180deg, #000 30%, transparent 72%);
  mask-composite: intersect;
}
/* Footer: indirizzi, telefoni ed email cliccabili, stesso colore del testo intorno. */
.footer-brand a, .footer-contacts a { color: inherit; text-decoration: none; }
.footer-brand a:hover, .footer-contacts a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Fascia saldo: foto con velatura scura, come la fascia newsletter. */
.giftcard-check-band {
  background:
    linear-gradient(135deg, rgba(10,10,10,.82), rgba(10,10,10,.62) 55%, rgba(10,10,10,.8)),
    url('/assets/img/categories/centrotavola.jpg') center 55% / cover no-repeat;
}
.giftcard-check-icon { background: rgba(255,255,255,.14); }
/* Spazio prima del footer: prima si sommavano margine del footer e fondo pagina (120px+). */
.site-footer { margin-top: 0; }
main.container { padding-bottom: 64px; }
.auth-split { padding-bottom: 0; min-height: calc(100vh - 380px); }
@media (max-width: 800px) { .site-footer { margin-top: 0; } main.container { padding-bottom: 40px; } }
/* Newsletter: stesso linguaggio della fascia saldo gift card. Niente riquadro con bordo,
   campo bianco con tasto nero dentro, consenso allineato e leggibile. */
.newsletter-banner { padding-top: 88px; padding-bottom: 96px; }
.newsletter-banner-inner { max-width: 600px; padding: 0; border: 0; }
.newsletter-banner h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 12px; }
.newsletter-banner p { margin-bottom: 28px; font-size: 1rem; }
.newsletter-banner .newsletter-form-row { gap: 8px; padding: 6px; background: #fff; border: 0; border-radius: var(--radius-lg); }
.newsletter-banner .newsletter-input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; color: var(--color-ink); font-size: 1rem; }
.newsletter-banner .newsletter-input::placeholder { color: #8a8a8a; }
.newsletter-banner .newsletter-input:focus { outline: none; }
.newsletter-banner .newsletter-submit { background: var(--color-ink); color: #fff; border: 0; border-radius: var(--radius); padding: 14px 26px; font-size: .82rem; }
.newsletter-banner .newsletter-submit:hover { background: #000; color: #fff; }
.newsletter-banner .newsletter-consent { justify-content: center; align-items: center; gap: 10px; margin-top: 16px; font-size: .8rem; font-weight: 400; text-align: left; }
.newsletter-banner .newsletter-consent input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; margin: 0; border: 1.5px solid rgba(255,255,255,.7); border-radius: 5px; background: transparent; cursor: pointer; position: relative; }
.newsletter-banner .newsletter-consent input:checked { background: #fff; border-color: #fff; }
.newsletter-banner .newsletter-consent input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--color-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 520px) {
  .newsletter-banner { padding-top: 56px; padding-bottom: 64px; }
  .newsletter-banner .newsletter-form-row { flex-direction: column; }
  .newsletter-banner .newsletter-consent { align-items: flex-start; }
}
/* Newsletter a tutta larghezza e attaccata al footer, come la fascia saldo. */
.newsletter-banner { margin: 56px calc(50% - 50vw) 0; border-radius: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* Contenuto sempre centrato in verticale nella pagina, con lo stesso spazio sopra e sotto.
   Le pagine corte (accesso, carrello vuoto, 404…) restano in mezzo tra header e footer. */
main.container {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 260px); padding-top: 64px; padding-bottom: 64px;
}
main.container > * { width: 100%; }
.auth-split { min-height: 0; padding: 0; margin-top: 0; margin-bottom: 0; }
@media (max-width: 800px) { main.container { min-height: 0; padding-top: 32px; padding-bottom: 32px; } }
/* Lista desideri vuota: icona nel cerchio nero, gerarchia chiara, aria tra i blocchi. */
.wishlist-empty { margin: 0; padding: 72px 24px; gap: 0; color: var(--color-muted); }
.wishlist-empty > svg { box-sizing: content-box; width: 26px; height: 26px; padding: 19px; border-radius: 50%; background: var(--color-ink); color: #fff; margin-bottom: 24px; }
.wishlist-empty h1 { margin: 0 0 8px; color: var(--color-ink); font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.wishlist-empty h2 { margin: 0 0 6px; color: var(--color-ink); font-size: 1.05rem; font-weight: 600; }
.wishlist-empty > p:not(.wishlist-empty-note) { margin: 0 0 28px; max-width: 42ch; line-height: 1.6; }
.wishlist-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wishlist-empty-actions .btn { min-width: 180px; padding: 15px 24px; text-align: center; }
.wishlist-empty-actions .btn-secondary { background: #fff; border: 1px solid var(--color-border); color: var(--color-ink); }
.wishlist-empty-note { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid #e2e2e2; max-width: 48ch; font-size: .85rem; line-height: 1.6; }
.wishlist-empty-note a { color: var(--color-ink); font-weight: 600; }
/* Centro legale a tutta larghezza come le altre pagine: le schede si distribuiscono,
   i testi lunghi restano a una misura leggibile. */
.account-layout > .legal-aside + div { max-width: none; }
.legal-links-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.legal-doc p, .legal-doc li, .account-layout > .legal-aside + div > p { max-width: 78ch; }
/* ---------- Spedizioni e resi: pagina a tutta larghezza ---------- */
.ship-page { display: flex; flex-direction: column; gap: 64px; }
.ship-head h1 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; line-height: 1.05; }
.ship-lead { margin: 0; max-width: 60ch; color: var(--color-muted); font-size: 1.05rem; line-height: 1.6; }
.ship-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ship-facts li { display: flex; flex-direction: column; gap: 4px; padding: 24px; background: #f5f5f5; border-radius: var(--radius-lg); color: var(--color-muted); font-size: .88rem; }
.ship-facts strong { color: var(--color-ink); font-size: 1.05rem; }
.ship-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--color-ink); color: #fff; }
.ship-section { display: flex; flex-direction: column; gap: 24px; padding-top: 48px; border-top: 1px solid var(--color-border); }
.ship-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; align-items: start; }
.ship-section-head h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.ship-section-head p { margin: 0; max-width: 70ch; line-height: 1.7; color: var(--color-muted); }
.ship-page .ship-zones { max-width: none; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ship-page .ship-zone { padding: 24px; background: #f5f5f5; border-radius: var(--radius-lg); }
.ship-page .ship-zone h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; min-height: 2.6em; }
.ship-page .ship-zone .ship-where { margin: 0 0 8px; font-size: .82rem; color: var(--color-success); }
.ship-where-list { margin: 0 0 8px; font-size: .82rem; color: var(--color-muted); }
.ship-where-list summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ship-where-list p { margin: 8px 0 0; line-height: 1.5; }
.ship-page .ship-zone dl div { border-bottom-color: #e2e2e2; }
.ship-page .ship-zone dl div:last-child { border-bottom: 0; }
.ship-page .ship-zone dd { font-weight: 600; color: var(--color-ink); }
.ship-note { margin: 0; max-width: 90ch; font-size: .88rem; color: var(--color-muted); line-height: 1.6; }
.ship-returns-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.ship-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ship-steps li { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ship-steps li > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-ink); color: #fff; font-weight: 600; font-size: .85rem; }
.ship-steps p { margin: 6px 0 0; font-size: .9rem; line-height: 1.6; color: var(--color-muted); }
.ship-steps a, .ship-note a, .ship-help a:not(.btn) { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.ship-help { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--color-ink); color: #fff; border-radius: var(--radius-lg); }
.ship-help h3 { margin: 0; font-size: 1.25rem; }
.ship-help p { margin: 0 0 8px; color: rgba(255,255,255,.75); }
.ship-help .btn { text-align: center; background: #fff; color: var(--color-ink); border-color: #fff; }
.ship-help .btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.ship-help .ship-help-legal { margin: 8px 0 0; font-size: .82rem; }
.ship-help .ship-help-legal a { color: #fff; }
@media (max-width: 1100px) {
  .ship-facts, .ship-page .ship-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-returns-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ship-page { gap: 40px; }
  .ship-section { padding-top: 32px; }
  .ship-section-head { grid-template-columns: 1fr; gap: 10px; }
  .ship-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ship-facts li { padding: 18px; }
  .ship-page .ship-zones, .ship-steps { grid-template-columns: 1fr; }
  .ship-page .ship-zone h3 { min-height: 0; }
}
/* Spazio uguale ovunque: i margini del primo e dell'ultimo blocco non si sommano al padding della pagina. */
main.container > :first-child, main.container > .breadcrumb:first-child + * { margin-top: 0; }
main.container > :last-child { margin-bottom: 0; }
main.container > .card:only-child, .auth-card { margin-top: 0; margin-bottom: 0; }

/* Resi in 3 passi: card grigie della stessa altezza, numero grande. */
.ship-steps li { border: 0; background: #f5f5f5; gap: 18px; padding: 28px; }
.ship-steps li > span { width: 44px; height: 44px; font-size: 1rem; }
.ship-steps strong { font-size: 1.05rem; }
.ship-help .btn + .btn { margin-top: 0; }

/* ---------- Banner cookie: scheda in basso a sinistra, due scelte dello stesso peso ---------- */
.cookie-banner { left: 24px; right: auto; bottom: 24px; width: min(420px, calc(100vw - 32px)); background: #fff; color: var(--color-ink); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cookie-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; max-width: none; }
.cookie-banner-head { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; }
.cookie-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-ink); color: #fff; flex-shrink: 0; }
.cookie-banner-inner p { color: var(--color-muted); font-size: .88rem; line-height: 1.6; }
.cookie-banner-inner a { color: var(--color-ink); }
.cookie-banner-inner form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-banner-inner .btn { width: 100%; padding: 13px 16px; text-align: center; background: var(--color-ink); color: #fff; border: 1px solid var(--color-ink); border-radius: var(--radius); }
.cookie-banner-inner .btn:hover { background: #000; }
.cookie-banner-inner .btn-outline { background: #fff; color: var(--color-ink); }
.cookie-banner-inner .btn-outline:hover { background: #f5f5f5; }
@media (max-width: 640px) {
  .cookie-banner { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .cookie-banner-inner { padding: 18px; gap: 12px; }
  .cookie-banner-inner p { font-size: .82rem; line-height: 1.5; }
  .cookie-banner-inner form { align-self: stretch; }
  .cookie-banner-inner .btn { padding: 12px; }
}
@keyframes cookie-banner-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ---------- Documenti legali: testo con aria, titoli separati, indice laterale ---------- */
.legal-content.card { padding: 56px 64px; margin: 0; background: #f5f5f5; border: 0; border-radius: var(--radius-lg); }
.legal-content h2 { margin: 40px 0 14px; padding-top: 32px; border-top: 1px solid #e2e2e2; font-size: 1.25rem; letter-spacing: -.01em; scroll-margin-top: 24px; }
.legal-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-content p, .legal-content li { max-width: 72ch; line-height: 1.75; color: #3d3d3d; }
.legal-content a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-content table.data-table { margin: 8px 0 18px; background: #fff; border-radius: var(--radius); overflow: hidden; }
.legal-content table.data-table th, .legal-content table.data-table td { padding: 14px 18px; }
.legal-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: start; }
.legal-toc { position: sticky; top: 24px; padding: 4px 0; }
.legal-toc p { margin: 0 0 12px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 7px 10px; border-radius: var(--radius); font-size: .86rem; line-height: 1.4; color: var(--color-muted); }
.legal-toc a::before { content: counter(toc); min-width: 1.2em; color: var(--color-ink); font-weight: 600; }
.legal-toc a:hover { background: #f5f5f5; color: var(--color-ink); text-decoration: none; }
@media (max-width: 1200px) { .legal-body { grid-template-columns: 1fr; } .legal-toc { display: none; } }
@media (max-width: 700px) { .legal-content.card { padding: 28px 22px; } .legal-content h2 { font-size: 1.1rem; } }
.category-nav { margin-top: 0; }
main.container > .visually-hidden { width: 1px; }
/* Ordine del cliente: totali completi e modulo reso senza fondo beige. */
.order-totals { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); display: grid; gap: 6px; }
.order-totals .row.total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.order-refunded span:last-child { color: var(--color-success); font-weight: 600; }
.return-form { background: #fff; border: 1px solid var(--color-border); }
/* Checkout con solo PayPal: un riquadro chiaro, non una scelta con un'opzione sola. */
.pay-paypal-only { padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pay-paypal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pay-paypal-head img { height: 26px; width: auto; }
.pay-paypal-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-ink); color: #fff; }
.pay-paypal-title { margin: 0 0 6px; font-weight: 600; font-size: 1.05rem; }
.pay-paypal-text { margin: 0 0 14px; color: var(--color-muted); font-size: .9rem; line-height: 1.6; }
.pay-paypal-logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-paypal-logos img { height: 24px; width: auto; }
.pay-paypal-points { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 8px; font-size: .86rem; }
.pay-paypal-points li { position: relative; padding-left: 24px; }
.pay-paypal-points li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 2px solid var(--color-success); border-bottom: 2px solid var(--color-success); transform: rotate(-45deg); }
/* Pagina di pagamento: passi, riepilogo dell'ordine accanto, contatti. */
.payment-page-container { max-width: 1040px; padding-top: 40px; padding-bottom: 64px; }
.pay-steps { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 0 0 28px; padding: 0; font-size: .82rem; color: var(--color-muted); counter-reset: ps; }
.pay-steps li { display: flex; align-items: center; gap: 8px; counter-increment: ps; }
.pay-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--color-border); margin-right: 8px; }
.pay-steps li::after { order: -1; content: counter(ps); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border); font-size: .72rem; }
.pay-steps li.is-done::after { content: "✓"; background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.pay-steps li.is-current { color: var(--color-ink); font-weight: 600; }
.pay-steps li.is-current::after { border-color: var(--color-ink); color: var(--color-ink); }
.payment-page-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.payment-page-grid .payment-page-card { margin: 0; max-width: none; }
.pay-hint { margin: 0 0 14px; font-size: .88rem; color: var(--color-muted); line-height: 1.6; }
.pay-summary { padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pay-summary-number { margin: 0 0 14px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.pay-summary-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.pay-summary-thumb { width: 56px; height: 56px; border-radius: var(--radius); background: var(--color-product-bg); overflow: hidden; }
.pay-summary-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pay-summary-name small { display: block; color: var(--color-muted); font-size: .8rem; }
.pay-summary-rows { display: grid; gap: 6px; padding: 12px 0; font-size: .9rem; }
.pay-summary-rows div { display: flex; justify-content: space-between; }
.pay-summary-rows .is-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--color-border); font-weight: 600; font-size: 1rem; }
.pay-summary-ship, .pay-summary-help { margin: 12px 0 0; font-size: .82rem; color: var(--color-muted); line-height: 1.6; }
.pay-summary-help a { color: var(--color-ink); }
.pay-back { display: inline-block; margin-top: 14px; font-size: .85rem; color: var(--color-ink); }
@media (max-width: 800px) { .payment-page-grid { grid-template-columns: 1fr; } .pay-summary { order: -1; } .pay-steps { font-size: .74rem; } }

/* ---------- Area cliente ---------- */
.acc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
.acc-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.acc-user { display: flex; align-items: center; gap: 12px; padding: 18px; background: #f5f5f5; border-radius: var(--radius-lg); }
.acc-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink); color: #fff; font-weight: 600; letter-spacing: .04em; }
.acc-user-text { display: flex; flex-direction: column; min-width: 0; }
.acc-user-text strong { font-size: .95rem; }
.acc-user-text span { font-size: .8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-nav { display: grid; gap: 2px; }
.acc-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius); color: var(--color-ink); font-size: .92rem; font-weight: 500; }
.acc-nav a svg { color: var(--color-muted); flex-shrink: 0; }
.acc-nav a em { margin-left: auto; font-style: normal; font-size: .75rem; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 10px; background: #ececec; color: var(--color-muted); }
.acc-nav a:hover { background: #f5f5f5; text-decoration: none; }
.acc-nav a.is-active { background: var(--color-ink); color: #fff; }
.acc-nav a.is-active svg { color: #fff; }
.acc-nav a.is-active em { background: rgba(255,255,255,.2); color: #fff; }
.acc-help { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: .85rem; }
.acc-help strong { margin-bottom: 4px; }
.acc-help a { color: var(--color-muted); }
.acc-help a:hover { color: var(--color-ink); }
.acc-logout button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none; border-radius: var(--radius); font: inherit; font-size: .92rem; color: var(--color-muted); cursor: pointer; }
.acc-logout button:hover { background: #f5f5f5; color: var(--color-ink); }
.acc-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.acc-head h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.acc-eyebrow { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.acc-lead { margin: 0; color: var(--color-muted); max-width: 60ch; line-height: 1.6; }
.acc-back { font-size: .88rem; color: var(--color-muted); }
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.acc-stats a { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: #f5f5f5; border-radius: var(--radius-lg); color: var(--color-ink); }
.acc-stats a:hover { text-decoration: none; background: #eeeeee; }
.acc-stats span { font-size: .78rem; color: var(--color-muted); }
.acc-stats strong { font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; }
.acc-block { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.acc-block h2 { margin: 0 0 14px; font-size: 1.1rem; }
.acc-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.acc-block-head h2 { margin: 0; }
.acc-block-head a { font-size: .86rem; color: var(--color-muted); }
.acc-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; text-align: center; background: #f5f5f5; border-radius: var(--radius-lg); color: var(--color-muted); }
.acc-empty p { margin: 0; }
.acc-orders { display: grid; gap: 12px; }
.acc-order { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; color: var(--color-ink); transition: border-color .15s; }
.acc-block .acc-order + .acc-order { margin-top: 12px; }
.acc-order:hover { border-color: var(--color-ink); text-decoration: none; }
.acc-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.acc-order-num { display: block; font-family: Menlo, Consolas, monospace; font-size: .92rem; letter-spacing: .02em; }
.acc-order-date { font-size: .82rem; color: var(--color-muted); }
.acc-order-total { font-size: 1.05rem; }
.acc-order-thumbs { display: flex; gap: 8px; }
.acc-order-thumbs span { width: 64px; height: 64px; border-radius: var(--radius); background: var(--color-product-bg); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.acc-order-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.acc-order-thumbs em { font-style: normal; font-size: .65rem; font-weight: 600; text-align: center; }
.acc-more { font-size: .85rem; color: var(--color-muted); }
.acc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; font-size: .78rem; color: var(--color-muted); }
.acc-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.acc-steps li span { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #d6d6d6; }
.acc-steps li::before { content: ""; position: absolute; top: 8px; left: 14px; right: 0; height: 2px; background: #e6e6e6; }
.acc-steps li:last-child::before { display: none; }
.acc-steps li.is-done span { background: var(--color-ink); border-color: var(--color-ink); }
.acc-steps li.is-done::before { background: var(--color-ink); }
.acc-steps li.is-current::before { background: #e6e6e6; }
.acc-steps li.is-current { color: var(--color-ink); font-weight: 600; }
.acc-status-note { margin: 0; font-size: .85rem; color: var(--color-muted); }
.acc-progress .acc-steps { font-size: .85rem; }
.acc-tracking { margin: 16px 0 0; font-size: .9rem; }
.acc-tracking a { color: var(--color-ink); text-decoration: underline; }
.acc-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acc-info p { margin: 0; line-height: 1.7; font-size: .9rem; }
.acc-info a { color: var(--color-ink); }
.acc-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acc-shortcuts a { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-ink); }
.acc-shortcuts a:hover { border-color: var(--color-ink); text-decoration: none; }
.acc-shortcuts span { font-size: .85rem; color: var(--color-muted); }
.acc-return { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
.acc-return-thumb { width: 64px; height: 64px; border-radius: var(--radius); background: var(--color-product-bg); overflow: hidden; }
.acc-return-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.acc-return-info { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--color-muted); }
.acc-return-info strong { color: var(--color-ink); font-size: .95rem; }
.acc-note { font-size: .85rem; color: var(--color-muted); line-height: 1.6; }
.acc-note a { color: var(--color-ink); text-decoration: underline; }
.acc-form .form-grid { margin-bottom: 16px; }
.acc .order-detail-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.acc .order-detail-header h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.acc .address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.acc .address-card { border: 1px solid var(--color-border); background: #fff; }
@media (max-width: 1100px) {
  .acc { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .acc-stats { grid-template-columns: repeat(2, 1fr); }
  .acc-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .acc { grid-template-columns: 1fr; gap: 20px; }
  .acc-side { position: static; }
  .acc-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .acc-nav::-webkit-scrollbar { display: none; }
  .acc-nav a { border: 1px solid var(--color-border); }
  .acc-help, .acc-logout { display: none; }
  .acc-info, .acc-shortcuts { grid-template-columns: 1fr; }
  .acc-steps { font-size: .7rem; }
  .acc-block { padding: 18px; }
}
.acc > * { min-width: 0; }
@media (max-width: 800px) { .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-stats strong { font-size: 1.5rem; } }
/* Checkout: fatturazione diversa, campi che si aprono con la casella. */
.billing-toggle { margin-top: 18px; }
.billing-fields { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
#checkoutForm:has(#billingDiff:checked) .billing-fields { display: block; }
#checkoutForm:has(#billingDiff:checked) .billing-fields input:not([name=billing_province]) { }
.checkout-step-sub { margin: 0 0 12px; font-weight: 600; }

/* ---------- Lista dei desideri ---------- */
.wl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.wl-head h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.wl-head-actions .btn { padding: 14px 24px; }
.wl-guest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 20px 0; padding: 20px 24px; background: #f5f5f5; border-radius: var(--radius-lg); }
.wl-guest-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink); color: #fff; }
.wl-guest p { margin: 2px 0 0; font-size: .88rem; color: var(--color-muted); }
.wl-guest-actions { display: flex; gap: 8px; }
.wl-form { margin-top: 20px; }
.wl-card { display: flex; flex-direction: column; }
.wl-media { position: relative; aspect-ratio: 1; background: var(--color-product-bg); border-radius: var(--radius); overflow: hidden; }
.wl-remove { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--color-ink); cursor: pointer; }
.wl-remove:hover { background: var(--color-ink); color: #fff; }
.wl-more textarea { width: 100%; margin-top: 8px; font: inherit; font-size: .88rem; border-radius: var(--radius); }
.wl-link { border: 0; background: none; padding: 4px 0; font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; color: var(--color-ink); }
.wl-move { display: flex; gap: 8px; align-items: center; font-size: .82rem; }
.wl-move select { flex: 1; font-size: .82rem; }
.acc-main .wishlist-empty { margin-top: 8px; }
@media (max-width: 640px) {
  .wl-guest { grid-template-columns: 1fr; text-align: left; }
  .wl-head-actions, .wl-head-actions .btn { width: 100%; }
}
/* Fasce a tutta larghezza: la regola width:100% dei figli di main le accorciava sul lato destro. */
main.container > .newsletter-banner, main.container > .giftcard-check-band { width: auto; align-self: stretch; }
/* Le fasce a tutta larghezza usano 100vw, che include la barra di scorrimento: si taglia quei pochi pixel invece di far scorrere la pagina di lato. */
html, body { overflow-x: clip; }


/* Preferiti: barra delle liste, collaborazione e card */
.wl-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.wl-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wl-tabs > a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #f5f5f5; font-size: .88rem; color: var(--color-ink); white-space: nowrap; }
.wl-tabs > a:hover { background: #ebebeb; text-decoration: none; }
.wl-tabs > a.is-active { background: var(--color-ink); color: #fff; }
.wl-tabs em { font-style: normal; font-size: .74rem; color: var(--color-muted); }
.wl-tabs a.is-active em { color: rgba(255,255,255,.65); }
.wl-tabs svg { flex: none; }
.wl-pop { position: static; }
.wl-pop > summary { list-style: none; cursor: pointer; }
.wl-pop > summary::-webkit-details-marker { display: none; }
.wl-new { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px dashed #c9c9c9; border-radius: 999px; font-size: .88rem; color: var(--color-muted); }
.wl-new:hover, .wl-pop[open] > .wl-new { border-color: var(--color-ink); color: var(--color-ink); }
.wl-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wl-tool { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: .88rem; color: var(--color-ink); cursor: pointer; }
.wl-tool:hover, .wl-pop[open] > .wl-tool { background: #f5f5f5; }
.wl-owner { font-size: .85rem; color: var(--color-muted); margin-right: 8px; }
.wl-avatars { display: inline-flex; margin-right: 8px; }
.wl-avatars span, .wl-ava { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-ink); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .02em; border: 2px solid #fff; }
.wl-avatars span + span { margin-left: -8px; }
.wl-panel { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.wl-panel-right { left: auto; right: 0; }
.wl-panel strong { font-size: 1rem; }
.wl-panel p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--color-muted); }
.wl-row { display: flex; gap: 8px; }
.wl-row input[type=text] { flex: 1; min-width: 0; }
.wl-row .btn { white-space: nowrap; }
.wl-panel .wl-people-title { margin-top: 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink); }
.wl-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wl-people li { display: flex; align-items: center; gap: 12px; }
.wl-people .wl-ava { border: 0; width: 34px; height: 34px; }
.wl-person { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.wl-person small { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-muted { color: var(--color-muted) !important; }
.wl-menu { width: 220px; padding: 8px; }
.wl-menu form { display: flex; flex-direction: column; }
.wl-menu button { text-align: left; padding: 12px 14px; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: .9rem; color: var(--color-ink); cursor: pointer; }
.wl-menu button:hover { background: #f5f5f5; }
.wl-menu .is-danger { color: #b3261e; }
.wl-join { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 24px 0 32px; padding: 24px 28px; background: #f5f5f5; border-radius: var(--radius-lg); }
.wl-join p { margin: 4px 0 0; font-size: .9rem; color: var(--color-muted); max-width: 60ch; }
.wl-join-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-form { margin-top: 28px; }
.wl-more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: .82rem; color: var(--color-muted); }
.wl-more summary::-webkit-details-marker { display: none; }
.wl-more summary:hover { color: var(--color-ink); }
@media (max-width: 700px) {
  .wl-bar { flex-direction: column; align-items: stretch; }
  .wl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .wl-tabs::-webkit-scrollbar { display: none; }
  .wl-tools { margin-right: -14px; }
  .wl-panel, .wl-panel-right { left: 0; right: 0; width: auto; }
  .wl-menu { width: auto; }
  .wl-join { padding: 20px; }
}


/* Preferiti: card in stile card prodotto */
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 40px 20px; }
.wl-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.12); transition: transform .5s ease; }
.wl-card:hover .wl-media img { transform: scale(1.17); }
.wl-tag { position: absolute; top: 12px; left: 12px; }
.wl-body { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; flex: 1; }
.wl-title { display: flex; flex-direction: column; gap: 4px; }
.wl-name { max-width: 100%; font-size: .9rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-name:hover { opacity: .6; text-decoration: none; }
.wl-price { flex: none; font-weight: 700; font-size: .95rem; }
.wl-price small { font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); }
.wl-by { margin-top: -6px; font-size: .78rem; color: var(--color-muted); }
.wl-buy { display: flex; gap: 8px; margin-top: auto; }
.wl-select { flex: 1; min-width: 0; height: 44px; padding-top: 0; padding-bottom: 0; font-size: .85rem; }
.wl-cart { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: var(--color-ink); color: #fff; cursor: pointer; }
.wl-cart:hover { opacity: .85; }
.wl-cart-label { display: none; }
.wl-add { width: 100%; height: 44px; border: 1px solid var(--color-ink); border-radius: var(--radius); background: #fff; font: inherit; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink); cursor: pointer; }
.wl-add:hover { background: var(--color-ink); color: #fff; }
@media (max-width: 700px) {
  .wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .wl-name { max-width: 100%; font-size: .8rem; }
  .wl-buy { flex-direction: column; }
  .wl-select { flex: none; width: 100%; font-size: .8rem; padding-left: 10px; }
  .wl-cart { width: 100%; gap: 8px; font: inherit; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .wl-cart-label { display: inline; }
  .wl-add { font-size: .72rem; letter-spacing: .03em; }
}

/* Area cliente su telefono: niente scheda utente, menu a schede sottolineate, meno titoli ripetuti. */
@media (max-width: 800px) {
  .acc { gap: 24px; }
  .acc-side { gap: 0; }
  .acc-user { display: none; }
  .acc-nav { gap: 4px; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
  .acc-nav a { gap: 6px; padding: 12px 10px 13px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; background: none; color: var(--color-muted); font-size: .9rem; }
  .acc-nav a svg { display: none; }
  .acc-nav a:hover { background: none; color: var(--color-ink); }
  .acc-nav a.is-active { background: none; color: var(--color-ink); border-bottom-color: var(--color-ink); }
  .acc-nav a.is-active em { background: var(--color-ink); color: #fff; }
  .acc-nav a em { margin-left: 0; min-width: 0; padding: 0 6px; font-size: .7rem; }
  .acc-eyebrow { display: none; }
  .acc-main { gap: 20px; }
  .acc-head h1, .wl-head h1 { font-size: 1.75rem; margin-bottom: 4px; }
  .wl-head { gap: 16px; }
  .wl-head-actions .btn { padding: 13px 16px; }
  .wl-bar { margin-top: 4px; gap: 10px; }
}
@media (max-width: 800px) {
  /* La barra laterale si scompone: menu in cima, aiuto ed Esci in fondo alla pagina. */
  .acc { display: flex; flex-direction: column; align-items: stretch; }
  .acc-side { display: contents; }
  .acc-nav { order: 0; }
  .acc-main { order: 1; }
  .acc-help { order: 2; display: grid; margin-top: 16px; }
  .acc-logout { order: 3; display: block; margin-top: -12px; }
  .acc-logout button { padding-left: 0; }
  .acc-return { grid-template-columns: 56px minmax(0, 1fr); }
  .acc-return-thumb { width: 56px; height: 56px; }
  .acc-return > :last-child { grid-column: 2; justify-self: start; }
}

/* Dettaglio ordine: righe con foto vera, e su telefono passi in verticale e info in un solo blocco. */
.acc-od .order-summary-item { gap: 16px; }
.acc-od .order-summary-item-img img { width: 72px; height: 72px; object-fit: contain; background: var(--color-product-bg); border-radius: var(--radius); mix-blend-mode: multiply; }
.acc-od .order-summary-item-name { font-size: .92rem; }
.acc-od .order-summary-item-price { font-size: .92rem; }
@media (max-width: 800px) {
  .acc-od { gap: 16px; }
  .acc-od .acc-od-date { display: block; margin-bottom: 4px; }
  .acc-od .order-detail-header h1 { font-size: 1.3rem; letter-spacing: 0; overflow-wrap: anywhere; }
  .acc-od .order-detail-header { gap: 12px; }
  .acc-od .acc-progress .acc-steps { grid-template-columns: 1fr; gap: 14px; font-size: .9rem; }
  .acc-od .acc-progress .acc-steps li { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .acc-od .acc-progress .acc-steps li::before { top: 14px; left: 6px; right: auto; bottom: -14px; width: 2px; height: auto; }
  .acc-od .order-summary-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
  .acc-od .order-summary-item-img img { width: 64px; height: 64px; }
  .acc-od .order-summary-item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .acc-od .acc-info { gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .acc-od .acc-info .acc-block { border: 0; border-radius: 0; background: none; }
  .acc-od .acc-info .acc-block + .acc-block { border-top: 1px solid var(--color-border); }
  .acc-od .acc-info h2 { font-size: .95rem; margin-bottom: 8px; }
  .acc:has(.acc-order-help) .acc-help { display: none; }
}

/* ---------- Rifinitura 30/10 sera ---------- */
/* Catalogo: titolo visibile su home e categorie. */
.shop-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; }
.shop-eyebrow { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.shop-head h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.shop-lead { margin: 0; max-width: 62ch; color: var(--color-muted); line-height: 1.6; }
/* Foto categoria: una fila sola da tablet in su, non piu' un muro 3x2. */
@media (min-width: 641px) {
  .category-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
}
/* Card: nome su una riga con "…" da tablet in su; su telefono due righe ad altezza fissa, cosi' prezzi e pallini restano allineati. */
.product-card h3 { min-height: 0; display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .product-grid .product-card h3 { min-height: 2.7em; height: 2.7em; }
}
/* iPad: filtri in un pannello che si apre, cosi' i prodotti tornano a 3 colonne. */
@media (min-width: 801px) and (max-width: 1100px) {
  .shop-layout { display: block; }
  .shop-layout .filters-drawer { position: fixed; top: 0; left: 0; height: 100dvh; max-height: none; width: 380px; padding: 24px; background: #fff; z-index: 1001; overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease; }
  .shop-layout .filters-drawer.open { transform: none; }
  .shop-layout .filters-drawer .filters-close { display: inline-flex; }
  .filters-mobile-row, .filters-mobile-toggle { display: flex; }
  .shop-results-bar { display: none; }
  .shop-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.filters-open { overflow: hidden; }
}
/* Pagina prodotto: descrizione nella colonna destra (niente piu' meta' pagina vuota). */
/* (tab di nuovo a tutta larghezza sotto la scheda) */
/* Oggetto un po' piu' grande nel riquadro, come nelle card; miniature a colori pieni. */
.main-product-image { transform: scale(1.12); }
.gallery-main { overflow: hidden; }
.gallery-thumb { opacity: 1; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .15s; }
.gallery-thumb.active { outline-color: var(--color-ink); }
.gallery-thumb:hover { outline-color: #bdbdbd; }
.gallery-thumb.active:hover { outline-color: var(--color-ink); }
.gallery-thumb img { object-fit: contain; mix-blend-mode: multiply; }
/* Misure in colonne uguali: nessuna pillola da sola sull'ultima riga. */
.variant-pills { display: grid; grid-template-columns: repeat(var(--pill-cols, 4), minmax(0, 1fr)); }
.variant-pill { padding-left: 12px; padding-right: 12px; }
@media (max-width: 640px) {
  .variant-pills[style*="--pill-cols: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Titoli di pagina: una sola misura per tutte le pagine, con occhiello e sottotitolo uguali. */
h1, .ship-head h1, .shop-head h1, .acc-head h1, .wl-head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; }
.page-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 32px; }
.page-head h1 { margin: 0; }
.page-eyebrow, .ship-head .story-eyebrow { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
a.page-eyebrow:hover { color: var(--color-ink); text-decoration: none; }
.page-lead, .ship-lead { margin: 0; max-width: 62ch; color: var(--color-muted); line-height: 1.6; font-size: 1rem; }
.ship-head { display: flex; flex-direction: column; gap: 8px; }
.ship-head h1 { margin: 0; }
.legal-nav-back { display: none; }
/* Testi legali su bianco: si leggono meglio. */
.legal-content.card { background: none; padding: 0; border-radius: 0; }
@media (max-width: 700px) { .legal-content.card { padding: 0; } }
/* Spedizioni: l'aiuto in grigio come negli altri blocchi del sito. */
.ship-help { background: #f5f5f5; color: var(--color-ink); }
.ship-help p { color: var(--color-muted); }
.ship-help .btn { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.ship-help .btn-secondary { background: #fff; color: var(--color-ink); border: 1px solid var(--color-border); }
.ship-help .ship-help-legal a { color: var(--color-ink); }
/* Accedi / Registrati: due riquadri uguali, stessa altezza, allineati. */
.auth-split { max-width: 1120px; width: 100%; align-items: stretch; gap: 24px; }
.auth-main { padding: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.auth-main h1 { margin-bottom: 8px; }
@media (max-width: 800px) { .auth-main { padding: 0; border: 0; } .auth-split { gap: 32px; } }
/* Gift card "Come funziona": allineato a sinistra come il resto della pagina; su telefono numero accanto al testo. */
.giftcard-steps { text-align: left; }
.giftcard-steps ol { margin: 0; max-width: none; }
.giftcard-steps ol::before { display: none; }
.giftcard-steps li { align-items: flex-start; }
.giftcard-steps p { margin: 0; max-width: 36ch; }
@media (max-width: 900px) {
  .giftcard-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .giftcard-steps li .giftcard-steps-n { width: 44px; height: 44px; margin: 0; grid-row: span 2; }
  .giftcard-steps h3 { margin: 10px 0 4px; }
}
/* Carrello: segnaposto del codice come gli altri campi; oggetto piu' grande nella miniatura. */
.cart-coupon-controls input::placeholder { text-transform: none; letter-spacing: 0; }
.cart-line-media { overflow: hidden; }
.cart-line-img { padding: 0; transform: scale(1.15); }
@media (min-width: 801px) { .cart-line-img { width: 120px; height: 120px; } }
/* Preferiti su iPad: misura e "Aggiungi" uno sotto l'altro, il prezzo nel menu non si taglia. */
@media (min-width: 701px) and (max-width: 1100px) {
  .wl-buy { flex-direction: column; }
  .wl-select { flex: none; width: 100%; }
  .wl-cart { width: 100%; gap: 8px; font: inherit; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .wl-cart-label { display: inline; }
}
/* Area cliente: un solo "Serve aiuto?" nel dettaglio ordine; su iPad l'aiuto prende tutta la riga; miniature ordini piu' grandi. */
.acc:has(.acc-order-help) .acc-help { display: none; }
@media (min-width: 801px) and (max-width: 1100px) { .acc-od .acc-info .acc-order-help { grid-column: 1 / -1; } }
.acc-order-thumbs span { width: 80px; height: 80px; }
.acc-order-thumbs img { transform: scale(1.12); }
.wishlist-empty.not-found { padding: 56px 24px; text-align: center; }
.wishlist-empty.not-found .not-found-code { margin: 0; }
/* Footer su telefono: negozio e bistrot affiancati, link in due colonne: meta' altezza. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer-grid > .footer-brand, .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
  .footer-grid > div:nth-child(2) { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 16px; }
  .footer-grid > div:nth-child(3), .footer-grid > div:nth-child(4) { border-bottom: 0; }
  .footer-grid > div:nth-child(5) { grid-column: 1 / -1; border-top: 1px solid var(--color-border); }
  .footer-contacts { overflow-wrap: anywhere; font-size: .82rem; }
}
/* Home: titolo con i pezzi dentro la frase. */
.home-hero { text-align: center; padding: 24px 0 56px; }
.home-hero h1 { margin: 0 auto 24px; max-width: 13ch; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.home-hero h1 img { display: inline-block; width: auto; height: .95em; vertical-align: -.16em; margin: 0 .04em; }
.home-hero .shop-lead { margin: 0 auto 30px; font-size: 1.08rem; }
.home-hero-actions { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
.home-hero-actions .btn { padding: 16px 30px; }
.home-hero-link { font-size: .92rem; font-weight: 600; color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 640px) { .home-hero { padding: 40px 0 56px; } .home-hero h1 { font-size: 2.9rem; } .home-hero .shop-lead { font-size: 1rem; } }
html { scroll-behavior: smooth; }
#catalogo { scroll-margin-top: 16px; }
.home-hero .shop-lead { max-width: 44ch; text-wrap: balance; line-height: 1.55; }
@media (min-width: 1200px) { .home-hero .shop-lead { font-size: 1.2rem; max-width: 46ch; } }
/* Hero su telefono: un'azione principale larga, il link regalo centrato sotto, piu' aria prima delle categorie. */
@media (max-width: 640px) {
  .home-hero { padding: 8px 0 44px; }
  .home-hero h1 { font-size: 3rem; line-height: 1.04; margin-bottom: 20px; }
  .home-hero h1 img { height: 1em; }
  .home-hero .shop-lead { font-size: .98rem; max-width: 30ch; margin-bottom: 28px; }
  .home-hero-actions { flex-direction: column; gap: 18px; }
  .home-hero-actions .btn { width: 100%; padding: 17px 20px; }
  .home-hero-link { font-size: .9rem; }
}
@media (max-width: 640px) {
  .home-hero-actions { gap: 16px; }
  .home-hero-actions .btn { width: auto; padding: 14px 26px; font-size: .78rem; }
}
/* Slider categorie su telefono: fino al bordo dello schermo, nome dentro la foto su due righe al massimo (mai tagliato). */
@media (max-width: 640px) {
  main.container > .category-nav { width: auto; align-self: stretch; }
  .category-nav { gap: 10px; margin-bottom: 28px; }
  .category-tile { flex: 0 0 38%; }
  .category-tile-img { aspect-ratio: 4 / 5; }
  .category-tile-overlay { padding: 12px 10px; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,0) 100%); }
  .category-tile-name { font-size: .8rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.2; text-shadow: none; }
  .category-tile-arrow { display: none; }
  .category-tile:last-child { margin-right: 16px; }
}
/* Hero home v2: titolo piu' grande, "a mano" in corsivo serif, pezzi grandi inclinati che respirano. */
.home-hero { padding: 40px 0 72px; }
.home-hero h1 { max-width: 11.5ch; font-size: clamp(3rem, 8.2vw, 7.6rem); font-weight: 800; line-height: 1; letter-spacing: -.055em; }
.home-hero h1 em { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.03em; padding-right: .04em; }
.home-hero h1 .hero-obj { height: 1.18em; vertical-align: -.26em; margin: 0 .02em; animation: heroFloat 7s ease-in-out infinite; }
.home-hero h1 .hero-obj-a { --r: -10deg; transform: rotate(var(--r)); }
.home-hero h1 .hero-obj-b { --r: 7deg; transform: rotate(var(--r)); animation-delay: -3.5s; }
@keyframes heroFloat { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-.06em); } }
@media (prefers-reduced-motion: reduce) { .home-hero h1 .hero-obj { animation: none; } }
.home-hero .shop-lead { margin-top: 8px; }
@media (max-width: 640px) {
  .home-hero { padding: 12px 0 44px; }
  .home-hero h1 { font-size: 3.3rem; line-height: 1.02; }
  .home-hero h1 .hero-obj { height: 1.12em; }
}
/* Hero su desktop: stesso spazio sopra (padding della pagina, 64px) e sotto. */
@media (min-width: 641px) {
  .home-hero { padding: 0 0 64px; }
  .home-hero .shop-lead { margin-bottom: 28px; }
}
/* Hero su telefono: stesso spazio sopra (padding della pagina, 32px) e sotto. */
@media (max-width: 640px) {
  .home-hero { padding: 0 0 32px; }
  .home-hero h1 { margin-top: 0; }
  .home-hero .shop-lead { margin-bottom: 24px; }
}
/* Catalogo a scorrimento continuo. */
.shop-more { display: flex; justify-content: center; padding: 40px 0 8px; min-height: 40px; }
.shop-more-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border); border-top-color: var(--color-ink); opacity: 0; }
.shop-more.is-loading .shop-more-spinner { opacity: 1; animation: shopSpin .8s linear infinite; }
@keyframes shopSpin { to { transform: rotate(360deg); } }
.pagination[hidden] { display: none; }
/* Prezzo e rate PayPal sempre affiancati, mai un vuoto in mezzo. */
.price-row { justify-content: flex-start; column-gap: 16px; }
/* Logo +20% su desktop (41 -> 49px). */
@media (min-width: 801px) { .logo img { height: 49px; } }
/* Hero: "a mano" nello stesso carattere del titolo, righe piu' strette. */
.home-hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; padding-right: 0; }
.home-hero h1 { line-height: .92; }
.home-hero h1 .hero-obj { vertical-align: -.22em; }
@media (max-width: 640px) { .home-hero h1 { line-height: .96; } }
/* Hero home definitiva (variante 15, accento grigio): pezzi in capsule grigie, "a mano" in grigio chiaro, riga servizi sotto. */
.home-hero h1 { max-width: none; font-size: clamp(3rem, 7.8vw, 7rem); font-weight: 700; line-height: 1.02; letter-spacing: -.05em; }
.home-hero h1 .hero-cap { display: inline-flex; align-items: center; justify-content: center; height: .8em; padding: 0 .3em; margin: 0 .04em; vertical-align: -.06em; background: var(--color-product-bg); border-radius: 999px; }
.home-hero h1 .hero-cap img { height: .66em; width: auto; animation: none; transform: none; vertical-align: 0; margin: 0; }
.home-hero h1 .hero-soft { color: #b9b9b9; }
.home-hero { padding-bottom: 56px; }
main.container > .home-usp { width: auto; align-self: stretch; }
.home-usp { list-style: none; display: flex; justify-content: center; gap: 48px; margin: 0 calc(50% - 50vw) 40px; padding: 18px 16px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: .88rem; color: var(--color-muted); }
.home-usp b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 640px) {
  .home-hero { padding-bottom: 32px; }
  .home-hero h1 { font-size: 3rem; line-height: 1.04; }
  .home-usp { flex-direction: column; align-items: center; gap: 8px; margin-bottom: 36px; padding: 22px 16px; font-size: .84rem; }
}
/* Pagine categoria: meno spazio sopra le foto categoria. */
main.container:has(> .category-nav):not(:has(.home-hero)) { padding-top: 32px; }
@media (max-width: 800px) { main.container:has(> .category-nav):not(:has(.home-hero)) { padding-top: 20px; } }
/* Il centrotavola e' largo e basso: un po' meno alto nella capsula per pesare come il riccio. */
.home-hero h1 .hero-cap img.hero-cap-wide { height: .5em; }
/* Hero definitiva: capsule identiche, pezzi centrati e della stessa presenza, spazi uguali. */
.home-hero h1 { word-spacing: 0; }
.home-hero h1 .hero-cap { width: 1.2em; height: .8em; padding: 0; margin: 0 .06em; vertical-align: -.07em; }
.home-hero h1 .hero-cap img, .home-hero h1 .hero-cap img.hero-cap-wide { height: auto; width: auto; max-height: .62em; max-width: .86em; object-fit: contain; }
.home-hero h1 .hero-cap img.hero-cap-wide { max-width: .9em; max-height: .5em; }
/* Capsule centrate sull'altezza delle lettere; il centrotavola ha il peso in basso, lo alzo un filo. */
.home-hero h1 .hero-cap { vertical-align: -.015em; }
.home-hero h1 .hero-cap img.hero-cap-wide { transform: translateY(-.035em); }
/* Ogni riga del titolo e' un blocco centrato a se': le due righe hanno lo stesso asse. */
.home-hero h1 .hero-line { display: block; white-space: nowrap; }
@media (max-width: 360px) { .home-hero h1 .hero-line { white-space: normal; } }
/* Pezzi centrati sul loro baricentro visivo (misurato sui pixel), non sul riquadro dell'immagine. */
.home-hero h1 .hero-cap img { transform: translateY(-3.5%); }
.home-hero h1 .hero-cap img.hero-cap-wide { transform: translateY(5.2%); }
/* Centratura ottica delle righe: compensa lo spazio bianco interno di "F" e "i" (misurato sul carattere, in em). */
.home-hero h1 .hero-line:first-child { transform: translateX(-.0366em); }
.home-hero h1 .hero-line:last-child { transform: translateX(.0125em); }

/* ---------- Ricerca prodotti ---------- */
.search-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
.search-toggle:hover { opacity: .65; }
.wishlist-link-mobile { display: none; }
.site-header { position: relative; }
.search-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 950; background: #fff; border-bottom: 1px solid var(--color-border); }
.search-panel[hidden] { display: none; }
.search-form { display: flex; align-items: center; gap: 14px; height: 76px; }
.search-form svg { flex: none; color: var(--color-muted); }
.search-form input { flex: 1; min-width: 0; height: 52px; border: 0; padding: 0; background: none; font: inherit; font-size: 1.35rem; color: var(--color-ink); outline: none; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; width: 44px; height: 44px; border: 0; background: none; font-size: 1.9rem; font-weight: 300; line-height: 1; color: var(--color-ink); cursor: pointer; }
.search-results:empty { display: none; }
.search-results { padding-bottom: 24px; }
.search-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.search-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 8px; border-radius: var(--radius); color: var(--color-ink); }
.search-item:hover { background: #f5f5f5; text-decoration: none; }
.search-thumb { width: 56px; height: 56px; border-radius: var(--radius); background: var(--color-product-bg); overflow: hidden; }
.search-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.1); }
.search-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-text b { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-text small { font-size: .8rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-price { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.search-all { display: inline-block; margin-top: 14px; font-size: .9rem; font-weight: 600; color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; }
.search-empty { margin: 0; padding: 18px 0 4px; border-top: 1px solid var(--color-border); color: var(--color-muted); }
.search-head { text-align: left; }
.search-none h2 { color: var(--color-ink); }
@media (max-width: 800px) {
  .header-social .wishlist-link-mobile { display: inline-flex; margin-left: 4px; }
  .header-icons .search-toggle, .header-icons .wishlist-link { display: none; }
  .header-social .lang-switcher { display: none; }
  .search-form { height: 64px; gap: 10px; }
  .search-form input { font-size: 1.05rem; }
  .search-list { grid-template-columns: 1fr; }
  .search-results { max-height: calc(100dvh - 180px); overflow-y: auto; }
}
/* Carrello: la colonna dell'immagine e' larga quanto l'immagine (prima la tagliava). */
@media (min-width: 801px) { .cart-line { grid-template-columns: 120px 1fr auto auto; } }
.cart-line-img { transform: none; padding: 6px; }
/* Lampade: avviso "paralume non incluso" in alto a sinistra sulla foto principale. */
.gallery-pill { position: absolute; bottom: 16px; left: 16px; z-index: 2; display: inline-flex; gap: 4px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--color-ink); font-size: .8rem; line-height: 1.2; text-decoration: none; }
.gallery-pill strong { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gallery-pill:hover strong { text-decoration: none; }
@media (max-width: 800px) { .gallery-pill { bottom: 12px; left: 12px; font-size: .75rem; padding: 7px 12px; } }
/* Descrizione, spedizioni e resi: a tutta larghezza sotto la scheda; il testo resta leggibile. */
.product-tabs { margin-top: 72px; }
.product-tab-panel { padding: 32px 0 8px; }
.product-tab-panel > * { max-width: 860px; }
@media (max-width: 800px) { .product-tabs { margin-top: 48px; } }
/* Colonna prodotto (misto 07 + 02): titolo, prezzo grande con le rate sotto in una riga;
   colore e misura con etichetta "Nome · valore"; misure a segmenti senza prezzo (il prezzo
   e' nel bottone); niente quantita' (si cambia nel carrello); rassicurazioni in una riga. */
.product-title-row h1 { margin: 0 0 18px; }
.product-title-row .product-price { font-size: 2rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.installments-plain { margin: 8px 0 0; font-size: .88rem; color: var(--color-muted); }
.purchase-box { margin-top: 44px; }
.variant-label { text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 400; margin-bottom: 14px; }
.variant-label .variant-label-value { color: var(--color-muted); font-weight: 400; }
.color-selector { margin-bottom: 36px; }
.variant-pills { gap: 4px; padding: 4px; background: #f3f3f3; border-radius: 12px; }
.variant-pill { background: transparent; border-radius: 9px; padding: 14px 8px; align-items: center; justify-content: center; text-align: center; }
.variant-pill:hover { background: rgba(255,255,255,.6); }
.variant-pill.selected { background: #fff; }
.variant-pill.selected .variant-pill-name { color: var(--color-ink); font-weight: 700; }
.variant-pill-name { font-weight: 500; color: var(--color-muted); font-size: .9rem; }
.variant-pill.disabled:hover { background: transparent; }
.cart-action-row { margin-top: 40px; }
.cart-action-row .btn-add-to-cart { flex: 1; gap: 10px; }
.product-reassure { display: flex; gap: 28px; flex-wrap: wrap; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--color-border); }
.product-reassure li { flex-direction: row; text-align: left; padding: 0; font-size: .84rem; }
.product-reassure li + li { border-left: 0; }
.product-reassure li > svg { display: none; }
@media (max-width: 640px) {
  .variant-pills[style*="--pill-cols: 4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .variant-pill { padding: 12px 2px; }
  .variant-pill-name { font-size: .78rem; }
  .product-reassure { gap: 8px 20px; }
}
/* Senza la quantita' il bottone ha spazio anche su telefono: testo leggibile e icona. */
@media (max-width: 640px) {
  .cart-action-row .btn-add-to-cart { font-size: .8rem; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  .cart-action-row .btn-add-to-cart::before { display: block; }
  .cart-action-row .btn-add-to-cart.is-sold-out::before { display: none; }
}
/* Colonna prodotto, rifinitura: gerarchia piu' netta e un solo ritmo verticale (40px tra i blocchi). */
.product-title-row h1 { font-size: 2.5rem; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 20px; }
.product-title-row .product-price { font-size: 1.75rem; }
.installments-plain { margin-top: 6px; font-size: .9rem; }
.purchase-box { margin-top: 40px; }
.color-selector { margin-bottom: 32px; }
.variant-label { font-size: .9rem; color: var(--color-muted); margin-bottom: 12px; }
.variant-label .variant-label-value { margin-left: 0; color: var(--color-ink); font-weight: 600; font-size: inherit; }
.variant-pill { padding: 15px 8px; }
.variant-pill-name { font-size: .92rem; }
.cart-action-row { margin-top: 40px; gap: 10px; }
.cart-action-row .btn-add-to-cart { min-height: 58px; font-size: .9rem; letter-spacing: .05em; }
.cart-action-row .wishlist-heart-btn, .cart-action-row .wishlist-btn { width: 58px; min-height: 58px; }
.product-reassure { margin-top: 40px; }
@media (max-width: 800px) { .product-title-row h1 { font-size: 1.9rem; } .product-title-row .product-price { font-size: 1.5rem; } }
@media (max-width: 640px) {
  .variant-pills[style*="--pill-cols: 4"], .variant-pills[style*="--pill-cols: 3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-pill { padding: 13px 6px; }
  .variant-pill-name { font-size: .86rem; }
}
/* Misure: scelta netta (nero pieno), le altre leggibili in nero normale, hover appena accennato
   e diverso dalla scelta, cosi' non sembrano due misure selezionate. */
.variant-pills { padding: 5px; gap: 5px; background: #f2f2f2; border-radius: 14px; }
.variant-pill { border-radius: 10px; background: transparent; transition: background .15s ease, color .15s ease; }
.variant-pill-name { color: var(--color-ink); font-weight: 500; letter-spacing: -.005em; }
.variant-pill:hover { background: #e6e6e6; }
.variant-pill.selected, .variant-pill.selected:hover { background: #555; }
.variant-pill.selected .variant-pill-name { color: #fff; font-weight: 600; }
.variant-pill.disabled .variant-pill-name { color: var(--color-muted); text-decoration: line-through; }
.variant-pill input:focus-visible + .variant-pill-name { outline: 2px solid var(--color-ink); outline-offset: 4px; border-radius: 4px; }
/* Categoria sopra il titolo; testo delle misure centrato anche in verticale (niente interlinea extra). */
.product-title-row .product-eyebrow { display: inline-block; margin: 0 0 12px; }
.variant-pill { min-height: 50px; }
.variant-pill-name { line-height: 1; display: block; }
/* Galleria in un solo riquadro: frecce ai lati, foto aggiuntive in piccolo in basso a destra. */
.gallery-main { margin-bottom: 0; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--color-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .9; transition: opacity .15s ease, background .15s ease; }
.gallery-arrow:hover { opacity: 1; background: #fff; }
.gallery-arrow--prev { left: 16px; }
.gallery-arrow--next { right: 16px; }
.gallery-mini { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.gallery-mini .gallery-thumb { width: 64px; height: 64px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; outline: 1.5px solid transparent; outline-offset: -1.5px; }
.gallery-mini .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: normal; }
.gallery-mini .gallery-thumb.active { outline-color: var(--color-ink); outline-width: 2px; outline-offset: -2px; }
.gallery-mini .gallery-thumb:hover { outline-color: #bdbdbd; }
.gallery-mini .gallery-thumb.active:hover { outline-color: var(--color-ink); }
@media (max-width: 800px) {
  .gallery-arrow { width: 38px; height: 38px; }
  .gallery-arrow--prev { left: 10px; } .gallery-arrow--next { right: 10px; }
  .gallery-mini { right: 12px; bottom: 12px; gap: 6px; }
  .gallery-mini .gallery-thumb { width: 46px; height: 46px; border-radius: 6px; }
}
/* Dettagli prodotto (variante 13): descrizione + scheda tecnica, poi spedizione e resi. Niente schede a linguette. */
.product-details { margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--color-border); }
.product-details-title { font-size: 1.6rem; letter-spacing: -.01em; margin: 0 0 40px; }
.product-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.product-details .product-description { font-size: 1rem; line-height: 1.75; color: var(--color-ink); margin: 0 0 24px; white-space: pre-line; }
.product-details .handmade-note { font-size: .86rem; color: var(--color-muted); line-height: 1.6; margin: 0; }
.product-specs { margin: 0; border-top: 1px solid var(--color-border); }
.product-specs > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.product-specs dt { font-size: .88rem; color: var(--color-muted); }
.product-specs dd { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--color-ink); }
.product-specs dd a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.product-specs--wide { margin-top: 56px; }
.product-specs--wide > div { grid-template-columns: 220px minmax(0, 760px); }
.product-specs--wide dd { color: var(--color-muted); }
@media (max-width: 800px) {
  .product-details { margin-top: 56px; padding-top: 40px; }
  .product-details-title { margin-bottom: 24px; }
  .product-details-grid { grid-template-columns: 1fr; gap: 40px; }
  .product-specs > div, .product-specs--wide > div { grid-template-columns: 1fr; gap: 6px; }
  .product-specs--wide { margin-top: 40px; }
}
/* Galleria (variante 07): colonna di miniature a sinistra, foto grande a destra. */
.product-gallery.has-thumbs { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: start; }
.gallery-rail { display: flex; flex-direction: column; gap: 10px; }
.gallery-rail .gallery-thumb { width: 84px; height: 84px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--color-product-bg); cursor: pointer; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .15s; }
.gallery-rail .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.gallery-rail .gallery-thumb.active { outline: 2px solid var(--color-ink); outline-offset: -2px; }
.gallery-rail .gallery-thumb:hover { outline-color: #bdbdbd; }
.gallery-rail .gallery-thumb.active:hover { outline-color: var(--color-ink); }
@media (max-width: 800px) {
  .product-gallery.has-thumbs { grid-template-columns: 1fr; gap: 10px; }
  .gallery-rail { flex-direction: row; order: 2; }
  .gallery-rail .gallery-thumb { width: 64px; height: 64px; }
}
/* Misure: fino a 5 su una riga (testo un filo piu' piccolo a 5); su telefono 2 per riga e
   l'ultima, se resta da sola, prende tutta la riga invece di stare in un angolo. */
.variant-pills[style*="--pill-cols: 5"] .variant-pill-name { font-size: .84rem; }
@media (max-width: 640px) {
  .variant-pills[style*="--pill-cols: 5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-pills .variant-pill:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Spedizione e resi: due riquadri grigi affiancati con i punti chiave, contatti e link sotto. */
.product-specs--wide { display: none; }
.product-service { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.product-service-box { background: #f5f5f5; border-radius: 16px; padding: 36px 40px; }
.product-service-box h3 { margin: 0 0 20px; font-size: 1.05rem; font-weight: 700; }
.product-service-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.product-service-box li { position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.55; color: var(--color-ink); }
.product-service-box li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink); }
.product-service-help { margin: 20px 0 0; font-size: .86rem; color: var(--color-muted); }
.product-service-help a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .product-service { grid-template-columns: 1fr; margin-top: 40px; }
  .product-service-box { padding: 26px 22px; }
}
/* Linea sottile tra le misure e il bottone, a meta' dello spazio. */
.cart-action-row { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-border); }
/* Misure: un solo passo di 6px ovunque (bordo, tra colonne, tra righe); angoli interni
   = angoli esterni meno il bordo, cosi' le pillole seguono la forma del contenitore. */
.variant-pills { padding: 6px; gap: 6px; border-radius: 15px; }
.variant-pill { margin: 0; min-height: 48px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
/* Colonna prodotto su desktop: un solo ritmo. 12px tra etichetta e scelta, 32px tra i
   gruppi (prezzo, colore, misura), 28px sopra e sotto la linea del bottone. La categoria
   parte allineata al bordo alto della foto. */
@media (min-width: 801px) {
  .product-view > div:last-child { padding-top: 0; }
  .product-title-row .product-eyebrow { margin: -3px 0 10px; line-height: 1.2; }
  .product-title-row h1 { margin-bottom: 16px; }
  .purchase-box { margin-top: 32px; }
  .purchase-box .color-selector { margin-bottom: 32px; }
  .variant-label { margin-bottom: 12px; line-height: 1.3; }
  .cart-action-row { margin-top: 28px; padding-top: 28px; }
}
/* Le foto su fondo bianco arrivano gia' ritagliate e centrate con il loro margine:
   niente ingrandimento a mano, che spostava il pezzo e lo tagliava ai bordi. */
.product-card .card-image, .main-product-image { transform: none; }
.product-card:hover .card-image { transform: scale(1.03); }
/* Card: il pezzo arriva ritagliato al bordo e occupa sempre il 75% del riquadro,
   con lo stesso spazio (12,5%) su ogni lato, qualunque sia la forma. */
.product-card .card-image, .product-grid .product-card .card-image { padding: 12.5%; transform: none; }
.product-card:hover .card-image { transform: scale(1.03); }
.wl-media img { padding: 12.5%; box-sizing: border-box; transform: none; }
.wl-card:hover .wl-media img { transform: scale(1.03); }
/* Paralume: le basi con cui si abbina, sotto il bottone. */
.shade-lamps { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.shade-lamps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shade-lamp { display: flex; flex-direction: column; gap: 2px; color: var(--color-ink); text-decoration: none; }
.shade-lamp-img { display: block; aspect-ratio: 1 / 1; background: var(--color-product-bg); border-radius: 10px; overflow: hidden; margin-bottom: 8px; transition: outline-color .15s; outline: 1.5px solid transparent; outline-offset: -1.5px; }
.shade-lamp:hover .shade-lamp-img { outline-color: var(--color-ink); }
.shade-lamp-img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; mix-blend-mode: multiply; display: block; }
.shade-lamp-name { font-size: .88rem; font-weight: 600; }
.shade-lamp-price { font-size: .8rem; color: var(--color-muted); }
.shade-lamps-note { margin: 14px 0 0; font-size: .82rem; color: var(--color-muted); }
/* Colonna destra centrata in verticale rispetto alla foto (desktop). */
@media (min-width: 901px) { .product-view { align-items: center; } }
/* Rate: importo in evidenza e logo PayPal vero, in una riga. */
.installments-plain { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 14px; border-radius: 999px; background: #f4f4f4; font-size: .88rem; color: var(--color-ink); }
.installments-plain strong { font-weight: 700; }
.installments-plain img { display: block; height: 16px; width: auto; }
/* Spedizione e resi: quattro numeri chiave in fila, linee sottili, nota sotto. */
.product-service { display: none; }
.product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.product-facts > div { display: flex; flex-direction: column; gap: 8px; padding: 36px 28px; }
.product-facts > div:first-child { padding-left: 0; }
.product-facts > div + div { border-left: 1px solid var(--color-border); }
.product-facts strong { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.product-facts span { font-size: .88rem; color: var(--color-muted); line-height: 1.5; max-width: 220px; }
.product-facts-note { margin: 24px 0 0; max-width: 860px; font-size: .86rem; line-height: 1.7; color: var(--color-muted); }
.product-service-help { margin-top: 10px; }
@media (max-width: 800px) {
  .product-facts { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .product-facts > div { padding: 24px 16px 24px 0; }
  .product-facts > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .product-facts > div:nth-child(even) { padding-left: 16px; }
  .product-facts > div:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .product-facts strong { font-size: 1.5rem; }
}
/* Gift card, "Come funziona": fascia grigia a tutta larghezza, numeri grandi, linea sopra ogni passo. */
.giftcard-steps { position: relative; padding: 96px 0 104px; border-top: 0; }
.giftcard-steps { background: #f4f4f4; box-shadow: 0 0 0 100vmax #f4f4f4; clip-path: inset(0 -100vmax); }
.giftcard-steps h2 { font-size: 2.2rem; letter-spacing: -.02em; margin: 0 0 56px; }
.giftcard-steps ol { gap: 40px; }
.giftcard-steps li { border-top: 1px solid #d6d6d6; padding-top: 28px; }
.giftcard-steps li .giftcard-steps-n { display: block; width: auto; height: auto; background: none; color: var(--color-ink); border-radius: 0; font-size: 4rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; margin: 0 0 28px; }
.giftcard-steps h3 { font-size: 1.2rem; margin-bottom: 10px; }
.giftcard-steps p:not(.product-eyebrow) { font-size: .95rem; line-height: 1.7; color: var(--color-muted); max-width: 320px; }
@media (max-width: 800px) {
  .giftcard-steps { padding: 64px 0 72px; }
  .giftcard-steps h2 { font-size: 1.7rem; margin-bottom: 36px; }
  .giftcard-steps ol { grid-template-columns: 1fr; gap: 32px; }
  .giftcard-steps li .giftcard-steps-n { font-size: 3rem; margin-bottom: 18px; }
}
@media (max-width: 900px) { .giftcard-steps li { display: block; } .giftcard-steps li .giftcard-steps-n { width: auto; height: auto; } }
/* Rate: solo testo con logo, senza pillola. */
.installments-plain { padding: 0; background: none; border-radius: 0; margin-top: 10px; }

/* Miniatura della scena: sparisce per le misure che non ne hanno una. */
.gallery-thumb[hidden] { display: none; }

/* Credito studio nel footer */
.footer-credit { margin: 10px 0 0; font-size: .75rem; color: var(--color-muted); }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--color-ink); }

/* Gift card "Come funziona": via l'alone bianco dei numeri (residuo dello stile a cerchi),
   numero e titolo sulla stessa riga visiva, testo piu' leggibile. */
.giftcard-steps li .giftcard-steps-n { box-shadow: none; font-variant-numeric: tabular-nums; color: #b5b5b5; }
.giftcard-steps li { padding-top: 32px; }
.giftcard-steps h3 { font-size: 1.25rem; letter-spacing: -.01em; }
.giftcard-steps p:not(.product-eyebrow) { color: #555; }

/* Fondo pagina: riga 1 copyright | link legali, riga 2 (sotto un filo) pagamenti | credito studio. */
.footer-bottom { padding: 28px 0 32px; }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 40px; flex-wrap: wrap; }
.footer-bottom-row--sub { margin-top: 20px; padding-top: 20px; background: linear-gradient(var(--color-border), var(--color-border)) 0 -20px / 100% 1px no-repeat content-box; background-clip: border-box; }
.footer-bottom .footer-legal { margin: 0; gap: 6px 24px; }
.footer-copy, .footer-credit, .footer-payments span { font-size: .8rem; color: var(--color-muted); }
.footer-payments { gap: 14px; }
.footer-payments span { margin-right: 4px; }
.footer-credit { margin: 0; }
.footer-credit a { color: var(--color-ink); text-decoration: none; font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .footer-bottom-row { flex-direction: column; align-items: flex-start; }
}

/* Pagamenti nel fondo pagina: loghi in piccole schede bianche tutte uguali, senza vuoti. */
.footer-payments { gap: 8px; }
.footer-payments .footer-payments-label { margin-right: 10px; }
.footer-payments .pay-chip { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 52px; padding: 0 12px; background: #fff; border-radius: 6px; margin: 0; }
.footer-payments .pay-chip img { height: 16px; width: auto; }

/* Rigo rate in pagina prodotto: testo + loghi in schede come nel fondo pagina. */
.installments-plain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0; padding: 0; background: none; font-size: .88rem; color: var(--color-ink); }
.installments-plain[hidden] { display: none; }
.installments-plain-logos { display: inline-flex; align-items: center; gap: 6px; }
.pay-chip { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 52px; padding: 0 12px; background: #f4f4f4; border-radius: 6px; }
.pay-chip img { display: block; height: 16px; width: auto; }
.installments-plain-sep { width: 1px; height: 18px; background: var(--color-border); margin: 0 4px; }
@media (max-width: 700px) {
  .footer-payments .footer-payments-label { flex-basis: 100%; margin: 0 0 4px; }
  .site-footer a[href^="mailto:"] { white-space: nowrap; font-size: .8rem; }
}

/* Pagina 404: testo grande a sinistra, ricerca, categorie con foto sotto. */
.nf { padding: clamp(40px, 5vw, 64px) 0; }
.nf-head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.nf-code { margin: 0 0 14px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.nf h1 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.nf-text { margin: 18px 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--color-muted); max-width: 46ch; }
.nf-search { display: flex; align-items: center; gap: 10px; margin-top: 30px; padding: 6px 6px 6px 18px; background: #f4f4f4; border-radius: 999px; max-width: 520px; color: var(--color-muted); }
.nf-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--color-ink); padding: 10px 0; outline: none; }
.nf-search .btn { border-radius: 999px; padding: 12px 22px; margin: 0; }
.nf-back { display: inline-block; margin-top: 18px; font-size: .92rem; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.nf-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.nf .category-nav { margin: 0; }
/* 404 centrata */
.nf-head { margin-left: auto; margin-right: auto; text-align: center; }
.nf-text { margin-left: auto; margin-right: auto; }
.nf-search { margin-left: auto; margin-right: auto; text-align: left; }

/* Iscrizione newsletter confermata: completa il profilo */
.nl-done { max-width: 480px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.nl-done > svg { color: var(--color-ink); margin-bottom: 18px; }
.nl-done h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; }
.nl-done > p { margin: 14px 0 28px; color: var(--color-muted); line-height: 1.6; }
.nl-profile { width: 100%; text-align: left; display: grid; gap: 4px; }
.nl-phone { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px; }
.nl-phone select, .nl-phone input { width: 100%; min-width: 0; }
.nl-profile small { display: block; margin-top: 6px; font-size: .8rem; color: var(--color-muted); line-height: 1.45; }
.nl-profile .btn { margin-top: 12px; }
.nl-done .alert { width: 100%; text-align: left; margin-bottom: 16px; }

/* Telefono: hero con aria sopra e sotto, uguale, e striscia vantaggi piu' ariosa. */
@media (max-width: 640px) {
  .home-hero { padding: 48px 0 84px; }
  .home-hero .shop-lead { margin-bottom: 28px; }
  .home-usp { gap: 8px; margin-bottom: 36px; padding: 22px 16px; }
}

/* Newsletter su telefono: campo e pulsante separati e grandi, niente riquadro bianco attorno. */
@media (max-width: 520px) {
  .newsletter-banner { padding-top: 56px; padding-bottom: 56px; }
  .newsletter-banner h2 { font-size: 1.85rem; line-height: 1.15; }
  .newsletter-banner p { margin-bottom: 24px; font-size: .95rem; }
  .newsletter-banner .newsletter-form-row { flex-direction: column; gap: 10px; padding: 0; background: none; border-radius: 0; }
  .newsletter-banner .newsletter-input { flex: none; height: 54px; padding: 0 18px; background: #fff; border-radius: 12px; text-align: center; }
  .newsletter-banner .newsletter-submit { height: 54px; width: 100%; padding: 0; border-radius: 12px; background: #fff; color: var(--color-ink); font-size: .85rem; letter-spacing: .08em; }
  .newsletter-banner .newsletter-submit:hover { background: #f2f2f2; color: var(--color-ink); }
  .newsletter-banner .newsletter-consent { justify-content: flex-start; align-items: flex-start; gap: 12px; margin: 18px auto 0; max-width: 34ch; font-size: .78rem; line-height: 1.5; }
  .newsletter-banner .newsletter-consent input { margin-top: 1px; }
}

/* Menu su telefono: categorie con la loro foto, voci piu' compatte, contatti in fondo. */
.main-nav-thumb { display: none; }
@media (max-width: 800px) {
  .main-nav-links { padding: 4px 0 16px; }
  .main-nav-links a, .main-nav-links a.active-link { gap: 14px; padding-top: 10px; padding-bottom: 10px; font-size: 1.15rem; font-weight: 600; }
  .main-nav-links a > span { flex: 1; }
  .main-nav-thumb { display: block; width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; background: #f2f2f2; }
  .main-nav-links a:not(:has(.main-nav-thumb)) > span { padding-left: 62px; }
  .main-nav-links a.active-link::before { display: none; }
  .main-nav-links a.active-link > span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
}

/* Footer su telefono: centrato e compatto, negozio e bistrot affiancati, link in righe. */
@media (max-width: 640px) {
  .site-footer { padding-top: 48px; text-align: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 12px; padding-bottom: 0; }
  .footer-grid > div { border-bottom: 0 !important; border-top: 0 !important; padding: 0 0 28px !important; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .footer-logo { margin: 0 auto 14px; height: 48px; }
  .footer-brand p { font-size: .82rem; margin-bottom: 0; }
  .footer-brand p + p { display: none; }
  .footer-grid > div:nth-child(2) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 8px 12px; }
  .footer-grid > div:nth-child(2) h4:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .footer-grid > div:nth-child(2) p:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .footer-grid > div:nth-child(2) h4:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .footer-grid > div:nth-child(2) p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .footer-grid > div:nth-child(2) p { margin: 0; padding: 14px 6px; overflow-wrap: anywhere; background: #f5f5f5; border-radius: 12px; font-size: .78rem; line-height: 1.7; }
  .footer-grid > div:nth-child(3), .footer-grid > div:nth-child(4), .footer-grid > div:nth-child(5) { grid-column: 1 / -1; }
  .footer-grid h4 { margin-bottom: 12px; font-size: .74rem; letter-spacing: .12em; }
  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .footer-links li { margin: 0; }
  .footer-links a { font-size: .9rem; }
  .footer-bottom { padding: 24px 0 28px; }
  .footer-bottom-row { flex-direction: column; align-items: center !important; text-align: center; gap: 12px; }
  .footer-bottom .footer-legal { justify-content: center; gap: 6px 16px; }
  .footer-payments { justify-content: center; }
  .footer-payments .footer-payments-label { flex-basis: 100%; text-align: center; }
}

/* Telefono: barra in alto piu' sottile, testo su una riga. */
@media (max-width: 640px) { .announce-bar { font-size: 10.5px; letter-spacing: .02em; padding: 8px 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* Telefono: pezzi nelle pillole del titolo un po' piu' grandi. */
@media (max-width: 640px) {
  .home-hero h1 .hero-cap img { max-height: .7em; max-width: .96em; }
  .home-hero h1 .hero-cap img.hero-cap-wide { max-width: 1.02em; max-height: .57em; }
}