/**
 * style.css — Stili specifici del progetto
 * Porting diretto dai file CSS del mockup (ordine di dipendenza invariato:
 * base -> components -> layout -> shop -> home -> product -> cart -> account).
 * Caricato dopo variables.css (= tokens.css del mockup) e dopo base.css del boilerplate.
 */

/* ============================================================
   MOCKUP: assets/css/base.css
   ============================================================ */
/* ============ RESET E BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

/* Regola di sicurezza globale: l'attributo hidden deve SEMPRE nascondere
   l'elemento, indipendentemente da eventuali regole .btn/.icon-count/ecc.
   con pari specificità che impostano display altrove nel CSS. Senza
   questa regola un elemento con hidden può restare visibile e cliccabile
   (bug reale riscontrato sul pulsante di conferma ordine). */
[hidden] { display: none !important; }

/* Regola di sicurezza globale contro l'overflow orizzontale nelle griglie
   a 1 colonna su mobile che diventano a 2+ colonne da desktop (prodotto,
   carrello, checkout, account, contatti, shop, collezioni, homepage...).
   Senza `min-width:0` sui figli diretti, CSS Grid assegna alla colonna una
   larghezza minima pari al min-content del contenuto interno, facendo
   eccedere la griglia oltre il contenitore su viewport stretti. Gli
   elementi con scroll orizzontale proprio (.product-rail, .gallery-thumbs,
   ecc.) continuano a gestire il proprio overflow interno normalmente. */
.account-layout > *,
.contact-layout > *,
.cart-page-layout > *,
.checkout-layout > *,
.dashboard-cards > * {
  min-width: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  /* Guardia di sicurezza — bug reale corretto: gli elementi con scroll
     orizzontale proprio (.product-rail, .gallery-thumbs) sono figli diretti
     dei container flex di Elementor (.e-con), che di default assegnano al
     figlio una larghezza minima pari al min-content del contenuto interno
     (stesso meccanismo già documentato sopra per le griglie a colonne) —
     senza questo overflow-x sul body, la rail forzava tutta la pagina a
     scorrere in orizzontale invece di scorrere solo al proprio interno. */
  overflow-x: hidden;
  background-color: var(--color-ink);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: var(--fs-body-lg); } }

img, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: 0.005em;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --color-focus (champagne) ha ottimo contrasto sulle superfici scure, che
   sono la maggioranza del sito, ma sotto la soglia minima 3:1 su avorio
   (~1.8:1 misurato) — invisibile per chi naviga da tastiera. Le superfici
   chiare e i pannelli sovrapposti che non usano le classi utility .surface-*
   (pannello PDP, pannello collezione, freccette rail su foto) hanno quindi
   un colore di focus più scuro, sempre ad alto contrasto sul proprio sfondo. */
.surface-light :focus-visible,
.surface-ivory :focus-visible,
.surface-parchment :focus-visible,
.pdp-hero-panel :focus-visible,
.collection-intro-panel :focus-visible,
.rail-nav-btn:focus-visible {
  outline-color: var(--color-chestnut);
}

/* ============ SUPERFICI (alternanza scura/chiara per dare ritmo) ============
   Ogni sezione della pagina dichiara una superficie: il colore di testo,
   dei bordi e degli elementi muted si adatta di conseguenza. Non esiste
   più un'unica superficie scura ripetuta identica su tutte le pagine. */
.surface-ink { background-color: var(--color-ink); color: var(--color-text); }
.surface-carbon { background-color: var(--color-carbon); color: var(--color-text); }
.surface-midnight { background-color: var(--color-midnight); color: var(--color-text); }
.surface-forest { background-color: var(--color-forest); color: var(--color-text); }
.surface-light,
.surface-ivory { background-color: var(--color-ivory); color: var(--color-text-on-light); }
.surface-parchment { background-color: var(--color-parchment); color: var(--color-text-on-light); }

.surface-light .text-muted,
.surface-ivory .text-muted,
.surface-parchment .text-muted { color: var(--color-text-on-light-muted); }
.surface-light .eyebrow,
.surface-ivory .eyebrow,
.surface-parchment .eyebrow { color: var(--color-chestnut); }
.surface-light .label-field,
.surface-ivory .label-field,
.surface-parchment .label-field { color: var(--color-text-on-light-muted); }

/* Retro-compatibilità: alcune pagine non ancora ricostruite referenziano
   ancora .surface-charcoal (v1) — mappata sulla nuova superficie carbon. */
.surface-charcoal { background-color: var(--color-carbon); color: var(--color-text); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  font-weight: 600;
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--color-champagne);
  color: var(--color-ink);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.text-muted { color: var(--color-text-muted); }

::selection { background: var(--color-champagne); color: var(--color-ink); }

/* ============================================================
   MOCKUP: assets/css/components.css
   ============================================================ */
/* ============ BOTTONI ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
  min-height: 48px;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background-color: var(--color-champagne); color: var(--color-ink); }
.btn-primary:hover:not(:disabled) { background-color: var(--color-champagne-light); }

.btn-dark { background-color: var(--color-ink); color: var(--color-text); border-color: var(--color-line-dark); }
.btn-dark:hover:not(:disabled) { background-color: var(--color-carbon-2); }

.btn-outline { background-color: transparent; border-color: currentColor; }
.btn-outline:hover:not(:disabled) { background-color: rgba(205, 179, 127, 0.14); }

.btn-ghost { background-color: transparent; }
.btn-ghost:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.07); }
.surface-light .btn-ghost:hover:not(:disabled),
.surface-ivory .btn-ghost:hover:not(:disabled),
.surface-parchment .btn-ghost:hover:not(:disabled) { background-color: rgba(0, 0, 0, 0.05); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.7rem 1.2rem; font-size: 0.75rem; min-height: 40px; }

/* ============ FORM ============ */
.field { display: block; margin-bottom: var(--space-4); }
.label-field {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
/* Richiesta esplicita: occhiolino mostra/nascondi su tutti i campi password
   (login/registrazione/reset password) — nessun campo password nel sito ne
   era dotato. */
.password-field-wrap { display: grid; }
.password-field-wrap .input { grid-area: 1 / 1; padding-right: 2.8rem; }
.password-toggle {
  grid-area: 1 / 1; justify-self: end; align-self: center; margin-right: 0.9rem;
  background: none; border: none; padding: 0.3rem; cursor: pointer; line-height: 0;
  color: var(--color-text-on-light-muted); display: flex; align-items: center;
}
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.input, select.input, textarea.input {
  width: 100%;
  background-color: var(--color-carbon);
  border: 1px solid var(--color-line-dark);
  color: var(--color-text);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease);
}
.surface-light .input,
.surface-ivory .input,
.surface-parchment .input { background-color: var(--color-white); color: var(--color-text-on-light); border-color: var(--color-line-light); }
.input:focus { border-color: var(--color-champagne); }
.input-error { border-color: var(--color-error) !important; }
.error-message { margin-top: var(--space-2); font-size: 0.8rem; color: var(--color-error); }
.success-message { margin-top: var(--space-2); font-size: 0.8rem; color: var(--color-success); }
.checkbox-field { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-body-sm); }
.checkbox-field input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--color-champagne); flex-shrink: 0; }

/* ============ BADGE ============ */
.badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
}
.badge-gold { background-color: var(--color-champagne); color: var(--color-ink); }
.badge-success { background-color: var(--color-success); color: #fff; }
.badge-neutral { background-color: rgba(13, 12, 10, 0.85); color: var(--color-text); }

/* ============ CARD SUPERFICIE ============ */
.surface-card { background-color: var(--color-carbon); border: 1px solid var(--color-line-dark); border-radius: var(--radius-md); }

/* ============ TOAST ============ */
.toast-viewport {
  position: fixed;
  bottom: var(--space-4); left: var(--space-4); right: var(--space-4);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 40rem) {
  .toast-viewport { left: auto; right: 1.5rem; max-width: 400px; }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line-dark);
  background: var(--color-carbon-2);
  font-size: var(--fs-body-sm);
  box-shadow: var(--shadow-card);
  animation: toast-in var(--dur-base) var(--ease-editorial);
}
.toast-success { border-color: var(--color-success); background: var(--color-success-bg); }
.toast-error { border-color: var(--color-error); background: var(--color-error-bg); }
.toast-dismiss { font-size: 0.75rem; opacity: 0.7; flex-shrink: 0; }
.toast-dismiss:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ============ DRAWER / OVERLAY ============ */
.overlay-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 12, 10, 0.65);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.overlay-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--color-carbon);
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  transition: transform var(--dur-slow) var(--ease-editorial);
}
.drawer-right { right: 0; transform: translateX(100%); }
.drawer-left { left: 0; transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }
.drawer-wide { max-width: 580px; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-line-dark);
  flex-shrink: 0;
}
.drawer-body { flex: 1; overflow-y: auto; }
.drawer-footer { padding: var(--space-5); border-top: 1px solid var(--color-line-dark); flex-shrink: 0; }

/* ============ MODALE ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 12, 10, 0.7);
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-backdrop.is-open { display: flex; }
.modal {
  width: 100%; max-width: 580px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-carbon);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}
.modal-wide { max-width: 920px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line-dark);
  position: sticky; top: 0;
  background: var(--color-carbon);
}
.modal-content { padding: var(--space-6); }

/* ============ ACCORDION ============
   Padding generoso e testo leggibile (>=16px) come richiesto dal brief:
   niente più righe sottili con microtesti. */
.accordion { border-top: 1px solid var(--color-line-dark); }
.accordion-item { border-bottom: 1px solid var(--color-line-dark); }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 0.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
}
.accordion-trigger .chevron { transition: transform var(--dur-base) var(--ease); flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease); }
.accordion-panel-inner { padding: 0 0.1rem 1.4rem; font-size: 1rem; color: var(--color-text-muted); line-height: 1.75; }

/* ============ SKELETON LOADER ============ */
.skeleton {
  background: linear-gradient(90deg, var(--color-carbon) 25%, var(--color-carbon-2) 50%, var(--color-carbon) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ COUNT BADGE (icone header) ============ */
.icon-count[hidden] { display: none; }
.icon-count {
  position: absolute; top: -3px; right: -3px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-champagne);
  color: var(--color-ink);
  font-size: 0.6rem;
  font-weight: 700;
}

/* ============ STAR RATING ============ */
.rating-stars { color: var(--color-champagne); letter-spacing: 1px; }
.rating-stars .empty { color: var(--color-line-dark); }

/* ============================================================
   MOCKUP: assets/css/layout.css
   ============================================================ */
/* ============ MOUNT WRAPPER ============
   #site-header è solo un punto di montaggio per layout.js: deve sparire
   dall'albero di layout (display:contents) perché altrimenti diventa lui
   stesso il containing block di .site-header (position:sticky) — alto
   esattamente quanto i suoi due figli, quindi l'header può restare
   "agganciato" solo per lo spazio della service bar prima di scomparire
   con l'intero contenitore. Bug reale verificato con scroll reale. */
#site-header { display: contents; }

/* ============ SERVICE BAR ============ */
.service-bar {
  background: var(--color-ink);
  color: var(--color-text-muted);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 1rem;
  display: none;
}
@media (min-width: 48rem) { .service-bar { display: block; } }

/* ============ HEADER ============
   Due stati: sovrapposto all'hero (trasparente, testi chiari su foto) e
   "atterrato" dopo lo scroll o su pagine senza hero (fondo pieno, altezza
   leggermente ridotta, ombra sottile invece di un bordo netto). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  transition: background-color var(--dur-base) var(--ease-editorial), box-shadow var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
  background-color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-line-dark);
}
.site-header.is-transparent {
  background-color: transparent;
  box-shadow: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  min-height: var(--header-h);
}
.site-header.is-transparent .header-inner { padding-block: var(--space-5); }
.header-left, .header-right { display: flex; align-items: center; gap: 0.15rem; }
.header-brand-group { display: flex; align-items: center; gap: 3rem; }

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-champagne-light);
  white-space: nowrap;
}
.logo img { height: 32px; width: auto; display: block; }
.logo .logo-sub { opacity: 0.7; font-size: 0.8em; }
/* Sopra i ~360px c'è margine per il trattamento più generoso del logo. */
@media (min-width: 23rem) {
  .logo { gap: var(--space-3); font-size: 1.55rem; letter-spacing: 0.1em; }
  .logo img { height: 38px; }
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease);
}
@media (min-width: 23rem) { .icon-btn { width: 46px; height: 46px; } }
.icon-btn:hover { background-color: rgba(255, 255, 255, 0.08); }
.icon-btn svg { width: 22px; height: 22px; }

