/* ============================================================
   WOOCOMMERCE — design Green
   Riusa token e componenti di home.css (.gr-wrap, .gr-btn, .gr-hero,
   .gr-cta…): qui ci sono solo la cover del negozio, la griglia dei
   prodotti e il rivestimento delle pagine di Woo.

   Due markup diversi convivono in questo file, ed è bene saperlo prima
   di metterci mano:

     • CLASSICO (.woocommerce-*): negozio, scheda prodotto, account e
       pagina di conferma ordine. Lo stampa il PHP del plugin.
     • A BLOCCHI (.wc-block-*): carrello e checkout. Lo stampa React,
       e il markup non si può toccare: si può solo vestirlo.

   Sulla specificità: i selettori di Woo sono quasi sempre a due o tre
   classi (`.woocommerce ul.products li.product`). Le regole qui sotto
   li ricalcano invece di alzare il tiro con !important, e vincono
   perché questo foglio si carica dopo quelli del plugin (vedi
   WooCommerceController::enqueue, priorità 99).
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

/* home.css dichiara `.gr-main img { width:100%; height:100%; object-fit:cover }`.
   Per le foto a pieno riquadro della home è giusto, per Woo è un disastro:
   schiaccerebbe le icone dei pagamenti, le miniature del carrello e i loghi.
   Qui le immagini tornano a comportarsi normalmente, e il ritaglio si
   riaccende una per una dove serve davvero (cover, schede, galleria). */
.gr-main.gr-woo img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: initial;
}

.gr-woo__body {
    background: var(--gr-cream);
}

/* Sulle pagine interne l'intestazione ha già la sua aria sotto: qui basta
   staccare il contenuto, non ricominciare da capo. */
.gr-woo--page .gr-woo__body {
    padding-top: 0;
}

/* Woo semina titoli un po' ovunque — "Accedi", "Registrati", "Potresti
   essere interessato a…", le intestazioni dell'account — e senza una
   misura loro si prenderebbero quella di general.css, dove un h2 è alto
   3rem: in mezzo a una scheda urlerebbe. Questa è la misura di base; i
   titoli che ne vogliono una diversa (correlati, schede prodotto) hanno
   più avanti una regola propria e più specifica. */
.gr-woo__body :is(h2, h3, h4) {
    font-family: var(--gr-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--gr-ink);
    margin-bottom: 16px;
}
.gr-woo__body h2 { font-size: 1.5rem; }
.gr-woo__body h3 { font-size: 1.22rem; }
.gr-woo__body h4 { font-size: 1.08rem; }

/* Le tabelle di Woo (dettagli ordine, download, indirizzi) sono tutte
   uguali: fondo bianco, angoli tondi, niente bordi a gabbia. */
.gr-woo table {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
}
.gr-woo table th,
.gr-woo table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--gr-line);
}
.gr-woo table th {
    font-weight: 700;
    color: var(--gr-green);
}

/* Il prezzo con lo sconto: quello vecchio barrato e smorzato, il nuovo
   in evidenza. Vale ovunque — griglia, scheda, carrello. */
.gr-woo del {
    opacity: .5;
    font-weight: 500;
    text-decoration: line-through;
}
.gr-woo ins {
    background: transparent;
    text-decoration: none;
    font-weight: 800;
}

.gr-woo .required {
    color: var(--gr-carne);
    text-decoration: none;
    border: 0;
}


/* ============================================================
   COVER DEL NEGOZIO
   Foto a tutta larghezza con un velo verde sopra: è l'unica pagina
   del sito con l'intestazione scura, e serve a farla sembrare
   l'ingresso di un posto invece dell'inizio di un elenco.
   ============================================================ */
.gr-woo__cover {
    position: relative;
    padding: 216px 0 104px;
    background: var(--gr-green);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.gr-woo__cover-bg {
    position: absolute;
    inset: 0;
}
.gr-main.gr-woo .gr-woo__cover-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Il velo sta su uno pseudo-elemento e non sull'immagine: così la foto
   resta a piena opacità sotto e il verde la tinge invece di sbiadirla.
   Più fitto in basso, dove poggia il testo. */
.gr-woo__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(182, 217, 76, .18) 0%, rgba(182, 217, 76, 0) 60%),
        linear-gradient(180deg, rgba(14, 59, 34, .62) 0%, rgba(14, 59, 34, .80) 55%, rgba(14, 59, 34, .93) 100%);
}

.gr-woo__cover-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

/* Sul verde la pillola bianca dell'eyebrow sparirebbe: qui è di vetro. */
.gr-woo .gr-eyebrow--light {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.gr-woo__cover .gr-hero__title {
    margin-bottom: 20px !important;
}

.gr-woo__cover-lead,
.gr-woo__cover .gr-hero__lead {
    max-width: 620px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, .78);
}
.gr-woo__cover-lead > * + * { margin-top: 14px !important; }
.gr-woo__cover-lead a {
    color: var(--gr-lime);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ============================================================
   INTESTAZIONE DELLE PAGINE INTERNE
   Carrello, checkout, conferma ordine e account: niente foto, solo
   la stessa hero chiara delle serate, più bassa.
   ============================================================ */
.gr-woo__head { padding: 168px 0 52px; }
.gr-woo__head-inner { position: relative; max-width: 720px; }

.gr-woo__head .gr-hero__title {
    font-size: clamp(2.3rem, 5vw, 3.5rem);
    margin-bottom: 18px !important;
}
.gr-woo__head .gr-hero__lead {
    max-width: 600px;
    margin-bottom: 0 !important;
}


/* ============================================================
   BRICIOLE (scheda prodotto)
   ============================================================ */
.gr-woo__crumbs {
    padding: 134px 0 0;
    background: var(--gr-cream);
}
.gr-woo .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-size: .88rem;
    font-weight: 500;
    color: var(--gr-muted);
}
.gr-woo .woocommerce-breadcrumb a {
    color: var(--gr-green);
    font-weight: 600;
}
.gr-woo .woocommerce-breadcrumb a:hover { text-decoration: underline; }
.gr-woo__crumb-sep {
    margin: 0 9px;
    opacity: .45;
}


/* ============================================================
   BOTTONI
   Un solo aspetto per i tre modi in cui Woo stampa un bottone:
   <a class="button">, <button class="button"> e i bottoni React
   dei blocchi. I selettori ripetono l'elemento (a.button, non solo
   .button) per pareggiare la specificità delle regole del plugin.
   ============================================================ */
