:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-card-bg: #f2ede6;
  --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: 2px;
  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: 8px;
  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: 34px; width: auto; display: block; }
.footer-logo { height: 30px; 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: 42px; }
  .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: 16px 0;
  font-size: .78rem;
  background: #f7f7f7;
}
@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: 46px; 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: 10px; 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: 0;
  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: 0;
  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: 0;
  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: 0;
  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: 8px;
  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: 0;
  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: 0;
  border: 1px solid var(--color-border);
  background: var(--color-product-bg);
}
.card-media-link { display: block; }
.product-card .card-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  object-position: center;
  padding: 22px;
  box-sizing: border-box;
  background: var(--color-product-bg);
  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: 20px;
  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-note { color: var(--color-muted); font-size: .9rem; margin: 0; }
.wishlist-empty { text-align: center; padding: 64px 20px; color: var(--color-muted); }
.wishlist-empty svg { color: var(--color-border); margin-bottom: 14px; }
.wishlist-empty p { margin: 0 0 18px; font-size: 1rem; }

/* 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: 30px;
  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: 5px; }
.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; }
.main-product-image { width: 100%; border-radius: 0; margin-bottom: 12px; background: var(--color-product-bg); 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: 0;
  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: 0;
  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: 10px;
    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: 0;
  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: 14px; }
/* 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: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 56px 16px 16px;
}
.cart-line-media { grid-area: img; display: block; }
.cart-line-img { width: 96px; height: 96px; object-fit: contain; padding: 8px; box-sizing: border-box; border-radius: 10px; background: var(--color-product-bg); 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: 16px; 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; }
.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: 10px; 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: 10px; }

.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: 14px; 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: 20px; 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: 10px; 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: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 28px; margin-bottom: 20px; }
.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: 8px;
  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: 8px; 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: 10px;
  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: 16px;
  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: 12px; 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: 999px; }
  .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: 400; text-transform: uppercase; }
.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) {
  .product-gallery { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
  .product-gallery .gallery-main { grid-column: 2; grid-row: 1; }
  .product-gallery .gallery-thumbs { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; align-content: start; }
}

.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; }
}