/* Nav desktop */
.main-nav { display: none; }
@media (min-width: 74rem) {
  .main-nav { display: block; }
  .main-nav > ul { display: flex; align-items: center; gap: 2.4rem; }
  .main-nav > ul > li { position: relative; }
  .nav-link {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 1.75rem 0;
    font-family: var(--font-body);
    font-size: var(--fs-nav);
    letter-spacing: 0.03em;
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav-link:hover, .nav-link:focus-visible { color: var(--color-champagne-light); }
}
.mobile-menu-trigger { display: inline-flex; }
@media (min-width: 74rem) { .mobile-menu-trigger { display: none; } }
.header-account-desktop, .header-wishlist-desktop { display: none; }
@media (min-width: 40rem) {
  .header-account-desktop, .header-wishlist-desktop { display: inline-flex; }
}

/* ============ MEGAMENU ============ */
/* Larghezza adattata al contenuto reale (max-content, con un minimo e un
   massimo), non fissa uguale per ogni voce: Donna/Collezioni hanno 3
   colonne (+ una scheda campagna per Donna), Uomo/Borse & Accessori solo 2
   (nessuna collezione reale li rappresenta — vedi CLAUDE.md). Con una
   larghezza fissa uguale per tutti, i menu con meno colonne lasciavano uno
   spazio vuoto a destra che si notava poco solo perché dello stesso colore
   dello sfondo — non una vera soluzione, solo un difetto invisibile per
   caso. Ogni menu ora è largo esattamente quanto il proprio contenuto. */
.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  width: max-content;
  max-width: min(920px, 92vw);
  min-width: 20rem;
  background: var(--color-carbon);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-editorial), transform var(--dur-base) var(--ease-editorial), visibility var(--dur-base);
  z-index: 40;
}
.nav-item.is-open .megamenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.megamenu-grid {
  display: flex;
  gap: 2.5rem;
  padding: 2.25rem;
}
.megamenu-col { width: 10.5rem; flex-shrink: 0; }
.megamenu-col-title { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-champagne-light); margin-bottom: 0.9rem; }
.megamenu-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.megamenu-col a { font-size: 0.9rem; color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease); }
.megamenu-col a:hover { color: var(--color-text); }

/* Campagna editoriale: foto reale + collezione in evidenza + CTA, non un
   semplice link-immagine. Larghezza fissa propria (più larga di una
   colonna di link, per via della foto) invece di una quota di griglia. */
.megamenu-campaign { display: flex; flex-direction: column; width: 14rem; flex-shrink: 0; }
.megamenu-campaign-media { display: block; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); }
.megamenu-campaign-media img  { width: 100% !important; aspect-ratio: 3/4; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease-editorial); }
.megamenu-campaign:hover .megamenu-campaign-media img { transform: scale(1.04); }
.megamenu-campaign-eyebrow { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.megamenu-campaign-name { font-size: 1.15rem; margin-top: 0.2rem; }
.megamenu-campaign-concept { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.megamenu-campaign-cta { margin-top: 0.85rem; align-self: flex-start; }
.megamenu-soon-badge {
  display: inline-block; margin-left: 0.4rem;
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-gold-light); border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-sm); padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

/* ============ MENU MOBILE ============
   Drawer full-screen (non una striscia da 420px): occupa l'intero
   viewport su mobile/tablet stretti, con un'apertura editoriale
   (fotografia + firma) sopra la navigazione gerarchica. */
.drawer-fullscreen { max-width: 100%; }
@media (min-width: 40rem) { .drawer-fullscreen { max-width: 420px; } }
.drawer-fullscreen .drawer-header { padding-top: max(1.1rem, env(safe-area-inset-top)); }
.drawer-fullscreen .mobile-nav-footer-links { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }

.mobile-menu-intro { position: relative; height: 130px; flex-shrink: 0; overflow: hidden; }
.mobile-menu-intro img { width: 100%; height: 100%; object-fit: cover; }
.mobile-menu-intro-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,12,10,0.85), rgba(13,12,10,0.25)); display: flex; align-items: flex-end; padding: 1rem 1.25rem; }
.mobile-menu-intro-overlay img.pdp-monogram { width: 22px; height: 22px; border-radius: 2px; margin-right: 0.6rem; }
.mobile-menu-intro-overlay span { color: var(--color-champagne-light); font-family: var(--font-display); font-size: 1.05rem; }

.mobile-nav-search { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.9rem; }

.mobile-nav-list > li { border-bottom: 1px solid var(--color-line-dark); }
.mobile-nav-toplink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  min-height: 52px;
}
.mobile-nav-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease); background: var(--color-carbon-2); }
.mobile-nav-panel-inner { padding: 0.3rem 1.25rem 1.1rem; }
.mobile-nav-panel a {
  display: block; padding: 0.65rem 0.25rem;
  font-size: 0.9rem; color: var(--color-text-muted);
  min-height: 44px; line-height: 1.9;
}
.mobile-nav-panel .see-all { color: var(--color-champagne-light); font-weight: 600; }

.mobile-nav-footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; padding: 1.25rem; }
.mobile-nav-footer-links a { font-size: 0.85rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.4rem; }

/* ============ SEARCH OVERLAY ============ */
.search-panel { padding: 1.75rem 1.5rem; }
.search-input-row { position: relative; }
.search-input-row input { padding-right: 2.8rem; height: 56px; font-size: 1.05rem; font-family: var(--font-display); }
.search-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-result-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
}
.search-result-item:hover { background: var(--color-carbon-2); }
.search-result-item img { width: 72px; aspect-ratio: 4/5; object-fit: cover; flex-shrink: 0; border-radius: var(--radius-sm); }
.search-results-list { display: flex; flex-direction: column; gap: 0.25rem; }
.search-result-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.search-result-title { font-family: var(--font-display); font-size: 0.95rem; color: var(--color-text); }
.search-result-price { font-size: 0.8rem; color: var(--color-text-muted); }
.search-results-empty { padding: 0.5rem; }

/* ============ FOOTER ============ */
.site-footer { background: var(--color-ink); border-top: 1px solid var(--color-line-dark); padding-top: 4rem; font-size: 0.875rem; }
/* Sotto i 56rem, brand e colonne di link si impilano (spazio orizzontale
   insufficiente per stare affiancati). Da 56rem in su, il blocco brand ha
   una colonna propria più stretta a sinistra e le colonne di link occupano
   il resto a destra — non più impilati a piena larghezza, che con un
   contenuto stretto (il form newsletter ha un max-width proprio) lasciava
   un vuoto sproporzionato a destra dell'intera sezione. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 56rem) { .footer-grid { grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 3rem; align-items: start; } }
.footer-brand-col { grid-column: 1 / -1; }
@media (min-width: 56rem) { .footer-brand-col { grid-column: 1; } }
.footer-links-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; grid-column: 1 / -1; }
@media (min-width: 40rem) { .footer-links-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56rem) { .footer-links-cols { grid-column: 2; grid-template-columns: repeat(3, 1fr); } }
/* 6 colonne footer (Donna/Stivali/Uomo/Borse & Accessori/Collezioni/Assistenza)
   — 3x2 su ogni viewport da qui in su, mai 5+1 (era repeat(5, 1fr) quando le
   colonne erano 5, prima dell'aggiunta di Stivali: lasciato a 5 produceva una
   riga da 5 + una riga orfana con la sola colonna Assistenza). */
.footer-logo { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.25rem; color: var(--color-champagne-light); }
.footer-logo img { border-radius: 2px; }
.footer-logo-sub { font-size: 0.65em; opacity: 0.75; text-transform: none; letter-spacing: 0.04em; display: block; font-family: var(--font-body); margin-top: 0.15rem; }
.footer-manifesto { font-family: var(--font-display); font-size: 1.2rem; margin-top: 1.1rem; color: var(--color-text); max-width: 22rem; }
.footer-col-title { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-champagne-light); margin-bottom: 0.9rem; }
.footer-payments { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; padding-block: 1.25rem; border-top: 1px solid var(--color-line-dark); font-size: 0.8rem; }
.footer-payments-label { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.footer-payments-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.payment-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  color: var(--color-text-muted); font-size: 0.78rem;
}
.payment-badge svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-champagne-light); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: var(--color-text-muted); }
.footer-col a:hover { color: var(--color-text); }
.footer-bottom { border-top: 1px solid var(--color-line); padding: 1.5rem 0; }
.footer-bottom-inner {
  display: flex; flex-direction: column; gap: 0.85rem;
  align-items: center; text-align: center;
  font-size: 0.75rem; color: var(--color-text-muted);
}
@media (min-width: 48rem) { .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-social { display: flex; gap: 1rem; align-items: center; }
/* Profilo non ancora confermato dal cliente: testo semplice, nessuna
   sottolineatura/cursore che ne suggerisca l'interattività (non è un link). */
.social-unverified { color: inherit; opacity: 0.7; cursor: default; text-decoration: none; }
/* Una volta confermato il profilo reale dal cliente (company.social.verified
   diventa true), il link deve leggersi come tale — sottolineato al passaggio. */
.footer-social-link[href]:hover, .contact-social-link[href]:hover { text-decoration: underline; }
/* Wrapper del form CF7 (.newsletter-form-row dentro, vedi più sotto, gestisce
   il layout a fila email+submit) — qui resta solo un contenitore semplice. */
.footer-newsletter-form { max-width: 360px; }

/* ============ BREADCRUMB ============ */
.breadcrumb { font-size: 0.75rem; color: var(--color-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb a:hover { color: var(--color-text); }
.surface-light .breadcrumb, .surface-light .breadcrumb a { color: var(--color-text-on-light-muted); }

/* ============================================================
   MOCKUP: assets/css/shop.css
   ============================================================ */
/* ============ GRIGLIA PRODOTTI ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.25rem;
}
@media (min-width: 40rem) { .product-grid { gap: 2rem 1.5rem; } }
@media (min-width: 64rem) {
  .product-grid.density-3 { grid-template-columns: repeat(3, 1fr); }
  .product-grid.density-4 { grid-template-columns: repeat(4, 1fr); }
}
.product-grid.density-2 { grid-template-columns: repeat(2, 1fr); }

/* Assortimento ridotto: griglia contenuta e ancorata a sinistra (come il
   resto della pagina), invece di distendersi a piena larghezza con poche
   card isolate (es. categoria Uomo) o di centrarsi come blocco. auto-fit +
   una larghezza massima FISSA per traccia (non 1fr, che si allarga a
   riempire lo spazio residuo) — con meno prodotti delle colonne disponibili
   le card restano alla loro dimensione naturale, lo spazio vuoto resta
   inutilizzato a destra invece di stirare le card o centrare il gruppo. */
.product-grid-sparse {
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  max-width: 46rem;
}

/* ============ CARD PRODOTTO ============ */
.product-card { position: relative; }
.product-card-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--color-charcoal-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-slow) var(--ease);
}
@media (hover: hover) { .product-card:hover .product-card-media { box-shadow: var(--shadow-lift); } }
.product-card-media img  {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.product-card-media .img-secondary { opacity: 0; }
@media (hover: hover) {
  .product-card:hover .img-primary { opacity: 0; transform: scale(1.035); }
  .product-card:hover .img-secondary { opacity: 1; transform: scale(1.035); }
}
/* right:3.15rem riserva lo spazio del cerchio wishlist (40px + offset) così
   un badge lungo ("Best Seller") non finisce mai sotto/dietro al cuore su
   card strette a 2 colonne — bug reale verificato a 320px. */
.product-card-badges { position: absolute; top: 0.7rem; left: 0.7rem; right: 3.15rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; z-index: 2; }
.product-card-badges .badge { max-width: 100%; white-space: normal; line-height: 1.2; text-align: left; }
.product-card-wishlist {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(5px);
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card-wishlist:hover { background: rgba(11, 11, 12, 0.75); border-color: rgba(255, 255, 255, 0.4); transform: scale(1.06); }
.product-card-wishlist svg { width: 17px; height: 17px; }
.product-card-wishlist.is-active { background: rgba(11, 11, 12, 0.75); border-color: var(--color-gold); }
.product-card-wishlist.is-active svg { fill: var(--color-gold); stroke: var(--color-gold); }
.product-card-soldout-tag {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 12, 0.45);
  color: #fff; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.product-card-info { padding-top: 1rem; }
.product-card-meta { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.product-card-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; margin-bottom: 0.35rem; }
.product-card-price { font-size: 0.92rem; display: flex; align-items: baseline; gap: 0.5rem; }
.product-card-price .old-price { color: var(--color-text-muted); text-decoration: line-through; font-size: 0.85rem; }
.product-card-swatches { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.swatch-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-line); display: inline-block; }

/* ============ TOOLBAR SHOP ============ */
.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1.75rem;
}
.shop-toolbar-right { display: flex; align-items: center; gap: 0.75rem; }
/* Bug reale corretto in audit: il <select> ordinamento nativo WooCommerce
   (woocommerce_catalog_ordering()) non aveva alcuno stile dedicato — appariva
   come select di sistema grezzo invece del componente .input compatto del
   mockup (category.js #sort-select, width:auto;min-height:38px;padding:.4rem .6rem). */
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select.orderby {
  width: auto; min-height: 38px; padding: 0.4rem 0.6rem;
  background-color: var(--color-carbon);
  border: 1px solid var(--color-line-dark);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}
.density-toggle { display: none; gap: 0.35rem; }
@media (min-width: 40rem) { .density-toggle { display: flex; } }
.density-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}
.density-btn[aria-pressed="true"] { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-ink); }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-chip {
  display: flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--color-line);
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
}