.gr-woo a.button,
.gr-woo button.button,
.gr-woo input.button,
.gr-woo button.woocommerce-Button,
.gr-woo a.woocommerce-Button,
.gr-woo .wc-block-components-button:not(.is-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-height: 0;
    padding: 15px 26px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--gr-green);
    color: #fff;
    font-family: var(--gr-display);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.gr-woo a.button:hover,
.gr-woo button.button:hover,
.gr-woo input.button:hover,
.gr-woo button.woocommerce-Button:hover,
.gr-woo a.woocommerce-Button:hover,
.gr-woo .wc-block-components-button:not(.is-link):hover {
    background: var(--gr-green-700);
    color: #fff;
    transform: translateY(-2px);
}

/* `alt` è la classe che Woo mette sull'azione principale (aggiungi al
   carrello, vai alla cassa): stesso aspetto, ma serve una regola a parte
   perché il plugin la colora con un selettore più specifico. */
.gr-woo a.button.alt,
.gr-woo button.button.alt,
.gr-woo input.button.alt {
    background: var(--gr-green);
    color: #fff;
}
.gr-woo a.button.alt:hover,
.gr-woo button.button.alt:hover,
.gr-woo input.button.alt:hover {
    background: var(--gr-green-700);
    color: #fff;
}

/* Azione secondaria: "aggiorna carrello", "continua gli acquisti". */
.gr-woo a.button.wc-backward,
.gr-woo button.button[name="update_cart"],
.gr-woo .wc-block-components-button.outlined:not(.is-link),
.gr-woo .wc-block-components-button.is-style-outline:not(.is-link) {
    background: transparent;
    color: var(--gr-green);
    border-color: rgba(14, 59, 34, .25);
}
.gr-woo a.button.wc-backward:hover,
.gr-woo button.button[name="update_cart"]:hover,
.gr-woo .wc-block-components-button.outlined:not(.is-link):hover,
.gr-woo .wc-block-components-button.is-style-outline:not(.is-link):hover {
    background: rgba(14, 59, 34, .05);
    color: var(--gr-green);
    border-color: var(--gr-green);
}

.gr-woo a.button:disabled,
.gr-woo button.button:disabled,
.gr-woo button.button[disabled],
.gr-woo .wc-block-components-button:not(.is-link):disabled {
    opacity: .45;
    transform: none;
    cursor: not-allowed;
}

/* I bottoni-link (rimuovi, modifica indirizzo): testo, non pillole. */
.gr-woo .wc-block-components-button.is-link,
.gr-woo .wc-block-cart-item__remove-link {
    color: var(--gr-muted);
    font-family: var(--gr-display);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gr-woo .wc-block-components-button.is-link:hover,
.gr-woo .wc-block-cart-item__remove-link:hover { color: var(--gr-carne); }


/* ============================================================
   MODULI
   Woo classico e blocchi hanno due sistemi di campi diversi. Sotto,
   prima quelli classici (account, conferma ordine) e poi il ritocco
   ai campi React del checkout, che si limita a bordo e raggio: la
   loro etichetta galleggiante dipende da padding e altezza, e
   riscriverli la manderebbe fuori posto.
   ============================================================ */
.gr-woo form .form-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
}

/* Woo affianca certi campi mettendoli al 47% con un float (le classi
   form-row-first e form-row-last). Dentro a una scheda stretta il
   risultato è un campo mezzo vuoto accanto al nulla: qui vanno tutti a
   tutta larghezza, uno sotto l'altro. */
.gr-woo form .form-row-first,
.gr-woo form .form-row-last,
.gr-woo form .form-row-wide {
    width: 100%;
    float: none;
    clear: none;
}
.gr-woo form .form-row label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--gr-green);
}

.gr-woo form .form-row input.input-text,
.gr-woo form .form-row textarea,
.gr-woo form .form-row select,
.gr-woo .woocommerce-input-wrapper input.input-text,
.gr-woo input[type="email"],
.gr-woo input[type="password"],
.gr-woo input[type="search"],
.gr-woo input[type="tel"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-sm);
    background: var(--gr-white);
    font-family: var(--gr-display);
    font-size: 1rem;
    color: var(--gr-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.gr-woo form .form-row input.input-text:focus,
.gr-woo form .form-row textarea:focus,
.gr-woo form .form-row select:focus {
    border-color: var(--gr-green);
    box-shadow: 0 0 0 3px rgba(182, 217, 76, .35);
    outline: none;
}
.gr-woo form .form-row textarea { min-height: 120px; resize: vertical; }

/* Woo dichiara `display: inline-block` su questa etichetta con un selettore
   di tre classi: per rimetterla in riga con la sua casella bisogna
   ricalcarlo, altrimenti il testo va a capo sotto al quadratino. */
.gr-woo form .form-row label.woocommerce-form__label-for-checkbox,
.gr-woo label.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--gr-muted);
    cursor: pointer;
}

/* accent-color tinge la casella di sistema senza doverla rifare da zero:
   restano il segno di spunta nativo e il comportamento da tastiera. */
.gr-woo input[type="checkbox"],
.gr-woo input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--gr-green);
}

/* ── Paese e provincia (select2) ──
   Nel modulo degli indirizzi Woo sostituisce i due menu a tendina con
   select2, che si porta dietro il suo aspetto: 38px di altezza e angoli a
   4px, in mezzo a campi alti 52 e arrotondati. Qui si rimettono in riga.

   La tendina che si apre al clic NON sta dentro .gr-woo: select2 la
   appende in fondo al <body>. Per questo la sua regola parte dalla classe
   del body e i colori sono scritti per esteso — i token --gr-* vivono
   dentro .gr-main e lì fuori non arrivano. */
.gr-woo .select2-container--default .select2-selection--single {
    height: 52px;
    padding: 0 4px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-sm);
    background: var(--gr-white);
}
.gr-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    line-height: 50px;
    font-family: var(--gr-display);
    font-size: 1rem;
    color: var(--gr-ink);
}
.gr-woo .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 50px;
}
.gr-woo .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gr-green);
}

.gr-woo-page .select2-dropdown {
    border-color: rgba(14, 59, 34, .18);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
}
.gr-woo-page .select2-search--dropdown .select2-search__field {
    padding: 9px 11px;
    border: 1px solid rgba(14, 59, 34, .18);
    border-radius: 8px;
}
.gr-woo-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #0E3B22;
    color: #fff;
}


