/**
 * style.css — Stili specifici del progetto
 *
 * Questo file è caricato dopo base.css e variables.css.
 * Inserire qui solo gli override e le classi custom del progetto.
 *
 * Pattern comuni da ricordare:
 *
 * ── Fix Elementor container padding ──────────────────────────────────────────
 * Quando un widget non deve avere padding nel suo container Elementor:
 *
 *   .elementor-section:has(.nome-widget),
 *   .e-con:has(.nome-widget),
 *   .elementor-widget-wrap:has(.nome-widget) {
 *     padding-top: 0 !important;
 *     padding-bottom: 0 !important;
 *   }
 *
 * ── Fix btn text-transform da Elementor ──────────────────────────────────────
 * Elementor può iniettare text-transform: uppercase sui pulsanti.
 * Se necessario aggiungere a .btn:
 *
 *   text-transform: none;
 *   letter-spacing: normal;
 *
 * ── Fix pulse-ring click interception ────────────────────────────────────────
 * Se ::before blocca i click sui link dentro .pulse-ring:
 *
 *   .pulse-ring::before { pointer-events: none; }
 *   .pulse-ring a, .pulse-ring button { position: relative; z-index: 1; }
 *
 * ── SVG icons ────────────────────────────────────────────────────────────────
 * Usare sempre SVG inline nei widget PHP, non <use href="#id">.
 * Lo sprite potrebbe non essere nel DOM al momento del render del widget.
 */

/* ════════════════════════════════════════════════════════════════════════════
   TOKEN ORIGINALI DEL MOCKUP (mockup-capinera/assets/css/styles.css)
   Il mockup usa i propri nomi di custom property (--bg-primary, --gold, ecc.),
   diversi da quelli generici del boilerplate già mappati in variables.css
   (--color-primary, --color-bg, ecc.). Per poter copiare il CSS del mockup
   senza retradurre a mano ogni singola regola (rischio di errori di trascrizione
   su centinaia di righe), questo blocco ridichiara gli stessi nomi originali
   con gli stessi valori — coesistono senza conflitto con variables.css.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --bg-primary: #1E1E1E;
    --bg-secondary: #262626;
    --bg-card: #2C2C2C;
    --bg-elevated: #333333;
    --green-dark: #253029;
    --green-mid: #2F3E36;
    --green-light: #3A4E42;
    --gold: #B89A6A;
    --gold-light: #C9AD7E;
    --text-primary: #E8E8E8;
    --text-secondary: #A0A0A0;
    --text-muted: #6A6A6A;
    --divider: #3A3A3A;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --navbar-bg: rgba(30, 30, 30, 0.95);
    --overlay-heavy: rgba(20, 20, 20, 0.75);
    --overlay-medium: rgba(20, 20, 20, 0.45);
    --overlay-light: rgba(20, 20, 20, 0.2);
    --overlay-hover: rgba(20, 20, 20, 0.85);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --badge-sale-bg: #6B2D2D;
}

/* ============================================
   FONDAMENTA (reset/tipografia/bottoni) — da mockup styles.css
   ============================================ */
/* html+body overflow-x:hidden ridondante — su alcuni browser mobile la
   propagazione dell'overflow di body al viewport non è affidabile al 100%;
   impostarlo su entrambi è la difesa standard, nessun costo aggiuntivo. */
html { overflow-x: hidden; max-width: 100vw; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
a:hover { color: var(--gold); }
/* color: inherit — i <button> (a differenza di <a>, già coperti sopra) NON
   ereditano il colore del testo per default nella maggior parte dei browser
   (usano il colore di sistema del bottone). Senza questa riga ogni icona SVG
   con stroke="currentColor" dentro un <button> (ricerca, burger mobile, ecc.)
   renderizzava nel colore di default del browser invece che nel bianco/oro
   del tema. */
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    line-height: 1.15;
}

.section-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--text-primary);
    margin-bottom: 20px;
}
.section-title em { font-style: italic; color: var(--gold); }

.section-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.7;
}

.section-header { text-align: center; margin-bottom: 48px; }
.section-header .section-desc { margin: 0 auto; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 100px;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary { background: var(--gold); color: var(--bg-primary); }
.btn-primary:hover {
    background: var(--gold-light);
    color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--gold);
    border: 1.5px solid var(--gold);
}
.btn-secondary:hover { background: var(--gold); color: var(--bg-primary); transform: translateY(-2px); }

.btn-ghost {
    background: rgba(184, 154, 106, 0.1);
    color: var(--text-primary);
    border: 1.5px solid rgba(184, 154, 106, 0.2);
    backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: rgba(184, 154, 106, 0.18); border-color: rgba(184, 154, 106, 0.4); }

/* .btn-full — presente nel mockup (styles.css) ma mai portato nel tema:
   usata da footer.php (form login/registrazione dell'auth-modal) e ora anche
   dal pulsante "Acquista la Confezione da N" nel dettaglio prodotto. */
.btn-full { width: 100%; }

/* Bottoni senza href: aspetto normale, non cliccabili */
a.btn:not([href]) { cursor: default; pointer-events: none; }

/* .btn-sm — già usato in widget-eventi-list.php, widget-featured-products.php
   e single-product.php ma mai definito: senza questa regola i pulsanti
   "piccoli" (Aggiungi/Dettagli sulle card prodotto, Prenota negli eventi)
   rendevano con lo stesso padding grande dei pulsanti CTA principali. */
.btn-sm { padding: 10px 20px; font-size: .85rem; }

.section-cta { text-align: center; margin-top: 48px; }

/* ============================================
   PAGE HERO (breadcrumb + H1 + desc) — riusato da tutte le pagine interne
   ============================================ */
.page-hero {
    background: linear-gradient(160deg, var(--bg-primary) 0%, var(--green-dark) 60%, var(--green-mid) 100%);
    padding: 140px 0 60px;
    text-align: center;
    margin-top: var(--announcement-height, 38px);
}
.page-hero .breadcrumb { justify-content: center; margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--text-primary); margin-bottom: 12px; }
.page-hero h1 em { font-style: italic; color: var(--gold); }
/* ── Variante Eventi (dal mockup eventi.html/.page-hero--eventi) — foto di
   sfondo (h005.jpg, inline via style="background-image" impostata dal widget
   Page Hero, non da CSS: stesso pattern già in uso per .category-card__image)
   + overlay scuro in gradiente per la leggibilità del testo sopra. Mai portata
   nel tema: solo .page-hero generico esisteva, identico su ogni pagina interna. */
.page-hero--eventi {
    position: relative;
    background-size: cover;
    background-position: center 40%;
}
.page-hero--eventi::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8,8,8,.68) 0%, rgba(8,8,8,.52) 100%);
}
.page-hero--eventi .container { position: relative; z-index: 1; }
.page-hero__desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 16px auto 0;
    max-width: 720px;
    line-height: 1.75;
    text-wrap: balance;
}

.breadcrumb {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.breadcrumb a { color: var(--gold); transition: var(--transition); }
.breadcrumb a:hover { color: var(--gold-light); }

.page-content { padding: 80px 0; }
.intro-text { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.intro-text p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }
.intro-text p:first-child { font-size: 1.2rem; }

/* ============================================
   HERO immagine full-width (usato su Chi Siamo, interne varie)
   ============================================ */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg__video, .hero-bg__img { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom,
        var(--overlay-medium) 0%, var(--overlay-light) 40%,
        var(--overlay-light) 60%, var(--overlay-medium) 100%);
}
.hero-content { position: relative; z-index: 3; text-align: center; padding: 120px 20px 80px; max-width: 800px; margin: 0 auto; }
.hero-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
    position: relative;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content: ''; position: absolute; top: 50%; width: 40px; height: 1px; background: var(--gold); opacity: 0.4;
}
.hero-eyebrow::before { right: calc(100% + 16px); }
.hero-eyebrow::after { left: calc(100% + 16px); }
.hero-title { font-size: clamp(2.8rem, 6vw, 5rem); color: var(--text-primary); margin-bottom: 28px; line-height: 1.08; }
.hero-title em { font-style: italic; color: var(--gold-light); }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   WINERY SPOTLIGHT (storia azienda — immagini a stack + testo)
   ============================================ */
.winery-spotlight {
    padding: 100px 0;
    background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 120px, transparent calc(100% - 120px), var(--bg-primary) 100%), var(--bg-secondary);
    position: relative;
    overflow: hidden;
}
.winery-spotlight__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.winery-img-stack { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: end; }
.winery-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.winery-img:hover { transform: translateY(-3px); }
.winery-img--main { aspect-ratio: 3/4; }
.winery-img--accent { aspect-ratio: 3/4; transform: translateY(-40px); }
.winery-img img { width: 100%; height: 100% !important; object-fit: cover; }
.winery-spotlight__description { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 32px; }
.winery-spotlight__content p:not(.winery-spotlight__description) { color: var(--text-secondary); line-height: 1.75; }

@media (max-width: 900px) {
    .winery-spotlight__inner { grid-template-columns: 1fr; gap: 48px; }
    .winery-spotlight__images,
    .winery-img-stack { max-width: 500px; }
}

/* ============================================
   GIFT BANNER (blocco CTA a due colonne — territorio, CTA finale valori, ecc.)
   ============================================ */
.gift-banner { padding: 100px 0; background: var(--green-dark); position: relative; overflow: hidden; }
.gift-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 90% 50%, rgba(184, 154, 106, 0.06) 0%, transparent 50%);
}
.gift-banner__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.gift-banner__content { color: var(--text-primary); }
.gift-banner__content .section-title { color: var(--text-primary); }
.gift-banner__content .section-title em { color: var(--gold); }
.gift-banner__content p { font-size: 1rem; line-height: 1.75; opacity: 0.8; margin-bottom: 32px; }
.gift-banner__image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

@media (max-width: 900px) {
    .gift-banner__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   PRODUZIONE STATS (4 statistiche in riga — Chi Siamo)
   ============================================ */
.produzione-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 64px;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    padding: 56px 0;
}
.produzione-stat { padding: 0 36px; border-left: 1px solid var(--divider); }
.produzione-stat:first-child { border-left: none; padding-left: 0; }
.produzione-stat:last-child { padding-right: 0; }
.produzione-stat__icon { color: var(--gold); margin-bottom: 20px; }
.produzione-stat__value { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 8px; }
.produzione-stat__label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 10px; }
.produzione-stat__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; }

@media (max-width: 768px) {
    .produzione-stats { grid-template-columns: repeat(2, 1fr); gap: 40px 0; padding: 40px 0; }
    .produzione-stat { padding: 0 20px; }
    .produzione-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .produzione-stat:nth-child(3), .produzione-stat:nth-child(4) { border-top: 1px solid var(--divider); padding-top: 40px; }
}

/* ============================================
   VALORI — sezioni alternate testo/immagine
   ============================================ */
.valori-sezione { padding: 100px 0; background: var(--bg-primary); }
.valori-sezione--alt { background: var(--bg-secondary); }
.valori-sezione__inner { display: grid; gap: 80px; align-items: center; }
.valori-sezione__inner--img-dx { grid-template-columns: 1fr 1fr; }
.valori-sezione__inner--img-sx { grid-template-columns: 1fr 1fr; }
.valori-sezione__icon {
    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
    background: rgba(184, 154, 106, 0.1); border: 1px solid rgba(184, 154, 106, 0.2);
    border-radius: var(--radius-md); color: var(--gold); margin-bottom: 8px;
}
.valori-sezione__content .section-title { margin-top: 12px; margin-bottom: 28px; }
.valori-sezione__body p { font-size: 1rem; line-height: 1.85; color: var(--text-secondary); margin-bottom: 16px; }
.valori-sezione__body p:last-child { margin-bottom: 0; }
.valori-sezione__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.valori-sezione__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.valori-sezione__image:hover img { transform: scale(1.03); }

/* ===== CONTATTI (da mockup styles.css righe ~3778-3977) ===== */
.contatti-section { padding: 72px 0 100px; }
.contatti-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
/* #contatti-grid-row — ID CSS fissato dalla riga Elementor Info+Form
   (el_row() in inc/setup-wizard.php, parametro $css_id): senza un max-width
   esplicito qui, la riga si affida al content-width di default di Elementor
   (un'impostazione globale non controllata da questo codice, tipicamente
   diversa sia dal .container del tema — usato dal Page Hero sopra — sia dal
   max-width:1080px usato dagli altri blocchi Contatti) — risultando in un
   contenitore di larghezza diversa/non allineata rispetto al resto della
   pagina. Stesso valore 1080px del mockup (.contatti-section .container). */
#contatti-grid-row { max-width: 1080px; margin-inline: auto; padding-inline: var(--container-padding-x); }
/* Gap 80px tra le due colonne (dal mockup .contatti-grid: gap:80px) — 40px per
   lato invece di un gap CSS Grid nativo, dato che qui sono due colonne
   Elementor reali (el_row(), 'gap' => 'no' disabilita il gap automatico di
   Elementor per applicare questo valore preciso senza sommarsi ad esso). */
#contatti-grid-row .elementor-column:first-child { padding-right: 40px; }
#contatti-grid-row .elementor-column:last-child { padding-left: 40px; }
/* width: ...% !important — Elementor Classic Columns non applica la
   percentuale di _column_size come stile inline libero: genera invece una
   classe .elementor-col-NN scelta tra un set fisso di preset arrotondati, che
   può non corrispondere esattamente al rapporto 41.67/58.33 (1:1.4, dal
   mockup .contatti-grid) passato in build_contatti(). Per garantire il
   rapporto esatto lo si forza qui via CSS, con !important perché deve vincere
   sulla classe .elementor-col-NN generata da Elementor stesso. Vale solo
   sopra i 900px — sotto quella soglia le colonne devono impilarsi al 100%
   (vedi il blocco @media più sotto), non restare fianco a fianco al rapporto
   fisso. */