.filter-group { margin-bottom: 2rem; }
.filter-group-title { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: 0.85rem; }
.filter-check-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; margin-bottom: 0.6rem; }
.filter-check-row input { width: 17px; height: 17px; accent-color: var(--color-gold); }
.filter-color-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-color-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--color-line);
}
.filter-color-swatch[aria-pressed="true"] { border-color: var(--color-gold); }
.filter-size-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-size-btn { min-width: 40px; height: 34px; padding: 0 0.5rem; border: 1px solid var(--color-line); font-size: 0.75rem; }
.filter-size-btn[aria-pressed="true"] { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-ink); }
.filter-price-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============ LANDING "COLLEZIONE IN ARRIVO" ============ */
.coming-soon-hero { position: relative; height: 58vh; min-height: 360px; max-height: 620px; overflow: hidden; }
.coming-soon-hero img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.coming-soon-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%); }
/* Richiesta cliente: foto editoriale non ancora disponibile per Borse &
   Accessori — riquadro a tinta unita con scritta al posto della foto,
   stessa altezza/ingombro di .coming-soon-hero (nessun salto di layout). */
.coming-soon-hero-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--color-carbon); }
.coming-soon-hero-placeholder span { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2.5rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-champagne-light); }
.coming-soon-body { max-width: 46rem; margin-inline: auto; padding-block: 2.5rem 5rem; text-align: center; }
.coming-soon-blocks { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 0; text-align: left; }
@media (min-width: 40rem) { .coming-soon-blocks { grid-template-columns: 1fr 1fr; } }
.coming-soon-block { padding: 1.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); scroll-margin-top: 6rem; }
.coming-soon-block p { margin-top: 0.6rem; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }
.coming-soon-notify { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--color-line); }
.coming-soon-notify .text-muted { margin-top: 0.5rem; }
.coming-soon-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin: 1.5rem auto 0; }
@media (min-width: 40rem) { .coming-soon-form { flex-direction: row; } }
.coming-soon-msg { margin-top: 0.75rem; font-size: 0.85rem; min-height: 1.2em; }
.coming-soon-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 3rem; }

/* ============ COLLEZIONI — ARCHIVIO (righe editoriali alternate) ============ */
.collection-row-section { padding-block: 3.5rem; }
.collection-row {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
  text-decoration: none; color: inherit;
}
@media (min-width: 56rem) { .collection-row { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; } }
.collection-row-media { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); }
.collection-row-media img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease); }
.collection-row:hover .collection-row-media img { transform: scale(1.035); }
@media (min-width: 56rem) { .collection-row.is-reverse .collection-row-media { order: 2; } }
.collection-row-name { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-top: 0.5rem; }
.collection-row-concept { font-size: 1rem; color: var(--color-champagne); margin-top: 0.35rem; }
.surface-ivory .collection-row-concept { color: var(--color-chestnut); }
.collection-row-intro { margin-top: 1.1rem; line-height: 1.75; max-width: 32rem; color: var(--color-text-muted); }
.collection-row .btn { margin-top: 1.75rem; }

/* ============ COLLEZIONE — SINGOLA (pannello sovrapposto, firma PDP) ============ */
.collection-intro-panel {
  position: relative; z-index: 2;
  background: var(--color-ivory);
  color: var(--color-text-on-light);
  max-width: 40rem;
  margin-top: -36px;
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 26.875rem) { .collection-intro-panel { margin-top: -48px; padding: var(--space-6); } }
@media (min-width: 40rem) { .collection-intro-panel { margin-top: -88px; padding: var(--space-7); } }
.collection-intro-panel .pdp-signature-row { color: var(--color-chestnut); margin-bottom: var(--space-3); }
.collection-intro-panel h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.collection-intro-panel .collection-intro-concept { color: var(--color-chestnut); margin-top: 0.35rem; font-size: 1rem; }
.collection-intro-panel .collection-intro-text { margin-top: 1.1rem; line-height: 1.75; color: var(--color-text-on-light-muted); }
.collection-intro-panel .btn { margin-top: 1.5rem; }

.category-hero { position: relative; height: 42vh; min-height: 260px; overflow: hidden; }
.category-hero img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.category-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1));
  display: flex; align-items: flex-end;
}
.category-hero-content { padding: 2rem var(--container-pad); max-width: var(--container-max); margin-inline: auto; width: 100%; }
.category-hero-content h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4.5rem 1rem; text-align: center; }

.load-more-wrap { text-align: center; margin-top: 3rem; }

/* ============================================================
   MOCKUP: assets/css/home.css
   ============================================================ */
/* ============ HERO ============ */
/* L'header resta position:sticky anche quando è trasparente (body con
   data-header-transparent) — riserva comunque il suo spazio nel flusso,
   invece di sparire dal documento come farebbe un position:fixed/absolute.
   Senza risalire di quella misura, l'hero (94svh) partirebbe subito sotto
   lo spazio riservato dall'header invece che dietro di esso, finendo per
   estendersi oltre il fondo dello schermo anziché riempirlo esattamente.
   --header-h-live è l'altezza reale dell'header, tracciata via
   ResizeObserver in layout.js (varia con breakpoint/padding
   trasparente-vs-pieno, non è un valore fisso).

   Bug reale trovato in audit: --header-h-live non esiste ancora al primo
   paint (JS gira in footer, dopo il render) — fino ad allora vince il
   fallback statico di var(), che era 84px mentre l'header reale misura
   94px sotto 74rem (nav a hamburger) e 127px da 74rem in su (nav
   orizzontale completa, stessa soglia di .mobile-menu-trigger sopra).
   Scarto di 10-43px → tutto il contenuto hero (centrato nel box, incluso
   .hero-scroll-dot ancorato al fondo) nasceva troppo in basso e saltava
   verso l'alto non appena ResizeObserver aggiornava la variabile —
   visibile ad ogni caricamento, non un evento raro. Fallback ora
   allineato ai due valori reali per breakpoint invece di un numero
   indicativo unico: al primo paint è già (quasi) corretto, lo swap a
   --header-h-live successivo diventa impercettibile. */
.hero {
  position: relative;
  height: 94svh;
  min-height: 600px;
  max-height: 980px;
  margin-top: calc(-1 * var(--header-h-live, 94px));
  overflow: hidden;
  background: var(--color-ink);
}
@media (min-width: 74rem) {
  .hero { margin-top: calc(-1 * var(--header-h-live, 127px)); }
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); }
.hero-content {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  color: #fff;
}
.hero-content .eyebrow { color: var(--color-gold-light); }
.hero-title { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 40rem; margin-top: 0.6rem; line-height: 1.05; }
.hero-subtitle { max-width: 32rem; margin-top: 1.1rem; font-size: 1.05rem; color: rgba(255,255,255,0.88); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,0.8); }
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  display: none;
}
.hero-scroll-dot { animation: hero-scroll-cue-move 1.8s ease-in-out infinite; }
@keyframes hero-scroll-cue-move { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: 0.4; } }
@media (min-width: 40rem) { .hero-scroll-cue { display: block; } }

.manifesto-section { padding-block: 4.5rem; }

.section { padding-block: 4.5rem; }
.section-tight { padding-block: 3rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; flex-wrap: wrap; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: 0.4rem; }
.section-link { font-size: 0.85rem; text-decoration: underline; color: var(--color-gold-light); white-space: nowrap; }

/* Shop by category — mosaico editoriale asimmetrico: il primo modulo
   (Riding Jackets, il capo icona) occupa un blocco doppio, gli altri
   scorrono in ritmo più piccolo. Non una griglia uniforme.
   L'ultimo modulo (:last-child) occupa 2 colonne invece di 1: con 8 categorie
   totali e il primo modulo che ne "consuma" 2 (span 2/2), l'ultima riga
   resterebbe altrimenti incompleta con una cella vuota a destra (sia nella
   griglia a 2 colonne mobile sia in quella a 4 colonne desktop) — raddoppiare
   l'ultimo modulo chiude sempre esattamente lo spazio residuo. */
.category-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; gap: 1rem; }
.category-tile-grid > .category-tile:first-child { grid-column: span 2; grid-row: span 2; }
.category-tile-grid > .category-tile:last-child { grid-column: span 2; }
@media (min-width: 40rem) {
  .category-tile-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 175px; gap: 1.25rem; }
}
@media (min-width: 64rem) { .category-tile-grid { grid-auto-rows: 205px; } }
.category-tile {
  position: relative; display: block; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.category-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.category-tile img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease); }
.category-tile:hover img { transform: scale(1.06); }
.category-tile-badge {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 1;
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-champagne-light);
  background: rgba(13, 12, 10, 0.55);
  border: 1px solid rgba(224, 205, 161, 0.4);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(2px);
}
.category-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,5,4,0.88) 0%, rgba(6,5,4,0.32) 45%, rgba(6,5,4,0) 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.15rem;
  color: #fff;
  transition: background var(--dur-base) var(--ease);
}
.category-tile:hover .category-tile-overlay { background: linear-gradient(to top, rgba(6,5,4,0.92) 0%, rgba(6,5,4,0.4) 50%, rgba(6,5,4,0) 72%); }
.category-tile-name {
  font-size: 1.05rem; font-family: var(--font-display);
  display: flex; align-items: center; gap: 0.4rem;
}
.category-tile-arrow {
  color: var(--color-champagne-light);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.category-tile:hover .category-tile-arrow, .category-tile:focus-visible .category-tile-arrow { opacity: 1; transform: translate(0, 0); }
.category-tile-desc { font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 0.25rem; }

/* Collezioni in evidenza — una collezione presentata come campagna
   (grande, con overlay editoriale) + le altre come riferimento più
   piccolo accanto, non tre card uniformi. */
.collection-campaign { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 56rem) { .collection-campaign { grid-template-columns: 1.6fr 1fr; gap: 2rem; } }

.collection-campaign-feature { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-md); }
@media (min-width: 56rem) { .collection-campaign-feature { aspect-ratio: unset; height: 100%; min-height: 30rem; } }
.collection-campaign-feature img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease); }
.collection-campaign-feature:hover img { transform: scale(1.045); }
.collection-campaign-feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 60%);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: var(--space-6); color: #fff;
}
.collection-campaign-feature-overlay .eyebrow { color: var(--color-gold-light); }
.collection-campaign-feature-overlay h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-top: 0.35rem; }
.collection-campaign-feature-overlay p { max-width: 30rem; margin-top: 0.75rem; color: rgba(255,255,255,0.85); font-size: 0.92rem; line-height: 1.6; }
.collection-campaign-feature-overlay .btn { margin-top: 1.25rem; color: #fff; border-color: rgba(255,255,255,0.8); }

/* Le due collezioni secondarie sono card fotografiche a tutta altezza (non
   una lista di miniature): riempiono verticalmente lo spazio accanto alla
   collezione in evidenza invece di lasciare un vuoto sotto un elenco corto,
   e riprendono lo stesso linguaggio (overlay, lift al hover, freccia) delle
   tile di "Shop by Category" per coerenza visiva nella pagina. */
.collection-campaign-list { display: grid; grid-template-rows: repeat(2, minmax(9rem, 1fr)); gap: 1.25rem; }
@media (min-width: 56rem) { .collection-campaign-list { height: 100%; } }
.collection-campaign-item {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.collection-campaign-item:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.collection-campaign-item img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease); }
.collection-campaign-item:hover img { transform: scale(1.06); }
.collection-campaign-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,5,4,0.88) 0%, rgba(6,5,4,0.28) 48%, rgba(6,5,4,0) 72%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.15rem; color: #fff;
  transition: background var(--dur-base) var(--ease);
}
.collection-campaign-item:hover .collection-campaign-item-overlay { background: linear-gradient(to top, rgba(6,5,4,0.92) 0%, rgba(6,5,4,0.36) 52%, rgba(6,5,4,0) 74%); }
.collection-campaign-item-name { font-family: var(--font-display); font-size: 1.15rem; display: flex; align-items: center; gap: 0.4rem; }
.collection-campaign-item-arrow {
  color: var(--color-champagne-light);
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.collection-campaign-item:hover .collection-campaign-item-arrow, .collection-campaign-item:focus-visible .collection-campaign-item-arrow { opacity: 1; transform: translate(0, 0); }
.collection-campaign-item-concept { font-size: 0.82rem; color: rgba(255,255,255,0.78); margin-top: 0.25rem; }

/* Editoriale a piena larghezza */
.editorial-block { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .editorial-block { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.editorial-media { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-md); }
.editorial-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.editorial-text p { margin-top: 1rem; line-height: 1.75; }
.surface-light .editorial-text p { color: var(--color-text-on-light-muted); }
.editorial-signature { font-family: var(--font-display); font-size: 1.2rem; margin-top: 1.5rem; color: var(--color-gold-dark); }

/* Prodotti scorrevoli (novita, best seller, completa il look) */
.product-rail {
  display: flex; gap: 1.35rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem; margin: 0 calc(var(--container-pad) * -1); padding-inline: var(--container-pad);
  scrollbar-width: none;
}
.product-rail::-webkit-scrollbar { display: none; }
.product-rail .product-card { flex: 0 0 auto; width: 68vw; scroll-snap-align: start; }
@media (min-width: 40rem) { .product-rail .product-card { width: 260px; } }

/* Freccette di navigazione — nell'intestazione della sezione (.rail-head),
   non sovrapposte alle foto che scorrono: prima galleggiavano sopra il rail
   (o si tentava di segnalarne il bordo con una sfumatura colorata) e a
   certe posizioni di scroll finivano esattamente sulla giuntura tra due
   card, oppure la tinta fissa usata per "coprire" quel punto stonava sulle
   foto a sfondo chiaro. Il modo pulito è non mettere mai un elemento di UI
   sopra una foto e non camuffarne il taglio: una card parzialmente
   scrollata fuori dal contenitore si taglia in modo netto, senza alcun
   trucco visivo — esattamente come in un carosello e-commerce reale. */
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-3); }
.rail-head .pdp-section-title { margin-bottom: 0; }
.rail-nav-group { display: none; gap: 0.5rem; flex-shrink: 0; }
@media (min-width: 64rem) { .rail-nav-group { display: flex; } }
.rail-nav-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-line-dark);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.rail-nav-btn:hover:not(:disabled) { background: var(--color-champagne); border-color: var(--color-champagne); color: var(--color-ink); }
.rail-nav-btn:disabled { opacity: 0.3; pointer-events: none; }