/* ── Campi del checkout a blocchi ── */
.gr-woo .wc-block-components-text-input input[type="text"],
.gr-woo .wc-block-components-text-input input[type="email"],
.gr-woo .wc-block-components-text-input input[type="tel"],
.gr-woo .wc-block-components-text-input input[type="number"],
.gr-woo .wc-block-components-text-input input[type="url"],
.gr-woo .wc-block-components-text-input input[type="password"],
.gr-woo .wc-block-components-select__container select {
    border-radius: var(--gr-r-sm);
    border-color: var(--gr-line);
    background-color: var(--gr-white);
    font-family: var(--gr-display);
    color: var(--gr-ink);
}
.gr-woo .wc-block-components-text-input input[type="text"]:focus,
.gr-woo .wc-block-components-text-input input[type="email"]:focus,
.gr-woo .wc-block-components-text-input input[type="tel"]:focus,
.gr-woo .wc-block-components-text-input input[type="number"]:focus,
.gr-woo .wc-block-components-text-input input[type="url"]:focus,
.gr-woo .wc-block-components-text-input input[type="password"]:focus {
    border-color: var(--gr-green);
    box-shadow: 0 0 0 3px rgba(182, 217, 76, .35);
    color: var(--gr-ink);
}
.gr-woo .wc-block-components-text-input label,
.gr-woo .wc-block-components-select label {
    font-family: var(--gr-display);
    color: var(--gr-muted);
}


/* ============================================================
   AVVISI
   I tre riquadri di Woo (messaggio, informazione, errore) rifatti
   con la palette del locale. La barretta colorata a sinistra dice
   subito di che tipo è senza doverlo leggere.
   ============================================================ */
.gr-woo .woocommerce-message,
.gr-woo .woocommerce-info,
.gr-woo .woocommerce-error,
.gr-woo .wc-block-components-notice-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0 0 28px;
    padding: 18px 22px;
    border: 1px solid var(--gr-line);
    border-left: 4px solid var(--gr-lime);
    border-radius: var(--gr-r-md);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    color: var(--gr-ink);
    font-size: .98rem;
    list-style: none;
}
.gr-woo .woocommerce-message::before,
.gr-woo .woocommerce-info::before,
.gr-woo .woocommerce-error::before { display: none; }

.gr-woo .woocommerce-info,
.gr-woo .wc-block-components-notice-banner.is-info { border-left-color: var(--gr-pesce); }
.gr-woo .woocommerce-error,
.gr-woo .wc-block-components-notice-banner.is-error { border-left-color: var(--gr-carne); }

/* Il bottone "vedi il carrello" che Woo infila dentro al messaggio va
   spinto a destra, altrimenti resta appiccicato al testo. */
.gr-woo .woocommerce-message a.button,
.gr-woo .woocommerce-info a.button {
    margin-left: auto;
    padding: 11px 20px;
    font-size: .9rem;
}

.gr-woo .woocommerce-notices-wrapper:empty { display: none; }


/* ============================================================
   NEGOZIO — barra e griglia
   ============================================================ */
.gr-woo__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 38px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--gr-line);
}
.gr-woo .woocommerce-result-count {
    margin: 0;
    color: var(--gr-muted);
    font-size: .95rem;
}
.gr-woo .woocommerce-ordering { margin: 0; }
.gr-woo .woocommerce-ordering select {
    padding: 11px 42px 11px 18px;
    border: 1px solid var(--gr-line);
    border-radius: 999px;
    background: var(--gr-white);
    /* La freccia è un'immagine inline e non un carattere: così non dipende
       dal font delle icone di Woo, che qui non viene caricato. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3B22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--gr-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--gr-green);
    cursor: pointer;
}

/* ── La griglia ──
   Woo manda in pagina una lista a colonne finte (float + percentuali).
   Qui torna a essere una griglia vera: le percentuali e i float vanno
   spenti, altrimenti si sommano al grid e le schede saltano di riga. */
.gr-woo ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gr-woo ul.products::before,
.gr-woo ul.products::after { display: none; }

/* Le colonne finte di Woo non si spengono con un selettore qualunque: il
   plugin le scrive su `.woocommerce ul.products.columns-3 li.product`, che
   ha una classe in più di quante se ne possano mettere da qui. L'attributo
   [class*="columns-"] pareggia il conto senza dover elencare una regola per
   ogni numero di colonne — e senza !important. Sta da sola perché è l'unica
   riga di questo file che combatte, il resto è solo aspetto. */
.gr-main.gr-woo ul.products[class*="columns-"] li.product,
.gr-main.gr-woo ul.products li.product {
    float: none;
    width: 100%;
    margin: 0;
}

.gr-woo ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease;
}
.gr-woo ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--gr-shadow);
}

/* Il link avvolge foto, titolo e prezzo; il bottone gli sta fuori, come
   fratello. Con la colonna flex il prezzo si appoggia in fondo e i
   bottoni restano incolonnati anche se i titoli sono di righe diverse. */
.gr-woo ul.products li.product a.woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
}

.gr-woo ul.products li.product a img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 0 4px;
    border-radius: 0;
    box-shadow: none;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gr-woo ul.products li.product:hover a img { transform: scale(1.04); }

.gr-woo ul.products li.product .woocommerce-loop-product__title {
    padding: 22px 24px 0;
    font-family: var(--gr-display);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--gr-ink);
}

.gr-woo ul.products li.product .price {
    margin: 10px 0 0;
    padding: 0 24px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--gr-green);
}
/* Il margine automatico in cima è quello che incolla il prezzo al fondo
   della scheda: senza, sale sotto ai titoli corti. */
.gr-woo ul.products li.product .price { margin-top: auto; padding-top: 10px; }
.gr-woo ul.products li.product .price del { font-size: .9em; }

.gr-woo ul.products li.product .star-rating {
    margin: 12px 24px 0;
    color: var(--gr-gold);
}

.gr-woo ul.products li.product a.button,
.gr-woo ul.products li.product a.added_to_cart {
    align-self: flex-start;
    margin: 18px 24px 24px;
    padding: 12px 22px;
    font-size: .92rem;
}
/* Il "Visualizza carrello" che compare dopo un'aggiunta. Non ha la classe
   .button — se la aspettasse dalle regole dei bottoni resterebbe testo
   nudo — quindi la pillola se la scrive tutta da sé. */
.gr-woo ul.products li.product a.added_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    border: 1.5px solid rgba(14, 59, 34, .25);
    border-radius: 999px;
    background: transparent;
    color: var(--gr-green);
    font-family: var(--gr-display);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.gr-woo ul.products li.product a.added_to_cart:hover {
    background: rgba(14, 59, 34, .05);
    border-color: var(--gr-green);
    transform: translateY(-2px);
}

/* Il bollino dello sconto, appoggiato sull'angolo della foto. */
.gr-woo ul.products li.product .onsale,
.gr-woo div.product .onsale {
    position: absolute;
    top: 16px;
    left: 16px;
    right: auto;
    z-index: 2;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--gr-lime);
    color: var(--gr-green);
    font-family: var(--gr-display);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}