@media (min-width: 901px) {
    #contatti-grid-row .elementor-column:first-child { width: 41.67% !important; }
    #contatti-grid-row .elementor-column:last-child { width: 58.33% !important; }
}
@media (max-width: 900px) {
    /* dal mockup: sotto i 900px la griglia impila le colonne con gap:48px
       invece di 80px — qui il gap verticale tra le colonne impilate viene dal
       margin-top del secondo blocco, non da un gap CSS Grid nativo.
       width:100% !important — forza esplicitamente lo stacking a piena
       larghezza: il breakpoint reattivo interno di Elementor (che sposta le
       colonne su una riga separata) è un'impostazione globale non allineata
       di per sé ai 900px del mockup — senza questo override le colonne
       potrebbero restare fianco a fianco (schiacciate) in una fascia di
       larghezze in cui Elementor non ha ancora impilato ma noi abbiamo già
       tolto padding/gap. */
    #contatti-grid-row .elementor-column:first-child,
    #contatti-grid-row .elementor-column:last-child { padding-right: 0; padding-left: 0; width: 100% !important; }
    #contatti-grid-row .elementor-column:last-child { margin-top: 48px; }
}
.contatti-info__name { font-family: 'Playfair Display', serif; font-size: 1.65rem; line-height: 1.3; color: var(--text-primary); margin: 12px 0 32px; }
.contatti-info__name em { font-style: italic; color: var(--gold); }
.contatti-blocks { display: flex; flex-direction: column; }
.contatti-block { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.contatti-block:first-child { border-top: 1px solid var(--border-subtle); }
.contatti-block__icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(184,154,106,.08); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.contatti-block__label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.contatti-block__value { font-size: .9rem; color: var(--text-secondary); line-height: 1.75; }
.contatti-block__value a { color: var(--text-primary); text-decoration: none; transition: color .2s; }
.contatti-block__value a:hover { color: var(--gold); }
.contatti-social { display: flex; gap: 10px; margin-top: 28px; }
.contatti-social__link { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; transition: var(--transition); }
.contatti-social__link:hover { border-color: var(--gold); color: var(--gold); }
.contatti-form__title { font-family: 'Playfair Display', serif; font-size: 1.65rem; line-height: 1.3; color: var(--text-primary); margin: 12px 0 32px; }
.contatti-form__title em { font-style: italic; color: var(--gold); }
/* ── Form Contatti (dal mockup contatti.html/.contact-form) — nel tema esisteva
   solo la regola per <select>: input/textarea/label/checkbox/bottone del form
   CF7 non avevano alcuno stile, rendendo con i controlli nativi del browser
   invece dell'identità grafica del resto del sito. */
/* max-width:800px; margin:40px auto 60px — il mockup dichiara .contact-form
   DUE volte nello stesso foglio di stile condiviso (righe ~2881 e ~3693 di
   mockup-capinera/assets/css/styles.css): la seconda dichiarazione (posteriore
   nel file, quindi vincente in cascata a parità di specificità) sovrascrive
   margin-top:32px con questo margin shorthand + aggiunge max-width. Il
   risultato realmente renderizzato dal browser sul mockup non è solo la prima
   regola trovata. */
.contact-form { display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 40px auto 60px; }
/* margin-bottom:20px — dal mockup: dichiarato sul .form-row bare (non
   scoped a .contact-form) a riga ~3698, ma non in conflitto con nessuna
   proprietà di .contact-form .form-row (che non tocca margin-bottom), quindi
   si applica comunque per cascata. */
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* Email/Argomento/Messaggio sono ciascuno un <div> semplice (non ".form-row")
   annidato dentro il markup generato da Contact Form 7 (".contact-form >
   .wpcf7 > form > div") — non figli DIRETTI di ".contact-form", quindi il suo
   "gap:20px" (flex) non li raggiunge affatto: restavano attaccati senza
   alcuno spazio tra loro, a differenza della riga Nome/Cognome che ha una
   regola propria (".form-row", sopra). ":not(.form-row)" evita di sommare
   due margini sulla stessa riga. */
.contact-form form > div:not(.form-row) { margin-bottom: 20px; }
.contact-form label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
/* :not([type="checkbox"]) — senza questa esclusione la regola prenderebbe
   anche le checkbox di [acceptance]/[checkbox] (privacy/marketing), che
   diventerebbero un riquadro largo 100% con bordo/padding invece di un
   normale quadratino di spunta. */
.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
    width: 100%; padding: 14px 20px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm);
    background: var(--bg-card); font-family: 'Inter', sans-serif; font-size: .9rem; color: var(--text-primary);
    outline: none; transition: var(--transition);
}
.contact-form select { appearance: none; cursor: pointer; }
.contact-form input:not([type="checkbox"]):focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,154,106,.1); }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form .btn { width: 100%; justify-content: center; }
/* .wpcf7-acceptance/.wpcf7-checkbox — classi che Contact Form 7 applica da solo
   in base al tipo di tag (wpcf7_form_controls_class()), non serve alcuna
   opzione "class:" nello shortcode. [acceptance] avvolge sempre il contenuto
   in un <label> quando ha del testo; [checkbox] richiede l'opzione
   "use_label_element" per farlo altrettanto (vedi create_cf7_contatti_form()/
   create_cf7_evento_form() in inc/setup-wizard.php). */
/* NESSUN override qui per .contact-form — a differenza di quanto assunto in
   un round precedente, il vero comportamento del mockup per il checkbox del
   form Contatti (confermato da screenshot reale) è maiuscolo/grassetto/
   spaziato/block, cioè esattamente lo stile della regola generica
   ".contact-form label" più sopra (che ha specificità 0,1,1, inferiore alla
   regola qui sotto se la includessimo anche per .contact-form — .contact-form
   .wpcf7-acceptance label sarebbe 0,2,1 — e quindi vincerebbe sempre,
   sovrascrivendo per errore lo stile corretto). Il form Contatti va quindi
   lasciato ereditare ".contact-form label" senza alcuna eccezione per la
   checkbox — nessuna indentazione a bandiera, testo che va a capo su tutta
   la larghezza, uppercase/bold come gli altri campi. Il modale prenotazione
   Eventi (.prenota-modal) è invece diverso: non ha alcuna regola "label"
   generica in competizione, quindi lì si applica lo stile flex/indentato/
   peso normale sotto — confermato anch'esso da screenshot reale. */
.prenota-modal .wpcf7-acceptance label,
.prenota-modal .wpcf7-checkbox label {
    display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; color: var(--text-secondary); cursor: pointer;
    font-weight: 400; letter-spacing: normal; text-transform: none; margin-bottom: 0; line-height: 1.5;
}
/* width/height:18px — dal mockup, riga ~6141 (stesso contesto di cascata
   della nota sopra): dimensione esplicita della checkbox, non presente nella
   prima regola (~1884, solo margin-top+accent-color) ma non in conflitto con
   essa — si sommano entrambe via cascata. */
.contact-form .wpcf7-acceptance input[type="checkbox"],
.contact-form .wpcf7-checkbox input[type="checkbox"],
.prenota-modal .wpcf7-acceptance input[type="checkbox"],
.prenota-modal .wpcf7-checkbox input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; }
/* flex: 1; min-width: 0 — solo .prenota-modal (il suo <label> è display:flex):
   senza queste due lo span di testo (larghezza determinata dal contenuto) non
   si restringe per lasciare spazio alla checkbox, andando a capo su tutta la
   larghezza invece che restare indentato accanto/sotto alla checkbox. Non
   serve per .contact-form, il cui <label> è display:block (vedi sopra). */
.prenota-modal .wpcf7-list-item-label { flex: 1; min-width: 0; }
.contact-form .wpcf7-list-item-label a,
.prenota-modal .wpcf7-list-item-label a { color: var(--text-primary); text-decoration: underline; }
.contact-form .wpcf7-list-item-label a:hover,
.prenota-modal .wpcf7-list-item-label a:hover { color: var(--gold); }
/* I due blocchi checkbox (privacy/marketing) sono due .wpcf7-form-control-wrap
   separati: senza un margine tra loro restano attaccati (visibile nel mockup
   con uno spazio verticale regolare, non uno vistoso come nel bug precedente
   dovuto al margin-bottom:8px ereditato). */
.contact-form .wpcf7-form-control-wrap + .wpcf7-form-control-wrap,
.prenota-modal .wpcf7-form-control-wrap + .wpcf7-form-control-wrap { margin-top: 12px; display: block; }
.form-privacy-note { font-size: .78rem; color: var(--text-muted); }
.form-privacy-note a { color: var(--text-primary); text-decoration: underline; }
.form-privacy-note a:hover { color: var(--gold); }
@media (max-width: 640px) {
    .contact-form .form-row { grid-template-columns: 1fr; }
}
.contatti-map { margin-top: 80px; }
.contatti-map__title { font-family: 'Playfair Display', serif; font-size: 1.65rem; color: var(--text-primary); margin: 12px 0 28px; }
.contatti-map__title em { font-style: italic; color: var(--gold); }
.contatti-map__embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); line-height: 0; }
.contatti-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 56px 24px; }
.contatti-success h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--text-primary); margin: 0; }
.contatti-success p { font-size: .9rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }
.contatti-success__icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(184,154,106,.12); display: flex; align-items: center; justify-content: center; color: var(--gold); }

@media (max-width: 900px) {
    .contatti-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ===== EVENTI + PAGINAZIONE + MODALE PRENOTA (da mockup righe ~3042-3576) ===== */
.eventi-list { display: flex; flex-direction: column; gap: 16px; }
.evento-card {
    display: grid; grid-template-columns: 110px 1fr 280px; background: var(--bg-card); border-radius: var(--radius-lg);
    overflow: hidden; border: 1px solid var(--border-subtle); transition: border-color .25s ease, box-shadow .25s ease;
}
.evento-card:hover { border-color: rgba(184,154,106,.45); box-shadow: 0 8px 40px rgba(0,0,0,.28); }
.evento-card__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px;
    background: var(--bg-secondary); border-right: 1px solid var(--border-subtle); text-align: center; flex-shrink: 0;
}
.evento-card__day { font-family: 'Playfair Display', serif; font-size: 3rem; line-height: 1; color: var(--gold); font-weight: 700; }
.evento-card__month { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-top: 4px; }
.evento-card__year { font-size: .68rem; color: var(--text-muted); margin-top: 6px; }
.evento-card__body { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.evento-card__type { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.evento-card__title { font-family: 'Playfair Display', serif; font-size: 1.55rem; color: var(--text-primary); line-height: 1.2; margin: 0; }
.evento-card__desc { font-size: .88rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.evento-card__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }
.evento-card__meta-item { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); }
.evento-card__meta-item svg { color: var(--gold); flex-shrink: 0; }
.evento-card__footer { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.evento-card__price-tag { font-size: .82rem; font-weight: 600; color: var(--text-secondary); padding: 4px 10px; background: var(--bg-secondary); border-radius: 4px; }
.evento-card__img { position: relative; overflow: hidden; flex-shrink: 0; }
.evento-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.4,0,.2,1); display: block; }
.evento-card:hover .evento-card__img img { transform: scale(1.05); }

.prenota-modal { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.prenota-modal.active { opacity: 1; pointer-events: all; }
.prenota-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.prenota-modal__box {
    position: relative; z-index: 1; background: var(--bg-card); border-radius: var(--radius-lg); width: 100%; max-width: 720px;
    max-height: 92vh; overflow-y: auto; padding: 44px 48px; margin: 0 20px; transform: translateY(24px) scale(.98);
    transition: transform .35s cubic-bezier(.16,1,.3,1); border: 1px solid var(--border-subtle);
}
.prenota-modal.active .prenota-modal__box { transform: translateY(0) scale(1); }
.prenota-modal__close {
    position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; background: var(--bg-secondary); border: none;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
    transition: var(--transition); flex-shrink: 0;
}
.prenota-modal__close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.prenota-modal h2 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 6px; }
.prenota-modal__subtitle { font-size: .85rem; color: var(--text-secondary); margin-bottom: 24px; }
.prenota-modal__event-info { padding: 14px 18px; background: var(--bg-secondary); border-radius: var(--radius-md); border-left: 3px solid var(--gold); margin-bottom: 28px; }
.prenota-modal__event-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--text-primary); }
.prenota-modal__event-date { font-size: .8rem; color: var(--text-muted); margin-top: 3px; }
.prenota-modal .wpcf7-form-control-wrap, .prenota-modal .wpcf7 p { margin-bottom: 16px; }
/* :not([type="checkbox"]) — stesso motivo di .contact-form input più sotto:
   senza l'esclusione, le checkbox privacy/marketing di [acceptance]/[checkbox]
   ereditavano larghezza 100%/padding/bordo invece di restare un quadratino. */
.prenota-modal input:not([type="checkbox"]), .prenota-modal textarea, .prenota-modal select {
    width: 100%; padding: 11px 14px; background: var(--bg-secondary); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: .9rem;
    transition: border-color .2s ease, box-shadow .2s ease; outline: none; box-sizing: border-box;
}
.prenota-modal input:not([type="checkbox"]):focus, .prenota-modal textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,154,106,.12); background: var(--bg-elevated); }
.prenota-modal textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Nome scoped a "eventi-" per non collidere con .pagination/.pagination__btn
   già definiti in base.css (condiviso, mai da modificare) e usati da
   assets/js/pagination.js per la ricerca AJAX prodotti. */
.eventi-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 60px; }
.eventi-pagination-btn {
    min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--border-subtle); border-radius: 8px;
    background: var(--bg-card); color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: .9rem;
    font-weight: 500; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.eventi-pagination-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(184,154,106,.06); }
.eventi-pagination-btn--active { background: var(--gold); color: var(--bg-primary); border-color: var(--gold); }
.eventi-pagination-btn:disabled { opacity: .3; cursor: not-allowed; }
.eventi-pagination-info { text-align: center; margin-top: 16px; font-size: .82rem; color: var(--text-muted); }

@media (max-width: 900px) {
    .evento-card { grid-template-columns: 90px 1fr; }
    .evento-card__img { display: none; }
}
@media (max-width: 480px) {
    /* 32px/36px fissi (regola base sopra) su una card già stretta sottraevano
       ~72px orizzontali al testo — nessuna riduzione esisteva sotto i 900px. */
    .evento-card__body { padding: 22px 20px; }
}

/* ===== LEGALE / PAGAMENTI / SPEDIZIONI (da mockup righe ~4144-4442) ===== */
.legal-page { padding: 72px 0 100px; }
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.legal-sidebar { position: sticky; top: 130px; }
.legal-toc__heading { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.legal-toc__list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; }
.legal-toc__list li a { display: block; font-size: .78rem; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 4px; line-height: 1.4; transition: color .2s, background .2s; }
.legal-toc__list li a:hover { color: var(--gold); background: rgba(184,154,106,.07); }
.legal-sidebar__contact { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 16px; }
.legal-sidebar__contact-title { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.legal-sidebar__contact p { font-size: .78rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.legal-sidebar__contact a { color: var(--text-primary); text-decoration: none; transition: color .2s; }
.legal-sidebar__contact a:hover { color: var(--gold); }
.legal-company-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 40px; font-size: .85rem; color: var(--text-secondary); line-height: 1.8; }
.legal-company-card strong { color: var(--text-primary); font-size: .9rem; }
.legal-article { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--border-subtle); }
.legal-article:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-article__num { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.legal-article h2 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 400; color: var(--text-primary); margin: 0 0 14px; line-height: 1.3; }
.legal-article p { font-size: .88rem; color: var(--text-secondary); line-height: 1.85; margin: 0 0 10px; }
.legal-article ul, .legal-article ol { font-size: .88rem; color: var(--text-secondary); line-height: 1.85; padding-left: 18px; margin: 0 0 10px; }
.legal-article li { margin-bottom: 4px; }
.legal-article a { color: var(--gold); text-decoration: none; }
.legal-article a:hover { text-decoration: underline; }
.legal-article strong { color: var(--text-primary); font-weight: 600; }
.legal-highlight { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 16px 20px; margin: 14px 0; font-size: .88rem; color: var(--text-secondary); line-height: 1.8; }

.payment-methods { display: flex; flex-direction: column; gap: 16px; }
.payment-card { display: flex; align-items: flex-start; gap: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 24px; text-align: left; transition: border-color .2s; }
.payment-card:hover { border-color: rgba(184,154,106,.4); }
.payment-card__icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(184,154,106,.08); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.payment-card .payment-card__title { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--text-primary); margin: 0 0 8px; line-height: 1.3; }
.payment-card p { font-size: .88rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 10px; }
.payment-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.payment-badge { font-size: .7rem; font-weight: 600; letter-spacing: .06em; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 3px 8px; color: var(--text-secondary); }

.shipping-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 48px; }
.shipping-highlight-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; }
.shipping-highlight-card__icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(184,154,106,.08); display: flex; align-items: center; justify-content: center; color: var(--gold); margin: 0 auto 12px; }
.shipping-highlight-card__value { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--text-primary); line-height: 1; margin-bottom: 6px; }
.shipping-highlight-card__label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 32px; }
    .legal-sidebar { position: static; }
    .shipping-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .valori-sezione__inner--img-dx,
    .valori-sezione__inner--img-sx { grid-template-columns: 1fr; gap: 48px; }
    .valori-sezione__inner--img-sx .valori-sezione__image { order: -1; }
}