/* Best Sellers — struttura diversa dalle Novità: un capo principale in
   grande formato + il resto in griglia compatta accanto, non un rail. */
.bestseller-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 56rem) { .bestseller-layout { grid-template-columns: 1.15fr 1fr; gap: 2.5rem; } }
.bestseller-featured { display: block; }
.bestseller-featured-media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-md); }
.bestseller-featured-media img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform var(--dur-slow) var(--ease); }
.bestseller-featured:hover .bestseller-featured-media img { transform: scale(1.04); }
.bestseller-featured-info { margin-top: 1.1rem; }
.bestseller-featured-info h3 { font-family: var(--font-display); font-size: 1.5rem; margin-top: 0.35rem; }
.bestseller-featured-info .product-card-price { font-size: 1rem; margin-top: 0.4rem; }
.bestseller-featured-info .btn { margin-top: 1rem; }
.bestseller-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

/* Benefit strip */
.benefit-strip { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
@media (min-width: 40rem) { .benefit-strip { grid-template-columns: repeat(3, 1fr); } }
.benefit-item { padding: 1.25rem; }
.benefit-item h3 { font-size: 1rem; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.benefit-item p { font-size: 0.85rem; color: var(--color-text-muted); }

/* Newsletter — sezione immersiva con fotografia in fondo, non una
   superficie piatta. */
.newsletter-section { position: relative; text-align: center; padding-block: 6rem; overflow: hidden; color: #fff; }
.newsletter-media { position: absolute; inset: 0; }
.newsletter-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.newsletter-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,0.82) 0%, rgba(11,11,12,0.68) 50%, rgba(11,11,12,0.88) 100%); }
.newsletter-inner { position: relative; z-index: 2; }
.newsletter-inner .eyebrow { color: var(--color-gold-light); }
.newsletter-inner .text-muted { color: rgba(255,255,255,0.78); }
.newsletter-form { max-width: 420px; margin: 1.5rem auto 0; }
.newsletter-form .input { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); color: #fff; }
.newsletter-form .input::placeholder { color: rgba(255,255,255,0.6); }

/* Form Newsletter via Contact Form 7 (email + submit affiancati, checkbox
   privacy sotto) — condiviso da widget-newsletter-section.php (home, sfondo
   scuro) e footer.php (footer, sfondo chiaro/scuro a seconda del tema). */
.newsletter-form-row { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 40rem) { .newsletter-form-row { flex-direction: row; } }
/* Bug reale corretto: senza un min-width esplicito, un flex item si
   restringe fino al min-content del proprio contenuto (qui minimo, un
   <input>) per lasciare spazio al pulsante "Iscriviti" a fianco — campo
   email visibilmente troppo stretto/testo troncato su contenitori stretti
   come .footer-newsletter-form (max-width:360px). Valore contenuto (6rem,
   non 10rem) apposta: con .newsletter-form max-width:420px/.footer-
   newsletter-form 360px un min-width troppo alto sommato alla larghezza
   del pulsante "Iscriviti" eccede lo spazio disponibile e forza SEMPRE
   l'a-capo anche dove ci sarebbe posto, mai la soluzione voluta. */
.newsletter-form-row .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 6rem; }
.newsletter-form-row input.input { width: 100%; }
.newsletter-form-row input[type="submit"] { flex-shrink: 0; }
/* Bug reale corretto: il breakpoint sopra (min-width:40rem) guarda la
   larghezza del VIEWPORT, non quella del contenitore — nel footer la
   colonna brand (.footer-grid, minmax(15rem,20rem)) resta sempre stretta
   (~320px) anche su viewport desktop ampio, quindi la modalità riga
   scattava comunque e schiacciava campo+pulsante nello stesso spazio
   ristretto (verificato dagli screenshot: campo troncato a "La tua ema").
   Qui il contenitore è sempre troppo stretto per la riga: sempre impilato. */
.footer-newsletter-form .newsletter-form-row { flex-direction: column; }
.theme-checkout-consents .theme-consent-row label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.78rem; cursor: pointer; text-align: left; }
.theme-checkout-consents .theme-consent-row input[type="checkbox"] { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--color-champagne); flex-shrink: 0; }

.newsletter-form .wpcf7-acceptance label,
.footer-newsletter .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.78rem; cursor: pointer; margin-top: .85rem; justify-content: center; text-align: left; }
.newsletter-form .wpcf7-acceptance input,
.footer-newsletter .wpcf7-acceptance input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--color-champagne); flex-shrink: 0; }
.newsletter-form .wpcf7-response-output,
.footer-newsletter .wpcf7-response-output { margin: .5rem 0 0; padding: 0; border: none; font-size: .8rem; }

/* ============================================================
   MOCKUP: assets/css/product.css
   ============================================================ */
/* ============================================================
   SCHEDA PRODOTTO V2.1 — concept editoriale "Equestrian Editorial
   Luxury". Vedi DESIGN-V2.md §7. Sostituisce integralmente il
   layout a due colonne piatte della prima iterazione: hero a piena
   altezza + pannello informazioni sovrapposto, blocco editoriale
   dettaglio, galleria mosaico, racconto di collezione, outfit
   builder adattivo.
   ============================================================ */

/* ---------------- Hero: immagine + pannello sovrapposto ---------------- */
.pdp-hero-inner { display: flex; flex-direction: column; }
.pdp-hero-media { position: relative; overflow: hidden; background: var(--color-carbon-2); aspect-ratio: 4/5; }
.pdp-hero-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
/* Bug reale corretto in audit (screenshot: immagine principale mostrata
   enormemente ingrandita e ritagliata solo sulla parte alta, indipendente
   dallo zoom hover — persisteva anche disattivato): la regola sopra è
   IDENTICA al mockup (product.css:12-13) e lì funziona perché lì l'img è
   figlio diretto di .pdp-hero-media. Nel tema il plugin cj-product-gallery
   interpone .cjpg-gallery > .cjpg-main > .cjpg-main__item prima dell'img —
   nessuno di questi wrapper ha un'altezza propria, quindi "height:100%"
   sull'img si propaga contro un antenato senza altezza definita e collassa
   ad "auto": il browser finiva per scalare l'immagine sorgente 600×600 alla
   sola LARGHEZZA del contenitore (spesso molto più larga dei 600px nativi,
   quindi "zoomata"/sgranata) mantenendo il suo rapporto quadrato nativo, e
   .pdp-hero-media (overflow:hidden) ritagliava tutto ciò che eccedeva
   l'altezza della porzione visibile — da cui il crop sulla sola parte alta
   del cappello. Ripristina la catena di percentuali mancante attraverso i
   wrapper del plugin, così la regola sopra (mai toccata, identica al mockup)
   torna a funzionare come previsto. */
.pdp-hero-media .cjpg-gallery { height: 100%; }
.pdp-hero-media .cjpg-main__item { height: 100%; }
.pdp-hero-badges { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 3; display: flex; gap: var(--space-2); }
/* Richiesta esplicita: il pulsante lightbox (icona espandi, di default in
   basso a destra — cj-product-gallery/assets/css/gallery.css, generico e
   riusato da altri progetti, non toccato) va in alto a sinistra qui, accanto
   ai badge quando presenti. "left" di default allineato ai badge — se ci sono
   badge, JS (theme-pdp.js) sposta il trigger subito dopo di loro misurandone
   la larghezza reale (variabile: 0-3 badge, mai fissa via solo CSS). */
.pdp-hero-media .cjpg-lightbox-trigger { top: var(--space-4); left: var(--space-4); bottom: auto; right: auto; }

.pdp-hero-panel {
  background: var(--color-ivory);
  color: var(--color-text-on-light);
  padding: var(--space-6) var(--space-6) var(--space-7);
}
@media (min-width: 64rem) {
  .pdp-hero-inner { flex-direction: row; align-items: center; }
  .pdp-hero-media { flex: 1 1 auto; aspect-ratio: auto; height: 76vh; min-height: 540px; max-height: 800px; }
  .pdp-hero-panel {
    flex: 0 0 440px;
    margin-left: -72px;
    z-index: 2;
    box-shadow: var(--shadow-lift);
  }
}
@media (min-width: 90rem) { .pdp-hero-panel { flex-basis: 480px; } }

/* Viewport desktop bassi (laptop 1366×768, 1366×720, 1280×720, zoom browser
   110%): la CTA deve restare raggiungibile senza scroll. Si riducono solo
   spaziature verticali interne — mai testi principali sotto dimensioni
   leggibili, mai uno scroll interno al pannello. Soglia a 49rem (784px) per
   coprire anche 1366×768 (48rem esatti), che il vecchio limite di 46.25rem
   escludeva pur essendo un laptop altrettanto basso. */
@media (min-width: 64rem) and (max-height: 49rem) {
  .pdp-hero-panel { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .pdp-hero-panel .pdp-title { font-size: clamp(1.4rem, 1.7vw, 1.85rem); }
  .pdp-signature-row { margin-bottom: var(--space-2); }
  /* La valutazione non è tra gli elementi obbligatori nel primo viewport
     (titolo/prezzo/IVA/colore/taglie/CTA/wishlist/spedizione lo sono):
     su viewport bassi si nasconde per liberare spazio verticale, resta
     comunque nell'accordion "Descrizione" e nella pagina normalmente. */
  .pdp-rating-row { display: none; }
  .pdp-price-row { margin-top: var(--space-2); }
  .variant-block { margin-top: var(--space-3); }
  .variant-label-row { margin-bottom: var(--space-1); }
  .color-swatch { width: 34px; height: 34px; }
  .size-btn { height: 44px; min-width: 44px; }
  .size-fit-note { display: none; }
  .pdp-cta-row { margin-top: var(--space-3); }
  .pdp-cta-row .btn-primary, .pdp-cta-row .single_add_to_cart_button, .pdp-wishlist-btn { padding-block: 0.85rem; }
  .pdp-hero-service-hint { margin-top: var(--space-2); }
}

/* Riga firma: eventuale collezione reale (mai inventata), monogramma,
   dettaglio "cucitura" — sistema riutilizzabile nel resto del sito. */
.pdp-signature-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-chestnut);
}
.pdp-monogram { width: 20px; height: 20px; border-radius: 2px; flex-shrink: 0; display: block; }
.pdp-stitch { flex: 0 0 auto; width: 1px; height: 14px; background: repeating-linear-gradient(to bottom, var(--color-leather) 0 3px, transparent 3px 6px); }
.pdp-signature-row .pdp-sku-tag { margin-left: auto; color: var(--color-text-on-light-muted); letter-spacing: 0.04em; }