/* Niente prodotti: stesso riquadro vuoto delle serate. */
.gr-woo .woocommerce-info.woocommerce-no-products-found,
.gr-woo .woocommerce-no-products-found > .woocommerce-info {
    justify-content: center;
    padding: 48px 28px;
    border-left-width: 1px;
    text-align: center;
    color: var(--gr-muted);
}


/* ── Griglia dei prodotti "a blocchi" ──
   Il carrello vuoto e le vendite incrociate non passano dal loop classico:
   montano la griglia dei blocchi (.wc-block-grid), che ha un markup tutto
   suo. Stesse schede di sopra, selettori diversi.

   Il bottone qui è un <a class="wp-block-button__link">, cioè il bottone
   del block editor, che arriva grigio scuro con sopra il testo scuro del
   tema: oltre a stonare non si legge. */
.gr-woo .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gr-main.gr-woo .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 22px;
    overflow: hidden;
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    text-align: left;
}
.gr-woo .wc-block-grid__product-image { margin: 0; }
.gr-main.gr-woo .wc-block-grid__product-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.gr-woo .wc-block-grid__product-title {
    padding: 20px 22px 0;
    font-family: var(--gr-display);
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gr-ink);
}
.gr-woo .wc-block-grid__product-price {
    margin: auto 0 0;
    padding: 10px 22px 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gr-green);
}
.gr-woo .wc-block-grid__product-add-to-cart { margin: 16px 22px 0; }
.gr-woo .wc-block-grid__product-add-to-cart a.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gr-green);
    color: #fff;
    font-family: var(--gr-display);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
}
.gr-woo .wc-block-grid__product-add-to-cart a.wp-block-button__link:hover {
    background: var(--gr-green-700);
    color: #fff;
    transform: translateY(-2px);
}


/* ── Paginazione ── */
.gr-woo .woocommerce-pagination {
    margin-top: 56px;
    text-align: center;
}
.gr-woo .woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.gr-woo .woocommerce-pagination ul.page-numbers li {
    border: 0;
    overflow: visible;
}
.gr-woo .woocommerce-pagination ul.page-numbers li a.page-numbers,
.gr-woo .woocommerce-pagination ul.page-numbers li span.page-numbers {
    display: grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--gr-line);
    border-radius: 999px;
    background: var(--gr-white);
    color: var(--gr-green);
    font-weight: 700;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gr-woo .woocommerce-pagination ul.page-numbers li span.page-numbers.current {
    background: var(--gr-green);
    border-color: var(--gr-green);
    color: #fff;
}
.gr-woo .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    background: var(--gr-cream-2);
    border-color: var(--gr-green);
}


/* ============================================================
   SCHEDA PRODOTTO
   ============================================================ */
.gr-woo--product .gr-woo__body { padding: 40px 0 96px; }

/* Woo affianca galleria e riepilogo con due float al 48%. Qui diventa
   una griglia: le schede lunghe (tab, correlati) prendono tutta la
   larghezza mettendosi su `grid-column: 1 / -1`. */
.gr-woo div.product {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 56px;
    align-items: start;
}
.gr-woo div.product::before,
.gr-woo div.product::after { display: none; }

.gr-woo div.product > * { grid-column: 1 / -1; }
.gr-woo div.product > div.images { grid-column: 1; grid-row: 1; }
.gr-woo div.product > div.summary { grid-column: 2; grid-row: 1; }

.gr-woo div.product div.images,
.gr-woo div.product div.summary {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
}

/* ── Galleria ── */
.gr-woo div.product div.images.woocommerce-product-gallery {
    position: relative;
    border-radius: var(--gr-r-lg);
    overflow: hidden;
    box-shadow: var(--gr-shadow);
    background: var(--gr-white);
}
.gr-main.gr-woo div.product div.images img {
    width: 100%;
    height: auto;
    display: block;
}
.gr-woo div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 10px;
    padding: 0;
    list-style: none;
}
.gr-woo div.product div.images .flex-control-thumbs li {
    width: auto;
    float: none;
    margin: 0;
    list-style: none;
}
.gr-main.gr-woo div.product div.images .flex-control-thumbs img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--gr-r-sm);
    opacity: .55;
    transition: opacity .2s ease;
    cursor: pointer;
}
.gr-main.gr-woo div.product div.images .flex-control-thumbs img.flex-active,
.gr-main.gr-woo div.product div.images .flex-control-thumbs img:hover { opacity: 1; }

/* La lente dello zoom di Woo è un bottone tondo sopra alla foto. */
.gr-woo div.product .woocommerce-product-gallery__trigger {
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--gr-shadow-sm);
    font-size: 1.1rem;
    color: var(--gr-green);
}

/* ── Riepilogo ── */
.gr-woo div.product .product_title {
    font-family: var(--gr-display);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--gr-ink);
    margin: 0 0 18px;
}

.gr-woo div.product p.price,
.gr-woo div.product span.price {
    display: block;
    margin: 0 0 22px;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--gr-green);
}
.gr-woo div.product p.price del { font-size: .62em; }
.gr-woo div.product p.price ins { font-weight: 800; }

.gr-woo div.product .woocommerce-product-details__short-description {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--gr-line);
    color: var(--gr-muted);
    font-size: 1.04rem;
}
.gr-woo div.product .woocommerce-product-details__short-description > * + * { margin-top: 14px !important; }

.gr-woo div.product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.gr-woo .star-rating { color: var(--gr-gold); }
.gr-woo .woocommerce-review-link { color: var(--gr-muted); font-size: .92rem; }

/* Quantità e "aggiungi al carrello" su una riga sola. */
.gr-woo div.product form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 26px;
}
.gr-woo div.product form.cart .quantity {
    display: flex;
    margin: 0;
    float: none;
}
.gr-woo div.product form.cart .quantity input.qty,
.gr-woo .quantity input.qty {
    width: 84px;
    height: 52px;
    padding: 0 10px;
    border: 1px solid var(--gr-line);
    border-radius: 999px;
    background: var(--gr-white);
    font-family: var(--gr-display);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--gr-ink);
}
.gr-woo div.product form.cart button.button {
    flex: 1 1 auto;
    min-width: 220px;
    height: 52px;
}