/* ===== HOMEPAGE (da mockup index.html / styles.css) ===== */

/* Hero scroll indicator */
.hero-scroll { position: absolute; right: 48px; bottom: 64px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-scroll__label { writing-mode: vertical-lr; text-orientation: upright; font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .45em; color: var(--gold); text-shadow: 0 1px 12px rgba(0,0,0,.95); }
.hero-scroll__line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: lineGlow 2.4s ease-in-out infinite; }
@keyframes lineGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Filter bar (condivisa con lo shop) */
.filterbar__search-wrap { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: 0 16px; transition: border-color .2s; }
.filterbar__search-wrap:focus-within { border-color: var(--gold); }
.filterbar__search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
.filterbar__search-wrap input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: .92rem; font-family: 'Inter', sans-serif; padding: 13px 0; }
.filterbar__search-wrap input::placeholder { color: var(--text-muted); }
.filterbar__select {
    background: var(--bg-card); border: 1px solid var(--divider); border-radius: var(--radius-sm); color: var(--text-secondary);
    font-size: .88rem; font-family: 'Inter', sans-serif; padding: 13px 36px 13px 14px; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6A6A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; transition: border-color .2s;
}
.filterbar__select:focus { outline: none; border-color: var(--gold); }

.hero-filterbar { background: var(--bg-secondary); padding: 52px 0 56px; border-top: 1px solid var(--divider); }
.hero-filterbar__heading { text-align: center; margin-bottom: 28px; }
.hero-filterbar__heading h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--text-primary); margin-top: 10px; }
.hero-filterbar__form { display: flex; gap: 12px; align-items: stretch; max-width: 860px; margin: 0 auto; }
.hero-filterbar__form .filterbar__search-wrap { flex: 1; min-width: 0; }
@media (max-width: 768px) {
    .hero-filterbar__form { flex-direction: column; }
    .hero-filterbar__form .filterbar__select { width: 100%; }
}

/* Categories */
.categories { padding: 100px 0; position: relative; }
.categories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.category-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: flex-end; transition: var(--transition); }
.category-card__image { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.category-card:hover .category-card__image { transform: scale(1.02); }
.category-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--overlay-heavy) 0%, var(--overlay-light) 60%); transition: var(--transition); }
.category-card:hover .category-card__overlay { background: linear-gradient(to top, var(--overlay-hover) 0%, var(--overlay-light) 60%); }
.category-card__content { position: relative; z-index: 2; padding: 32px; color: var(--text-primary); }
.category-card__content h3 { font-size: 1.8rem; margin-bottom: 6px; }
.category-card__content p { font-size: .88rem; opacity: .75; margin-bottom: 12px; }
.category-card__link { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); transition: var(--transition); }
.category-card:hover .category-card__link { letter-spacing: .15em; }
@media (max-width: 700px) {
    .categories-grid { grid-template-columns: 1fr; }
}

/* Product cards (usati anche in shop/catalogo) */
.products-section { padding: 100px 0; position: relative; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card { position: relative; background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-card__badge { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: 6px 14px; border-radius: 100px; }
.badge--sale { background: var(--badge-sale-bg); color: #EDEDED; }
.badge--premium { background: var(--gold); color: var(--bg-primary); }
.product-card__image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; padding: 16px; }
.product-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.product-card:hover .product-card__image img { transform: scale(1.02); }
.product-card__actions { position: absolute; bottom: 16px; right: 16px; opacity: 0; transform: translateY(8px); transition: var(--transition); z-index: 2; }
.product-card:hover .product-card__actions { opacity: 1; transform: translateY(0); }
.product-quick-add { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--bg-primary); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); box-shadow: 0 4px 15px rgba(0,0,0,.5); border: none; cursor: pointer; }
.product-quick-add:hover { background: var(--gold-light); transform: scale(1.1); }
.product-card__info { padding: 20px; }
.product-card__producer { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.product-card__name { font-size: 1.1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; line-height: 1.3; }
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--gold); }
.product-card__detail { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
.product-card__pricing { display: flex; align-items: baseline; gap: 10px; }
.price--current { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600; color: var(--gold); }
.price--original { font-size: .85rem; color: var(--text-muted); text-decoration: line-through; }
.product-card__btns { display: flex; gap: 8px; margin-top: 14px; }
.product-card__btns .btn { flex: 1; font-size: .78rem; padding: 9px 10px; justify-content: center; }
/* Riga acquisto (+1 Bottiglia / Confezione ×N) — impilati in colonna, non
   affiancati: la card in griglia (4 colonne) è troppo stretta per stare
   fianco a fianco senza tagliare il testo "Confezione ×N" (bug segnalato
   dall'utente via screenshot: overflow:hidden di .product-card tagliava il
   testo che eccedeva la metà colonna disponibile). */
.product-card__btns--buy { flex-direction: column; }
/* Seconda riga (Dettagli + preferiti) — stesse azioni della pagina Vini, ma
   divise su due righe perché la card in griglia (4 colonne) è troppo stretta
   per affiancare tutte e 4 le azioni come nella riga orizzontale del catalogo. */
.product-card__btns--secondary { margin-top: 8px; }
/* .product-card__wish.cjcw-wish-btn (non solo .product-card__wish): il
   plugin cj-compare-wishlist ha una propria regola generica .cjcw-wish-btn
   (assets/css/frontend.css, pensata per un tema chiaro: bordo #e2e8f0 quasi
   bianco, icona grigio #666, padding largo 0.5rem 1rem) con la STESSA
   specificità (0,1,0) del nostro selettore a singola classe — vinceva a
   seconda dell'ordine di caricamento reale dei due fogli, rendendo il
   pulsante uno spazio vuoto/mal proporzionato invece del quadrato compatto
   voluto (bug segnalato dall'utente via screenshot). Selettore combinato →
   specificità (0,2,0), vince sempre indipendentemente dall'ordine. */
.product-card__wish.cjcw-wish-btn {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle); background: var(--bg-card); color: var(--gold);
    padding: 0; gap: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition);
}
.product-card__wish.cjcw-wish-btn:hover { border-color: var(--gold); background: var(--gold); color: var(--bg-primary); }
.product-card__wish.cjcw-wish-btn--active { border-color: #c0544a; color: #c0544a; }
.product-card__wish.cjcw-wish-btn--active svg { fill: #c0544a; }
@media (max-width: 900px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* Valori teaser (3 card, homepage) */
.valori-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; z-index: 1; }
.valori-card { background: rgba(255,255,255,.04); border: 1px solid rgba(184,154,106,.18); border-radius: var(--radius-lg); padding: 40px 32px; display: flex; flex-direction: column; gap: 16px; transition: var(--transition); }
.valori-card:hover { background: rgba(255,255,255,.07); border-color: rgba(184,154,106,.35); transform: translateY(-4px); }
.valori-card__icon { color: var(--gold); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(184,154,106,.1); border-radius: var(--radius-md); flex-shrink: 0; }
.valori-card__title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.valori-card__text { font-size: .95rem; line-height: 1.75; color: var(--text-secondary); flex: 1; }
.valori-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-decoration: none; margin-top: 8px; transition: var(--transition); }
.valori-card__link::after { content: '→'; transition: transform var(--transition); }
.valori-card__link:hover { color: var(--gold-light); }
.valori-card__link:hover::after { transform: translateX(4px); }
@media (max-width: 900px) {
    .valori-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* Winery spotlight — variante "premium" (homepage) */
.winery-spotlight--premium { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%); }
.winery-spotlight__meta { display: flex; gap: 24px; margin-bottom: 24px; }
.winery-meta-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-secondary); }
.winery-meta-item svg { color: var(--gold); flex-shrink: 0; }
.winery-spotlight__cta { display: flex; gap: 12px; }
.btn-ghost-dark { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.btn-ghost-dark:hover { background: var(--gold); color: var(--bg-primary); }

/* Trust section */
.trust-section { padding: 80px 0; }
.trust-title { text-align: center; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text-primary); margin-bottom: 48px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.trust-card { text-align: center; padding: 36px 24px; border-radius: var(--radius-md); background: var(--bg-card); transition: var(--transition); }
.trust-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-card__icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(184,154,106,.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--gold); }
.trust-card h3 { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 10px; }
.trust-card p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 900px) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* ===== PAGINA PRODOTTO SINGOLO (da mockup prodotto.html) ===== */
/* "margin-top: 38px" mancante — stesso offset per la announcement bar fissa
   (position:fixed, height 38px, sopra l'header fisso) che ".page-hero" e le
   altre sezioni "prima cosa della pagina" applicano già (vedi commento sopra
   ".announcement-bar"). Senza questo margine il breadcrumb — primo elemento
   della sezione — finiva nascosto dietro barra annuncio + header fissi,
   invece che semplicemente più in basso (segnalato dall'utente: "il
   breadcrumb è sotto al nav, quindi non è visibile"). */
.product-detail { padding: 140px 0 80px; margin-top: var(--announcement-height, 38px); }
.product-detail .breadcrumb { justify-content: flex-start; }
.product-detail__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin: 40px 0; }

.product-gallery__main { position: relative; aspect-ratio: 3/4; background: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
/* overflow-x:auto — con body{overflow-x:hidden} (regola generale) e nessun
   flex-wrap, un prodotto con 4+ immagini eccedeva la larghezza disponibile
   (80px + 12px gap ≈ 92px/thumb) senza alcun modo di raggiungere le
   miniature oltre la 3ª-4ª: restavano semplicemente fuori dal viewport. */
.product-gallery__thumbs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.product-gallery__thumbs .thumb { flex-shrink: 0; }
.thumb { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: var(--transition); padding: 0; background: none; }
.thumb.active { border-color: var(--gold); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info__header { margin-bottom: 16px; }
.product-producer { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px; }
.product-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--text-primary); margin-bottom: 8px; }
.product-subtitle { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 24px; }
.product-price { margin: 32px 0; }
.price-current { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 600; color: var(--gold); }
.product-price__note { display: block; font-size: .82rem; color: var(--text-muted); margin-top: 6px; }

.product-highlights { display: flex; flex-direction: column; gap: 12px; margin: 32px 0; padding: 24px; background: var(--bg-secondary); border-radius: var(--radius-md); }
.highlight-item { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--text-secondary); }
.highlight-item svg { color: var(--gold); flex-shrink: 0; }