.pdp-hero-panel .pdp-meta { color: var(--color-chestnut); }
.pdp-hero-panel .pdp-title { font-size: clamp(1.7rem, 2.1vw, 2.5rem); }
.pdp-hero-panel .pdp-rating-row,
.pdp-hero-panel .pdp-vat-note,
.pdp-hero-panel .pdp-sku { color: var(--color-text-on-light-muted); }
.pdp-hero-panel .rating-stars { color: var(--color-burnished); }
.pdp-hero-panel .rating-stars .empty { color: #ddd2ba; }

.pdp-hero-panel .variant-label-row .label-field { color: var(--color-text-on-light-muted); }
.pdp-hero-panel .variant-label-row .current-value { color: var(--color-text-on-light); }
.pdp-hero-panel .size-guide-link { color: var(--color-text-on-light-muted); }
.pdp-hero-panel .size-guide-link:hover { color: var(--color-text-on-light); }
.pdp-hero-panel .color-swatch { outline-color: #ddd2ba; }
.pdp-hero-panel .color-swatch[aria-checked="true"] { outline-color: var(--color-burnished); }
.pdp-hero-panel .size-btn { border-color: #ddd2ba; color: var(--color-text-on-light); }
.pdp-hero-panel .size-btn:hover:not([disabled]):not([aria-checked="true"]) { border-color: var(--color-leather); }
.pdp-hero-panel .size-btn[aria-checked="true"] { border-color: var(--color-burnished); background: var(--color-burnished); color: var(--color-white); }
.pdp-hero-panel .size-btn[disabled] { background: #ece3ce; border-color: #ddd2ba; color: var(--color-text-on-light-muted); }
.pdp-hero-panel .size-btn[disabled]::after { background: var(--color-text-on-light-muted); }
.pdp-hero-panel .size-fit-note { color: var(--color-text-on-light-muted); }
.pdp-hero-panel .pdp-wishlist-btn { border-color: var(--color-chestnut); color: var(--color-text-on-light); }
.pdp-hero-panel .pdp-wishlist-btn.is-active { color: var(--color-leather); border-color: var(--color-leather); }
.pdp-hero-panel .notify-box { background: #ece3ce; }
.pdp-hero-panel .notify-box .input { background: var(--color-white); color: var(--color-text-on-light); border-color: #ddd2ba; }

/* ---------------- Colonna informazioni: metriche condivise (usate anche
   nel pannello hero e nel resto del sito) ---------------- */
.pdp-meta { font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-champagne); }
.pdp-title { font-family: var(--font-display); font-size: var(--fs-product-title); font-weight: 500; margin-top: var(--space-2); line-height: 1.08; }
.pdp-rating-row { margin-top: var(--space-3); font-size: var(--fs-body-sm); color: var(--color-text-muted); }
.pdp-price-row { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--fs-price); font-weight: 600; }
.pdp-price-row .old-price { font-size: 1.05rem; font-weight: 400; color: var(--color-text-muted); text-decoration: line-through; }
.pdp-vat-note { font-size: var(--fs-label); font-weight: 400; color: var(--color-text-muted); }
.pdp-sku { font-size: var(--fs-label); color: var(--color-text-muted); margin-top: var(--space-2); letter-spacing: 0.03em; }

.variant-block { margin-top: var(--space-5); }
.variant-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.variant-label-row .label-field { margin: 0; }
.variant-label-row .current-value { color: var(--color-text); text-transform: none; font-weight: 600; }
.size-guide-link { font-size: var(--fs-label); text-decoration: underline; text-underline-offset: 3px; color: var(--color-text-muted); background: none; }
.size-guide-link:hover { color: var(--color-text); }

.color-swatch-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.color-swatch {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid transparent; outline: 1px solid var(--color-line-dark); outline-offset: 3px;
  transition: transform var(--dur-fast) var(--ease-editorial), outline-color var(--dur-fast) var(--ease);
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch[aria-checked="true"] { outline-color: var(--color-champagne); }
/* Lo swatch usa già outline in permanenza (anello decorativo, anche per lo
   stato selezionato): un normale :focus-visible sull'outline non si
   distinguerebbe mai da quell'anello. Il focus da tastiera usa quindi un
   box-shadow indipendente, sempre visibile qualunque sia lo stato. */
.color-swatch:focus-visible { box-shadow: 0 0 0 2px var(--color-ivory), 0 0 0 4px var(--color-focus); }
.pdp-hero-panel .color-swatch:focus-visible { box-shadow: 0 0 0 2px var(--color-ivory), 0 0 0 4px var(--color-chestnut); }

/* Selettore taglia V2: griglia più ordinata, stato selezionato pieno e
   deciso, microcopy di vestibilità sotto — non più una fila anonima di
   pulsanti tecnici. */
.size-btn-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--space-2); max-width: 21rem; }
.size-btn {
  min-width: 52px; height: 52px; padding: 0 var(--space-3);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.size-btn:hover:not([disabled]):not([aria-checked="true"]) { border-color: var(--color-text-muted); }
.size-btn[aria-checked="true"] { border-color: var(--color-champagne); background: var(--color-champagne); color: var(--color-ink); font-weight: 600; transform: translateY(-1px); }
.size-btn[disabled] {
  position: relative;
  color: var(--color-text-muted);
  border-color: var(--color-line-dark);
  background: var(--color-carbon-2);
  cursor: not-allowed;
}
.size-btn[disabled]::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 1.5px;
  background: var(--color-text-muted);
  transform: rotate(-14deg);
}
.size-error { margin-top: var(--space-3); font-size: 0.85rem; color: var(--color-error); }
.size-fit-note { margin-top: var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); max-width: 26rem; line-height: 1.55; }

/* ---------------- CTA ---------------- */
/* Bug reale corretto: .pdp-cta-row avvolgeva l'INTERO <form> WooCommerce
   (tabella attributi nativa compresa, mai nascosta — solo il <select> lo
   era via JS), quindi il pulsante preferiti (allora fratello flex
   dell'intero form) si stirava per tutta quell'altezza invece di restare
   accanto al solo bottone "Aggiungi al carrello". Corretto spostando il
   pulsante preferiti DENTRO il vero contenitore quantità+bottone (hook
   woocommerce_after_add_to_cart_button, sia per simple.php nativo sia per
   il nostro override variable.php — vedi inc/woocommerce/setup.php) e
   stilizzando DIRETTAMENTE quel contenitore invece di un .pdp-cta-row
   esterno che ormai non esiste più nel markup. */
/* Bug reale corretto in audit (screenshot: blocco Taglia affiancato a Colore
   invece che impilato sotto): questa regola era scoped anche a "form.cart"
   intero (non solo al contenitore quantità+bottone) — dato che i
   .variant-block Colore/Taglia sono anch'essi figli diretti del form
   (avvolti solo da un .variations con display:contents, invisibile ai fini
   del layout), finivano anche loro nella stessa riga flex invece di
   restare impilati verticalmente come blocchi normali. Ora la riga a
   flex riguarda SOLO il vero contenitore quantità+bottone+preferiti
   (.woocommerce-variation-add-to-cart, presente sia per i prodotti variable
   nativi sia per il nostro simple.php, che lo ricrea apposta). */
.pdp-hero-panel .woocommerce-variation-add-to-cart {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6);
}
.pdp-hero-panel .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
.pdp-hero-panel .btn-primary, .pdp-hero-panel .single_add_to_cart_button { flex: 1; min-width: 0; padding-block: 1.15rem; font-size: 0.9rem; }
/* Richiesta esplicita: quantità+"Aggiungi al carrello" sulla stessa riga,
   "Preferiti" sotto su una riga propria — il mockup non ha mai un box
   quantità in questa riga (.pdp-cta-row lì contiene solo i 2 pulsanti), qui
   serve davvero (form WooCommerce nativo) quindi lo spazio con solo 2
   elementi si esaurisce diversamente. flex-basis:100% forza il wishlist
   sulla riga successiva sfruttando il flex-wrap già presente sopra. */
.pdp-wishlist-btn { flex: 0 0 auto; flex-basis: 100%; padding-inline: 1.4rem; gap: 0.55rem; justify-content: center; }
.pdp-wishlist-btn.is-active { color: var(--color-champagne); border-color: var(--color-champagne); }
@media (max-width: 26rem) { .pdp-wishlist-label { display: none; } .pdp-wishlist-btn { padding-inline: 0.9rem; } }

/* Indicazione spedizione/resi già nel primo viewport (non solo nella fascia
   servizi più in basso) — riga compatta, non l'elenco completo. */
.pdp-hero-service-hint { margin-top: var(--space-3); font-size: 0.78rem; color: var(--color-text-on-light-muted); text-align: center; }

.notify-box { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-carbon-2); border-radius: var(--radius-md); }
.notify-box p { margin-bottom: var(--space-4); font-size: var(--fs-body-sm); }
.notify-box form { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 30rem) { .notify-box form { flex-direction: row; } }
.notify-box .checkbox-field { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------------- Fascia servizi (piena larghezza, sotto l'hero) ---------------- */
.pdp-services-band { border-top: 1px solid var(--color-line-dark); border-bottom: 1px solid var(--color-line-dark); }
.pdp-services-band-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-6); }
@media (min-width: 48rem) { .pdp-services-band-inner { grid-template-columns: repeat(3, 1fr); } }
.pdp-service-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-body-sm); }
.pdp-service-item svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--color-champagne); width: 20px; height: 20px; }
.pdp-service-item a { text-decoration: underline; text-underline-offset: 2px; }
.pdp-service-item .service-sub { display: block; color: var(--color-text-muted); font-size: 0.82rem; margin-top: 0.1rem; }

/* ---------------- Blocco dettaglio editoriale (foto + testo) ---------------- */
.pdp-detail-block { padding-block: var(--space-9); }
.pdp-detail-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 56rem) { .pdp-detail-inner { grid-template-columns: 1fr 1.05fr; gap: var(--space-9); align-items: center; } }
/* Bug reale corretto in audit (overflow orizzontale su mobile, pagina
   prodotto): stessa regola di sicurezza generica di assets/css/base.css
   (NO-MODIFY — griglie a 1 colonna mobile che diventano 2+ da desktop), qui
   duplicata perché .pdp-detail-inner non era nell'elenco selettori di quella
   regola nonostante il suo stesso commento citi "prodotto" tra i contesti
   coperti. L'<img> in .pdp-detail-media riceve width/height HTML espliciti
   (wp_get_attachment_image(), single-product.php — 700×875, per
   l'aspect-ratio) — senza min-width:0 sul figlio diretto della grid, quella
   dimensione intrinseca imponeva alla colonna una larghezza minima di
   ~700px, eccedendo qualunque viewport mobile pur essendo CSS width:100%
   sull'img stesso (che vince solo sulla dimensione RESA, non sul min-content
   usato da CSS Grid per dimensionare la colonna). */
.pdp-detail-inner > * { min-width: 0; }
.pdp-detail-media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); }
.pdp-detail-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.pdp-detail-text h2 { font-family: var(--font-display); font-size: var(--fs-display-2); margin-bottom: var(--space-5); }
.pdp-detail-text-block { margin-bottom: var(--space-5); }
.pdp-detail-text-block:last-child { margin-bottom: 0; }
.pdp-detail-text-block h3 { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-leather); margin-bottom: var(--space-2); }
.pdp-detail-text-block p { line-height: 1.8; color: var(--color-text-on-light-muted); }

/* ---------------- Sezione galleria (mosaico completo) ---------------- */
.pdp-gallery-section { padding-block: var(--space-9); }
.gallery { display: flex; flex-direction: column; gap: var(--space-2); }
.gallery-thumbs {
  display: flex; gap: var(--space-2);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 0 var(--container-pad) var(--space-1);
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 auto; width: min(78vw, 420px); aspect-ratio: 4/5;
  overflow: hidden; border-radius: var(--radius-lg);
  scroll-snap-align: start; background: var(--color-carbon-2);
  /* Bug reale corretto in audit: il boilerplate generico (assets/css/base.css,
     mai da modificare) definisce un .gallery-thumb DIVERSO per uno slideshow
     mai usato da questo tema, con opacity:.6 di default e opacity:1 solo su
     :hover. Questa regola non tocca "opacity", quindi quella dichiarazione
     resta l'unica per quella proprietà (il cascade CSS si applica per singola
     proprietà) — l'immagine partiva sempre al 60% di opacità, percepito come
     un overlay scuro che "spariva" al passaggio del mouse. Il mockup non ha
     questo conflitto perché base.css non esiste in quel progetto. */
  opacity: 1;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64rem) {
  .gallery-thumbs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: var(--space-4); max-width: 62rem; margin-inline: auto; }
  .gallery-thumb { width: 100%; aspect-ratio: 4/5; scroll-snap-align: none; cursor: zoom-in; }
  .gallery-thumbs.is-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .gallery-thumbs.is-mosaic .gallery-thumb:first-child { grid-column: 1 / -1; }
  .gallery-thumbs.is-mosaic .gallery-thumb--extra { display: none; }
}
.gallery-mobile-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }
@media (min-width: 64rem) { .gallery-mobile-dots { display: none; } }
.gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-line-dark); }
.gallery-dot.is-active { background: var(--color-champagne); }
.gallery-view-all { margin-top: var(--space-4); width: 100%; max-width: 62rem; margin-inline: auto; display: block; }

/* ---------------- Racconto di collezione (solo se il prodotto ne ha una reale) ---------------- */
.pdp-collection-block { position: relative; }
.pdp-collection-media { width: 100%; aspect-ratio: 21/9; min-height: 320px; max-height: 520px; overflow: hidden; }
.pdp-collection-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.pdp-collection-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,12,10,.82) 0%, rgba(13,12,10,.15) 55%); display: flex; align-items: flex-end; }
.pdp-collection-content { padding: var(--space-7) var(--container-pad); color: #fff; max-width: 42rem; }
.pdp-collection-content .eyebrow { color: var(--color-champagne-light); }
.pdp-collection-content h2 { font-family: var(--font-display); font-size: var(--fs-display-2); margin-top: var(--space-2); }
.pdp-collection-content p { margin-top: var(--space-3); color: rgba(255,255,255,0.85); line-height: 1.7; }
.pdp-collection-content a { margin-top: var(--space-5); display: inline-flex; }

/* ---------------- Firma visiva: divisore monogramma ---------------- */
.pdp-signature-divider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-block: var(--space-2); opacity: 0.8; }
.pdp-signature-divider img { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.pdp-signature-divider .pdp-stitch { height: 22px; }

/* ---------------- Sticky add-to-cart (mobile) ---------------- */
.sticky-add-bar {
  position: fixed; inset-inline: 0;
  bottom: var(--cookie-banner-h, 0px);
  transition: transform 0.25s ease, bottom 0.25s ease;
  z-index: 400;
  background: var(--color-carbon);
  box-shadow: 0 -8px 24px -8px rgba(13, 12, 10, 0.5);
  padding: var(--space-3) var(--container-pad);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-4);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-editorial);
}
.sticky-add-bar.is-visible { transform: translateY(0); }
@media (min-width: 64rem) { .sticky-add-bar { display: none; } }
/* Bug reale corretto in audit (overflow orizzontale su mobile, pagina
   prodotto): stesso principio già documentato per .checkout-nav-row più
   sotto in questo file — .price ha white-space:nowrap ma nessun min-width:0
   proprio, e per un item flex il default è min-width:auto (mai ridursi sotto
   la larghezza naturale del contenuto). Un prezzo un po' più lungo del
   solito (es. intervallo di prezzo su un prodotto variabile, migliaia con
   separatore) costringeva .sticky-add-bar (position:fixed, larghezza intera
   viewport) a eccedere i suoi stessi confini invece di lasciare spazio al
   bottone accanto. min-width:0 + ellissi come ultima rete di sicurezza. */