/* Le varianti (taglia, gusto…) impilate sopra al bottone. */
.gr-woo div.product form.cart.variations_form { display: block; }
.gr-woo div.product table.variations {
    margin: 0 0 20px;
    border: 0;
}
.gr-woo div.product table.variations th,
.gr-woo div.product table.variations td {
    padding: 8px 0;
    border: 0;
}
.gr-woo div.product table.variations select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-sm);
    background: var(--gr-white);
    font-family: var(--gr-display);
    font-size: 1rem;
}
.gr-woo div.product .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.gr-woo div.product .product_meta {
    padding-top: 22px;
    border-top: 1px solid var(--gr-line);
    font-size: .92rem;
    color: var(--gr-muted);
}
.gr-woo div.product .product_meta > span {
    display: block;
    margin-bottom: 6px;
}
.gr-woo div.product .product_meta a { color: var(--gr-green); font-weight: 600; }
.gr-woo div.product .stock.in-stock { color: var(--gr-green-700); font-weight: 600; }
.gr-woo div.product .stock.out-of-stock { color: var(--gr-carne); font-weight: 600; }

/* ── Schede (descrizione, informazioni, recensioni) ── */
.gr-woo div.product .woocommerce-tabs {
    margin-top: 88px;
    padding-top: 48px;
    border-top: 1px solid var(--gr-line);
}
.gr-woo div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.gr-woo div.product .woocommerce-tabs ul.tabs::before { display: none; }
.gr-woo div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}
.gr-woo div.product .woocommerce-tabs ul.tabs li::before,
.gr-woo div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.gr-woo div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 22px;
    border: 1px solid var(--gr-line);
    border-radius: 999px;
    background: var(--gr-white);
    font-family: var(--gr-display);
    font-size: .95rem;
    font-weight: 600;
    color: var(--gr-green);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gr-woo div.product .woocommerce-tabs ul.tabs li.active a,
.gr-woo div.product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--gr-green);
    border-color: var(--gr-green);
    color: #fff;
}
.gr-woo div.product .woocommerce-tabs .panel {
    max-width: 780px;
    margin: 0;
    padding: 0;
    color: var(--gr-muted);
    font-size: 1.04rem;
}
.gr-woo div.product .woocommerce-tabs .panel > * + * { margin-top: 16px !important; }
.gr-woo div.product .woocommerce-tabs .panel h2 {
    font-family: var(--gr-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gr-ink);
    margin-bottom: 14px;
}
.gr-woo div.product .woocommerce-tabs .panel ul,
.gr-woo div.product .woocommerce-tabs .panel ol { padding-left: 20px !important; }
.gr-woo div.product .woocommerce-tabs .panel li { list-style: disc; margin-top: 6px; }

/* ── Recensioni ── */
.gr-woo #reviews .commentlist {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.gr-woo #reviews .commentlist li { margin: 0 0 16px; }
.gr-woo #reviews .comment_container {
    display: flex;
    gap: 18px;
    padding: 24px;
    border-radius: var(--gr-r-md);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}
.gr-main.gr-woo #reviews .comment_container img.avatar {
    position: static;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    object-fit: cover;
}
.gr-woo #reviews .comment-text { margin: 0; padding: 0; border: 0; }
.gr-woo #reviews .comment-text .meta { color: var(--gr-muted); font-size: .9rem; }
.gr-woo #review_form_wrapper {
    padding: 28px;
    border-radius: var(--gr-r-md);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}
.gr-woo #review_form_wrapper .comment-reply-title {
    display: block;
    margin-bottom: 18px;
    font-family: var(--gr-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gr-ink);
}
.gr-woo #respond textarea {
    width: 100%;
    min-height: 130px;
    padding: 14px 16px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-sm);
    font-family: var(--gr-display);
    font-size: 1rem;
}
.gr-woo #respond input#submit { margin-top: 8px; }

/* ── Correlati e upsell ── */
.gr-woo div.product .related,
.gr-woo div.product .upsells {
    margin-top: 88px;
    padding-top: 48px;
    border-top: 1px solid var(--gr-line);
}
.gr-woo div.product .related > h2,
.gr-woo div.product .upsells > h2 {
    margin: 0 0 34px;
    font-family: var(--gr-display);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--gr-ink);
}


/* ============================================================
   CARRELLO (blocchi)
   Il markup lo genera React e non si tocca: qui si veste. Colonna
   principale su fondo crema, riepilogo in una scheda bianca che
   resta appesa mentre si scorre.
   ============================================================ */
.gr-woo .wp-block-woocommerce-cart,
.gr-woo .wp-block-woocommerce-checkout {
    max-width: none;
    margin: 0;
    padding: 0;
}
.gr-woo .wc-block-cart,
.gr-woo .wc-block-checkout { margin: 0; }

.gr-woo .wc-block-cart__totals-title,
.gr-woo .wc-block-components-checkout-order-summary__title-text,
.gr-woo .wc-block-components-title {
    font-family: var(--gr-display);
    color: var(--gr-ink);
}

/* Le righe dei prodotti: nessuna gabbia, solo un filo che le separa. */
.gr-woo table.wc-block-cart-items {
    background: transparent;
}
.gr-woo .wc-block-cart-items__header {
    border-bottom: 1px solid var(--gr-line);
    font-family: var(--gr-display);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gr-muted);
}
.gr-woo .wc-block-cart-items__row td {
    padding-top: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--gr-line);
}
.gr-main.gr-woo .wc-block-cart-item__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--gr-r-sm);
}
.gr-woo .wc-block-components-product-name {
    font-family: var(--gr-display);
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--gr-ink);
    text-decoration: none;
}
.gr-woo .wc-block-components-product-name:hover { color: var(--gr-green); }
.gr-woo .wc-block-cart-item__prices,
.gr-woo .wc-block-components-product-price { color: var(--gr-muted); }
.gr-woo .wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
    font-weight: 800;
    color: var(--gr-green);
}

.gr-woo .wc-block-components-quantity-selector {
    border-radius: 999px;
    border-color: var(--gr-line);
    background: var(--gr-white);
}
.gr-woo .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    font-family: var(--gr-display);
    font-weight: 700;
    color: var(--gr-ink);
}

/* Il riepilogo: una scheda bianca, come le schede delle serate. */
.gr-woo .wc-block-components-sidebar {
    padding: 28px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}

/* Il riepilogo dell'ordine ha già un bordo suo: dentro alla scheda
   diventerebbe una cornice nella cornice. */
.gr-woo .wp-block-woocommerce-checkout-order-summary-block,
.gr-woo .wp-block-woocommerce-cart-order-summary-block {
    border: 0;
}