.product-options { margin: 32px 0; }
.option-group label { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.quantity-selector { display: flex; align-items: center; gap: 0; width: fit-content; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.qty-btn { width: 44px; height: 44px; background: var(--bg-card); border: none; color: var(--gold); font-size: 1.2rem; cursor: pointer; transition: var(--transition); }
.qty-btn:hover { background: var(--bg-secondary); }
.quantity-selector input { width: 60px; height: 44px; border: none; border-left: 1.5px solid var(--border-subtle); border-right: 1.5px solid var(--border-subtle); text-align: center; font-size: 1rem; font-weight: 600; background: var(--bg-primary); color: var(--text-primary); }

.product-actions { display: flex; gap: 12px; margin: 32px 0; }
.btn-large { padding: 18px 40px; font-size: .9rem; flex: 1; gap: 10px; }
/* .btn-add-to-cart qui è il pulsante "Aggiungi al Carrello" principale
   (dettaglio prodotto) — flex:1 pareggia la larghezza col pulsante preferiti
   .btn-icon-large accanto (larghezza fissa), invece di restare alla sua
   larghezza intrinseca del testo. */
.product-actions .btn-add-to-cart { flex: 1; justify-content: center; }
/* .btn-icon-large.cjcw-wish-btn (non solo .btn-icon-large): stessa
   specificità (0,1,0) della regola generica .cjcw-wish-btn del plugin
   cj-compare-wishlist (bordo chiaro/icona grigia pensati per tema chiaro) —
   selettore combinato per vincere sempre, vedi nota dettagliata su
   .product-card__wish più sopra (stesso identico bug). */
.btn-icon-large.cjcw-wish-btn { width: 56px; height: 56px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-subtle); background: var(--bg-card); color: var(--gold); padding: 0; gap: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
.btn-icon-large.cjcw-wish-btn:hover { border-color: var(--gold); background: var(--gold); color: var(--bg-primary); }
/* Stato "già nei preferiti" — classe reale del plugin cj-compare-wishlist
   (.cjcw-wish-btn--active), non la .liked fittizia del mockup. Colore rosso
   coerente con lo stesso stato nel catalogo (.product-row__like). */
.btn-icon-large.cjcw-wish-btn--active { border-color: #c0544a; color: #c0544a; }
.btn-icon-large.cjcw-wish-btn--active svg { fill: #c0544a; }

.product-meta { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--divider); }
.meta-item { display: flex; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.meta-label { color: var(--text-secondary); font-weight: 600; }
.meta-value { color: var(--text-primary); }
.meta-value a { color: var(--gold); }
.stock-available { color: #2d7a3e; font-weight: 600; }
.stock-unavailable { color: #a33; font-weight: 600; }

.product-tabs-section { margin-top: 80px; padding-top: 60px; border-top: 1px solid var(--divider); }
.product-tabs-nav { display: flex; gap: 8px; margin-bottom: 40px; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.product-tab { padding: 16px 24px; font-size: .9rem; font-weight: 500; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: var(--transition); }
.product-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.product-specs { width: 100%; border-collapse: collapse; }
.product-specs tr { border-bottom: 1px solid var(--divider); }
.product-specs td { padding: 16px 0; font-size: .95rem; color: var(--text-secondary); }
.product-specs td:first-child { font-weight: 600; color: var(--text-secondary); width: 40%; }

.related-products {
    padding: 80px 0;
    background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100px, transparent calc(100% - 100px), var(--bg-primary) 100%), var(--bg-secondary);
}

@media (max-width: 900px) {
    .product-detail__layout { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 480px) {
    .product-actions { flex-direction: column; }
    .btn-icon-large { width: 100%; height: 48px; }
}

/* ===== CARRELLO (da mockup carrello.html / styles.css) ===== */
.cart-section { padding: 60px 0 100px; }
.cart-layout { display: grid; grid-template-columns: 1fr 400px; gap: 48px; margin-top: 40px; }
.cart-items { display: flex; flex-direction: column; gap: 24px; }
.cart-item { display: grid; grid-template-columns: 120px 1fr auto auto auto; gap: 24px; align-items: center; padding: 24px; background: var(--bg-card); border-radius: var(--radius-md); border: 1.5px solid var(--border-subtle); }
.cart-item__image { width: 120px; height: 150px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-secondary); }
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__name { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 4px; }
.cart-item__name a { color: inherit; text-decoration: none; }
.cart-item__detail { font-size: .85rem; color: var(--text-muted); }
.cart-item__unit-price { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.cart-item__quantity { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; }
.cart-item__quantity input.qty { width: 50px; height: 40px; border: none; border-left: 1.5px solid var(--border-subtle); border-right: 1.5px solid var(--border-subtle); text-align: center; font-weight: 600; background: var(--bg-primary); color: var(--text-primary); -moz-appearance: textfield; appearance: textfield; }
/* Nasconde le freccette native del type="number" — restano solo i pulsanti
   +/- personalizzati (.qty-btn) già presenti accanto al campo. */
.cart-item__quantity input.qty::-webkit-outer-spin-button,
.cart-item__quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-item__quantity .qty-btn { width: 40px; height: 40px; background: var(--bg-card); border: none; color: var(--gold); cursor: pointer; font-size: 1.1rem; }
.cart-item__quantity .qty-btn:hover { background: var(--bg-secondary); }
.cart-item__price { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.cart-item__remove { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(184,154,106,.08); color: var(--text-muted); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.cart-item__remove:hover { background: var(--gold); color: var(--bg-primary); }

.cart-summary { position: sticky; top: 140px; height: fit-content; padding: 32px; background: var(--bg-card); border-radius: var(--radius-md); border: 1.5px solid var(--border-subtle); }
.cart-summary__title { font-size: 1.3rem; color: var(--text-primary); margin-bottom: 24px; }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: .95rem; color: var(--text-secondary); }
.cart-summary__divider { height: 1px; background: var(--divider); margin: 24px 0; }
.cart-summary__total { font-size: 1.2rem; font-weight: 600; color: var(--gold); }
.shipping-note { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; }

.cart-confezioni { margin: 20px 0 24px; padding: 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.cart-confezioni__title { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.cart-conf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cart-conf-label { font-size: .82rem; color: var(--text-secondary); min-width: 90px; flex-shrink: 0; }
.cart-conf-bar { flex: 1; height: 6px; background: var(--border-subtle); border-radius: 100px; overflow: hidden; }
.cart-conf-bar__fill { height: 100%; border-radius: 100px; background: var(--border-subtle); transition: width .3s ease; }
.cart-conf-row--complete .cart-conf-bar__fill { background: var(--gold); }
.cart-conf-row--partial .cart-conf-bar__fill { background: rgba(184,154,106,.45); }
.cart-conf-info { font-size: .78rem; color: var(--text-muted); min-width: 28px; text-align: right; flex-shrink: 0; }
.cart-conf-info--ok { color: var(--gold); font-weight: 600; }
.cart-conf-warning { margin: 10px 0 0; font-size: .82rem; color: #e07a5f; }
.cart-checkout-btn { width: 100%; justify-content: center; }
.cart-checkout-btn--disabled { opacity: .45; cursor: not-allowed; }
.continue-shopping { display: block; text-align: center; font-size: .9rem; color: var(--gold); padding: 12px; transition: var(--transition); text-decoration: none; }
.continue-shopping:hover { color: var(--gold-light); }

/* Toast "aggiunto al carrello" a due righe (nome prodotto + stato confezioni)
   — .theme-toast base (posizione/animazione) è nel boilerplate condiviso
   (base.css), qui solo l'override per il contenuto su due righe. */
.theme-toast--multiline { white-space: normal; max-width: min(90vw, 380px); text-align: center; }
.theme-toast__product { font-weight: 600; }
.theme-toast__box { margin-top: 4px; font-size: .78rem; letter-spacing: normal; text-transform: none; opacity: .85; }
/* Sfondo toast = var(--color-primary), lo stesso oro di --gold: una fill
   dorata su quello sfondo sarebbe pressoché invisibile (poco contrasto). Fill
   scura (stesso colore del testo sul toast, --color-text-on-primary) invece
   dell'oro. */
.theme-toast__bar { margin-top: 8px; height: 6px; border-radius: 3px; background: rgba(30,20,10,.2); overflow: hidden; }
.theme-toast__bar-fill { height: 100%; background: var(--color-text-on-primary); border-radius: 3px; transition: width .3s ease; }

.cart-empty { text-align: center; padding: 80px 24px; }
.cart-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(184,154,106,.08); color: var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.cart-empty h2 { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 8px; }
.cart-empty p { color: var(--text-secondary); margin-bottom: 24px; }

/* ===== CHECKOUT (da mockup checkout.html / styles.css) — classi native WC restano invariate ===== */
.checkout-steps { padding: 60px 0 40px; background: var(--bg-secondary); }
.steps-indicator { display: flex; align-items: center; justify-content: center; max-width: 600px; margin: 0 auto; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--divider); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-muted); transition: var(--transition); }
.step.active .step-number { background: var(--gold); border-color: var(--gold); color: var(--bg-primary); }
.step-label { font-size: .85rem; color: var(--text-secondary); }
.step.active .step-label { color: var(--gold); font-weight: 600; }
.step-line { width: 80px; height: 2px; background: var(--divider); margin: 0 16px; }

.checkout-section { padding: 60px 0 100px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 48px; margin-top: 20px; align-items: start; }
/* La colonna sinistra non aveva MAI avuto un contenitore proprio (nessuna
   regola per ".checkout-form-col" in tutta la sessione) — restava testo/campi
   che scorrevano direttamente sullo sfondo scuro della pagina, senza bordo né
   sfondo card, mentre la colonna destra (".checkout-summary-box") era invece
   già una card vera e propria fin dal primo round. Questa asimmetria — un
   "form nudo" affiancato a un'unica card — è precisamente ciò che fa
   percepire la pagina come "il checkout di default di WooCommerce ricolorato"
   invece che come un design proprio: ogni altra sezione del tema (account,
   indirizzi, riepilogo ordine) è sempre una card. Allineata qui allo stesso
   linguaggio visivo. */
.checkout-form-col { background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); padding: 40px; }
.chk-section-hd { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding-top: 40px; border-top: 1px solid var(--border-subtle); }
.chk-section-hd:first-child { padding-top: 0; border-top: none; }
.chk-section-num { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--bg-primary); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chk-section-title { font-size: 1.3rem; color: var(--text-primary); margin: 0; }
.checkout-summary-box { position: sticky; top: 140px; padding: 32px; background: var(--bg-card); border-radius: var(--radius-md); border: 1.5px solid var(--border-subtle); }
.checkout-summary-box h3, #order_review_heading { font-size: 1.3rem; color: var(--text-primary); margin-bottom: 20px; }
@media (max-width: 640px) { .checkout-form-col { padding: 24px; } }

/* Campi form nativi WooCommerce (billing/shipping/order notes/indirizzi/account) */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row { margin-bottom: 16px; }
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-additional-fields label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.woocommerce-Address label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.woocommerce-billing-fields input.input-text,
.woocommerce-shipping-fields input.input-text,
.woocommerce-additional-fields input.input-text,
.woocommerce-additional-fields textarea,
.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select,
.woocommerce-form-coupon input.input-text,
select#billing_country, select#shipping_country, select#billing_state, select#shipping_state,
.account-input {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm); font-family: 'Inter', sans-serif; font-size: .92rem;
    transition: border-color .2s ease;
    /* !important su background/color: woocommerce.css ("plugins/woocommerce/assets/
       css/woocommerce.css") ha ".woocommerce form .form-row .input-text/select"
       — 3 classi (.woocommerce, .form-row, .input-text) + l'elemento "form",
       specificità (0,3,1) — più alta della nostra (0,2,1) qui sopra, quindi vince
       sempre a parità di ordine di caricamento. Quella regola imposta
       "background-color: var(--wc-form-color-background, #fff)" e
       "color: var(--wc-form-color-text, #000)": la custom property non è MAI
       definita in questo tema, quindi il fallback bianco/nero vince sempre,
       facendo apparire i campi con lo sfondo bianco di default invece che scuro
       come il resto del sito (bug segnalato dall'utente via screenshot). Il
       "border"/"border-radius" dello stesso selettore vendorizzato usano invece
       var() SENZA fallback (es. "var(--wc-form-border-color)") — dichiarazione
       non valida a runtime, quindi ignorata per intero: ecco perché bordo e
       raggio del nostro CSS applicavano già correttamente anche senza
       "!important", mentre solo background/color necessitano di questa forzatura. */
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.woocommerce-billing-fields input.input-text:focus,
.woocommerce-shipping-fields input.input-text:focus,
.woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus,
.woocommerce-EditAccountForm select:focus,
.woocommerce-form-coupon input.input-text:focus,
.account-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,154,106,.1); }
.woocommerce-address-fields .required, .woocommerce-EditAccountForm .required { color: var(--gold); }
.woocommerce-address-fields .optional, .woocommerce-EditAccountForm .optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* <fieldset><legend> nativo del blocco "Cambio password" (form-edit-account.php)
   — senza queste regole rimane col bordo/spaziatura grezzi di default del browser. */
.woocommerce-EditAccountForm fieldset { border: none; padding: 0; margin: 32px 0 0; }
.woocommerce-EditAccountForm legend { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); padding: 0; margin-bottom: 16px; }

/* Select2 (dropdown "Seleziona un paese/una regione...", "Provincia" ecc. — WC
   sostituisce i <select> nativi con questa libreria su checkout/indirizzi/account).
   Skin di default in "select2.css": ".select2-container--default .select2-
   selection--single { background-color:#fff; border:1px solid #aaa; ... }"
   (specificità 0,2,0) — battuta qui scopando i selettori dentro ".account-main"
   (0,3,0). Il pannello risultati (".select2-dropdown") è invece appeso dalla
   libreria come figlio diretto di <body>, FUORI da ".account-main" — per quello
   serve un selettore globale con "!important" sulle proprietà che hanno un
   fallback valido (stesso bug "var(--wc-form-color-background, #fff)" già
   visto sui campi di testo). */
.account-main .select2-container--default .select2-selection--single,
.checkout-layout .select2-container--default .select2-selection--single {
    height: 47px; background: var(--bg-secondary); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm);
    display: flex; align-items: center;
}
/* display:flex sul contenitore sopra invece del solo line-height: il trucco
   line-height==height per centrare verticalmente è fragile (basta un font-size
   o line-height diversi a rompere il centraggio) — con "display:flex" +
   "align-items:center" qui e "flex:1" sul testo sotto, il centraggio è
   garantito indipendentemente dal font. */
.account-main .select2-container--default .select2-selection--single .select2-selection__rendered,
.checkout-layout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: normal; padding-left: 16px; padding-right: 28px; flex: 1; }
.account-main .select2-container--default .select2-selection--single .select2-selection__placeholder,
.checkout-layout .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.account-main .select2-container--default .select2-selection--single .select2-selection__arrow,
.checkout-layout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; display: flex; align-items: center; }
/* Freccetta in giù oro — diagnosi corretta grazie allo screenshot del pannello
   Stili di DevTools fornito dall'utente: il tentativo precedente puntava a
   "border-color" sul triangolo CSS classico di Select2, ma questa versione di
   WooCommerce (10.9.4, "plugins/woocommerce/assets/css/forms.css") sostituisce
   quel triangolo con un'icona SVG vera e propria via ":where(.woocommerce)
   .select2-selection__arrow b { border:none; background:url(data:image/svg+
   xml;base64,...chevron-down, stroke="black"...) }" — un'immagine di sfondo
   con colore CODIFICATO nel base64 stesso, del tutto indifferente a
   "border-color" (che infatti applicava "!important" ma non aveva alcun
   effetto visibile, dato che "border:none" annulla comunque il bordo).
   Fix reale: stessa icona "chevron-down" (Feather icons), stessi attributi,
   solo "stroke=black" sostituito con l'oro del tema, come SVG inline
   url-encoded (non base64) per restare leggibile/modificabile in futuro. */
.account-main .select2-container--default .select2-selection--single .select2-selection__arrow b,
.checkout-layout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
}
.account-main .select2-container--default.select2-container--open .select2-selection--single,
.checkout-layout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gold); }
.select2-dropdown {
    background: var(--bg-card) !important; color: var(--text-primary) !important;
    border: 1.5px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important;
}
.select2-search--dropdown .select2-search__field { background: var(--bg-secondary); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); padding: 8px 10px; }
.select2-results__option { color: var(--text-primary); padding: 10px 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--gold) !important; color: var(--bg-primary) !important; }

/* "Occhiolino" mostra/nascondi password — diagnosi corretta grazie allo
   screenshot del pannello Stili di DevTools fornito dall'utente: NON è
   l'icona nativa del browser ("::-ms-reveal", che WooCommerce nasconde
   esplicitamente via "input::-ms-reveal{display:none}" in
   woocommerce-layout.css) ma un vero <button class="show-password-input">
   nativo WooCommerce con icona disegnata via "::before{background-image:
   url('data:image/svg+xml,<svg...fill="%23111111"/></svg>')}" — un SVG con
   colore CODIFICATO A MANO nella data URI stessa (non "currentColor"), quindi
   né "color" né "filter" sul bottone l'avrebbero mai potuto tingere: il primo
   tentativo (basato sull'assunzione sbagliata "è l'icona nativa del browser")
   puntava a un elemento che WooCommerce nasconde di proposito — per questo
   non aveva alcun effetto, a prescindere da quanto la formula del filtro
   fosse azzeccata. Fix reale: due varianti SVG proprie (stessi identici path
   dell'originale vendorizzato in "woocommerce-layout.css", solo
   "fill=%23111111" sostituito con "fill=%23B89A6A", l'oro del tema) — una per
   lo stato "nascosta" (occhio barrato, default) e una per lo stato "visibile"
   (".show-password-input.display-password::before", occhio pieno). */
.show-password-input::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23B89A6A"/></svg>') !important;
}
.show-password-input.display-password::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23B89A6A"/></svg>') !important;
}

.payment-methods-checkout { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
/* Retinatura viola/lavanda di fondo su tutto il blocco "02 Metodo di
   Pagamento" (segnalato dall'utente con l'esatto valore da DevTools) —
   causa: "woocommerce.css" ha "#add_payment_method #payment,.woocommerce-cart
   #payment,.woocommerce-checkout #payment{background:rgba(129,110,153,.14);
   border-radius:5px}" — un selettore con un ID ("#payment", lo stesso
   elemento di ".woocommerce-checkout-payment": "<div id=payment class=
   woocommerce-checkout-payment>") che vince su qualunque nostra regola basata
   solo sulla classe. Non avevamo mai impostato un "background" esplicito su
   questo contenitore — solo sui suoi figli — lasciando il tint vendorizzato
   l'unico a definirlo. */
#payment.woocommerce-checkout-payment { background: transparent !important; border-radius: 0 !important; }
.woocommerce-checkout-payment ul.wc_payment_methods { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
/* Bug reale trovato in questo round: ".payment_method_" (senza id gateway
   appeso) non corrisponde a NESSUN elemento — il markup nativo
   (checkout/payment-method.php) genera "payment_method_bacs",
   "payment_method_cod" ecc., mai la stringa nuda. La vera classe SEMPRE
   presente, indipendente dal gateway, è ".wc_payment_method" — motivo per
   cui la card (bordo/padding/radius) del metodo di pagamento non era mai
   apparsa, a differenza di quanto sembrava dal codice. */
.woocommerce-checkout-payment li.wc_payment_method { padding: 20px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); transition: var(--transition); }
.woocommerce-checkout-payment li.wc_payment_method:has(input:checked) { border-color: var(--gold); background: var(--bg-secondary); }
/* La "freccetta" a triangolo sopra il box descrizione (screenshot: puntava
   verso l'alto, scollegata visivamente da tutto) è un artefatto nativo di
   WooCommerce — "woocommerce.css": ".payment_box::before{border:1em solid
   #dcd7e2;border-right/left/top-color:transparent;...}", il classico trucco
   "border-triangle" pensato per puntare verso lo sfondo LAVANDA originale del
   box (".payment_box{background-color:#dcd7e2}"). Da quando quel colore è
   stato sovrascritto (round precedente) la freccetta è rimasta un elemento
   grafico orfano, scollegato dal nuovo design — rimossa, non ricreata: un
   radio button ben visibile (sotto) rende già chiaro quale opzione è
   selezionata, senza bisogno di un indicatore aggiuntivo. */
.woocommerce-checkout-payment .payment_box::before { display: none !important; }
/* Radio nativo ridisegnato via CSS (stesso principio già usato per i
   checkbox del blocco consensi) — "accent-color" da solo lasciava un pallino
   piccolo, poco in linea con un radio button "moderno". */
.woocommerce-checkout-payment input[type="radio"] {
    appearance: none; -webkit-appearance: none; margin: 0 12px 0 0; width: 20px; height: 20px;
    border: 1.5px solid var(--border-subtle); border-radius: 50%; background: var(--bg-primary);
    cursor: pointer; flex-shrink: 0; vertical-align: middle; position: relative; transition: var(--transition);
}
.woocommerce-checkout-payment input[type="radio"]:hover { border-color: var(--gold); }
.woocommerce-checkout-payment input[type="radio"]:checked { border-color: var(--gold); }
.woocommerce-checkout-payment input[type="radio"]:checked::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
    background: var(--gold); border-radius: 50%; transform: translate(-50%, -50%);
}
/* label/.payment_box con "!important": stesso pattern già visto più volte in
   questa sessione — "woocommerce.css" ha ".woocommerce-checkout #payment
   div.payment_box{background-color:#dcd7e2;color:#515151}", un selettore con
   UN ID (0,1,2,1 — l'ID è "#payment") che batte qualunque numero di classi
   nostre, da cui il box chiaro/lavanda visibile nello screenshot invece dello
   sfondo scuro del tema. La label non ha una causa isolabile con certezza
   allo stesso modo (nessuna regola vendorizzata trovata che le dia quel
   colore), ma "!important" la sistema comunque indipendentemente dalla causa
   esatta. */