.sticky-add-bar .price { font-size: 1.05rem; font-weight: 600; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sticky-add-bar .btn { flex: 1; min-width: 0; }

.pdp-section-title { font-family: var(--font-display); font-size: var(--fs-display-2); margin: 0 0 var(--space-3); }

/* ---------------- Lightbox (zoom modal) ---------------- */
.modal-lightbox { background: var(--color-ink); display: flex; flex-direction: column; }
.modal-lightbox .modal-header { background: var(--color-ink); flex-shrink: 0; }
.lightbox-content {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  min-height: 42vh;
  touch-action: pan-y;
}
.zoom-modal-img { max-width: 100%; max-height: 62vh; width: auto; height: auto; margin-inline: auto; user-select: none; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(246, 241, 230, 0.1);
  color: var(--color-text);
  font-size: 1.6rem;
  transition: background-color var(--dur-fast) var(--ease);
}
.lightbox-nav:hover { background: rgba(246, 241, 230, 0.2); }
.lightbox-prev { left: var(--space-2); }
.lightbox-next { right: var(--space-2); }
@media (min-width: 48rem) {
  .lightbox-prev { left: var(--space-5); }
  .lightbox-next { right: var(--space-5); }
}
.lightbox-thumbs {
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  border-top: 1px solid var(--color-line-dark);
  flex-shrink: 0;
}
.lightbox-thumb { flex: 0 0 auto; width: 56px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; opacity: 0.5; border: 2px solid transparent; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lightbox-thumb.is-active { opacity: 1; border-color: var(--color-champagne); }
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Guida taglie: drawer a piena larghezza dal basso su mobile, modale
   centrata su desktop. */
.sizeguide-diagram { display: flex; justify-content: center; margin-bottom: var(--space-5); color: var(--color-champagne); }
.sizeguide-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sizeguide-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding-inline: 0.6rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: 0.85rem; }
/* Tabella misure (bfe_size_guide_html() default, single-product.php) — nessuna
   classe propria, restava sullo stile grezzo del browser: <th> centrato di
   default invece che allineato a sinistra come il resto del testo. */
#sizeguide-body table { width: 100%; border-collapse: collapse; }
#sizeguide-body table th, #sizeguide-body table td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; }
#sizeguide-body table thead th { border-bottom: 1px solid var(--color-line-dark); padding-bottom: 0.6rem; }
@media (max-width: 40rem) {
  #sizeguide-modal { align-items: flex-end; padding: 0; }
  #sizeguide-modal .modal { width: 100%; max-width: 100%; max-height: 88vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ---------------- Outfit builder ("Completa il look") ---------------- */
.outfit-builder-head { margin-bottom: var(--space-6); }
.outfit-builder-head .pdp-section-title { margin-bottom: var(--space-2); }
.outfit-builder-head p { color: var(--color-text-muted); max-width: 40rem; line-height: 1.7; }

.outfit-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 40rem) { .outfit-items { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); } }
.outfit-item { border: 1px solid var(--color-line-dark); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.outfit-item.is-excluded { opacity: 0.4; }
.outfit-item-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
/* Bug reale corretto: mancava position:absolute sull'img (unico componente
   "cover" del tema a non averlo, tutti gli altri sì) — le immagini prodotto
   reali non sono quasi mai già nel rapporto 4/5 nativo, quindi senza absolute
   restavano alla propria altezza intrinseca invece di riempire e ritagliare
   la card, risultando alcune più alte e altre più basse riga per riga. */
.outfit-item-media img  { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.outfit-item-check {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-ivory); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.outfit-item-check input { width: 16px; height: 16px; accent-color: var(--color-champagne); }
.outfit-item-current-tag { position: absolute; bottom: var(--space-3); left: var(--space-3); z-index: 2; background: var(--color-ink); color: var(--color-champagne-light); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 1px; }
.outfit-item-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.outfit-item-meta { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.outfit-item-name { font-size: 0.92rem; }
.outfit-item-name a:hover { text-decoration: underline; }
.outfit-item-price { font-weight: 600; }
.outfit-item-size { margin-top: auto; padding-top: var(--space-2); }
.outfit-item-size select.input { min-height: 40px; font-size: 0.82rem; padding: 0.5rem 0.7rem; }

.outfit-summary { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line-dark); display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 40rem) { .outfit-summary { flex-direction: row; align-items: center; justify-content: space-between; } }
.outfit-total { font-size: 0.95rem; color: var(--color-text-muted); }
.outfit-total strong { font-size: 1.4rem; font-weight: 600; color: var(--color-text); display: block; }
.outfit-summary .btn { min-width: 15rem; }

/* Con un solo correlato: blocco editoriale "Abbinalo con", non un builder. */
.outfit-editorial { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) { .outfit-editorial { grid-template-columns: 1fr 1fr; } }
.outfit-editorial-media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); }
.outfit-editorial-media img  { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.outfit-editorial-text h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-3); }
.outfit-editorial-text p.price { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-4); }

/* Da 5 correlati in su: look principale (3-4 pezzi) + sezione secondaria
   più compatta, invece di un unico slider generico indifferenziato. */
.outfit-secondary { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line-dark); }
.outfit-secondary-title { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* ============================================================
   MOCKUP: assets/css/cart.css
   ============================================================ */
/* ============ MINI-CART ============ */
.cart-line { display: flex; gap: 1.1rem; padding: 1.25rem; border-bottom: 1px solid var(--color-line-dark); }
.cart-line img { width: 100px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-top { display: flex; justify-content: space-between; gap: 0.5rem; }
.cart-line-name { font-size: 0.92rem; }
.cart-line-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.cart-line-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.qty-select { display: flex; align-items: center; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); }
.qty-select button { width: 32px; height: 32px; font-size: 1rem; }
.qty-select span { min-width: 28px; text-align: center; font-size: 0.85rem; }
.remove-line-btn { color: var(--color-text-muted); }
.remove-line-btn:hover { color: var(--color-error); }

.cart-shipping-note { padding: 0.9rem 1.25rem; font-size: 0.78rem; color: var(--color-text-muted); border-bottom: 1px solid var(--color-line-dark); }
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 4.5rem 1.5rem; text-align: center; }
.cart-empty-icon { width: 56px; height: 56px; opacity: 0.5; }
.cart-empty p.font-display { font-size: 1.3rem; }

.summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.6rem; }
.summary-total { display: flex; justify-content: space-between; font-size: 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--color-line); margin-top: 0.6rem; }

/* ============ CARRELLO PAGINA ============ */
.cart-page-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 64rem) { .cart-page-layout { grid-template-columns: 1fr 360px; } }
.cart-table-line { display: flex; gap: 1.1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--color-line); }
.cart-table-line img { width: 108px; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-summary-card { padding: var(--space-6); border-radius: var(--radius-lg); height: fit-content; box-shadow: var(--shadow-card); }
.cart-summary-card .summary-total { border-top-color: var(--color-sand); }
.cart-summary-card .text-muted { color: var(--color-text-on-light-muted); }

/* ============ CHECKOUT ============ */
.checkout-stepper { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; font-size: 0.75rem; }
.step-pill { display: flex; align-items: center; gap: 0.5rem; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--color-text-muted);
}
.step-pill.is-active .step-num, .step-pill.is-done .step-num { border-color: var(--color-gold); color: var(--color-gold); }
.step-pill.is-active .step-num { background: var(--color-gold); color: var(--color-ink); }
.step-pill.is-active span:last-child { color: var(--color-text); }
.step-sep { color: var(--color-line); margin: 0 0.15rem; }

.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 64rem) { .checkout-layout { grid-template-columns: 1fr 360px; } }
/* Bug reale corretto in audit: assets/js/theme-checkout.js chiama
   scrollIntoView({block:'start'}) su questo pannello ad ogni cambio step —
   senza scroll-margin-top il contenuto finiva DIETRO l'header sticky del
   tema (stesso principio già applicato altrove, vedi .coming-soon-block più
   sotto in questo file). Per gli step "Spedizione"/"Pagamento" (contenuto
   filtrato via CSS a una sola riga/lista, molto più corto di prima) l'unica
   cosa che restava visibile sotto l'header era il poco contenuto rimasto
   più il bottone "Continua" subito dopo — sembrava che la pagina scrollasse
   dritta al bottone invece che al titolo dello step.
   --header-h (costante statica), non --header-h-live: quest'ultima viene
   aggiornata da assets/js/theme-header.js SOLO quando document.body ha
   l'attributo data-header-transparent, impostato SOLO su is_front_page() —
   sul checkout non è mai popolata, e --header-h è già la stessa costante
   usata altrove per questo stesso scopo su pagine non-home (vedi
   .account-sidebar poco più sotto in questo file). */
.checkout-step-panel { display: none; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.checkout-step-panel.is-active { display: block; }

/* Step "Spedizione"/"Pagamento"/"Riepilogo" (3/4/5) condividono lo STESSO
   pannello nativo #order_review (mai spezzato in 3 file/blocchi separati —
   l'AJAX WooCommerce lo rigenera per intero, vedi commento in
   woocommerce/checkout/form-checkout.php) — l'attributo data-review-view
   su form.checkout (impostato da assets/js/theme-checkout.js, MAI
   sull'elemento che l'AJAX sostituisce) filtra a vista cosa mostrare di
   quel blocco per ciascuno step. Step 5 "Riepilogo" non ha alcun filtro
   (nessun attributo): vista nativa piena, comportamento identico a prima
   di questo cambio.
   Selettori nativi stabili usati (verificati nel core WooCommerce):
   .woocommerce-checkout-review-order-table (tabella prodotti+totali),
   tr.woocommerce-shipping-totals (riga spedizione, cart/cart-shipping.php),
   #payment > .wc_payment_methods (lista pagamento) vs .form-row.place-order
   (termini + bottone nativo "Effettua ordine", mai spostato — vedi
   checkout/payment.php, non riscritto). */
form.checkout[data-review-view="shipping"] .woocommerce-checkout-review-order-table thead,
form.checkout[data-review-view="shipping"] .woocommerce-checkout-review-order-table tbody,
form.checkout[data-review-view="shipping"] .woocommerce-checkout-review-order-table tfoot tr:not(.woocommerce-shipping-totals),
form.checkout[data-review-view="shipping"] #payment {
  display: none;
}
form.checkout[data-review-view="payment"] .woocommerce-checkout-review-order-table,
form.checkout[data-review-view="payment"] #payment .form-row.place-order {
  display: none;
}
/* Il pannello 3-5 stampa 3 titoli (form-checkout.php: "Metodo di spedizione"/
   "Metodo di pagamento"/"Il tuo ordine") — solo quello che corrisponde alla
   vista corrente è visibile, stesso attributo data-review-view di sopra
   (nessuna riga JS aggiuntiva necessaria). Step 5 = nessun attributo =
   mostra il titolo "summary". */
.checkout-review-heading { display: none; }
form.checkout:not([data-review-view]) .checkout-review-heading[data-review-heading="summary"] { display: block; }
form.checkout[data-review-view="shipping"] .checkout-review-heading[data-review-heading="shipping"] { display: block; }
form.checkout[data-review-view="payment"] .checkout-review-heading[data-review-heading="payment"] { display: block; }

/* Metodo di spedizione unico disponibile (input hidden, mai radio — vedi
   cart/cart-shipping.php): :has(input:checked) non scatta mai sugli hidden,
   quindi la card non si evidenziava mai come "selezionata" pur essendolo
   sempre di fatto (nessuna alternativa possibile). is-only-option (classe
   impostata lato server quando count($available_methods) === 1) copre
   esattamente questo caso. */
.shipping-option.is-only-option { border-color: var(--color-gold); }

/* Step "Pagamento" senza alcun gateway da scegliere (ordine che non
   richiede pagamento, es. coupon 100%): #payment esiste sempre ma
   .wc_payment_methods non viene renderizzato da WooCommerce in quel caso —
   senza questo messaggio lo step risulterebbe vuoto e senza spiegazione. */
form.checkout[data-review-view="payment"] #payment:not(:has(.wc_payment_methods))::before {
  content: "Il tuo ordine non richiede alcun pagamento — puoi procedere al riepilogo.";
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 32rem) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
.form-row-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 32rem) { .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } }

.payment-option, .shipping-option {
  display: block;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.payment-option:has(input:checked), .shipping-option:has(input:checked) { border-color: var(--color-gold); }
/* Bug reale corretto in audit (overflow orizzontale su mobile, checkout step
   Spedizione/Pagamento a 320px — verificato con un browser headless: la
   <table> di riepilogo cresceva 13px oltre il viewport): stesso principio
   già corretto altrove in questo file (min-width:auto è il default sui
   flex item, mai 0 — un testo lungo come "Spedizione Standard (3-5 giorni
   lavorativi)" dentro .option-top-left, annidato in .option-top dentro una
   <td> di tabella, non poteva mai andare a capo, forzando l'intera riga
   (e quindi la tabella con table-layout:auto) a crescere per contenerlo su
   una sola riga). min-width:0 lascia che il testo vada a capo normalmente. */
.option-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.option-top-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.option-desc { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.4rem; padding-left: 1.7rem; }

/* flex-wrap + flex:1 sui bottoni: "Conferma ordine" (più lungo di "Continua")
   non entra affiancato a "Indietro" a 320px con il padding standard di .btn
   (white-space:nowrap) — causava overflow orizzontale reale della pagina al
   passo 5 del checkout, verificato misurando scrollWidth. Con il wrap va su
   una riga propria ed espande a piena larghezza invece di essere tagliato. */
.checkout-nav-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 2.25rem; }
.checkout-nav-row .btn { flex: 1 1 auto; }
.summary-line-item { display: flex; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.85rem; }
.summary-line-item img { width: 56px; aspect-ratio: 1; object-fit: cover; flex-shrink: 0; }

.processing-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11,11,12,0.92);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1.25rem;
  color: #fff;
}
.processing-overlay.is-active { display: flex; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--color-line); border-top-color: var(--color-gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Conferma ordine */
.confirmation-hero { text-align: center; max-width: 640px; margin-inline: auto; }
.confirmation-check { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-bg); border: 1px solid var(--color-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }

/* ============================================================
   MOCKUP: assets/css/account.css — Area personale (redesign)
   ============================================================ */
.account-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .account-layout { grid-template-columns: 260px 1fr; } }

/* ---------- Sidebar: utente + navigazione ---------- */
.account-sidebar {
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--color-carbon-2); box-shadow: var(--shadow-card);
}
@media (min-width: 64rem) { .account-sidebar { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.account-user {
  display: flex; align-items: center; gap: 0.9rem;
  padding-bottom: 1.25rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-line-dark);
}
.account-avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-champagne); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.05rem;
}
.account-user-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.account-user-email { font-size: 0.76rem; color: var(--color-text-muted); overflow-wrap: anywhere; margin-top: 0.15rem; }

.account-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.account-nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.85rem; border-radius: var(--radius-md);
  font-size: 0.88rem; color: var(--color-text-muted); width: 100%; text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.account-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.account-nav-link:hover { background: var(--color-carbon); color: var(--color-text); }
.account-nav-link.is-active { background: var(--color-champagne); color: var(--color-ink); }
.account-nav-link.is-active svg { opacity: 1; }
.account-nav-link--logout { margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--color-line-dark); border-radius: 0 0 var(--radius-md) var(--radius-md); }

.auth-form-wrap { max-width: 440px; margin: 0 auto; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
@media (max-width: 26.875rem) { .auth-form-wrap { padding: var(--space-5) var(--space-4); } }
.auth-demo-note { margin-top: 1.5rem; padding: 0.9rem; border: 1px solid var(--color-sand); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--color-text-on-light-muted); }
.auth-links-row { display: flex; justify-content: space-between; font-size: 0.78rem; margin-top: 1rem; }
.auth-links-row a, .auth-form-wrap .success-message + p a { text-decoration: underline; }

/* ---------- Hero di benvenuto (dashboard) ---------- */
.account-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: var(--space-6); border-radius: var(--radius-lg); margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--color-carbon-2), var(--color-carbon));
  box-shadow: var(--shadow-card);
}
.account-hero-title { font-size: 1.7rem; margin: 0.3rem 0 0.6rem; }
.account-hero-stats { display: flex; gap: 2rem; flex-shrink: 0; }
.account-stat { text-align: center; }
.account-stat-value { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--color-champagne-light); line-height: 1; }
.account-stat-label { display: block; margin-top: 0.35rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

/* ---------- Intestazione di sezione (Ordini recenti, ecc.) ---------- */
.account-section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.account-section-title h2 { margin-bottom: 0; }
.account-section-title a { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: underline; color: var(--color-text-muted); }
.account-section-title a:hover { color: var(--color-text); }

/* ---------- Card ordine ---------- */
.order-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  padding: 1.15rem 1.4rem; border-radius: var(--radius-md);
  background: var(--color-carbon-2); box-shadow: 0 0 0 1px transparent;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.order-card:hover { box-shadow: var(--shadow-card); transform: translateY(-1px); }
.order-card + .order-card { margin-top: 0.75rem; }
.order-card-link { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: 0.6rem; color: inherit; }
.order-card-number { display: block; font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; }
.order-card-date { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.order-card-arrow { flex-shrink: 0; opacity: 0.45; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.order-card:hover .order-card-arrow { opacity: 0.9; transform: translateX(3px); }
.order-card-total { font-family: var(--font-display); font-size: 1.05rem; margin-left: auto; white-space: nowrap; }

.order-status-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.32rem 0.7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted);
}
.order-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.order-status-badge--completed { color: var(--color-success); background: var(--color-success-bg); }
.order-status-badge--processing { color: var(--color-champagne-light); background: rgba(205, 179, 127, 0.16); }
.order-status-badge--on-hold, .order-status-badge--pending { color: var(--color-text-muted); background: rgba(255, 255, 255, 0.07); }
.order-status-badge--cancelled, .order-status-badge--failed, .order-status-badge--refunded { color: var(--color-error); background: var(--color-error-bg); }

/* ---------- Stato vuoto (ordini, wishlist) ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; border-radius: var(--radius-lg); background: var(--color-carbon-2); }
.empty-state-icon {
  width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: rgba(205, 179, 127, 0.14); color: var(--color-champagne);
  display: flex; align-items: center; justify-content: center;
}
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state p.font-display { font-size: 1.3rem; margin-bottom: 0.4rem; }
.empty-state .text-muted { max-width: 26rem; margin: 0 auto 1.5rem; }

/* ---------- Card dashboard (dati personali / indirizzo) ---------- */
.dashboard-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 40rem) { .dashboard-cards { grid-template-columns: 1fr 1fr; } }
.dashboard-card {
  position: relative; padding: var(--space-6); border-radius: var(--radius-lg);
  overflow-wrap: break-word; background: var(--color-carbon-2); box-shadow: var(--shadow-card);
  border-top: 2px solid var(--color-champagne);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dashboard-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.dashboard-card-icon {
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 1rem;
  background: rgba(205, 179, 127, 0.14); color: var(--color-champagne);
  display: flex; align-items: center; justify-content: center;
}
.dashboard-card-icon svg { width: 18px; height: 18px; }
.dashboard-card p:not(.eyebrow) { font-family: var(--font-display); font-size: 1.1rem; margin-top: 0.2rem; }
.dashboard-card address { font-style: normal; }

/* ---------- Pannello form (modifica dati / indirizzo) ---------- */
.account-form-panel { max-width: 100%; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-carbon-2); box-shadow: var(--shadow-card); }
@media (min-width: 26.875rem) { .account-form-panel { padding: var(--space-7); } }
.account-form-panel h2 { margin-top: 0; }
.account-form-subtitle { color: var(--color-text-muted); font-size: 0.85rem; margin: -0.5rem 0 1.5rem; }
.account-back-link { display: inline-block; margin-bottom: 1.5rem; }

/* ============ CONTATTI / LEGALI ============ */
.legal-content { max-width: 720px; }
.legal-content section { margin-bottom: 2rem; }
.legal-content h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.legal-content p { color: var(--color-text-muted); line-height: 1.75; }

.contact-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 56rem) { .contact-layout { grid-template-columns: 1fr 1fr; } }
.contact-form-panel { padding: var(--space-6); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
@media (min-width: 26.875rem) { .contact-form-panel { padding: var(--space-7); } }
.contact-info-block { font-size: 0.9rem; }
.contact-info-block p { margin-bottom: 0.5rem; color: var(--color-text-muted); }
.contact-map { aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--shadow-card); }
.contact-map img { width: 100%; height: 100%; object-fit: cover; }

/* Form CF7 dentro .contact-form-panel — bug reale corretto in audit: il
   modulo CF7 usato dal wizard non applica MAI class="input"/.field/
   .checkbox-field automaticamente (stesso principio già applicato al
   newsletter form, vedi .newsletter-form .wpcf7-acceptance sopra), quindi
   restava con lo stile grezzo di default del browser invece del design
   system del mockup. */
.contact-form-panel .wpcf7-form-control-wrap { display: block; }
.contact-form-panel .wpcf7-not-valid-tip { font-size: 0.8rem; color: var(--color-error); margin-top: 0.3rem; }
.contact-form-panel .wpcf7-acceptance .wpcf7-list-item { display: block; }
.contact-form-panel .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.78rem; cursor: pointer; margin-bottom: 1.25rem; }
.contact-form-panel .wpcf7-acceptance input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--color-champagne); flex-shrink: 0; }
.contact-form-panel .wpcf7-response-output { margin-top: 1rem; padding: 0; border: none; font-size: 0.85rem; }

/* ============ 404 ============ */
.notfound-wrap { text-align: center; padding: 6rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.notfound-code { font-family: var(--font-display); font-size: 5rem; color: var(--color-gold-light); line-height: 1; }

/* ============================================================
   PONTE CLASSI NATIVE WOOCOMMERCE
   Il tema disabilita i fogli di stile di default di WooCommerce
   (woocommerce_enqueue_styles → __return_empty_array, inc/woocommerce/setup.php)
   per non avere due sistemi di stile in conflitto. Le porzioni di checkout/
   carrello/account NON riscritte a mano (campi WooCommerce_form_field(),
   bottone add-to-cart nativo, notice, tabelle ordine, metodi di pagamento)
   restano quindi con le classi REALI di WooCommerce, mai quelle del mockup
   originale (.input/.btn) — qui la stessa identità visiva "Equestrian
   Editorial Luxury" viene applicata a quelle classi native, non riscritta.
   ============================================================ */

/* Bottoni nativi (add-to-cart semplice/variabile, place order, update cart) */
.single_add_to_cart_button,
.checkout-button,
button.button,
input.button,
#place_order,
a.button.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; padding: 1.05rem 2.1rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  min-height: 48px; white-space: nowrap; cursor: pointer;
  background-color: var(--color-champagne); color: var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.single_add_to_cart_button:hover, .checkout-button:hover, button.button:hover, input.button:hover, #place_order:hover { background-color: var(--color-champagne-light); }
.single_add_to_cart_button.disabled, button.button.disabled, #place_order:disabled { opacity: 0.45; cursor: not-allowed; }
a.button.wc-forward { background-color: transparent; border-color: currentColor; color: inherit; }

/* Campi form nativi (checkout/form-billing.php, myaccount, ricerca prodotti) */
.woocommerce form .form-row { margin-bottom: var(--space-4); }
.woocommerce form label { display: block; font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce-page form .input-text {
  width: 100%; background-color: var(--color-carbon); border: 1px solid var(--color-line-dark); color: var(--color-text);
  padding: 0.9rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-body-sm); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease);
}
.woocommerce form .input-text:focus, .woocommerce form select:focus { border-color: var(--color-champagne); outline: none; }
/* Bug reale corretto in audit (overflow orizzontale su mobile, SOLO
   prodotti variabili — verificato con un browser headless su una pagina
   reale: document.documentElement.scrollWidth eccedeva clientWidth di
   esattamente [larghezza select] + [padding sinistro del container], stesso
   valore misurato sul <select> qui sotto): ".woocommerce form select" (bridge
   sopra, specificità 0-1-2) vince su ".visually-hidden" (0-1-0, style.css più
   in alto) sullo stesso elemento — il <select> nativo nascosto
   (single-product/add-to-cart/variable.php, .bfe-variation-native-select,
   letto da wc-add-to-cart-variation.js per il matching variazione; gli
   swatch si limitano a impostarne il valore) tornava così a larghezza piena
   (100% del contenitore) invece di restare 1×1px fuori vista — mai visibile
   a schermo (nessuna differenza di colore/opacità), semplicemente eccedeva i
   bordi della pagina allargando lo scroll orizzontale dell'intero
   documento. Solo i prodotti CON variazioni hanno questo <select>, da qui
   il bug presente solo su alcuni prodotti. Stesso prefisso della regola
   bridge + .visually-hidden: specificità 0-2-2, vince deterministicamente
   senza !important. */