.gr-woo .wc-block-components-totals-item {
    font-family: var(--gr-display);
    color: var(--gr-muted);
}
.gr-woo .wc-block-components-totals-footer-item {
    font-size: 1.2rem;
    color: var(--gr-ink);
}
.gr-woo .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    font-weight: 800;
    color: var(--gr-green);
}
.gr-woo .wc-block-components-totals-wrapper {
    border-top-color: var(--gr-line);
}

.gr-woo .wc-block-cart__submit-button,
.gr-woo .wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 17px 26px;
    font-size: 1.02rem;
}

/* Carrello vuoto: centrato, con l'invito a tornare al negozio. */
.gr-woo .wp-block-woocommerce-empty-cart-block {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.gr-woo .wc-block-cart__empty-cart__title {
    font-family: var(--gr-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gr-ink);
}
/* Il faccino del carrello vuoto è una maschera colorata con currentColor:
   col verde scuro del testo diventa un bollo nero grosso come un piatto.
   Qui si smorza e si rimpicciolisce, così resta un disegnino. */
.gr-woo .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    width: 3.6em;
    height: 3.6em;
    margin-bottom: 1.2em;
    background-color: rgba(14, 59, 34, .22);
    mask-size: 3.6em;
}


/* ============================================================
   CHECKOUT (blocchi)
   ============================================================ */
/* La grondaia fra i campi e il riepilogo la tiene il padding destro della
   colonna di sinistra, che Woo scrive in percentuale e azzera da sé quando
   la pagina si stringe e le due colonne si impilano (lo fa con una
   container query, non con una media query: toccarlo da qui significa
   doverla rifare). Qui quindi non si tocca — c'era una riga che lo
   annullava per allargare i campi, ed è per quello che il riepilogo
   finiva appiccicato. Il riquadro bianco del riepilogo nasce dal padding
   di .wc-block-components-sidebar, che è dentro alla colonna e non
   c'entra con lo spazio fra le due. */

.gr-woo .wc-block-components-checkout-step {
    padding: 26px 28px;
    margin-bottom: 20px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}
.gr-woo .wc-block-components-checkout-step__heading { margin-top: 0; }
.gr-woo .wc-block-components-checkout-step__title {
    font-family: var(--gr-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--gr-ink);
}
.gr-woo .wc-block-components-checkout-step__description {
    color: var(--gr-muted);
    font-size: .95rem;
}
/* Il pallino numerato di serie non serve: i riquadri bianchi separano
   già i passaggi, e due sistemi di numerazione confonderebbero. */
.gr-woo .wc-block-components-checkout-step__container::after { display: none; }
.gr-woo .wc-block-components-checkout-step__content { padding-left: 0; }

.gr-woo .wc-block-components-radio-control__option,
.gr-woo .wc-block-checkout__shipping-method-option {
    border-radius: var(--gr-r-md);
}
.gr-woo .wc-block-components-radio-control-accordion-option,
.gr-woo .wc-block-components-radio-control__option {
    font-family: var(--gr-display);
}
.gr-woo .wc-block-checkout__shipping-method-option--selected {
    border-color: var(--gr-green);
    background: rgba(182, 217, 76, .12);
}

.gr-woo .wc-block-components-checkout-place-order-button {
    border-radius: 999px;
}
.gr-woo .wc-block-checkout__actions_row { align-items: center; }
.gr-woo .wc-block-checkout__terms { color: var(--gr-muted); font-size: .92rem; }
.gr-woo .wc-block-checkout__terms a { color: var(--gr-green); text-decoration: underline; }

.gr-woo .wc-block-components-order-summary-item__description .wc-block-components-product-name {
    font-size: .98rem;
}
.gr-main.gr-woo .wc-block-components-order-summary-item__image img {
    border-radius: var(--gr-r-sm);
}


/* ============================================================
   CONFERMA ORDINE (thank you)
   Markup classico: sul checkout a blocchi l'endpoint order-received
   ricade sullo shortcode, quindi qui si vestono le classi
   .woocommerce-order-*.
   ============================================================ */
.gr-woo--thankyou .woocommerce-notice--success,
.gr-woo .woocommerce-thankyou-order-received {
    margin: 0 0 32px;
    padding: 26px 28px;
    border: 0;
    border-left: 4px solid var(--gr-lime);
    border-radius: var(--gr-r-md);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--gr-ink);
}
.gr-woo .woocommerce-thankyou-order-received::before { display: none; }

/* I dati dell'ordine (numero, data, totale, pagamento) in fila, come
   le pillole dei fatti nella pagina di una serata.

   Ogni voce è una scheda per conto suo invece che una cella di una
   tabella: il numero di voci cambia da un ordine all'altro (il metodo di
   pagamento c'è solo se è stato scelto, i download solo se ce ne sono), e
   una griglia continua finirebbe per mostrare caselle vuote in fondo. */
.gr-woo ul.woocommerce-order-overview,
.gr-woo ul.order_details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin: 0 0 48px;
    padding: 0;
    border: 0;
    background: transparent;
    list-style: none;
}
/* Il clearfix di Woo è uno pseudo-elemento con del contenuto: dentro a una
   griglia diventa una casella vuota, e si prende la prima. */
.gr-woo ul.woocommerce-order-overview::before,
.gr-woo ul.woocommerce-order-overview::after,
.gr-woo ul.order_details::before,
.gr-woo ul.order_details::after { display: none; }

.gr-woo ul.woocommerce-order-overview li,
.gr-woo ul.order_details li {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-md);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    font-family: var(--gr-display);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gr-muted);
    list-style: none;
}
.gr-woo ul.woocommerce-order-overview li strong,
.gr-woo ul.order_details li strong {
    display: block;
    margin-top: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--gr-green);
}

.gr-woo .woocommerce-order-details,
.gr-woo .woocommerce-customer-details,
.gr-woo .woocommerce-order-downloads {
    margin-bottom: 40px;
    padding: 30px;
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}
.gr-woo .woocommerce-order-details h2,
.gr-woo .woocommerce-customer-details h2,
.gr-woo .woocommerce-column__title {
    margin: 0 0 22px;
    font-family: var(--gr-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--gr-ink);
}
.gr-woo .woocommerce-order-details table tfoot th,
.gr-woo .woocommerce-order-details table tfoot td { font-weight: 700; }
.gr-woo .woocommerce-order-details table tfoot tr:last-child td,
.gr-woo .woocommerce-order-details table tfoot tr:last-child th {
    border-bottom: 0;
    font-size: 1.1rem;
    color: var(--gr-green);
}
.gr-woo .woocommerce-customer-details address {
    padding: 0;
    border: 0;
    font-style: normal;
    line-height: 1.8;
    color: var(--gr-muted);
}
.gr-woo .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}
/* WooCommerce chiama col-1 e col-2 le sue due colonne: gli indirizzi
   dell'account, accedi/registrati, i dati del cliente nella conferma
   d'ordine. Sono gli stessi nomi della griglia a 12 colonne di bootstrap,
   che questo tema carica su ogni pagina e li porta all'8,33% e al 16,66%
   di larghezza. Senza questa riga l'indirizzo di fatturazione diventa una
   striscia da 58px, con una parola per riga. */