.woocommerce-checkout-payment label { display: flex; align-items: center; color: var(--text-primary) !important; font-weight: 600 !important; font-size: .95rem; cursor: pointer; }
.woocommerce-checkout-payment .payment_box {
    margin: 16px 0 0 32px !important; padding: 16px !important; background: var(--bg-primary) !important;
    border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important;
    width: auto !important; font-size: .85rem !important; line-height: 1.6; color: var(--text-secondary) !important;
}
.woocommerce-checkout-payment .payment_box a { color: var(--gold) !important; }
@media (max-width: 480px) { .woocommerce-checkout-payment .payment_box { margin-left: 0 !important; } }

.chk-submit-btn, #place_order { width: 100%; justify-content: center; margin-top: 20px; }
/* "Effettua Ordine" è la call-to-action primaria del checkout (come
   ".btn-primary" nel mockup, non l'outline generico di ".button") — oro
   pieno con lo stesso effetto hover "sollevato" del bottone primario del
   resto del sito, non semplicemente il bordo oro trasparente riservato alle
   azioni secondarie (paginazione, "Salva modifiche" ecc.). */
#place_order {
    background: var(--gold) !important; color: var(--bg-primary) !important; border: none !important;
    padding: 16px 36px !important; font-size: .92rem !important; letter-spacing: .08em !important;
}
#place_order:hover {
    background: var(--gold-light) !important; color: var(--bg-primary) !important;
    transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.5);
}

/* ===== Checkout — elementi nativi WooCommerce mai stilizzati finora =====
   (form-billing.php/form-shipping.php/form-coupon.php/terms.php originali,
   più il blocco GDPR custom del tema in inc/woocommerce/setup.php) */
#customer_details .col-1 { margin-bottom: 32px; }
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 { font-size: 1.05rem; color: var(--text-primary); margin: 0 0 20px; }
/* "Spedisci a un indirizzo diverso?" è un <h3> che contiene anche il checkbox
   di toggle — non può prendere lo stile generico sopra (diventerebbe un
   titolo enorme sopra il checkbox invece di un'unica riga cliccabile). */
#ship-to-different-address { font-size: .92rem; font-weight: 600; color: var(--text-primary); margin: 0 0 20px; }
#ship-to-different-address label { display: flex; align-items: center; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; }

/* Checkbox nativi WooCommerce (termini, GDPR, ship-to-different-address) —
   "appearance:none" invece del semplice "accent-color": l'"accent-color"
   colora solo lo stato selezionato ma lascia lo stato deselezionato con
   l'aspetto grezzo di sistema (quadrato bianco/grigio piatto, il dettaglio
   che rendeva la sezione consensi del checkout "poco moderna" — segnalato
   dall'utente via screenshot) — con un checkbox interamente disegnato via
   CSS anche lo stato deselezionato è coerente col resto del tema.
   "!important" su display/margin/width/height/appearance: "forms.css" ha
   ".woocommerce form .form-row .input-checkbox{display:inline;margin:-2px
   8px 0 0;...}" — 3 classi + elemento "form" (specificità 0,3,1), più alta
   della nostra "input.input-checkbox" (0,1,1) — vinceva SEMPRE, lasciando il
   checkbox con "display:inline" e un margine negativo che lo schiacciavano/
   spostavano fino a renderlo praticamente invisibile (segnalato dall'utente:
   "checkbox non presenti" — non mancavano, erano lì ma completamente
   deformati/fuori posto). */
input.input-checkbox {
    appearance: none !important; -webkit-appearance: none !important;
    display: inline-block !important; margin: 0 !important; vertical-align: middle !important;
    width: 20px !important; height: 20px !important; flex-shrink: 0; cursor: pointer;
    border: 1.5px solid var(--divider); border-radius: 5px; background: var(--bg-primary);
    position: relative; transition: var(--transition);
}
input.input-checkbox:hover { border-color: var(--gold); }
input.input-checkbox:checked { background: var(--gold); border-color: var(--gold); }
input.input-checkbox:checked::after {
    content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid var(--bg-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input.input-checkbox:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Coupon: link toggle + form nascosto che compare al click (".showcoupon") */
.woocommerce-form-coupon-toggle { margin-bottom: 24px; }
.woocommerce-form-coupon-toggle .woocommerce-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.showcoupon { color: var(--gold); font-weight: 600; text-decoration: underline; }
.woocommerce-form-coupon { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 24px; }
.woocommerce-form-coupon .form-row { margin-bottom: 0 !important; float: none !important; width: auto !important; flex: 1; }
.woocommerce-form-coupon .form-row-last { flex: 0 0 auto; }

/* Metodi di spedizione (checkout + carrello, stesso markup "ul#shipping_method") */
ul#shipping_method { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
ul#shipping_method li { padding: 14px 16px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm); transition: var(--transition); color: var(--text-primary); font-size: .9rem; }
ul#shipping_method li:has(input:checked) { border-color: var(--gold); background: var(--bg-secondary); }
ul#shipping_method input[type="radio"] { accent-color: var(--gold); margin-right: 10px; }

/* Termini e condizioni + consensi GDPR custom del tema — round "brutissimo,
   deve essere quanto più moderno possibile": in precedenza ENTRAMBI i blocchi
   (testo informativo privacy + i due checkbox veri) avevano lo stesso sfondo
   scuro pieno impilati con solo 24px di margine, risultando visivamente
   un'unica massa indistinta invece di una gerarchia chiara. Ora: il testo
   informativo (".woocommerce-privacy-policy-text", generato nativamente da
   "wc_checkout_privacy_policy_text()" dentro ".woocommerce-terms-and-
   conditions-wrapper") resta testo semplice senza box — è solo un avviso
   informativo, non richiede lo stesso peso visivo dei checkbox veri e propri
   sotto; la card con sfondo/bordo resta riservata SOLO a ".theme-checkout-
   consents" (i due checkbox reali con valore legale). */
.woocommerce-terms-and-conditions-wrapper { margin: 0 0 20px; }
.theme-checkout-consents { margin: 0 0 24px; padding: 22px; background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.woocommerce-terms-and-conditions-wrapper .form-row,
.theme-consent-row { margin: 0 0 16px; }
.woocommerce-terms-and-conditions-wrapper .form-row:last-child,
.theme-consent-row:last-child { margin-bottom: 0; }
.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: .85rem; color: var(--text-secondary); line-height: 1.6; cursor: pointer; }
.woocommerce-form__label-for-checkbox input.input-checkbox { margin-top: 2px; }
.woocommerce-terms-and-conditions-checkbox-text .required,
.theme-consent-row abbr.required { color: var(--gold); text-decoration: none; }
.woocommerce-privacy-policy-text { font-size: .82rem; color: var(--text-muted); line-height: 1.6; }
.woocommerce-privacy-policy-text p:last-child { padding-bottom: 0; }
.theme-recaptcha-notice { font-size: .75rem; color: var(--text-muted); margin: 10px 0 0; }
.woocommerce-terms-and-conditions { padding: 16px; background: var(--bg-card); border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-secondary); margin-bottom: 14px; }

/* Tabella riepilogo ordine dentro ".checkout-summary-box" — round "deve
   essere moderno e accattivante": il tentativo precedente di "alleggerirla"
   (senza bordo/sfondo propri) non aveva MAI funzionato per davvero — perde
   contro il generico "table.shop_table, table.woocommerce-orders-table"
   (selettore elemento+classe, specificità 0,1,1) perché era scritto come
   semplice classe (0,1,0): specificità INFERIORE, quindi perdeva sempre a
   prescindere dall'ordine nel foglio di stile. Prova visibile nello
   screenshot dell'utente: l'intestazione "PRODOTTO/SUBTOTALE" e le celle
   `<th>` di "Subtotale"/"Totale" avevano ancora lo sfondo a scacchiera di
   "table.shop_table th { background: var(--bg-secondary) }" — proprio
   perché la nostra regola "alleggerita" non aveva mai vinto. Riscritta da
   zero con selettore "table.woocommerce-checkout-review-order-table"
   (stessa specificità del generico, "!important" a chiudere ogni dubbio) e
   un vero design da riepilogo: intestazione minimale, prezzo allineato a
   destra, riga Totale enfatizzata in oro con divisore proprio — non più una
   tabella dati grezza. */
table.woocommerce-checkout-review-order-table {
    background: transparent !important; border: none !important; border-radius: 0 !important; width: 100%;
}
table.woocommerce-checkout-review-order-table th {
    background: transparent !important; text-align: left; padding: 0 0 14px !important; border-bottom: 1px solid var(--border-subtle) !important;
    font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
table.woocommerce-checkout-review-order-table th.product-total,
table.woocommerce-checkout-review-order-table td.product-total,
table.woocommerce-checkout-review-order-table tfoot td { text-align: right; }
table.woocommerce-checkout-review-order-table td {
    padding: 18px 0 !important; border-bottom: 1px solid var(--divider) !important; vertical-align: top;
}
table.woocommerce-checkout-review-order-table .product-name { color: var(--text-primary); font-size: .95rem; font-weight: 500; }
table.woocommerce-checkout-review-order-table .product-name .product-quantity { display: inline-block; margin-left: 4px; color: var(--text-muted); font-weight: 400; font-size: .85rem; }
table.woocommerce-checkout-review-order-table tfoot th,
table.woocommerce-checkout-review-order-table tfoot td {
    background: transparent !important; border-bottom: none !important; padding: 10px 0 !important;
    font-size: .88rem; font-weight: 400; color: var(--text-secondary);
}
table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    padding-top: 18px !important; margin-top: 6px; border-top: 1.5px solid var(--border-subtle) !important;
    font-size: 1.2rem; font-weight: 700; color: var(--gold);
}

/* Notifiche WooCommerce (carrello/checkout/account) */
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews {
    list-style: none; padding: 16px 20px; margin: 0 0 24px; border-radius: var(--radius-sm);
    background: var(--bg-card); border: none; border-left: 3px solid var(--gold); color: var(--text-primary); font-size: .9rem;
}
/* woocommerce.css imposta anche un border-top colorato su .woocommerce-message/
   -error/-info (diverso per tipo: viola/verde/blu/rosso; .woocommerce-noreviews
   non ha questa regola nativa) — proprietà separata da border-left, quindi si
   sommava al nostro accento colorato producendo un doppio bordo visibile
   (segnalato dall'utente via screenshot). "border: none" sopra lo annulla
   prima di riapplicare solo il border-left qui sotto. */
.woocommerce-error { border-left-color: #a33; }
.woocommerce-message .button, .woocommerce-error .button { margin-left: 12px; }
/* woocommerce.css imposta un'icona ::before (font "WooCommerce", posizionata
   in absolute a sinistra) pensata per il padding-left molto più ampio (3.5em)
   del tema di default — con il nostro padding ridotto sopra, l'icona finiva
   sovrapposta alle prime lettere del messaggio. Il tipo di notifica è già
   distinguibile dal border-left colorato: icona nascosta, non riallineata. */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none; }

/* ===== IL MIO ACCOUNT (da mockup my-account.html / styles.css) ===== */
.account-section { padding: 60px 0 100px; }
.account-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-top: 20px; align-items: start; }
.account-sidebar { position: sticky; top: 140px; height: fit-content; }
.account-user { display: flex; gap: 16px; padding: 24px; background: var(--bg-card); border-radius: var(--radius-md); margin-bottom: 16px; }
.account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.account-user-info h3 { font-size: 1rem; color: var(--text-primary); margin-bottom: 4px; }
.account-user-info p { font-size: .85rem; color: var(--text-muted); margin: 0; word-break: break-all; }
.account-nav { display: flex; flex-direction: column; gap: 4px; }
.account-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--text-secondary); transition: var(--transition); text-decoration: none; }
.account-nav-item:hover { background: var(--bg-secondary); color: var(--gold); }
.account-nav-item.active { background: var(--gold); color: var(--bg-primary); }
.account-nav-item svg { flex-shrink: 0; }
/* Griglia endpoint Lista Desideri (mockup styles.css:5827) — bug reale trovato
   dall'agente di verifica indipendente: il commento in inc/woocommerce/setup.php
   dichiarava questa classe "già esistente" ma non era mai stata portata qui,
   lasciando le card impilate a blocco singolo invece che in griglia.
   auto-fill (non repeat(4,1fr) come .products-grid) — una lista personale di
   lunghezza imprevedibile si adatta meglio a un numero flessibile di colonne. */
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.wishlist-count { color: var(--text-secondary); font-size: .9rem; margin: -12px 0 8px; }
.account-main { min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; }
.account-main h1, .account-main h2, .woocommerce-MyAccount-content h1, .woocommerce-MyAccount-content h2 { font-size: 1.8rem; color: var(--text-primary); margin-bottom: 24px; }
.account-main p { color: var(--text-secondary); line-height: 1.7; padding-bottom: 16px; }
/* :not(.btn) — senza questa esclusione, ".account-main a" (0,1,1: una classe
   + l'elemento "a") batte ".btn-primary"/".btn-secondary" (0,1,0: una sola
   classe) per specificità, sovrascrivendone il colore del testo. Su
   .btn-primary (sfondo oro) il risultato era testo oro su sfondo oro,
   invisibile finché :hover non forzava esplicitamente il colore (bug
   segnalato dall'utente via screenshot — pulsante "Scopri i Vini" nello
   stato vuoto della Lista Desideri). */
.account-main a:not(.btn) { color: var(--gold); }
.account-form { max-width: 600px; }

table.shop_table, table.woocommerce-orders-table {
    width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md); overflow: hidden;
}
table.shop_table th, table.woocommerce-orders-table th {
    text-align: left; padding: 14px 16px; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle);
}
table.shop_table td, table.woocommerce-orders-table td {
    padding: 14px 16px; font-size: .9rem; color: var(--text-secondary); border-bottom: 1px solid var(--divider);
}
table.shop_table tr:last-child td { border-bottom: none; }
table.shop_table .woocommerce-orders-table__cell-order-total,
table.shop_table .order-total { color: var(--gold); font-weight: 600; }