.woocommerce form select.visually-hidden {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.woocommerce-invalid .input-text, .woocommerce form .input-text.woocommerce-invalid-required-field { border-color: var(--color-error) !important; }
.woocommerce-error, .woocommerce-NoticeGroup .woocommerce-error { color: var(--color-error); list-style: none; padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--color-error-bg); border-radius: var(--radius-sm); }
.woocommerce-message, .woocommerce-info { color: var(--color-success); padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--color-success-bg); border-radius: var(--radius-sm); list-style: none; }
.woocommerce-message a.button, .woocommerce-error a.button { margin-left: 1rem; }

/* Quantità (carrello, PDP) */
.quantity { display: inline-flex; }
.quantity .qty {
  width: 4.5rem; text-align: center; background-color: var(--color-carbon); border: 1px solid var(--color-line-dark);
  color: var(--color-text); border-radius: var(--radius-sm); min-height: 48px; font-size: var(--fs-body-sm);
}
/* Bug reale corretto in audit (screenshot: box quantità troppo largo, testo
   del pulsante "Aggiungi al carrello" in overflow): il campo quantità nativo
   WooCommerce ha anche class="input-text" — .woocommerce form .input-text
   (width:100%, riga 1758) ha specificità più alta di .quantity .qty pur
   essendo dichiarata prima, quindi vinceva sempre nel cascade, allargando il
   box al 100% e lasciando troppo poco spazio al pulsante accanto (flex:1). */
.woocommerce form .quantity .qty { width: 4.5rem; }

/* Tabelle ordine/carrello native (order/order-details.php, cart_totals.php) */
.woocommerce table.shop_table, .order_details, table.woocommerce-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
.order_details th, .order_details td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--color-line-dark); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { font-weight: 600; }
/* Bug reale corretto in audit (overflow orizzontale su schermi molto
   stretti, ≤320px — verificato con un browser headless su checkout step
   Spedizione/Riepilogo): table-layout:auto (default) non forza MAI una
   cella sotto la sua larghezza "preferita" in base al contenuto — la riga
   spedizione (.woocommerce-shipping-totals, <th>Spedizione</th> + <td> con
   la card .shipping-option scelta, es. "Spedizione Standard (3-5 giorni
   lavorativi)") superava lo spazio disponibile pur avendo la tabella
   width:100%. Impilare <th>/<td> verticalmente su schermi molto stretti
   elimina il problema alla radice invece di combattere l'algoritmo
   automatico della tabella. */
@media (max-width: 26.5rem) {
  .woocommerce-checkout-review-order-table .woocommerce-shipping-totals { display: block; }
  .woocommerce-checkout-review-order-table .woocommerce-shipping-totals th,
  .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td { display: block; width: 100%; }
  /* Margine residuo di pochi px sullo schermo più stretto testato (320px)
     tra le colonne "Prodotto"/"Subtotale" nella tabella riepilogo (step
     Riepilogo) — "Subtotale" è una singola parola, non può andare a capo:
     il padding orizzontale standard delle celle è l'unico margine
     recuperabile a quella larghezza. */
  .woocommerce table.shop_table th, .woocommerce table.shop_table td,
  .order_details th, .order_details td { padding: 0.5rem 0.3rem; }
}

/* Metodi di pagamento/spedizione (dentro #order_review) — ogni opzione è
   ora una card .payment-option/.shipping-option (checkout/payment-method.php
   e cart/cart-shipping.php, override completi — vedi quei file); queste
   regole restano come bridge generico per markup nativo non coperto da
   quelle card (es. messaggio "nessun metodo disponibile"). */
/* Niente gap qui: .payment-option/.shipping-option (sotto) hanno già un
   proprio margin-bottom — un gap aggiuntivo raddoppierebbe lo spazio tra
   le card. */
.woocommerce ul.wc_payment_methods, .woocommerce ul.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.woocommerce ul.wc_payment_methods li, .woocommerce ul.woocommerce-shipping-methods li { padding: 0.75rem 0; border-bottom: 1px solid var(--color-line-dark); }
/* La card .shipping-option/.payment-option gestisce già bordo/padding/sfondo
   propri — l'<li> che la contiene non deve più aggiungere la vecchia riga
   con bordo sotto, altrimenti risulta un doppio bordo/spaziatura. */
.woocommerce ul.wc_payment_methods li:has(.payment-option),
.woocommerce ul.woocommerce-shipping-methods li:has(.shipping-option) { padding: 0; border-bottom: none; }
.woocommerce .payment_box { margin-top: 0.75rem; padding: 1rem; background: var(--color-carbon-2); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--color-text-muted); }

/* Superfici chiare (account/checkout su surface-ivory/parchment): stessi
   campi/tabelle con contrasto adattato, come già fa .input per il mockup. */
.surface-light .woocommerce form .input-text, .surface-ivory .woocommerce form .input-text, .surface-parchment .woocommerce form .input-text,
.surface-light .woocommerce form select, .surface-ivory .woocommerce form select, .surface-parchment .woocommerce form select,
.surface-light .quantity .qty, .surface-ivory .quantity .qty, .surface-parchment .quantity .qty {
  background-color: var(--color-white); color: var(--color-text-on-light); border-color: var(--color-line-light);
}

/* ============================================================
   FIX: .theme-floating (pulsanti flottanti tel/WhatsApp, footer.php)
   Bug reale trovato in audit: il markup è quello GENERICO del boilerplate
   (mai sostituito con un equivalente mockup, che non ha pulsanti flottanti
   di suo) e la sua unica definizione vive in assets/css/base.css (NO-MODIFY)
   — che usa nomi di variabili DIVERSI dal set di token di questo progetto
   (--z-sticky, --radius-full, --color-text-on-primary, --shadow-lg,
   --transition-fast: nessuno di questi esiste in variables.css, portato dal
   tokens.css del mockup). --space-6/--space-3 esistono per coincidenza in
   entrambi i sistemi quindi il posizionamento fisso funzionava già; ma
   background/border-radius/ombra/transizione risultavano tutti invalidi —
   un bottone "fantasma" trasparente e squadrato, non un cerchio pieno.
   ============================================================ */
.theme-floating { z-index: 500; }
.theme-floating__btn {
  border-radius: 50%;
  color: var(--color-ink);
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-fast) var(--ease);
}
.theme-floating__btn--phone { background: var(--color-champagne); }
.theme-floating__btn--phone:hover { background: var(--color-champagne-light); }

/* Bug reale trovato in audit responsive: .theme-floating è fixed in basso a
   destra su TUTTE le pagine — nelle pagine mio-account (dashboard, profilo,
   indirizzi) capita di sovrapporsi a link/campi form proprio in quella zona
   (es. "Vedi tutti gli ordini", bordo campo Cognome), già al caricamento
   senza bisogno di scroll, su altezze di viewport comuni (~900px). Nascosto
   solo qui: sul resto del sito il posizionamento non collide con nulla di
   critico ed è stato lasciato invariato. */
body.woocommerce-account .theme-floating { display: none; }

/* ============================================================
   Paginazione nativa WooCommerce (woocommerce_pagination() — shop/categorie/
   collezioni/ordini account) — nessuna classe .pagination* del mockup la
   copre (il mockup non aveva paginazione server-side reale), e i fogli di
   stile di default WooCommerce sono disabilitati: senza questo blocco i link
   pagina sarebbero testo blu di sistema non stilizzato.
   ============================================================ */
/* Selettori composti (a.page-numbers, non .page-numbers a): paginate_links()
   con type='list' (woocommerce_pagination(), dentro <ul class="page-numbers">)
   applica la classe "page-numbers" SIA al <ul> esterno SIA a ciascun <a>/<span>
   individuale al suo interno — ma con type='plain' (default di WP core,
   the_posts_pagination() in search.php: nessun <ul>, solo <div class="nav-links">
   con <a>/<span> diretti) la classe compare SOLO sui singoli elementi, mai su
   un contenitore. Un selettore discendente ".page-numbers a" funziona per il
   primo caso "per coincidenza" (il <ul> esterno fa da ancestor) ma non
   intercetta affatto il secondo — bug reale, la paginazione dei risultati di
   ricerca sarebbe rimasta testo blu di sistema non stilizzato anche dopo il
   fix precedente. I selettori composti sotto funzionano identici in entrambi
   i casi, indipendentemente dall'annidamento. */
.woocommerce-pagination { display: flex; justify-content: center; margin-top: 2rem; }
.woocommerce-pagination ul.page-numbers, .shop-pagination .nav-links {
  display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center;
}
.woocommerce-pagination .page-numbers li { display: contents; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers,
.shop-pagination a.page-numbers, .shop-pagination span.page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem;
  border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm);
  font-size: 0.85rem; color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.woocommerce-pagination a.page-numbers:hover, .shop-pagination a.page-numbers:hover { background-color: var(--color-carbon-2); }
.woocommerce-pagination span.page-numbers.current, .shop-pagination span.page-numbers.current { background-color: var(--color-champagne); color: var(--color-ink); border-color: var(--color-champagne); }
.woocommerce-pagination span.page-numbers.dots, .shop-pagination span.page-numbers.dots { border: none; }
.surface-light .woocommerce-pagination a.page-numbers, .surface-ivory .woocommerce-pagination a.page-numbers, .surface-parchment .woocommerce-pagination a.page-numbers,
.surface-light .shop-pagination a.page-numbers, .surface-ivory .shop-pagination a.page-numbers, .surface-parchment .shop-pagination a.page-numbers {
  color: var(--color-text-on-light); border-color: var(--color-line-light);
}

/* ============================================================
   PONTE PLUGIN cj-product-gallery
   Bug reale corretto in audit: il plugin non era mai stato ristilizzato per
   questo tema — la galleria prodotto (uno degli elementi più in vista di
   ogni PDP) usava ancora gli accenti blu/grigio di default del plugin
   (#2271b1, colore standard dell'admin WordPress), in netto contrasto con
   la palette "Equestrian Editorial Luxury" del resto del sito (champagne/oro
   per ogni altro stato attivo/selezionato — bottone wishlist, paginazione,
   stepper checkout). Sovrascritti solo gli accenti colore, non il layout.
   ============================================================ */
.cjpg-gallery .cjpg-thumb--active, .cjpg-gallery .cjpg-thumb:hover { border-color: var(--color-champagne); }
.cjpg-gallery .cjpg-zoom-lens { border-color: var(--color-champagne); }

/* ============================================================
   PONTE FORM ACCOUNT NATIVI WOOCOMMERCE
   Bug reale trovato in audit: "Modifica dati"/"Modifica indirizzo" non hanno
   un template custom nel tema (a differenza di dashboard/ordini/login/
   recupera-password, tutti ristilizzati con markup proprio) — WooCommerce
   ricade sui suoi template di default, il cui markup (.input-text, .form-row,
   .button) non riceveva NESSUNO stile del design system: campi con bordo/
   colore browser grezzi dentro una pagina altrimenti scura ed elegante. Qui si
   ristilizzano solo i campi/bottoni via le classi WC native, senza toccare il
   markup. Scope volutamente limitato a .account-content (dati/indirizzo,
   sempre dentro il wrapper di my-account.php per un utente loggato) — NON
   esteso a .woocommerce-form generico per non rischiare di alterare
   form-login.php/form-lost-password.php/form-reset-password.php (già
   ristilizzati con markup proprio, vedi woocommerce/myaccount/).
   ============================================================ */
/* Bug reale corretto in audit: myaccount/form-edit-address.php nativo di WC
   (mai riscritto, a differenza degli altri template account) stampa un <h2>
   nudo senza class="font-display" — l'unico titolo di sezione account privo
   di questa classe, quindi l'unico a renderizzare nel body font (Inter)
   invece del serif di visualizzazione usato ovunque altrove nel tema. */
.account-content h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1rem; font-weight: var(--fw-regular, 400); }

/* Il modulo indirizzo nativo (woocommerce_form_field()) applica le classi
   form-row-first/form-row-last/form-row-wide che WooCommerce stilizza di
   default (float:left/right, width:47%) — foglio di stile disabilitato in
   questo tema (woocommerce_enqueue_styles → __return_empty_array), quindi
   senza queste regole i campi restano impilati uno per riga invece
   dell'affiancamento a 2 colonne coerente con .form-row-2 (registrazione). */
.account-content .woocommerce-address-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.account-content .form-row-first,
.account-content .form-row-last { flex: 1 1 220px; }
.account-content .form-row-wide { flex-basis: 100%; }

.account-content .woocommerce-form-row,
.account-content .form-row { margin-bottom: 1.1rem; }
.account-content .woocommerce-form-row label,
.account-content .form-row label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.account-content input.input-text,
.account-content select,
.account-content textarea {
  width: 100%;
  background-color: var(--color-carbon);
  border: 1px solid var(--color-line-dark);
  color: var(--color-text);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  min-height: 48px;
}
.account-content input.input-text:focus,
.account-content select:focus,
.account-content textarea:focus { border-color: var(--color-champagne); outline: none; }
.account-content fieldset { border: 1px solid var(--color-line-dark); border-radius: var(--radius-md); padding: 1.25rem; margin: 1.5rem 0; }
.account-content fieldset legend { padding: 0 .5rem; color: var(--color-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.account-content .button,
.account-content button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.9rem 1.75rem; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background-color: var(--color-champagne); color: var(--color-ink);
}
.account-content .button:hover,
.account-content button[type="submit"]:hover { background-color: var(--color-champagne-light); }