.gr-woo .col-1,
.gr-woo .col-2 {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    float: none;
    padding: 0;
}

/* Il titolo dell'indirizzo e il link per modificarlo stanno sulla stessa
   riga, con il link spinto a destra. */
.gr-woo .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.gr-woo .woocommerce-Address-title h2 { margin: 0; }
.gr-woo .woocommerce-Address-title a.edit {
    flex-shrink: 0;
    color: var(--gr-green);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gr-woo .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}


/* ============================================================
   ACCOUNT
   Menu a sinistra come una lista di voci-pillola, contenuto a
   destra in una scheda bianca. Da sloggati la pagina è solo il
   modulo di accesso, e allora si centra.
   ============================================================ */
/* Il template my-account.php mette il menu e il contenuto uno accanto
   all'altro dentro un <div class="woocommerce"> nudo, con due float. La
   griglia si appende lì, ma solo quando il menu c'è davvero: da sloggati
   quello stesso div contiene il modulo di accesso, e due colonne
   spezzerebbero il modulo a metà. */
.gr-woo--account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* Le celle si assegnano a mano perché il primo figlio è il contenitore
   degli avvisi: lasciato all'automatico si prenderebbe la prima casella e
   spingerebbe menu e contenuto ognuno su una riga sua. Qui gli avvisi
   stanno per conto loro in cima, a tutta larghezza, e quando sono vuoti la
   riga si chiude a zero. (Le proprietà grid-* su un elemento che non è in
   una griglia non fanno niente: da sloggati la regola non dà fastidio.) */
.gr-woo--account .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
}
.gr-woo--account .woocommerce > .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 2;
}
.gr-woo--account .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 2;
}

.gr-woo .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin: 0;
}
.gr-woo .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gr-woo .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.gr-woo .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--gr-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--gr-green);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gr-woo .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--gr-white);
    border-color: var(--gr-line);
}
.gr-woo .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--gr-green);
    border-color: var(--gr-green);
    color: #fff;
}

.gr-woo .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    padding: 34px;
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    color: var(--gr-muted);
}
.gr-woo .woocommerce-MyAccount-content > * + * { margin-top: 18px; }
.gr-woo .woocommerce-MyAccount-content a:not(.button) {
    color: var(--gr-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gr-woo .woocommerce-MyAccount-content h2,
.gr-woo .woocommerce-MyAccount-content legend {
    font-family: var(--gr-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gr-ink);
}
.gr-woo .woocommerce-MyAccount-content fieldset {
    margin-top: 28px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--gr-line);
    padding-top: 24px;
}
.gr-woo .woocommerce-orders-table__cell-order-actions a.button {
    padding: 9px 18px;
    font-size: .86rem;
}

/* ============================================================
   ACCESSO
   La pagina di login è questa: WooCommerce non ne ha una separata,
   è "Il mio account" vista da sloggati. Il markup arriva da
   woocommerce/myaccount/form-login.php, l'override nel tema.

   Una scheda sola al centro quando le registrazioni sono chiuse,
   due affiancate quando sono aperte (.gr-login--split).
   ============================================================ */
.gr-login {
    display: grid;
    justify-content: center;
    padding: 8px 0 24px;
}
.gr-login--split {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 26px;
    max-width: 920px;
    margin: 0 auto;
    align-items: start;
}

.gr-login__card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 38px 36px 34px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
    text-align: left;
}

/* Woo incornicia da sé i moduli di accesso e registrazione
   (`.woocommerce form.login { border: 1px solid … }`): dentro alla scheda
   sarebbe un riquadro dentro al riquadro. */
.gr-woo .gr-login__card form.login,
.gr-woo .gr-login__card form.register {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.gr-login__brand {
    display: grid;
    place-items: center;
    margin-bottom: 22px;
}
/* Il file del marchio ha parecchio bianco attorno al disegno: a 86px
   l'occhio ne legge una settantina, che è la misura giusta sopra a un
   titolo di questa grandezza. */
.gr-main.gr-woo .gr-login__brand img {
    width: auto;
    height: 86px;
    object-fit: contain;
}

.gr-login__title {
    margin-bottom: 10px;
    font-family: var(--gr-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--gr-ink);
    text-align: center;
}
.gr-login__text {
    margin: 0 auto 28px;
    max-width: 380px;
    color: var(--gr-muted);
    font-size: .98rem;
    text-align: center;
}

/* Il "ricordami" e il pulsante: la casella sopra, il pulsante largo
   quanto la scheda sotto. Su due colonne il pulsante diventerebbe
   piccolo e la riga sbilanciata. */
.gr-woo .gr-login__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 0;
}
.gr-woo .gr-login__actions .woocommerce-form__label-for-checkbox { align-self: flex-start; }
.gr-woo .gr-login__actions button {
    width: 100%;
    padding: 16px 26px;
}