/* Dopo vari tentativi con grid/flexbox rimasti inspiegabilmente inefficaci
   sul sito reale, si torna alla tecnica NATIVA che WooCommerce stesso usa già
   per questo esatto markup (woocommerce-layout.css: ".col2-set .col-1"
   float:left, ".col2-set .col-2" float:right, entrambe width:48%) — testata
   su milioni di siti, non reinventata. Si cambia solo il valore che serve
   (width, con "!important" per vincere sempre sul 48% nativo), lasciando
   float:left/float:right esattamente come WooCommerce li ha già impostati —
   "billing"=col-1 va a sinistra, "shipping"=col-2 va a destra, di norma. */
.woocommerce-Addresses {
    display: block;
    overflow: hidden;
}
.woocommerce-Address {
    width: calc(50% - 12px) !important;
    padding: 24px;
    margin-bottom: 24px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-subtle);
    box-sizing: border-box;
}
.woocommerce-Address.col-2 { float: right !important; }
@media (max-width: 640px) {
    .woocommerce-Address { width: 100% !important; float: none !important; }
}
.woocommerce-Address-title { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
/* Markup nativo usa <h2>, non <h3> (plugins/woocommerce/templates/myaccount/
   my-address.php:62) — puntare a "h3" (che non esiste qui) lasciava il titolo
   ricadere sulla regola generica ".account-main h1, .account-main h2"
   (font-size 1.8rem, margin-bottom 24px), producendo un titolo enorme che si
   sovrapponeva al link "Aggiungi"/"Modifica" accanto — stesso bug dello
   screenshot, causa concomitante col problema di larghezza sopra. */
.woocommerce-Address-title h2 { font-size: 1.05rem; color: var(--text-primary); margin: 0; }
.woocommerce-Address-title .edit { font-size: .82rem; white-space: nowrap; }
.woocommerce-Address address { font-style: normal; color: var(--text-secondary); line-height: 1.8; font-size: .9rem; }

/* ── Pulsante generico nativo WooCommerce (.button) — usato da paginazione
   ordini, "Salva modifiche"/"Aggiungi indirizzo" nei form account, azioni
   ordine (Visualizza/Paga/Annulla/Ordina di nuovo). Mai stilato prima d'ora
   in questo tema: ricadeva sullo stile di default del plugin (viola/lavanda
   WooCommerce), stonato col resto del sito scuro/oro. */
.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase; padding: 12px 26px;
    border-radius: 100px; cursor: pointer; transition: var(--transition);
    text-decoration: none;
    /* float:none !important: "woocommerce-layout.css" ha ".woocommerce-page
       #payment #place_order { float:right }" — selettore a DUE ID
       (0,0,2,0 → più forte di qualunque combinazione di classi, "!important"
       compreso se non fosse per questa stessa forzatura) sul pulsante
       "Effettua Ordine", ora spostato nella colonna sinistra a piena
       larghezza dove un float residuo romperebbe il layout. */
    float: none !important;
    /* background/color/border con "!important": ".button.alt" (usato da
       "#place_order", il pulsante "Effettua Ordine" — payment.php) viene
       colorato viola dal vendorizzato "woocommerce.css" tramite un selettore
       con ancoraggio ".woocommerce" — che in teoria NON dovrebbe esistere come
       classe sul <body> del checkout (is_woocommerce() è true solo su shop/
       categoria/prodotto, is_checkout() aggiunge solo "woocommerce-checkout"/
       "woocommerce-page", non "woocommerce" nudo — verificato in wc-template-
       functions.php:wc_body_class()) eppure il viola compariva comunque nello
       screenshot dell'utente — causa esatta non isolabile senza un browser
       live. "!important" chiude la questione indipendentemente dalla causa
       precisa, stesso principio già adottato più volte in questa sessione
       per il caso analogo delle card Indirizzi. */
    background: transparent !important; color: var(--gold) !important;
    border: 1.5px solid var(--gold) !important;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background: var(--gold) !important; color: var(--bg-primary) !important;
}
.button.woocommerce-button--previous, .button.woocommerce-button--next { margin: 0 6px; }
.woocommerce-pagination { text-align: center; margin-top: 24px; }
.button.cancel { border-color: #a33 !important; color: #a33 !important; }
.button.cancel:hover { background: #a33 !important; color: #fff !important; }
.button.disabled, .button:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Dettaglio Ordine (myaccount/view-order.php) — nessun override PHP: il
   template nativo (order/order-details.php, order/order-details-customer.php)
   è già strutturalmente corretto, stila solo le classi native mai toccate
   prima d'ora (ricadevano completamente sul CSS di default del plugin). */
.woocommerce-order-details__title { font-size: 1.3rem; color: var(--text-primary); margin: 32px 0 16px; }
mark.order-number, mark.order-date, mark.order-status { background: none; color: var(--gold); font-weight: 600; }
.woocommerce-OrderUpdates { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.woocommerce-OrderUpdate-inner { padding: 16px 20px; background: var(--bg-card); border-radius: var(--radius-sm); border-left: 3px solid var(--gold); }
.woocommerce-OrderUpdate-meta { font-size: .78rem; color: var(--text-muted); margin: 0 0 6px; }
.woocommerce-OrderUpdate-description { color: var(--text-secondary); font-size: .9rem; }
.woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 24px 0; list-style: none; padding: 0; }
.woocommerce-column { padding: 20px; background: var(--bg-card); border-radius: var(--radius-sm); border: 1.5px solid var(--border-subtle); }
.woocommerce-column__title { font-size: 1rem; color: var(--text-primary); margin: 0 0 12px; }
.woocommerce-column address { font-style: normal; color: var(--text-secondary); line-height: 1.8; font-size: .88rem; }
.order-actions-button { margin-right: 8px; }
@media (max-width: 640px) {
    .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ── Login/Registrazione Il Mio Account (woocommerce/myaccount/form-login.php,
   mai esistito prima d'ora) — un visitatore non loggato non passa affatto da
   my-account.php/navigation.php (WooCommerce mostra questo template al posto
   dell'intero wrapper), quindi senza queste regole i campi rendevano grezzi
   (input bianchi, nessun tema scuro) — bug reale visibile su screenshot dal
   sito live. Riusa il linguaggio visivo di .auth-form/.form-group del
   mockup (modale login globale), adattato a una card di pagina. */
.account-auth { max-width: 100%; margin: 0 auto; background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 44px 48px; }
.account-auth h2 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--text-primary); margin: 0 0 24px; }
/* Variante a colonna singola (form-lost-password.php, form-reset-password.php,
   lost-password-confirmation.php) — ".account-auth" di base è pensata per il
   layout a due colonne di form-login.php ("max-width:100%" occuperebbe
   l'intera larghezza del container anche con un solo form corto, sembrando
   fuori proporzione); qui una card più stretta e centrata, come le altre
   pagine a form singolo del tema. */
.account-auth--single { max-width: 480px; }
.account-auth--single p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 24px; }
.account-auth--single .woocommerce-message,
.account-auth--single .woocommerce-error { margin-bottom: 24px; }
.account-auth__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.account-auth__col + .account-auth__col { border-left: 1px solid var(--divider); padding-left: 48px; }
/* "woocommerce.css" ha ".woocommerce form.login,.woocommerce form.register,
   .woocommerce form.checkout_coupon{border:1px solid #cfc8d8;padding:20px;
   margin:2em 0;border-radius:5px}" — un lavanda chiaro fuori palette, non
   pensato per un tema scuro (segnalato dall'utente col valore esatto). I
   nostri form login/registrazione hanno le classi native "login"/"register"
   (necessarie per l'invio WooCommerce, non rimovibili) quindi ereditano
   questo bordo/padding/margine per costruzione. Stesso problema anche sul
   form coupon del checkout (".woocommerce-form-coupon", classe "register"-
   equivalente "checkout_coupon" sul tag <form>), non ancora notato perché
   meno visibile lì. "!important" a scavalcare, valori azzerati perché lo
   spazio è già gestito dal nostro layout (".form-group"/flex del coupon). */
.account-auth form.login, .account-auth form.register, .woocommerce-form-coupon {
    border: none !important; padding: 0 !important; border-radius: 0 !important;
}
.account-auth form.login, .account-auth form.register { margin: 0 !important; }
.woocommerce-form-coupon { margin: 0 0 24px !important; }
.account-auth .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.account-auth .form-group label { font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.account-auth .form-group label .required { color: var(--gold); }
.account-auth .form-group .input-text {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm);
    background: var(--bg-secondary); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: .9rem;
    outline: none; transition: var(--transition);
}
.account-auth .form-group .input-text:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,154,106,.1); }
.account-auth .btn { width: 100%; justify-content: center; }
.account-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0; flex-wrap: wrap; }
/* .checkbox-label non ha una regola base (solo varianti .contact-form/.prenota-modal
   scoped altrove) — stile autonomo qui, non riusabile da quelle. */
.account-auth__remember { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-secondary); cursor: pointer; }
/* "Ricordami" usava solo "accent-color" (round "sistema l'intero layout",
   richiesta di coerenza col resto del sito) — colora solo lo stato
   selezionato, lasciando lo stato deselezionato come quadrato grezzo di
   sistema, esattamente il difetto già corretto ovunque altrove (checkbox
   GDPR del checkout). Aggiunta la classe "input-checkbox" nel template
   (mancava del tutto) così eredita lo stesso checkbox disegnato via CSS
   usato in tutto il resto del tema — nessuna regola diversa qui. */
.account-auth .woocommerce-LostPassword { font-size: .82rem; text-align: center; margin: 16px 0 0; }
.account-auth .woocommerce-LostPassword a { color: var(--gold); text-decoration: underline; }
.account-auth .woocommerce-LostPassword a:hover { color: var(--gold-light); }
@media (max-width: 768px) {
    .account-auth { padding: 32px 24px; }
    .account-auth__cols { grid-template-columns: 1fr; gap: 32px; }
    .account-auth__col + .account-auth__col { border-left: none; padding-left: 0; border-top: 1px solid var(--divider); padding-top: 32px; }
}

/* ── Auth Modal (dal mockup — login/registrazione raggiungibili da qualunque
   pagina cliccando l'icona Account nell'header, non solo navigando a
   /mio-account/) — mai portato nel tema prima d'ora: solo un link diretto
   alla pagina esisteva. Markup in footer.php, apertura/chiusura e cambio
   tab in assets/js/main.js. ── */
.auth-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s ease; }
.auth-modal.active { opacity: 1; visibility: visible; }
.auth-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.auth-modal__content { position: relative; background: var(--bg-card); border-radius: 12px; width: 90%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: scale(.9); transition: transform .3s ease; border: 1px solid var(--divider); }
.auth-modal.active .auth-modal__content { transform: scale(1); }
.auth-modal__close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-muted); transition: all .2s; border-radius: 50%; z-index: 10; }
.auth-modal__close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--divider); }
.auth-tab { flex: 1; padding: 20px; background: transparent; border: none; font-size: 16px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all .3s; position: relative; }
.auth-tab.active { color: var(--gold); }
.auth-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--gold); }
.auth-form { padding: 40px; display: none; }
.auth-form.active { display: block; }
.auth-form h2 { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--text-primary); margin-bottom: 24px; }
.auth-form .form-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.auth-form .form-group label { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; order: -1; }
.auth-form .form-group input { width: 100%; padding: 12px 16px; border: 1px solid var(--divider); border-radius: 6px; font-size: 15px; transition: all .2s; box-sizing: border-box; background: var(--bg-primary); color: var(--text-primary); }
.auth-form .form-group input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,154,106,.1); }
/* .checkbox-label non ha una regola base (solo varianti scoped altrove) —
   stile autonomo qui per la checkbox "Ricordami". */
.auth-form .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-secondary); cursor: pointer; }
.auth-form .checkbox-label input[type="checkbox"] { accent-color: var(--gold); }
.auth-form .woocommerce-LostPassword a { color: var(--gold); text-decoration: underline; }
.auth-form .woocommerce-LostPassword a:hover { color: var(--gold-light); }
@media (max-width: 640px) {
    .auth-modal__content { width: 95%; max-height: 95vh; }
    .auth-form { padding: 30px 24px; }
    .auth-tab { padding: 16px; font-size: 15px; }
    /* Stesso trattamento di .auth-form qui sopra — .prenota-modal__box aveva
       lo stesso padding fisso 44px/48px senza riduzione su mobile. */
    .prenota-modal__box { padding: 30px 24px; }
}

@media (max-width: 1024px) {
    .checkout-layout, .account-layout, .cart-layout { grid-template-columns: 1fr; }
    .checkout-summary-box, .account-sidebar, .cart-summary { position: static; }
}
@media (max-width: 768px) {
    .steps-indicator { flex-direction: column; gap: 16px; }
    .step-line { width: 2px; height: 40px; margin: 0; }
    .cart-item { grid-template-columns: 90px 1fr; grid-template-areas: "img info" "qty price" "remove remove"; }
    /* width/height fissi (120x150, vedi regola base sopra) eccedevano il
       track grid da 90px qui sopra, sporgendo sulla colonna "info" affiancata
       (nome prodotto/prezzo unitario) — ridimensionata al track disponibile. */
    .cart-item__image { grid-area: img; width: 90px; height: 112px; }
    .cart-item__info { grid-area: info; }
    .cart-item__quantity { grid-area: qty; }
    .cart-item__price { grid-area: price; text-align: right; }
    .cart-item__remove { grid-area: remove; justify-self: end; }
}

/* ── Age Gate — stile del tema (sostituisce i default generici di base.css) ───
   base.css definisce solo un layout minimo (sfondo/pulsante sui token generici
   --color-*): qui si riallinea a palette/tipografia reali del progetto
   (--bg-card, --gold, Playfair Display) e si riusano gli stessi pattern già
   consolidati altrove nel sito — select in stile .filterbar__select (stesso
   sfondo/bordo/freccia SVG), bottone in stile .btn-primary — invece di
   inventare una seconda variante di componente. */
.age-gate {
    background: rgba(10, 10, 10, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Irrigidimento difensivo: .age-gate è il primissimo elemento dopo
       <body> (header.php), quindi non dipende da alcun contenitore per la
       propria larghezza — ma vincolarlo esplicitamente a 100vw/overflow
       hidden garantisce che non possa MAI eccedere lo schermo, qualunque
       sia la causa (contenuto imprevisto, comportamento del browser). */
    max-width: 100vw;
    overflow: hidden;
}
.age-gate__card {
    background: var(--bg-card);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 48px);
    max-width: min(480px, calc(100vw - 48px));
    box-sizing: border-box;
}

/* Logo — immagine reale del Customizer (vedi header.php), non più testo */
.age-gate__logo {
    display: block;
    max-height: 140px;
    width: auto;
    max-width: 100%;
    margin: 0 auto 28px;
}

.age-gate__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    color: var(--gold);
    margin-bottom: 14px;
}
.age-gate__text {
    font-family: 'Inter', sans-serif;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

/* Select paese/lingua — stessa identità visiva di .filterbar__select */
.age-gate__selects { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
/* min-width:0 — i <select> nativi hanno una larghezza minima intrinseca
   basata sul contenuto (es. "United Kingdom") che un flex item, per
   default, non riduce mai sotto quella soglia: senza questa regola, in
   teoria potrebbero forzare .age-gate__selects oltre la larghezza
   disponibile prima che scatti "flex-direction:column" più sotto. */
.age-gate__selects .age-gate__select { min-width: 0; flex: 1; }
.age-gate__select {
    background: var(--bg-primary);
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    padding: 12px 36px 12px 16px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B89A6A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color .2s;
}
.age-gate__select:hover { border-color: var(--text-muted); }
.age-gate__select:focus { outline: none; border-color: var(--gold); }

.age-gate__check {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    cursor: pointer;
}
.age-gate__check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    cursor: pointer;
    flex-shrink: 0;
}
.age-gate__check span {
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    color: var(--text-secondary);
}

.age-gate__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold);
    color: var(--bg-primary);
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 16px 44px;
    border-radius: 100px;
    transition: var(--transition);
}
.age-gate__btn:not(:disabled):hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .5);
}
.age-gate__btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 480px) {
    .age-gate__selects { flex-direction: column; }
}