.gr-woo .woocommerce-LostPassword {
    margin: 18px 0 0;
    font-size: .92rem;
    text-align: center;
}
.gr-woo .woocommerce-LostPassword a {
    color: var(--gr-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gr-login__note {
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--gr-line);
    color: var(--gr-muted);
    font-size: .92rem;
    text-align: center;
}
/* Nella scheda di registrazione la nota non chiude niente: è la riga che
   spiega che la password arriva per email, e sta in mezzo al modulo. */
.gr-login__card--register .gr-login__note {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-align: left;
}
.gr-login__card--register { padding-top: 38px; }

/* Password dimenticata e reimpostazione: stesso markup di Woo senza
   override, quindi la scheda gliela dà il CSS. */
.gr-woo form.woocommerce-ResetPassword {
    max-width: 520px;
    margin: 0 auto;
    padding: 34px 36px;
    border: 1px solid var(--gr-line);
    border-radius: var(--gr-r-lg);
    background: var(--gr-white);
    box-shadow: var(--gr-shadow-sm);
}
.gr-woo form.woocommerce-ResetPassword > p:first-child {
    margin-bottom: 22px;
    color: var(--gr-muted);
}
.gr-woo form.woocommerce-ResetPassword .woocommerce-Button,
.gr-woo form.woocommerce-ResetPassword button.button { width: 100%; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .gr-woo__cover { padding: 150px 0 76px; }
    .gr-woo__head  { padding: 138px 0 44px; }
    .gr-woo__crumbs { padding-top: 110px; }

    .gr-woo div.product {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .gr-woo div.product > div.images,
    .gr-woo div.product > div.summary {
        grid-column: 1;
        grid-row: auto;
    }
    .gr-woo div.product .woocommerce-tabs,
    .gr-woo div.product .related,
    .gr-woo div.product .upsells {
        margin-top: 60px;
        padding-top: 36px;
    }
}

/* Sotto i 900px il menu dell'account e il contenuto non ci stanno più
   affiancati: la colonna del menu è larga 258px fissi, e quello che resta
   al contenuto diventa una striscia di poche decine di pixel. Qui la
   griglia torna a una colonna sola e il menu diventa una riga di pillole
   che va a capo — sei voci incolonnate si mangerebbero mezzo schermo
   prima di arrivare al contenuto. */
@media (max-width: 900px) {
    .gr-woo--account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .gr-woo--account .woocommerce > .woocommerce-MyAccount-navigation {
        grid-column: 1;
        grid-row: 2;
    }
    .gr-woo--account .woocommerce > .woocommerce-MyAccount-content {
        grid-column: 1;
        grid-row: 3;
    }

    .gr-woo .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .gr-woo .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 17px;
        border-color: var(--gr-line);
        background: var(--gr-white);
        font-size: .92rem;
    }
    .gr-woo .woocommerce-MyAccount-navigation ul li.is-active a {
        background: var(--gr-green);
        border-color: var(--gr-green);
        color: #fff;
    }
}

/* Carrello e checkout si impilano a 900px invece che a 699.
   Woo passa a una colonna sola con una container query a 699px, ma fra i
   700 e i 900 il riepilogo è il 35% della pagina — poco più di 250px — e
   dentro ci finiscono il titolo su due righe, il nome del prodotto su due
   e la descrizione su tre. Il riquadro bianco che ci mettiamo noi si
   mangia altri 56px di margini, quindi peggiora le cose: meglio impilare
   prima.

   L'ordine va riscritto a mano: in riga Woo mette il riepilogo a `order: 0`
   e i campi a `order: 1`, poi li rovescia con row-reverse. Girata la
   direzione in colonna il rovesciamento sparisce e il riepilogo finirebbe
   sopra ai campi. */
@media (max-width: 900px) {
    .gr-woo .wc-block-components-sidebar-layout {
        flex-direction: column;
    }
    .gr-woo .wc-block-components-sidebar-layout .wc-block-components-main {
        order: 0;
        width: 100%;
        padding-right: 0;
    }
    .gr-woo .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        order: 1;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .gr-woo ul.products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 20px; }
    .gr-woo ul.products li.product .woocommerce-loop-product__title { padding: 18px 18px 0; font-size: 1.02rem; }
    .gr-woo ul.products li.product .price { padding: 8px 18px 0; }
    .gr-woo ul.products li.product a.button,
    .gr-woo ul.products li.product a.added_to_cart { margin: 14px 18px 18px; }

    .gr-woo__toolbar { flex-direction: column; align-items: stretch; }
    .gr-woo .woocommerce-ordering select { width: 100%; }

    .gr-woo div.product form.cart button.button { min-width: 0; width: 100%; }

    .gr-woo .woocommerce-MyAccount-content,
    .gr-woo .woocommerce-order-details,
    .gr-woo .woocommerce-customer-details,
    .gr-woo .wc-block-components-sidebar { padding: 22px; }

    .gr-woo form.woocommerce-form-login,
    .gr-woo form.woocommerce-form-register,
    .gr-woo form.woocommerce-ResetPassword { padding: 24px; }

    .gr-woo .woocommerce-message a.button,
    .gr-woo .woocommerce-info a.button { margin-left: 0; }
}


/* ============================================================
   ASPORTO
   Il sold out e i piatti che si mangiano solo al locale.
   Vedi src/Controllers/Woo/TakeawayController.php
   ============================================================ */
.gr-soldout {
    display: block;
    margin: 0 0 32px;
    padding: 20px 24px;
    border: 1px solid rgba(180, 80, 46, .3);
    border-left: 4px solid var(--gr-carne);
    border-radius: var(--gr-r-md);
    background: rgba(180, 80, 46, .06);
    color: var(--gr-ink);
    font-size: 1rem;
}
.gr-soldout strong { color: var(--gr-carne); }

/* Il cartellino al posto del pulsante mancante. */
.gr-woo .gr-venue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 14px 18px;
    border: 1px dashed var(--gr-line);
    border-radius: var(--gr-r-md);
    background: var(--gr-cream-2);
    color: var(--gr-muted);
    font-size: .95rem;
}
.gr-woo ul.products li.product .gr-venue {
    margin: 16px 24px 24px;
    padding: 11px 15px;
    font-size: .88rem;
}

/* La postilla sotto al prezzo, in griglia e in scheda. */
.gr-woo .gr-venue-note {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gr-pesce);
}

/* "Come lo vuoi?" sulla scheda dei menu del giorno: asporto o qui. */
.gr-woo .gr-service {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
.gr-woo .gr-service legend {
    margin-bottom: 8px;
    font-family: var(--gr-display);
    font-weight: 700;
    color: var(--gr-ink);
}
.gr-woo .gr-service__opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--gr-line);
    border-radius: 999px;
    background: var(--gr-white);
    cursor: pointer;
    font-weight: 600;
}
.gr-woo .gr-service__opt:has(input:checked) {
    border-color: var(--gr-green);
    box-shadow: inset 0 0 0 1px var(--gr-green);
}
.gr-woo .gr-service__opt input { accent-color: var(--gr-green); margin: 0; }
.gr-woo .gr-service__opt.is-off { opacity: .45; cursor: not-allowed; }

/* Il riquadro del ritiro dentro al riepilogo del checkout: è il dato che
   conta di più dell'ordine, e di serie resterebbe una riga qualsiasi. */
.gr-woo .wc-block-components-address-card__edit,
.gr-woo .wc-block-checkout__order-notes { font-family: var(--gr-display); }

/* Il segnaposto è il marchio, non una foto: va mostrato intero e con un
   po' d'aria, non ritagliato a pieno riquadro come le fotografie. */
.gr-main.gr-woo img.woocommerce-placeholder {
    object-fit: contain;
    padding: 17%;
    background: var(--gr-cream-2);
}
.gr-minicart__panel img.woocommerce-placeholder {
    object-fit: contain;
    padding: 6px;
    background: rgba(14, 59, 34, .06);
}