/* ── Nav principale — resilienza anti-wrap ─────────────────────────────────────
   .site-nav a (base.css) non imposta white-space, quindi con molte voci in una
   sola riga (successo qui con le 4 pagine legali finite per errore nella nav
   principale — vedi fix in create_menus(), inc/setup-wizard.php) il testo di
   ogni link andava a capo internamente su più righe invece di restare su una
   riga sola. Anche dopo il fix lato wizard, i siti già installati mantengono i
   vecchi elementi di menu finché non vengono rimossi a mano da Aspetto → Menu —
   questa regola evita comunque che l'header si rompa visivamente nel frattempo,
   qualunque sia il numero di voci nel menu. */
.site-nav { gap: var(--space-6); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; }

/* ── Social nella nav (header desktop + menu mobile) — capinera_social_links_html(),
   inc/woocommerce/setup.php. Due punti diversi per stessa lista link: barra
   header solo desktop (spazio scarso su mobile accanto ad account/carrello/
   burger), overlay menu mobile in fondo (vedi anche sezione overlay mobile
   più sotto). .site-nav__social nascosto di default: su desktop .site-nav è
   inline orizzontale e non deve mostrarlo insieme alle voci di menu, compare
   solo nell'overlay .site-nav.is-open sotto i 1024px. */
.site-header__social { display: flex; align-items: center; gap: 10px; }
.site-header__social a { display: flex; color: var(--gold); transition: var(--transition); }
.site-header__social a:hover { color: var(--gold-light); }
.site-nav__social { display: none; }
@media (max-width: 1023px) {
    .site-header__social { display: none; }
}

/* CTA opzionale nell'header (header_cta_text/header_cta_url da Customizer,
   header.php) — bottone pillola "white-space:nowrap" che, sommato a logo +
   icone azioni + burger, può eccedere la larghezza disponibile sui telefoni
   più piccoli (≤375px) quando quel campo è compilato. Nascosto sotto i
   480px: ricerca/account/carrello/burger restano le azioni essenziali,
   la CTA resta comunque raggiungibile scrollando il contenuto di pagina. */
@media (max-width: 480px) {
    .site-header .header-cta { display: none; }
}

/* ── Overlay menu mobile — bug preesistente corretto qui: main.js (sezione
   "Mobile Nav") toggla da tempo la classe .is-open su .site-nav al click sul
   burger, ma nessuna regola CSS in nessun file del tema dava a quella classe
   un effetto visivo sotto i 1024px: base.css nasconde .site-nav con un
   semplice "display:none" nello stesso breakpoint, mai condizionato su
   .is-open. Il burger quindi non apriva realmente nulla (solo bloccava lo
   scroll della pagina via main.js) — comportamento presente ben prima della
   richiesta di aggiungere i social qui, emerso indagando dove posizionarli. */
@media (max-width: 1023px) {
    .site-nav.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        /* var(--header-height), non --header-height-mobile: base.css cambia
           l'altezza reale dell'header a --header-height-mobile solo sotto i
           639px (vedi override sotto), quindi tra 640px e 1023px l'header è
           ancora alto --header-height (116px) — usare qui il valore mobile
           avrebbe fatto partire il pannello ~44px troppo in alto, con le
           prime voci di menu nascoste sotto header+announcement bar fissi. */
        top: calc(var(--announcement-height, 38px) + var(--header-height));
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background: var(--bg-primary);
        z-index: var(--z-overlay);
        padding: 8px 24px 32px;
        gap: 0;
    }
    .site-nav.is-open a {
        padding: 16px 4px;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--border-subtle);
        white-space: normal;
    }
    .site-nav.is-open .site-nav__social {
        display: flex;
        gap: 20px;
        margin-top: auto;
        padding-top: 28px;
    }
    .site-nav.is-open .site-nav__social a { color: var(--gold); transition: var(--transition); }
    .site-nav.is-open .site-nav__social a:hover { color: var(--gold-light); }
}
@media (max-width: 639px) {
    .site-nav.is-open { top: calc(var(--announcement-height, 38px) + var(--header-height-mobile)); }
}

/* ── Announcement bar (dal mockup, mai portata nel tema prima d'ora) ──────────
   Barra fissa sopra l'header — l'header (fisso, base.css: top:0) va spostato
   sotto di essa. Altezza esposta come custom property --announcement-height
   (invece di un "38px" ripetuto a mano in ogni punto che deve compensarla:
   .site-header, .page-hero, .product-detail, .site-nav.is-open, .conf) cosi'
   un solo cambio si propaga ovunque — vedi override mobile più sotto, dove
   il testo passa a due righe e l'altezza cresce di conseguenza. */
:root { --announcement-height: 38px; }
.announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-overlay);
    background: var(--green-dark);
    color: var(--text-primary);
    text-align: center;
    padding: 10px 20px;
    font-size: .78rem;
    letter-spacing: .06em;
    min-height: var(--announcement-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Desktop: il testo (lunghezza non garantita, editabile da Customizer) resta
   su una riga, troncato con ellissi se troppo lungo — su schermi larghi c'è
   sempre spazio a sufficienza, non ha senso andare a capo. */
.announcement-bar p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.site-header { top: var(--announcement-height); }
@media (max-width: 768px) {
    /* Su mobile lo spazio orizzontale è troppo poco per garantire che il
       testo stia su una riga sola — a differenza del desktop, qui va a capo
       su due righe invece di essere tagliato con l'ellissi. */
    :root { --announcement-height: 54px; }
    .announcement-bar { font-size: .7rem; padding: 8px 16px; }
    .announcement-bar p { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}
/* .search-overlay (base.css) usa lo stesso var(--z-overlay) di .announcement-bar
   qui sopra — finora funzionava solo perché nel markup viene dopo nel DOM.
   Esplicitato sopra la barra invece di affidarsi all'ordine di stampa. */
.search-overlay { z-index: var(--z-modal); }

/* ── Footer (dal mockup index.html .footer) ────────────────────────────────── */
.footer { background: var(--bg-secondary); color: var(--text-primary); }

.footer__cta { border-bottom: 1px solid var(--divider); padding: 48px 0; }
.footer__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer__cta-title { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 500; color: var(--text-primary); line-height: 1.3; max-width: 500px; }
.footer__cta-title em { font-style: italic; color: var(--gold); }

.footer__main { display: grid; grid-template-columns: 260px 1fr; gap: 80px; padding: 56px 0; }

.footer__brand { display: flex; flex-direction: column; }
.footer__brand .footer__logo { height: 80px; width: auto; margin-bottom: 12px; }
.footer__tagline { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--divider);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,154,106,.06); }

.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer__col h4 {
    font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--divider);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col li a { font-size: .85rem; color: var(--text-secondary); transition: var(--transition); }
.footer__col li a:hover { color: var(--gold); }
.footer__address { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider); }
.footer__address p { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.footer__bottom { border-top: 1px solid var(--divider); }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: .72rem; color: var(--text-muted); }
.footer__bottom-inner p { margin: 0; }
.footer__bottom-inner a { color: inherit; }
/* Credits link — sostituisce lo stile muted/underline generico con la
   variante richiesta dall'utente (colore brand Clion + favicon rotante
   sull'hover). */
.footer__bottom-inner .credits_link { color: #38B5E6 !important; font-weight: 700; text-decoration: none; }
.footer__bottom-inner .credits_link:hover { color: #fff !important; }
.footer__bottom-inner .credits_link::before {
    content: "";
    vertical-align: middle;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0 4px;
    background: url(https://www.clion.it/favicon-96x96.png) center/contain no-repeat;
    transition: transform 450ms ease;
}
.footer__bottom-inner .credits_link:hover::before { transform: rotateZ(360deg); }
.footer__legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer__legal a { color: var(--text-muted); transition: var(--transition); }
.footer__legal a:hover { color: var(--gold); }
.footer__dot { color: var(--text-muted); opacity: .4; margin: 0 2px; }

@media (max-width: 1024px) {
    .footer__main { grid-template-columns: 1fr; gap: 40px; }
    .footer__cta-inner { flex-direction: column; text-align: center; }
    .footer__cta-title { max-width: none; }
}
@media (max-width: 768px) {
    .footer__nav { grid-template-columns: 1fr 1fr; }
    .footer__bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
}
@media (max-width: 480px) {
    .footer__nav { grid-template-columns: 1fr; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TRANSIZIONI GRADIENTE TRA SEZIONI (dal mockup, mai portate nel tema)
   Sfuma il confine netto tra aree di colore diverso — stessa tecnica già
   presente e corretta in .winery-spotlight (background-image aggiunto qui
   come regola separata: essendo un longhand, non azzera il background-color
   già impostato dalle regole base di questi selettori più sopra nel file).
   ════════════════════════════════════════════════════════════════════════════ */
.checkout-steps,
.hero-filterbar,
.valori-sezione--alt,
.gift-banner {
    background-image: linear-gradient(
        to bottom,
        var(--bg-primary) 0%,
        transparent 100px,
        transparent calc(100% - 100px),
        var(--bg-primary) 100%
    );
}

/* ── Luci ambientali dorate (dal mockup, mai portate nel tema) ────────────────
   .categories e .products-section sono i wrapper reali usati dai widget
   (widget-categories-grid.php, widget-featured-products.php — stessi nomi di
   classe del mockup), ma senza questi ::before restavano privi del bagliore
   dorato diffuso che nel mockup ammorbidisce l'atmosfera di entrambe le
   sezioni in home. */
.categories::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(184, 154, 106, 0.05) 0%, transparent 65%);
    pointer-events: none;
}
.products-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(184, 154, 106, 0.04) 0%, transparent 65%);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGINA VINI (dal mockup vini.html — mai stilizzata prima: la vecchia
   shortcode generica del boilerplate non aveva alcun CSS dedicato, la pagina
   ricadeva sullo stile generico delle card prodotto homepage)
   ════════════════════════════════════════════════════════════════════════════ */

.page-hero--catalog { padding: 140px 0 40px; }
.catalog-section { padding: 60px 0 100px; }

/* Tab categoria */
.catalog-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.catalog-tab {
    padding: 10px 24px; border: 1px solid var(--divider); border-radius: 999px;
    background: transparent; color: var(--text-secondary); font-size: .88rem;
    font-family: 'Inter', sans-serif; letter-spacing: .04em; cursor: pointer; transition: var(--transition);
}
.catalog-tab:hover { border-color: var(--gold); color: var(--gold); }
.catalog-tab.active { background: var(--gold); border-color: var(--gold); color: var(--bg-primary); font-weight: 600; }

/* Filter bar (riusa .filterbar__search-wrap/.filterbar__select già definiti sopra) */
.catalog-filterbar { display: flex; align-items: center; gap: 12px; margin: 28px 0 32px; flex-wrap: wrap; }
.catalog-results { font-size: .85rem; color: var(--text-muted); white-space: nowrap; margin-left: auto; }
.catalog-results strong { color: var(--text-primary); }

/* Lista prodotti (righe orizzontali) */
.products-list { display: flex; flex-direction: column; gap: 20px; }
.product-row {
    display: grid; grid-template-columns: 300px 1fr; background: var(--bg-card);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.product-row:hover { border-color: rgba(184,154,106,.5); box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.product-row__gallery { display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); }
.product-row__main-img { flex: 1; overflow: hidden; min-height: 240px; position: relative; }
.product-row__main-img a { display: block; height: 100%; }
.product-row__main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.product-row:hover .product-row__main-img img { transform: scale(1.06); }

.product-row__body { padding: 28px 32px; display: flex; flex-direction: column; }
.product-row__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.product-row__code { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-family: 'Inter', sans-serif; }
.product-row__tipo-badge { font-size: .68rem; padding: 3px 10px; border-radius: 999px; background: rgba(184,154,106,.12); color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.product-row__name { font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; line-height: 1.2; }
.product-row__name a { color: inherit; }
.product-row__name a:hover { color: var(--gold); }
.product-row__desc { font-size: .9rem; color: var(--text-secondary); line-height: 1.75; flex: 1; }
.product-row__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--divider); }
.product-row__price { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.product-row__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Pulsante "Aggiungi ai preferiti" — riusa la classe reale .cjcw-wish-btn del
   plugin cj-compare-wishlist (toggle AJAX/sessione WC già funzionante, vedi
   inc/woocommerce/setup.php) per la logica, con lo stile visivo del mockup
   (mockup-capinera/assets/css/styles.css .product-row__like). Lo stato attivo
   è quello reale del plugin (.cjcw-wish-btn--active), non la classe .liked
   fittizia del mockup. Selettore combinato .product-row__like.cjcw-wish-btn
   (non solo .product-row__like): stessa specificità (0,1,0) della regola
   generica .cjcw-wish-btn del plugin (bordo chiaro/icona grigia pensati per
   tema chiaro, assets/css/frontend.css) — senza il secondo selettore
   l'esito dipende dall'ordine di caricamento dei due fogli di stile, stesso
   bug già trovato per .product-card__wish/.btn-icon-large. */
.product-row__like.cjcw-wish-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--divider);
    background: transparent; color: var(--text-muted); cursor: pointer; padding: 0; gap: 0;
    display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0;
}
.product-row__like.cjcw-wish-btn:hover,
.product-row__like.cjcw-wish-btn.cjcw-wish-btn--active {
    border-color: #c0544a; color: #c0544a; background: rgba(192, 84, 74, 0.08);
}
.product-row__like.cjcw-wish-btn--active svg { fill: #c0544a; }

/* Paginazione — prefisso "catalog-" per non collidere con .pagination/
   .pagination__btn già definiti in base.css (condiviso, mai da modificare;
   BEM diverso, __btn/__number) — stesso principio già applicato a
   .eventi-pagination altrove in questo file. */
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 60px; }
.catalog-pagination-btn {
    min-width: 44px; height: 44px; padding: 0 12px; border: 1.5px solid var(--border-subtle); border-radius: 8px;
    background: var(--bg-card); color: var(--text-secondary); font-family: 'Inter', sans-serif; font-size: .9rem;
    font-weight: 500; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.catalog-pagination-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: rgba(184,154,106,.06); }
.catalog-pagination-btn--active { background: var(--gold); color: var(--bg-primary); border-color: var(--gold); }
.catalog-pagination-btn:disabled { opacity: .3; cursor: not-allowed; }

@media (max-width: 768px) {
    .catalog-tabs { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .catalog-tabs::-webkit-scrollbar { display: none; }
    .catalog-tab { white-space: nowrap; }
    .catalog-filterbar { flex-direction: column; align-items: stretch; }
    .catalog-results { margin-left: 0; }
    .product-row { grid-template-columns: 1fr; }
    .product-row__gallery { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .product-row__main-img { min-height: 220px; }
    .product-row__body { padding: 20px; }
    .product-row__name { font-size: 1.35rem; }
    .product-row__footer { flex-direction: column; align-items: flex-start; gap: 12px; }
    .product-row__actions { flex-wrap: wrap; width: 100%; gap: 8px; }
    .product-row__add-one, .product-row__add-box { flex: 1; min-width: 130px; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER — sfondo (dal mockup .navbar/.navbar--internal/.navbar.scrolled):
   base.css imposta background:var(--header-bg) = transparent SEMPRE (variables.css),
   quindi finora ogni pagina del sito (non solo la Home) partiva con header
   trasparente fino allo scroll — nel mockup solo la Home è trasparente di
   default (.navbar, nessuna classe aggiuntiva); ogni altra pagina interna,
   incluse quelle WooCommerce, ha la classe .navbar--internal e mostra SEMPRE
   lo sfondo pieno rgba(30,30,30,.95) + blur, indipendentemente dallo scroll.
   ════════════════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
}
.site-header--home {
    background: transparent;
    backdrop-filter: none;
}
.site-header.is-scrolled {
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
}

/* ════════════════════════════════════════════════════════════════════════════
   NAV — colore icone/link nei due stati (dal mockup .nav-icon/.nav-links a):
   base.css non imposta alcun colore su questi elementi, lasciandoli ricadere
   sempre sul colore ereditato dal body (--text-primary) — corretto ma senza
   la distinzione "sopra l'hero trasparente" vs ".is-scrolled" del mockup.
   ════════════════════════════════════════════════════════════════════════════ */
.site-nav a,
.site-header__icon,
.site-header__lang {
    color: rgba(232, 232, 232, .85);
}
.site-nav a:hover,
.site-header__lang:hover { color: var(--text-primary); }
.site-header__icon { border-radius: 50%; }
.site-header__icon:hover { color: var(--text-primary); background: rgba(184, 154, 106, .08); }

.site-header.is-scrolled .site-nav a,
.site-header.is-scrolled .site-header__icon,
.site-header.is-scrolled .site-header__lang {
    color: var(--text-secondary);
}
.site-header.is-scrolled .site-nav a:hover,
.site-header.is-scrolled .site-header__lang:hover,
.site-header.is-scrolled .site-header__icon:hover {
    color: var(--gold);
}

/* base.css imposta background:var(--color-secondary) sul badge carrello —
   override colore del tema. */
.nav-cart-badge { background: var(--gold); }

/* ── Logo nav (dal mockup .nav-logo__img: height 80px desktop / 52px mobile) —
   base.css impone solo 40px fissi su .site-header__logo img, la metà del
   mockup. --header-height/--header-height-mobile (variables.css) sono stati
   aumentati in proporzione per non schiacciare il logo nell'header fisso.
   Selettore annidato sotto .site-header__wrap (non solo .site-header__logo
   img) — stessa identica specificità (0,1,1) del reset generico WooCommerce
   .woocommerce-page img{height:auto} (plugins/woocommerce/assets/css/
   woocommerce-layout.css) avrebbe reso l'esito dipendente dall'ordine di
   caricamento dei due fogli di stile su Carrello/Checkout/Account — bug
   reale segnalato dall'utente (header diverso solo sulle pagine WooCommerce),
   stessa causa già corretta per .footer__logo in un round precedente. */
.site-header__wrap .site-header__logo img { height: 80px; }
@media (max-width: 639px) {
  .site-header__wrap .site-header__logo img { height: 52px; }
}

/* ── Hover link nav (dal mockup .nav-links a::after: sottolineatura oro
   animata da 0 a 100% di larghezza) — base.css applica solo un opacity
   change, senza alcuna sottolineatura. */
.site-nav a {
    position: relative;
    padding: 4px 0;
}
.site-nav a::after {
    /* bottom: 0 (non -2px) — .site-nav (base.css) ha overflow-x: auto, che per
       specifica CSS forza anche overflow-y a "auto" anche senza dichiararlo:
       una sottolineatura che sporge fuori dal padding-box del link (-2px)
       veniva quindi tagliata dal contenitore invece di essere visibile. */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: var(--transition);
}
.site-nav a:hover::after { width: 100%; }

/* ── Search overlay (dal mockup — pannello centrato con backdrop, non più il
   riquadro sopra allineato senza sfondo) — stessi id/classi già letti da
   main.js (search-overlay/searchInput/searchResults/data-action="search-close"),
   solo il markup annidato e lo stile sono stati riallineati al mockup. ────── */
.search-overlay {
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    /* padding-top: 0 — annulla il padding-top: 15vh di base.css: il mockup
       posiziona il pannello con un margin-top fisso di 72px sul pannello
       stesso (vedi .search-overlay__panel), non con un padding variabile in
       base all'altezza dello schermo sul contenitore. Coesistendo entrambi il
       pannello sarebbe finito molto più in basso del previsto su schermi alti. */
    padding-top: 0;
}
.search-overlay__panel {
    /* width: 90% (non 100%) — dal mockup: lascia un margine laterale reale su
       ogni larghezza di schermo. Con 100% e la vecchia classe .search-overlay__wrap
       (che forniva il padding laterale) non più usata dopo il restyle del
       pannello, il riquadro toccava i bordi dello schermo. */
    width: 90%;
    max-width: 620px;
    /* margin-top: 72px (dal mockup) — offset fisso dall'alto invece di 0,
       cosi' il pannello non appare incollato subito sotto la announcement
       bar/header ma con lo stesso respiro del mockup. */
    margin: 72px auto 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform .2s ease;
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }
.search-overlay__input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--gold);
}
.search-overlay__input-wrap input.search-overlay__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    padding: 0;
}
.search-overlay__input::placeholder { color: var(--text-muted); }
/* position: static — annulla il position:absolute (top/right) ereditato dalla
   regola .search-overlay__close di base.css: prima era corretto perché il
   bottone era figlio diretto di .search-overlay (nessun antenato posizionato
   tra i due), ma .search-overlay__panel introdotto in questo round ha un
   transform, che crea un nuovo contenimento per gli elementi assoluti —
   senza questo reset il bottone si sovrapporrebbe alla riga di ricerca
   invece di restare in linea nel flex .search-overlay__input-wrap. */
.search-overlay__close { position: static; color: var(--text-muted); display: flex; padding: 4px; transition: color .2s; flex-shrink: 0; }
.search-overlay__close:hover { color: var(--text-primary); }
.search-overlay__results { max-height: 400px; overflow-y: auto; }

.search-result { display: flex; align-items: center; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--border-subtle); transition: background .15s; }
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: rgba(184, 154, 106, .07); }
.search-result span { font-family: 'Inter', sans-serif; font-size: .92rem; color: var(--text-primary); }

/* ===== ORDINE CONFERMATO (da mockup ordine-confermato.html/assets/css/ordine.css)
   Pagina "Ordine confermato" (woocommerce/checkout/thankyou.php) — prima
   d'ora WooCommerce serviva il template vendorizzato 100% nativo, nessuno
   stile del tema applicato alla prima pagina vista da un cliente subito dopo
   un acquisto reale. ===== */
.conf {
    padding: 100px 20px 80px;
    margin-top: var(--announcement-height, 38px);
    background: radial-gradient(ellipse at 50% 0%, rgba(184,154,106,.04) 0%, transparent 50%), var(--bg-primary);
    min-height: 80vh;
}
/* "margin-top:38px"/"padding-top:100px" sopra erano calibrati per ".conf"
   come PRIMA sezione della pagina, subito sotto l'header fisso/trasparente —
   ora che precede un ".page-hero" (che fornisce già il proprio margine per lo
   stesso motivo + il suo padding-bottom), lo spazio si sommerebbe due volte
   producendo un vuoto enorme tra hero e ricevuta. */
.page-hero + .conf { margin-top: 0; padding-top: 60px; }
.conf__wrap { max-width: 1080px; margin: 0 auto; text-align: center; }
.conf__check {
    width: 72px; height: 72px; margin: 0 auto 28px; border-radius: 50%; background: var(--gold);
    display: flex; align-items: center; justify-content: center; animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}
.conf__check svg { width: 32px; height: 32px; color: var(--bg-primary); stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawCheck .4s ease .4s forwards; }
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.conf__thanks { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.conf__heading { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; line-height: 1.2; color: var(--text-primary); margin-bottom: 44px; }
.conf__heading em { font-style: italic; color: var(--gold); }

.rcpt { background: var(--bg-card); border-radius: 20px; padding: 36px 32px; text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 8px 40px rgba(0,0,0,.15); margin-bottom: 36px; }
.rcpt__hr { border: none; border-top: 1px solid var(--divider); margin: 24px 0; }
.rcpt__top { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; }
.rcpt__col { display: flex; flex-direction: column; gap: 4px; }
.rcpt__label { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.rcpt__val { font-size: .88rem; color: var(--text-primary); word-break: break-word; }
.rcpt__items { display: flex; flex-direction: column; gap: 16px; }
.rcpt__line { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.rcpt__line-img { width: 48px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.rcpt__line-info { flex: 1; min-width: 0; }
.rcpt__product { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 500; color: var(--text-primary); margin: 0 0 2px; }
.rcpt__producer { font-size: .82rem; color: var(--text-muted); margin: 0; }
.rcpt__price { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.rcpt__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .88rem; color: var(--text-secondary); }
.rcpt__row--spedizione { color: var(--text-muted); }
.rcpt__row--total { padding: 14px 0 0; margin-top: 8px; border-top: 2px solid var(--gold); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.rcpt__row--total span:last-child { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--gold); }
.rcpt__section-title { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.rcpt__address p { font-size: .88rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.rcpt__address p:first-child { font-weight: 600; color: var(--text-primary); }
/* .rcpt__gateway-instructions — contenitore per do_action('woocommerce_thankyou_{metodo}'),
   es. istruzioni bonifico di WC_Gateway_BACS: output nativo WooCommerce (non
   il markup .rcpt__iban statico del mockup, sostituito da dati reali
   dell'ordine), ristilizzato qui in modo generico per restare coerente col
   resto della ricevuta invece di apparire come blocco estraneo. */
.rcpt__gateway-instructions:empty { display: none; }
.rcpt__gateway-instructions:not(:empty) { margin: 24px 0; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--divider); border-radius: 10px; }
.rcpt__gateway-instructions h2 { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.rcpt__gateway-instructions p { font-size: .85rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 8px; }
/* Markup reale del bonifico bancario nativo (class-wc-gateway-bacs.php) —
   NON una <table> come assunto nel round precedente (da cui il CSS sopra non
   aveva mai avuto effetto): è "<h3 class=wc-bacs-bank-details-account-name>"
   + "<ul class='wc-bacs-bank-details order_details bacs_details'><li>...".
   Quella "ul.order_details" è la STESSA classe che "woocommerce.css" usa per
   la riga orizzontale "Numero ordine / Data / Totale / Metodo di pagamento"
   di un'altra pagina — "float:left; border-right:1px dashed; ..." — riusata
   qui da WooCommerce per i campi bancari, producendo l'accostamento a
   colonne con divisori tratteggiati e andata a capo disordinata visibile
   nello screenshot. Sostituita con una griglia pulita a due colonne. */
.rcpt__gateway-instructions .wc-bacs-bank-details-heading { display: none; }
.rcpt__gateway-instructions .wc-bacs-bank-details-account-name { font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; }
.rcpt__gateway-instructions ul.order_details {
    list-style: none; margin: 0 !important; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px;
}
.rcpt__gateway-instructions ul.order_details::before,
.rcpt__gateway-instructions ul.order_details::after { content: none !important; }
.rcpt__gateway-instructions ul.order_details li {
    float: none !important; margin: 0 !important; padding: 0 !important; border: none !important;
    font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.rcpt__gateway-instructions ul.order_details li strong { display: block; margin-top: 4px; font-size: .92rem; font-weight: 600; text-transform: none; line-height: 1.4; color: var(--text-primary); word-break: break-word; }

.free-shipping { color: #2d7a3e; font-weight: 600; }

.conf__actions { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.conf__help { font-size: .85rem; color: var(--text-muted); }
.conf__help a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.conf__help a:hover { color: var(--gold-light); }

@media (max-width: 640px) {
    .rcpt { padding: 28px 20px; border-radius: 16px; }
    .rcpt__top { grid-template-columns: 1fr; gap: 14px; }
    .conf__actions { flex-direction: column; align-items: stretch; }
    .conf__actions .btn { text-align: center; }
}

/* ===== MY ACCOUNT — DASHBOARD (da mockup my-account.html/styles.css righe
   ~5679-5822) — prima d'ora questa tab (la prima cosa vista dopo il login)
   non aveva alcun override: WooCommerce mostrava il template vendorizzato
   100% nativo (due paragrafi di testo generico), a differenza di ogni altro
   endpoint account (Ordini/Indirizzi/Dettagli), già coperti da CSS dedicato
   più sotto. ===== */
.dashboard-welcome { background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%); color: var(--text-primary); padding: 32px; border-radius: 8px; margin-bottom: 32px; }
.welcome-content h3 { font-family: 'Playfair Display', serif; font-size: 28px; margin-bottom: 8px; }
.welcome-content p { font-size: 15px; opacity: .9; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 40px; }
/* display:block — nel mockup .dashboard-card è un <div>; qui è un <a> reale
   (navigazione server-side vera, non un data-goto gestito da JS come nel
   mockup), quindi serve dichiararlo esplicitamente: un <a> di default è
   inline e non rispetterebbe padding/layout a blocco della card. */
.dashboard-card { display: block; background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 24px; transition: all .3s ease; cursor: pointer; text-decoration: none; color: inherit; }
.dashboard-card:hover { border-color: rgba(184,154,106,.3); box-shadow: 0 4px 12px rgba(0,0,0,.3); transform: translateY(-2px); color: inherit; }
.dashboard-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.dashboard-card__header h4 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--text-primary); font-weight: 600; }
.dashboard-card__header svg { color: var(--gold); opacity: .6; }
.dashboard-card__body { display: flex; flex-direction: column; gap: 16px; }
.dashboard-stat { display: flex; flex-direction: column; gap: 4px; }
.stat-value { font-size: 32px; font-weight: 600; color: var(--gold); font-family: 'Playfair Display', serif; }
.stat-desc { font-size: 14px; color: var(--text-muted); }
.dashboard-link { color: var(--gold); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s; }
.dashboard-card:hover .dashboard-link { color: var(--gold-light); }
.dashboard-recent { background: var(--bg-card); border: 1px solid var(--divider); border-radius: 8px; padding: 24px; }
.dashboard-recent h4 { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--text-primary); margin-bottom: 20px; }
.recent-orders-table { display: flex; flex-direction: column; gap: 12px; }
.recent-order-row { display: grid; grid-template-columns: 100px 1fr auto 100px; gap: 16px; align-items: center; padding: 16px; background: var(--bg-elevated); border-radius: 6px; font-size: 14px; }
.order-id { font-weight: 600; color: var(--gold); }
.order-date { color: var(--text-muted); }
.order-amount { font-weight: 600; color: var(--text-primary); text-align: right; }
.order-status { padding: 6px 16px; border-radius: 100px; font-size: .8rem; font-weight: 600; }
.status-completed { background: rgba(45,122,62,.15); color: #4ade80; }
.status-shipping { background: rgba(184,154,106,.15); color: var(--gold); }
.status-elaborazione { background: rgba(99,142,210,.15); color: #89b4f8; }
/* Stati aggiuntivi non presenti nel dataset fittizio del mockup (che non
   includeva mai ordini annullati/rimborsati/falliti) ma reali su un negozio
   WooCommerce vero. */
.status-cancelled, .status-refunded, .status-failed { background: rgba(192,57,43,.15); color: #e57373; }
.nav-badge { display: inline-block; background: var(--gold); color: var(--bg-primary); font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: auto; font-weight: 600; }

@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .recent-order-row { grid-template-columns: 1fr; gap: 8px; }
}