/*
        Theme Name: La Boutique della Carne
	Theme URI: https://macellerialaboutiquedellacarne.com
	Description: Block theme su misura per La Boutique della Carne (D'Angelo Carni SRLS), macelleria a Montesilvano. Design system in theme.json, WooCommerce ri-vestito da zero, nessun page builder.
	Author: Simone Sgarbanti
        Version: 0.13.1
	Requires at least: 6.7
	Tested up to: 7.0
	Requires PHP: 7.4
	License: GNU General Public License v2 or later
	License URI: https://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: laboutique
	Tags: e-commerce, block-patterns, full-site-editing, custom-colors, custom-menu, translation-ready
*/

/* Il design system sta in theme.json. Qui solo ciò che quel formato non copre. */

/* box-sizing globale --------------------------------------------------
   WordPress lo dichiara su alcuni blocchi ma non su tutto, e il tema lo
   aveva solo su due contenitori. Senza, una larghezza come
   `calc(100% - 2.3rem)` con del padding sborda: è quello che spingeva fuori
   dalla card il pulsante "Aggiungi al carrello", che appariva con il margine
   sinistro corretto e il bordo destro a filo. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* I @font-face sono generati da theme.json (settings.typography.fontFamilies).
   File in assets/fonts/: demiths.woff2, libre-baskerville.woff2, inter.woff2 — 98 KB totali,
   solo subset latin, che copre tutte le accentate italiane, l'euro e il grado. */

/* Sopratitolo in oro ----------------------------------------------
   Il cliente usa l'oro #B88C2F per i sopratitoli: è mappato su h4 in theme.json,
   ma serve anche come classe applicabile a un paragrafo. */

.laboutique-eyebrow {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Sezioni scure ---------------------------------------------------
   Il marchio vive sul nero #1D191A: testata, piè di pagina e sezioni d'impatto.
   Sul fondo scuro il rosso del marchio perde contrasto sul testo piccolo,
   quindi i link passano all'oro, che regge. */

.laboutique-dark {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.laboutique-dark :where(a:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent);
}

.laboutique-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.laboutique-dark :where(h4, .laboutique-eyebrow) {
	color: var(--wp--preset--color--accent);
}

/* Fondo e schema colore -------------------------------------------
   theme.json imposta lo sfondo su body, ma non su html: se il documento non
   dichiara il proprio schema, il browser può dipingere la tela di nero in
   dark mode lasciando i testi in versione chiara — cioè testo scuro su nero.
   Va detto esplicitamente: questo è un tema chiaro. */

html {
	background-color: var(--wp--preset--color--base, #FFFFFF);
	color-scheme: light;
}

body {
	background-color: var(--wp--preset--color--base, #FFFFFF);
	color: var(--wp--preset--color--contrast, #1D191A);
}

/* Accessibilità ---------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Unità di vendita -------------------------------------------------
   Il prezzo da solo non dice se è al chilo o al pezzo: su una macelleria
   è l'informazione che decide l'acquisto. Vedi inc/woocommerce-unit.php. */

.laboutique-unit-price {
	display: block;
	margin-top: 0.15em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	text-transform: none;
}

.laboutique-weight-notice {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Selettore di formato sulla scheda prodotto ----------------------- */

.laboutique-weight-choice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-bottom: var(--wp--preset--spacing--30);
}

.laboutique-weight-choice__option {
	position: relative;
}

.laboutique-weight-choice__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.laboutique-weight-choice__option span {
	display: block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.laboutique-weight-choice__option input:checked + span {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.laboutique-weight-choice__option input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* WooCommerce: ricuciture dopo la rimozione del CSS di default ------
   Togliere woocommerce-general lascia scoperti alcuni elementi che i blocchi
   non coprono. Qui si rivestono con i token del design system. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--wp--preset--color--primary);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La card è una colonna flex: senza, prezzo e pulsante finiscono in linea e
   si sovrappongono quando il nome del prodotto va a capo. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	width: auto;
	float: none;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* Non DEMITHS: è un display tutto maiuscolo, e nomi come
	   "Bucatini semola di grano duro Rustichella d'Abruzzo" sarebbero un muro.
	   E niente maiuscolo ereditato dagli heading: qui serve leggibilità. */
	font-family: var(--wp--preset--font-family--subtitle);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* I titoli prodotto sono dentro un link: senza questo ereditano il rosso
   dei collegamenti e diventano illeggibili in griglia. */
.woocommerce ul.products li.product a {
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--primary);
}

.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 0.4em;
}

/* Impaginazione dell'archivio ---------------------------------------
   `woocommerce-general` vestiva anche `ul.page-numbers`: senza, i numeri di
   pagina tornano a essere un elenco puntato allineato a sinistra sotto la
   griglia. Qui prendono il linguaggio delle card — fondo `base` sulla carta
   dell'archivio, angoli quasi squadrati (design.md §4), filetto `border`.

   La pagina corrente è bianca su rosso pieno, mai rossa su carta: design.md
   §2.4 vieta il rosso sul micro-testo, e questi numeri sono micro-testo. */

nav.woocommerce-pagination {
	margin: var(--wp--preset--spacing--40) 0 0;
}

nav.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

/* Sempre scoped sul `li`: WooCommerce mette `class="page-numbers"` anche
   sull'`ul` contenitore, e senza il discendente il riquadro bianco finisce
   sulla barra intera invece che sui singoli numeri. Già visto succedere. */
nav.woocommerce-pagination li .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 2.75rem = 44px: il bersaglio minimo da toccare col pollice. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

nav.woocommerce-pagination li a.page-numbers:hover,
nav.woocommerce-pagination li a.page-numbers:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #FFFFFF;
}

nav.woocommerce-pagination li .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #FFFFFF;
	font-weight: 600;
}

/* I puntini di troncamento non sono un bersaglio: niente riquadro. */
nav.woocommerce-pagination li .page-numbers.dots {
	min-width: 1.5rem;
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--muted);
}

/* `ins` porta dal browser una sottolineatura: con woocommerce-general
   deregistrato non c'è nessun altro a toglierla. */
.woocommerce ul.products li.product .price ins {
	background: none;
	font-weight: 700;
	text-decoration: none;
}

/* Struttura condivisa ------------------------------------------------
   Questo batch porta dentro al tema la direzione visiva del mockup:
   nastro rosso, barra sticky scura, hero narrativa, banco prodotti e
   piè di pagina editoriale. */

.laboutique-topbar {
        position: relative;
        /* Sotto la testata sticky — che le passa sopra allo scorrimento — e
           quindi sotto l'overlay del menu mobile, che vive dentro la testata.
           Con `30` la barra promo copriva il menu aperto. */
        z-index: 1;
        padding: 0.7rem 1rem;
        text-transform: uppercase;
        margin-block: 0;
}

.laboutique-topbar p {
        margin: 0;
        font-weight: 600;
        letter-spacing: 0.13em;
}

.laboutique-topbar > .laboutique-shell {
        padding-top: 0;
        padding-bottom: 0;
}

/* Qui NON va `backdrop-filter`, per quanto design.md §5 ammetta il vetro sulla
   barra sticky.

   Un antenato con `backdrop-filter` (come con `filter` o `transform`) diventa il
   blocco contenitore dei discendenti `position: fixed`. L'overlay del menu
   mobile del core è esattamente questo — `.wp-block-navigation__responsive-container`
   è `fixed; inset: 0` — e con il blur qui sopra si dimensionava sulla testata
   invece che sullo schermo: una striscia di 82px con `overflow: auto`, in cui
   entrava mezza voce. Da fuori: il pulsante c'è, il menu no.

   Il vetro, per inciso, non si vedeva comunque. Il gruppo porta
   `has-contrast-background-color` e le classi di preset del core dichiarano
   `background-color: … !important`, che batte lo sfondo traslucido qui sotto:
   la testata è opaca e il blur non aveva nulla da sfocare. Per riavere davvero
   il vetro servono uno pseudo-elemento che porti sfondo e blur — mai l'elemento
   che contiene la navigazione — e la rinuncia alla classe di preset. */
.laboutique-header-shell {
        position: sticky;
        top: 0;
        /* Sopra la barra promo e sopra il pulsante WhatsApp flottante: l'overlay
           del menu vive dentro questa testata, e il suo `z-index: 100000` vale
           solo dentro il contesto di impilamento che nasce qui. */
        z-index: 80;
        background: rgba(29, 25, 26, 0.72);
        border-bottom: 1px solid rgba(217, 50, 50, 0.45);
        margin-block: 0;
}

.laboutique-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: clamp(0.75rem, 2vw, 2rem);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        width: 100%;
}

.laboutique-header .custom-logo-link,
.laboutique-footer .custom-logo-link,
.laboutique-hero .custom-logo-link {
        display: inline-flex;
        align-items: center;
}

.laboutique-header .custom-logo {
        display: block;
        width: auto;
        height: 58px;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.laboutique-header .wp-block-navigation {
        margin-left: auto;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
}

.laboutique-header .wp-block-navigation::-webkit-scrollbar {
        display: none;
}

.laboutique-header .wp-block-navigation__responsive-container-content {
        display: flex;
        align-items: center;
        justify-content: flex-end;
}

.laboutique-header .wp-block-navigation__container {
        display: flex;
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        gap: clamp(0.75rem, 1.8vw, 1.35rem);
        white-space: nowrap;
}

.laboutique-header .wp-block-page-list,
.laboutique-header .wp-block-navigation__container .wp-block-page-list {
        display: flex;
        flex-wrap: nowrap;
        gap: clamp(0.75rem, 1.8vw, 1.35rem);
        align-items: center;
        white-space: nowrap;
}

.laboutique-header .wp-block-navigation-item {
        flex: 0 0 auto;
}

.laboutique-header .wp-block-navigation a {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        border-bottom: 1.5px solid transparent;
        color: var(--wp--preset--color--base);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.045em;
        text-decoration: none;
        text-transform: uppercase;
        transition: border-color 0.2s ease, color 0.2s ease;
}

.laboutique-header .wp-block-navigation a:hover,
.laboutique-header .wp-block-navigation a:focus-visible {
        border-bottom-color: var(--wp--preset--color--primary);
        color: #FFFFFF;
}

/* Menu mobile aperto.

   Le regole qui sopra vestono la barra orizzontale del desktop: riga sola,
   allineata a destra, `white-space: nowrap`, corpo 0.72rem. Dentro l'overlay a
   schermo intero non servono più — lì le voci vanno incolonnate, centrate e
   grandi abbastanza da colpirle col pollice. */

.laboutique-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        align-items: center;
}

.laboutique-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.laboutique-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 1.4rem;
        white-space: normal;
}

.laboutique-header .wp-block-navigation__responsive-container.is-menu-open a {
        font-size: 0.95rem;
        letter-spacing: 0.09em;
        padding-block: 0.4rem;
}

/* Homepage ---------------------------------------------------------- */

.laboutique-home {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
}

.laboutique-shell {
        width: min(100%, 86rem);
        margin-inline: auto;
        padding-inline: clamp(1rem, 4vw, 4rem);
        box-sizing: border-box;
}

.laboutique-home > * {
        margin-block-start: 0;
}

.laboutique-home > section:not(.laboutique-hero) {
        padding-top: clamp(4rem, 8vw, 8rem);
        padding-bottom: clamp(3rem, 6vw, 6rem);
}

.laboutique-hero {
        position: relative;
        min-height: calc(100svh - 5.6rem);
        overflow: hidden;
        isolation: isolate;
        margin-block: 0;
}

.laboutique-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: url("assets/images/hero-counter.jpg") center center / cover no-repeat;
        transform: scale(1.06);
}

.laboutique-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(115% 85% at 22% 30%, rgba(29, 25, 26, 0.42) 0%, rgba(29, 25, 26, 0.86) 58%, rgba(29, 25, 26, 0.97) 100%);
}

.laboutique-hero__content {
        display: grid;
        gap: clamp(1.75rem, 4vw, 3rem);
        padding-top: clamp(4rem, 8vw, 7rem);
        padding-bottom: clamp(2rem, 5vw, 3rem);
        width: min(100%, 86rem);
        margin-inline: auto;
        padding-inline: clamp(1rem, 4vw, 4rem);
        box-sizing: border-box;
}

.laboutique-hero__top {
        /* Colonna flex esplicita: è un wp:group in layout flow, dove `gap` non
           ha effetto. La spaziatura arrivava dal margine che WordPress mette ai
           figli dei layout flow, ma `.laboutique-hero__title { margin: 0 }` lo
           azzera vincendo per specificità — e il logo finiva addosso al titolo. */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--30);
        max-width: 38rem;
        margin-left: clamp(1rem, 4vw, 4rem);
}

.laboutique-hero__logo .custom-logo {
        width: clamp(122px, 14vw, 178px);
        height: auto;
        filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.7));
}

.laboutique-hero__title {
        margin: 0;
        color: #FFFFFF;
        font-size: clamp(2.3rem, 5.4vw, 4rem);
        line-height: 0.96;
        text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
        text-wrap: balance;
}

.laboutique-hero__title em {
        color: var(--wp--preset--color--primary);
        font-style: normal;
}

.laboutique-hero__lead {
        max-width: 40ch;
        margin: 0;
        color: #CFC6BC;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: clamp(1rem, 1.4vw, 1.125rem);
        line-height: 1.8;
}

.laboutique-hero__actions {
        gap: 0.75rem;
}

.laboutique-button .wp-block-button__link,
.laboutique-home-ritiro .wp-block-button__link {
        border: 1.5px solid var(--wp--preset--color--primary);
        border-radius: 3px;
        background: var(--wp--preset--color--primary);
        box-shadow: 0 8px 26px rgba(217, 50, 50, 0.36);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.laboutique-button .wp-block-button__link:hover,
.laboutique-button .wp-block-button__link:focus-visible,
.laboutique-home-ritiro .wp-block-button__link:hover,
.laboutique-home-ritiro .wp-block-button__link:focus-visible {
        transform: translateY(-2px);
        background: var(--wp--preset--color--primary-dark);
        box-shadow: 0 14px 34px rgba(217, 50, 50, 0.46);
}

.laboutique-button-ghost .wp-block-button__link {
        border-color: rgba(255, 255, 255, 0.34);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: none;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}

.laboutique-button-ghost .wp-block-button__link:hover,
.laboutique-button-ghost .wp-block-button__link:focus-visible {
        background: rgba(255, 255, 255, 0.14);
        border-color: #FFFFFF;
        box-shadow: none;
}

.laboutique-hero__glass {
        gap: 1px;
        margin: 0 clamp(1rem, 4vw, 4rem);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 4px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 30px 70px rgba(29, 25, 26, 0.22);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        backdrop-filter: blur(22px) saturate(150%);
}

.laboutique-hero__glass .wp-block-column {
        margin: 0;
        padding: 1.15rem 1.4rem;
        background: rgba(29, 25, 26, 0.42);
}

.laboutique-hero__glass .wp-block-heading {
        margin-bottom: 0.35rem;
        color: var(--wp--preset--color--accent);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
}

.laboutique-hero__glass p {
        margin: 0;
        color: #F3EEE7;
        font-size: 0.9375rem;
        line-height: 1.45;
}

.laboutique-hero__glass small {
        display: block;
        color: #A79C93;
        font-size: 0.8125rem;
}

.laboutique-home-banco__head {
        gap: var(--wp--preset--spacing--40);
        margin-bottom: clamp(2.5rem, 6vw, 5rem);
        align-items: end;
}

.laboutique-home-banco__title {
        margin: 0;
        font-size: clamp(2.1rem, 4.8vw, 4rem);
        line-height: 1;
        color: var(--wp--preset--color--base);
}

.laboutique-home-banco__copy {
        max-width: 34ch;
        margin: 0 0 0 auto;
        color: #B9AFA6;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 0.9375rem;
        line-height: 1.75;
}

.laboutique-home-ritiro {
        border-top: 1px solid rgba(243, 238, 231, 0.12);
}

.laboutique-home-ritiro h2,
.laboutique-home-ritiro p,
.laboutique-home-ritiro li {
        color: var(--wp--preset--color--base);
}

.laboutique-home-ritiro p:not(.laboutique-eyebrow) {
        max-width: 52ch;
        color: #C9BFB4;
        font-family: var(--wp--preset--font-family--subtitle);
        line-height: 1.85;
}

.laboutique-home-ritiro__list {
        margin: 0 0 var(--wp--preset--spacing--30);
        padding-left: 1.2rem;
        color: #D8CFC7;
        display: grid;
        gap: 0.7rem;
}

/* Blueprint numbered steps (how-it-works vertical timeline) -------- */

.laboutique-home-ritiro__steps {
        margin: 0 0 1.8rem;
        padding: 0;
        display: grid;
        gap: 1.15rem;
        position: relative;
}
.laboutique-home-ritiro__steps::before {
        content: "";
        position: absolute;
        left: 1.25rem;
        top: 2.4rem;
        bottom: 1.1rem;
        width: 1px;
        background: rgba(243, 238, 231, 0.16);
        pointer-events: none;
}

.laboutique-home-ritiro__step {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 1.05rem;
        margin: 0;
        padding: 0;
        position: relative;
}
.laboutique-home-ritiro__step > * { margin: 0; }

.laboutique-home-ritiro__step-num {
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(230, 25, 25, 0.42);
        background: rgba(230, 25, 25, 0.08);
        color: var(--wp--preset--color--primary, #E61919);
        font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
        font-size: 0.95rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        text-indent: 0;
        z-index: 1;
}

.laboutique-home-ritiro__step-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.28rem;
        padding-top: 0.1rem;
}
.laboutique-home-ritiro__step-body > * { margin: 0 !important; }

.laboutique-home-ritiro__step-label {
        font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--wp--preset--color--primary, #E61919);
        line-height: 1;
}

.laboutique-home-ritiro__step-copy {
        max-width: 44ch;
        color: #E6DFD8;
        font-family: var(--wp--preset--font-family--subtitle, ui-sans-serif, system-ui, sans-serif);
        font-size: 0.92rem;
        line-height: 1.5;
        letter-spacing: 0.005em;
        font-weight: 400;
}
.laboutique-home-ritiro__step-copy strong,
.laboutique-home-ritiro__step-copy b {
        color: #F4EFEB;
        font-weight: 700;
}

/* GSAP reveal timeline per steps (stessa animazione delle vecchie bullets) */
.js .laboutique-home-ritiro__step {
        opacity: 0;
        transform: translateY(1.2rem);
        transition:
                opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1);
        transition-delay: calc(var(--lb-i, 0) * 60ms);
}
.js .laboutique-home-ritiro__step.is-revealed {
        opacity: 1;
        transform: none;
}
@media (prefers-reduced-motion: reduce) {
        .js .laboutique-home-ritiro__step { opacity: 1; transform: none; transition: none; }
        .laboutique-home-ritiro__steps::before { display: none; }
}

/* Mobile < 650px */
@media (max-width: 650px) {
        .laboutique-home-ritiro__steps {
                gap: 1rem;
        }
        .laboutique-home-ritiro__step {
                grid-template-columns: 2.2rem 1fr;
                gap: 0.9rem;
        }
        .laboutique-home-ritiro__step-num {
                width: 2.2rem;
                height: 2.2rem;
                font-size: 0.85rem;
        }
        .laboutique-home-ritiro__steps::before { left: 1.1rem; }
        .laboutique-home-ritiro__step-copy {
                font-size: 0.89rem;
                line-height: 1.5;
        }
}

/* Vetrina home ------------------------------------------------------ */

.laboutique-home-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(1.25rem, 2.5vw, 2rem);
}

.laboutique-product-card {
        min-width: 0;
}

.laboutique-product-card__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        background: #272122;
        box-shadow: 0 2px 6px rgba(12, 10, 11, 0.22), 0 20px 36px rgba(12, 10, 11, 0.18);
        color: inherit;
        text-decoration: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.laboutique-product-card__link:hover,
.laboutique-product-card__link:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(12, 10, 11, 0.24), 0 26px 44px rgba(12, 10, 11, 0.22);
}

.laboutique-product-card__media {
        position: relative;
        overflow: hidden;
        /* 4:3 come gli scatti originali (1600x1199): nessun ritaglio in più
           e la card si accorcia di un quarto rispetto al formato verticale. */
        aspect-ratio: 4 / 3;
        background: #151112;
}

.laboutique-product-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.laboutique-product-card__link:hover .laboutique-product-card__media img,
.laboutique-product-card__link:focus-visible .laboutique-product-card__media img {
        transform: scale(1.05);
}

.laboutique-product-card__badge {
        position: absolute;
        top: 0.85rem;
        left: 0.85rem;
        z-index: 2;
        padding: 0.38rem 0.52rem;
        border-radius: 2px;
        background: var(--wp--preset--color--primary);
        color: #FFFFFF;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
}

.laboutique-product-card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.45rem;
        padding: 1rem 1rem 1.1rem;
}

.laboutique-product-card__title {
        /* Non maiuscolo e non DEMITHS: il catalogo contiene nomi come
           "Bucatini semola di grano duro Rustichella d'Abruzzo", che in
           maiuscolo diventano un muro illeggibile. Vedi design.md §3.1. */
        margin: 0;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 1.05rem;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
}

.laboutique-product-card__excerpt {
        margin: 0;
        color: #CDBFB2;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 0.8rem;
        line-height: 1.4;
}

.laboutique-product-card__price {
        margin-top: auto;
        padding-top: 0.7rem;
        border-top: 2px solid var(--wp--preset--color--primary);
        color: #FFFFFF;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.15;
}

.laboutique-product-card__price .amount {
        color: #FFFFFF;
        font-variant-numeric: tabular-nums;
}

.laboutique-product-card__price .laboutique-unit-price {
        margin-top: 0.25rem;
        color: #CDBFB2;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
}

/* Prezzo scontato ---------------------------------------------------
   Con un prezzo in offerta WooCommerce restituisce <del>vecchio</del>
   <ins>nuovo</ins>. Senza queste regole i due hanno lo stesso corpo e lo
   stesso peso, e la card sembra dichiarare due prezzi.

   Il rosso NON entra qui: su fondo scuro è ≈3.4:1, sotto l'AA (design.md
   §2.4). Il segnale dello sconto lo portano già il filetto rosso sopra il
   prezzo e il badge sulla foto, che sta su un'immagine. Qui si spegne il
   vecchio, e il nuovo resta il colore forte di sempre.

   I selettori includono `del` apposta: le regole su `.amount` e su `bdi`
   forzano il bianco, e un override sul solo contenitore non le raggiunge. */

.laboutique-product-card__price del,
.laboutique-product-card__price del .amount,
.laboutique-product-card__price del bdi {
        color: #CDBFB2;
        font-size: 0.8rem;
        font-weight: 400;
        text-decoration: line-through;
}

.laboutique-product-card__price del {
        margin-right: 0.45em;
}

/* `ins` prende dal browser una sottolineatura, e woocommerce-general è
   deregistrato: nessun altro la toglie. */
.laboutique-product-card__price ins {
        background: none;
        text-decoration: none;
}

.laboutique-product-card__price ins,
.laboutique-product-card__price ins .amount,
.laboutique-product-card__price ins bdi {
        color: #FFFFFF;
        font-weight: 700;
}

/* Il badge può portare un'etichetta scritta a mano ("Pacco Natale"): che non
   esca dalla foto se è lunga. */
.laboutique-product-card__badge {
        max-width: calc(100% - 1.7rem);
}

/* WooCommerce, catalogo standard ----------------------------------- */

.woocommerce ul.products {
        gap: clamp(1.75rem, 3vw, 3rem) var(--wp--preset--spacing--30);
}

.woocommerce ul.products li.product {
        gap: 0;
        border-radius: 4px;
        overflow: hidden;
        background: var(--wp--preset--color--surface);
        box-shadow: 0 1px 2px rgba(29, 25, 26, 0.05), 0 6px 18px rgba(29, 25, 26, 0.07);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.woocommerce ul.products li.product:hover {
        transform: translateY(-5px);
        box-shadow: 0 2px 6px rgba(29, 25, 26, 0.06), 0 22px 48px rgba(29, 25, 26, 0.14);
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
        margin-bottom: 0;
        /* 4:3 come le card della home e come gli scatti originali. */
        aspect-ratio: 4 / 3;
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.woocommerce ul.products li.product:hover img {
        transform: scale(1.07);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
        margin: 1.1rem 1.15rem 0.4rem;
        color: var(--wp--preset--color--contrast);
        font-size: 1.05rem;
        line-height: 1.3;
        /* Due righe fisse: allinea le card della riga senza dipendere dalla
           lunghezza del nome. Vedi design.md §7.4. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        min-height: 2.6em;
}

/* Il link avvolge immagine, titolo e prezzo; il pulsante gli sta accanto.
   Senza colonna flex qui, il `margin-top: auto` del prezzo non ha nulla su cui
   spingere e i pulsanti finiscono ad altezze diverse in ogni card. */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:not(.button) {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
}

.woocommerce ul.products li.product .price {
        margin: auto 1.15rem 1.15rem;
        padding-top: 0.85rem;
        border-top: 2px solid var(--wp--preset--color--primary);
        line-height: 1.2;
}

.woocommerce ul.products li.product .price .amount {
        font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .button {
        margin: 0 1.15rem 1.15rem;
        padding: 0.7rem 1.1rem;
        width: calc(100% - 2.3rem);
        border: 1px solid var(--wp--preset--color--border);
        background: transparent;
        color: var(--wp--preset--color--contrast);
        font-size: 0.6875rem;
        text-align: center;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Il pulsante è secondario: la card è già interamente cliccabile, e un
   rettangolo nero pieno per card domina la griglia. Prende colore solo
   quando lo si punta. */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus-visible {
        background: var(--wp--preset--color--primary);
        border-color: var(--wp--preset--color--primary);
        color: #FFFFFF;
}

.laboutique-home-banco .woocommerce ul.products li.product .button {
        display: none;
}

.woocommerce ul.products li.product .laboutique-unit-price {
        margin-top: 0.35rem;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
}

/* Piè di pagina ----------------------------------------------------- */

.laboutique-footer {
        padding-top: clamp(4rem, 7vw, 6rem);
        padding-bottom: clamp(2rem, 4vw, 3rem);
        background: linear-gradient(180deg, rgba(29, 25, 26, 0.96), rgba(24, 20, 21, 1));
}

.laboutique-footer__grid {
        gap: var(--wp--preset--spacing--40);
        align-items: start;
}

.laboutique-footer .custom-logo {
        width: auto;
        height: 78px;
}

.laboutique-footer p {
        margin-top: 0;
        margin-bottom: 0.45rem;
        color: #C9BFB4;
        line-height: 1.7;
}

.laboutique-footer .wp-block-heading {
        margin-bottom: var(--wp--preset--spacing--20);
}

.laboutique-footer a {
        color: #F3EEE7;
        text-decoration: none;
        border-bottom: 1px solid var(--wp--preset--color--primary);
}

.laboutique-footer a:hover,
.laboutique-footer a:focus-visible {
        color: var(--wp--preset--color--primary);
}

.laboutique-footer__legal {
        margin-top: var(--wp--preset--spacing--30);
        color: #8A8078;
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 920px) {
        .laboutique-header {
                align-items: center;
                grid-template-columns: 1fr;
        }

        .laboutique-header .wp-block-navigation {
                width: 100%;
                margin-left: 0;
        }

        .laboutique-hero {
                min-height: auto;
        }

        .laboutique-hero__top,
        .laboutique-hero__glass {
                margin-left: 0;
                margin-right: 0;
        }

        .laboutique-home-banco__copy {
                margin-left: 0;
        }

        .laboutique-home-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 640px) {
        .laboutique-topbar {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }

        .laboutique-topbar p {
                letter-spacing: 0.09em;
                line-height: 1.5;
        }

        .laboutique-hero__title {
                font-size: clamp(2.4rem, 16vw, 3.8rem);
        }

        .laboutique-hero__glass .wp-block-column {
                padding: 1rem 1.1rem;
        }

        .laboutique-home-grid {
                grid-template-columns: 1fr;
        }
}

.admin-bar .laboutique-header-shell {
        top: 32px;
}

@media (max-width: 782px) {
        .admin-bar .laboutique-header-shell {
                top: 46px;
        }
}

/* Regola unica per il pulsante della card: c'erano tre definizioni in
   conflitto e vinceva questa in coda, che lo rendeva nero pieno. Il pulsante
   è secondario — la card è già interamente cliccabile, e un rettangolo nero
   per card domina la griglia. */
.woocommerce ul.products li.product .button {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Barra di ordinamento e conteggio risultati */
.woocommerce .woocommerce-result-count {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce .woocommerce-ordering select {
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.woocommerce .quantity input.qty {
	padding: 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Il badge "esaurito": 7 prodotti su 128 lo sono oggi. */
.woocommerce .out-of-stock {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Il nastro "in offerta" ---------------------------------------------
   Era finito dentro la regola qui sopra e usciva nero, indistinguibile da un
   prodotto non acquistabile. Ma il difetto peggiore era di impaginazione:
   WooCommerce emette lo `span.onsale` come figlio DIRETTO di `li.product` e di
   `div.product`, e con `woocommerce-general` deregistrato niente lo toglie dal
   flusso. In catalogo diventava un elemento flex steso su tutta la larghezza
   sopra la foto; sulla scheda prodotto si prendeva la prima cella della griglia
   a due colonne, spingendo la gallery nella seconda e il riepilogo a capo.
   La pagina si sarebbe rotta alla prima promozione.

   Qui torna dov'era pensato: sopra la foto, in alto a sinistra, rosso del
   marchio come il badge della card di home (design.md §2.2, §7.4). */

.woocommerce ul.products li.product,
body.single-product div.product {
	position: relative;
}

.woocommerce span.onsale {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 3;
	max-width: calc(100% - 1.7rem);
	padding: 0.38rem 0.52rem;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

/* Il banco su fondo carta ------------------------------------------
   Nel mockup approvato la pagina alterna: hero nera, banco su carta,
   piede nero. È quel contrasto a far leggere la hero come una
   dichiarazione — tutto nero appiattisce e appesantisce.
   Questo blocco ribalta la sola sezione del banco. */

.laboutique-home-banco {
        background: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--contrast);
}

.laboutique-home-banco .laboutique-home-banco__title {
        color: var(--wp--preset--color--contrast);
}

.laboutique-home-banco .laboutique-home-banco__copy {
        color: var(--wp--preset--color--muted);
}

/* La card diventa una superficie sollevata su carta, non un rettangolo
   scuro: l'ombra sostituisce il contrasto di fondo. */
.laboutique-home-banco .laboutique-product-card__link {
        background: var(--wp--preset--color--base);
        box-shadow: 0 1px 2px rgba(29, 25, 26, 0.05), 0 6px 18px rgba(29, 25, 26, 0.07);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.laboutique-home-banco .laboutique-product-card__link:hover,
.laboutique-home-banco .laboutique-product-card__link:focus-visible {
        box-shadow: 0 2px 6px rgba(29, 25, 26, 0.06), 0 22px 48px rgba(29, 25, 26, 0.14);
        transform: translateY(-5px);
}

.laboutique-home-banco .laboutique-product-card__title {
        color: var(--wp--preset--color--contrast);
}

.laboutique-home-banco .laboutique-product-card__excerpt {
        color: var(--wp--preset--color--muted);
}

/* Il prezzo e l'unità hanno regole proprie sul figlio (.amount,
   .laboutique-unit-price): un override sul contenitore non le raggiunge,
   perché una regola diretta batte sempre l'ereditarietà. */
.laboutique-home-banco .laboutique-product-card__price,
.laboutique-home-banco .laboutique-product-card__price .amount,
.laboutique-home-banco .laboutique-product-card__price bdi {
        color: var(--wp--preset--color--contrast);
}

.laboutique-home-banco .laboutique-product-card__price .laboutique-unit-price {
        color: var(--wp--preset--color--muted);
}

/* Sul banco chiaro la regola su `bdi` qui sopra colora anche il prezzo
   barrato: va ripresa con un selettore più specifico (0,2,2 contro 0,2,1),
   non sul contenitore. */
.laboutique-home-banco .laboutique-product-card__price del,
.laboutique-home-banco .laboutique-product-card__price del .amount,
.laboutique-home-banco .laboutique-product-card__price del bdi {
        color: var(--wp--preset--color--muted);
}

.laboutique-home-banco .laboutique-product-card__price ins,
.laboutique-home-banco .laboutique-product-card__price ins .amount,
.laboutique-home-banco .laboutique-product-card__price ins bdi {
        color: var(--wp--preset--color--contrast);
}

/* Il filetto rosso sopra il prezzo resta: è il marcatore del marchio. */
.laboutique-home-banco .laboutique-product-card__badge {
        box-shadow: 0 4px 14px rgba(217, 50, 50, 0.4);
}

/* La fascia delle promozioni --------------------------------------
   Attiva solo con la disposizione "fascia dedicata" in Vetrina Home. Sta
   sopra il banco e mostra i prodotti messi in evidenza con foto e prezzo
   grandi, mentre la griglia sotto resta di soli prodotti a rotazione.

   Il fondo bianco è una scelta, non un ripiego. La home alterna hero scura,
   banco su carta e piede scuro: una fascia scura qui, subito sotto la hero,
   le farebbe toccare e si perderebbe lo stacco. Il bianco inserisce una terza
   tinta e tiene le tre fasce distinte — in più la foto del cibo stacca meglio
   che sul nero.

   Il filetto rosso da 3px in cima a ogni card è lo stesso device del riquadro
   d'acquisto della scheda prodotto (design.md §7.6): dice "qui si compra". */

.laboutique-home-promo {
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--contrast);
        padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Testata su due colonne come quella del banco: titolo a sinistra, riga di
   accompagnamento a destra. Le righe si stampano solo se valorizzate in
   Vetrina Home, quindi la griglia deve reggere anche con un figlio solo — con
   `align-items: start` il titolo non si stira per riempire la colonna. */
.laboutique-home-promo__head {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        gap: 1.2rem 2.5rem;
        align-items: start;
        margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.laboutique-home-promo__copy {
        margin: 0;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 0.9rem;
        line-height: 1.55;
        color: var(--wp--preset--color--muted);
}

@media (max-width: 640px) {
        .laboutique-home-promo__head {
                grid-template-columns: 1fr;
        }
}

.laboutique-home-promo__title {
        margin: 0;
        font-family: var(--wp--preset--font-family--display);
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 0.98;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--wp--preset--color--contrast);
}

/* Una card sola occupa tutta la larghezza, due si dividono a metà, tre vanno
   in fila e poi si va a capo: `auto-fit` fa da solo, senza caselle vuote. */
.laboutique-home-promo__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
        gap: clamp(1rem, 2.2vw, 1.6rem);
}

.laboutique-promo-card {
        min-width: 0;
}

.laboutique-promo-card__link {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        border-top: 3px solid var(--wp--preset--color--primary);
        background: var(--wp--preset--color--base);
        box-shadow: 0 2px 6px rgba(29, 25, 26, 0.06), 0 22px 48px rgba(29, 25, 26, 0.14);
        color: inherit;
        text-decoration: none;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.laboutique-promo-card__link:hover,
.laboutique-promo-card__link:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(29, 25, 26, 0.08), 0 28px 60px rgba(29, 25, 26, 0.18);
}

/* `position: relative` serve al badge, che è in posizione assoluta. */
.laboutique-promo-card__media {
        position: relative;
        flex: 1 1 42%;
        min-width: 11rem;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #151112;
}

.laboutique-promo-card__media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.laboutique-promo-card__link:hover .laboutique-promo-card__media img,
.laboutique-promo-card__link:focus-visible .laboutique-promo-card__media img {
        transform: scale(1.04);
}

.laboutique-promo-card__body {
        display: flex;
        flex: 1 1 58%;
        min-width: 13rem;
        flex-direction: column;
        gap: 0.5rem;
        padding: clamp(1rem, 2vw, 1.5rem);
}

.laboutique-promo-card__title {
        margin: 0;
        font-family: var(--wp--preset--font-family--display);
        font-size: clamp(1.25rem, 2.6vw, 1.7rem);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--wp--preset--color--contrast);
}

.laboutique-promo-card__excerpt {
        margin: 0;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 0.82rem;
        line-height: 1.45;
        color: var(--wp--preset--color--muted);
}

/* Il prezzo è il pezzo che conta (design.md §7.5): qui la cifra nuova arriva a
   oltre il doppio del corpo che ha in griglia. Baseline condivisa fra vecchio e
   nuovo, unità su riga propria sotto la coppia. */
.laboutique-promo-card__price {
        margin-top: auto;
        padding-top: 0.7rem;
        border-top: 2px solid var(--wp--preset--color--primary);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 0.6rem;
        color: var(--wp--preset--color--contrast);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
}

.laboutique-promo-card__price del,
.laboutique-promo-card__price del .amount,
.laboutique-promo-card__price del bdi {
        color: var(--wp--preset--color--muted);
        font-size: 0.95rem;
        font-weight: 400;
        text-decoration: line-through;
}

.laboutique-promo-card__price ins {
        background: none;
        text-decoration: none;
}

.laboutique-promo-card__price ins,
.laboutique-promo-card__price ins .amount,
.laboutique-promo-card__price ins bdi,
.laboutique-promo-card__price > .amount,
.laboutique-promo-card__price > .amount bdi {
        color: var(--wp--preset--color--contrast);
        font-size: clamp(1.5rem, 3.4vw, 2.1rem);
        font-weight: 700;
        letter-spacing: -0.015em;
}

.laboutique-promo-card__price .laboutique-unit-price {
        flex-basis: 100%;
        margin-top: 0.15rem;
        color: var(--wp--preset--color--muted);
}

/* Pulsante rosso con ombra rossa: design.md §5 lo vuole così, ed è il
   dettaglio che lo fa leggere come premium invece che piatto. */
.laboutique-promo-card__cta {
        align-self: flex-start;
        margin-top: 0.85rem;
        padding: 0.6rem 1.15rem;
        border-radius: 3px;
        background: var(--wp--preset--color--primary);
        color: #FFFFFF;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        box-shadow: 0 8px 26px rgba(217, 50, 50, 0.36);
        transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.laboutique-promo-card__link:hover .laboutique-promo-card__cta,
.laboutique-promo-card__link:focus-visible .laboutique-promo-card__cta {
        background: var(--wp--preset--color--primary-dark);
        box-shadow: 0 10px 30px rgba(217, 50, 50, 0.46);
}

/* Il markup della card passa da wpautop come quello della griglia: stessi
   margini ereditati da azzerare, stessa eccezione per il prezzo che sta in
   fondo grazie a `margin-top: auto`. */
.laboutique-home-promo__grid > *,
.laboutique-promo-card__link > *,
.laboutique-promo-card__body > *:not(.laboutique-promo-card__price) {
        margin-block-start: 0;
        margin-block-end: 0;
}

.laboutique-promo-card__body > .laboutique-promo-card__price {
        margin-top: auto;
        margin-bottom: 0;
}

@media (max-width: 640px) {
        .laboutique-promo-card__media {
                flex-basis: 100%;
                aspect-ratio: 16 / 10;
        }

        .laboutique-promo-card__body {
                flex-basis: 100%;
        }
}

/* Bande bianche fra le sezioni ------------------------------------
   WordPress emette `:where(.wp-site-blocks) > * { margin-block-start:
   var(--wp--style--block-gap) }` e la stessa regola per i figli dei gruppi
   in layout flow. Su una pagina di sezioni a piena larghezza quel margine
   lascia scoperto il fondo del body fra una sezione e l'altra: le bande
   bianche fra testata e hero, fra le sezioni della home e prima del piede.

   Il blockGap serve fra i blocchi di contenuto, non fra le fasce: qui si
   azzera solo al primo livello. I selettori sono senza :where() apposta,
   perché quelli del core hanno specificità zero e verrebbero altrimenti
   riapplicati. */

.wp-site-blocks > *,
.laboutique-home > *,
.laboutique-header-shell + *,
.laboutique-topbar + * {
        margin-block-start: 0;
        margin-block-end: 0;
}

/* Card prodotto: niente margini ereditati -------------------------
   Il markup dello shortcode finisce dentro un blocco `wp:shortcode`, il cui
   contenuto passa da wpautop: possono comparire paragrafi vuoti e margini
   sui figli. Qui si azzerano, perché la card gestisce le distanze con gap
   e padding propri. */

.laboutique-home-grid > *,
.laboutique-product-card__link > *,
.laboutique-product-card__body > *:not(.laboutique-product-card__price) {
        margin-block-start: 0;
        margin-block-end: 0;
}

/* Il prezzo resta ancorato in fondo: è `margin-top: auto` a spingerlo là, e
   il reset qui sopra lo azzererebbe vincendo per specificità. Escluderlo è
   più sicuro che rialzare la specificità del prezzo, perché non lascia due
   regole in gara. */
.laboutique-product-card__body > .laboutique-product-card__price {
        margin-top: auto;
        margin-bottom: 0;
}

.laboutique-home-grid p:empty,
.laboutique-home-banco p:empty {
        display: none;
}

.laboutique-product-card__media,
.laboutique-product-card__media img {
        margin: 0;
}

/* Righe di card allineate ------------------------------------------
   Senza un'altezza minima sulla riga di provenienza, il `margin-top: auto`
   del prezzo apre un vuoto diverso in ogni card: le più corte restano con
   una banda vuota prima del filetto rosso. */



/* Altezza delle card ----------------------------------------------
   Titolo e provenienza sono limitati a due righe. Serve a due cose: le card
   di una stessa riga hanno la stessa altezza senza affidarsi al contenuto,
   e un nome lungo come "Bucatini semola di grano duro Rustichella d'Abruzzo"
   non allunga da solo l'intera griglia. */

.laboutique-product-card__title,
.laboutique-product-card__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
}

.laboutique-product-card__title {
        min-height: 2.6em;
}

.laboutique-product-card__excerpt {
        min-height: 2.8em;
}

.laboutique-product-card__body {
        gap: 0.35rem;
        padding: 0.9rem 0.95rem 1rem;
}

/* Movimento ---------------------------------------------------------
   Poco e mirato. L'eccesso di animazione è il primo segnale di interfaccia
   generata: qui si muove la sequenza d'ingresso della hero, la rivelazione
   delle card allo scroll e un lentissimo respiro sullo sfondo.
   Vedi design.md §6. */

@keyframes lb-rise {
        from { opacity: 0; transform: translateY(1.3rem); }
        to   { opacity: 1; transform: none; }
}

@keyframes lb-pop {
        from { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
        to   { opacity: 1; transform: none; }
}

@keyframes lb-breathe {
        to { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}

/* Sequenza d'ingresso: pura CSS, quindi non dipende dal JavaScript.
   `both` tiene lo stato finale anche a animazione conclusa. */

.laboutique-hero__logo,
.laboutique-hero__title,
.laboutique-hero__lead,
.laboutique-hero__actions,
.laboutique-hero__glass {
        animation-duration: 0.95s;
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
        animation-fill-mode: both;
}

.laboutique-hero__logo    { animation-name: lb-pop;  animation-delay: 0.10s; }
.laboutique-hero__title   { animation-name: lb-rise; animation-delay: 0.34s; }
.laboutique-hero__lead    { animation-name: lb-rise; animation-delay: 0.48s; }
.laboutique-hero__actions { animation-name: lb-rise; animation-delay: 0.62s; }
.laboutique-hero__glass   { animation-name: lb-rise; animation-delay: 0.78s; }

/* Respiro sullo sfondo della hero: 22 secondi, quasi impercettibile. */
.laboutique-hero::before {
        animation: lb-breathe 22s ease-in-out infinite alternate;
}

/* Rivelazione allo scroll -------------------------------------------
   Le regole valgono solo sotto `.js`: senza JavaScript nulla viene nascosto.
   È una correzione a un errore reale — un observer che non scattava rendeva
   invisibile l'intera griglia prodotti. */

.js .laboutique-product-card,
.js .laboutique-home-ritiro__list li,
.js [data-lb-reveal] {
        opacity: 0;
        transform: translateY(1.4rem);
        transition:
                opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1),
                box-shadow 0.35s ease;
        transition-delay: calc(var(--lb-i, 0) * 55ms);
}

.js .laboutique-product-card.is-revealed,
.js .laboutique-home-ritiro__list li.is-revealed,
.js [data-lb-reveal].is-revealed {
        opacity: 1;
        transform: none;
}

@media (prefers-reduced-motion: reduce) {
        .laboutique-hero__logo,
        .laboutique-hero__title,
        .laboutique-hero__lead,
        .laboutique-hero__actions,
        .laboutique-hero__glass,
        .laboutique-hero::before {
                animation: none;
        }

        .js .laboutique-product-card,
        .js .laboutique-home-ritiro__list li,
        .js [data-lb-reveal] {
                opacity: 1;
                transform: none;
                transition: none;
        }
}

/* Orari di apertura (payload JS client-side) ------------------------
   Il valore lo scrive JavaScript leggendo l'ora nel fuso della bottega: il
   server non può, perché la pagina è destinata alla cache e l'orario si
   congelerebbe. Senza JavaScript resta il riepilogo settimanale, sempre vero,
   e per quello serve un corpo più piccolo perché è una riga lunga. */

/* Quando JavaScript ha fatto il suo lavoro il valore è corto e deve pesare
   come i paragrafi delle colonne accanto: quindi qui non si dichiara nulla e
   si lascia vincere `.laboutique-hero__glass p`.

   Solo il ripiego senza JavaScript, che è la settimana intera su una riga,
   ha bisogno di un corpo più piccolo. */

.laboutique-hours:not(.is-live) .laboutique-hours__value {
        font-size: 0.8125rem;
        line-height: 1.45;
}

.laboutique-hours__state {
        display: block;
        margin-top: 0.1rem;
        font-size: 0.8125rem;
        letter-spacing: 0.01em;
}

.laboutique-hours__state.is-open {
        color: var(--wp--preset--color--accent);
}

.laboutique-hours__state.is-closed {
        color: #A79C93;
}

/* Pulsante WhatsApp flottante ---------------------------------------
   Rosso del marchio, non verde di WhatsApp: design.md §2 vieta una quinta
   tinta, e il riconoscimento lo porta già il glifo. Per passare al verde
   basta cambiare `background` qui sotto in #25D366.

   Sostituisce il plugin `chaty` (docs/plugin-cleanup.md, fase 3). */

.laboutique-wa {
        position: fixed;
        right: clamp(1rem, 3vw, 1.75rem);
        bottom: clamp(1rem, 3vw, 1.75rem);
        z-index: 60;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.85rem 1.15rem;
        border-radius: 999px;
        background: var(--wp--preset--color--primary);
        color: #FFFFFF;
        font-family: var(--wp--preset--font-family--body);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 8px 26px rgba(217, 50, 50, 0.38);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.laboutique-wa:hover,
.laboutique-wa:focus-visible {
        transform: translateY(-2px);
        background: var(--wp--preset--color--primary-dark);
        box-shadow: 0 14px 34px rgba(217, 50, 50, 0.48);
        color: #FFFFFF;
}

.laboutique-wa__glyph {
        flex: none;
}

/* Sotto i 600px resta il solo glifo: l'etichetta ruberebbe schermo al
   contenuto proprio dove serve di più. */
@media (max-width: 600px) {
        .laboutique-wa {
                padding: 0.9rem;
        }

        .laboutique-wa__label {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
        }
}

@media print {
        .laboutique-wa {
                display: none;
        }
}

@media (prefers-reduced-motion: reduce) {
        .laboutique-wa {
                transition: none;
        }

        .laboutique-wa:hover,
        .laboutique-wa:focus-visible {
                transform: none;
        }
}

/* «Ordina su WhatsApp» sulla scheda prodotto -------------------------
   Sta sotto il modulo d'acquisto e ne continua la geometria: stessa altezza
   del pulsante nero, stessi angoli vivi, stesso maiuscolo. È volutamente
   secondario — bordo e non fondo pieno — perché l'azione principale resta
   «Aggiungi al banco». All'hover prende il rosso del marchio, che è il modo
   in cui questo tema dice «primario» senza aggiungere una tinta. */

.laboutique-wa-order {
	margin: 0.75rem 0 0;
}

.laboutique-wa-order__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 3.35rem;
	padding: 0 1.2rem;
	border: 1px solid var(--wp--preset--color--border, #DCD4C9);
	background: var(--wp--preset--color--base, #EDE8E0);
	color: var(--wp--preset--color--contrast, #1D191A);
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.laboutique-wa-order__button .laboutique-wa__glyph {
	width: 20px;
	height: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.laboutique-wa-order__button:hover {
		border-color: var(--wp--preset--color--primary, #D93232);
		background: var(--wp--preset--color--primary, #D93232);
		color: #FFFFFF;
	}
}

.laboutique-wa-order__button:focus-visible {
	border-color: var(--wp--preset--color--primary, #D93232);
	background: var(--wp--preset--color--primary, #D93232);
	color: #FFFFFF;
}

.laboutique-wa-order__note {
	margin: 0.55rem 0 0;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--muted, #5A5150);
}

/* «Concludi su WhatsApp» in coda al carrello -------------------------
   PHP lo stampa in fondo al contenuto; `assets/js/whatsapp-cart.js` lo
   sposta nella colonna dei totali, sotto «Procedi al pagamento», dove si
   vede senza scorrere. In fondo alla pagina non lo vedeva quasi nessuno.

   Porta il filetto rosso da 3px del riquadro d'acquisto (design.md §7.6):
   è lo stesso tipo di elemento — la scatola in cui si chiude l'ordine — e
   chi arriva qui deve riconoscerla. Il pulsante è rosso pieno: su questa
   pagina l'alternativa alla chat è un checkout che il visitatore ha già
   deciso di non attraversare.

   Le misure le decide una CONTAINER QUERY, non la larghezza dello schermo:
   la stessa scatola vive in una spalla da ~410px quando lo script la
   sposta e a piena larghezza quando JavaScript manca e resta in fondo. È
   il contenitore a cambiare, non il dispositivo — e la spalla di un
   desktop è più stretta della colonna di un telefono. */

.laboutique-wa-cart {
	container-type: inline-size;
	margin: 1.15rem 0 0;
	border: 1px solid var(--wp--preset--color--border, #DCD4C9);
	border-top: 3px solid var(--wp--preset--color--primary, #D93232);
	border-radius: 5px;
	background: var(--wp--preset--color--surface, #F8F5F1);
}

/* Nessuna regola lo nasconde in attesa dello script, ed è deliberato. Una
   versione precedente lo teneva a `display: none` sotto `.js` finché lo
   script non l'aveva spostato: bastava che quel file non si caricasse — un
   404, una cache stantia — e il riquadro spariva del tutto, perché anche la
   rete di sicurezza viveva dentro lo script che non era partito. Il modo di
   fallire peggiore proprio per l'elemento che deve farsi vedere.
   Non nascondendolo, il caso peggiore è che resti in fondo alla pagina: dove
   stava prima, funzionante. Lo spostamento non si nota comunque, perché
   avviene sotto la piega. */

.laboutique-wa-cart__inner {
	padding: 0.95rem 1.05rem 1.1rem;
}

.laboutique-wa-cart__eyebrow {
	margin-bottom: 0.3rem;
	font-size: 0.625rem;
	letter-spacing: 0.16em;
}

/* 17px è il minimo assoluto per DEMITHS (design.md §3.1): sotto diventa
   illeggibile. Nella spalla stretta si sta esattamente su quella soglia. */
.laboutique-wa-cart__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-transform: none;
}

.laboutique-wa-cart__text {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #5A5150);
}

.laboutique-wa-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	margin: 0.9rem 0 0;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--primary, #D93232);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.78125rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(217, 50, 50, 0.28);
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

.laboutique-wa-cart__button .laboutique-wa__glyph {
	width: 18px;
	height: 18px;
}

.laboutique-wa-cart__button:hover,
.laboutique-wa-cart__button:focus-visible {
	background: var(--wp--preset--color--primary-dark, #B02828);
	color: #FFFFFF;
	box-shadow: 0 8px 22px rgba(217, 50, 50, 0.38);
}

/* Contenitore largo: è il caso senza JavaScript, con il riquadro rimasto in
   fondo alla pagina a tutta larghezza. Lì la versione compatta sembrerebbe
   sperduta, quindi torna quella distesa. */
@container (min-width: 34rem) {
	.laboutique-wa-cart {
		margin-top: clamp(2.5rem, 6vw, 4rem);
		box-shadow: 0 1px 2px rgba(29, 25, 26, 0.05), 0 6px 18px rgba(29, 25, 26, 0.07);
	}

	.laboutique-wa-cart__inner {
		padding: clamp(1.35rem, 3.5vw, 2rem);
	}

	.laboutique-wa-cart__eyebrow {
		margin-bottom: var(--wp--preset--spacing--10);
		font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
		letter-spacing: 0.14em;
	}

	.laboutique-wa-cart__title {
		font-size: clamp(1.35rem, 3cqi, 1.75rem);
		line-height: 1.15;
	}

	.laboutique-wa-cart__text {
		max-width: 44rem;
		margin-top: 0.65rem;
		font-size: 0.9375rem;
		line-height: 1.6;
	}

	.laboutique-wa-cart__button {
		width: auto;
		margin-top: 1.25rem;
		padding: 0.9rem 1.4rem;
		font-size: 0.8125rem;
		letter-spacing: 0.1em;
		box-shadow: 0 8px 26px rgba(217, 50, 50, 0.36);
	}

	.laboutique-wa-cart__button .laboutique-wa__glyph {
		width: 22px;
		height: 22px;
	}

	.laboutique-wa-cart__button:hover,
	.laboutique-wa-cart__button:focus-visible {
		box-shadow: 0 12px 32px rgba(217, 50, 50, 0.46);
	}
}

/* Il riquadro non ha senso su carta stampata, come il pulsante flottante. */
@media print {
	.laboutique-wa-cart,
	.laboutique-wa-order {
		display: none;
	}
}

/* Categorie del banco -----------------------------------------------
   Striscia in cima all'archivio, fra il titolo e la griglia. Riquadri con
   la foto della categoria, velata di scuro perché il nome in DEMITHS bianco
   ci stia sopra leggibile a qualunque immagine.

   Scorre in orizzontale con aggancio: su schermi stretti è l'unico modo per
   non trasformare sei voci in una colonna alta mezzo schermo. */

.laboutique-cats {
        margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.laboutique-cats__track {
        display: flex;
        gap: var(--wp--preset--spacing--20);
        margin: 0;
        padding: 0 0 0.5rem;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
}

.laboutique-cats__item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        margin: 0;
}

.laboutique-cats__link {
        position: relative;
        display: block;
        width: clamp(9rem, 15vw, 12rem);
        border-radius: 4px;
        overflow: hidden;
        background: var(--wp--preset--color--contrast);
        color: #FFFFFF;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(29, 25, 26, 0.05), 0 6px 18px rgba(29, 25, 26, 0.07);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.laboutique-cats__link:hover,
.laboutique-cats__link:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 2px 6px rgba(29, 25, 26, 0.06), 0 20px 40px rgba(29, 25, 26, 0.16);
        color: #FFFFFF;
}

/* La categoria che si sta guardando porta il rosso del marchio. */
.laboutique-cats__link.is-current {
        outline: 2px solid var(--wp--preset--color--primary);
        outline-offset: -2px;
}

.laboutique-cats__media {
        display: block;
        aspect-ratio: 5 / 4;
        overflow: hidden;
        background: var(--wp--preset--color--contrast);
}

.laboutique-cats__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Velatura: il nome ci va sopra e deve leggersi su qualunque foto. */
        opacity: 0.62;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.3s ease;
}

.laboutique-cats__link:hover .laboutique-cats__media img {
        transform: scale(1.06);
        opacity: 0.78;
}

/* "Tutto il banco" non ha foto: prende il nero pieno con un filo d'oro. */
.laboutique-cats__media--all {
        background:
                radial-gradient(120% 90% at 30% 20%, rgba(184, 140, 47, 0.22), transparent 60%),
                var(--wp--preset--color--contrast);
}

.laboutique-cats__body {
        position: absolute;
        inset: auto 0 0 0;
        display: block;
        padding: 0.9rem 0.85rem 0.8rem;
        background: linear-gradient(180deg, rgba(29, 25, 26, 0), rgba(29, 25, 26, 0.88) 55%);
}

.laboutique-cats__name {
        display: block;
        font-family: var(--wp--preset--font-family--display);
        font-size: 0.9375rem;
        line-height: 1.1;
        letter-spacing: 0.03em;
        text-transform: uppercase;
}

.laboutique-cats__count {
        display: block;
        margin-top: 0.2rem;
        color: var(--wp--preset--color--accent);
        font-family: var(--wp--preset--font-family--body);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
        .laboutique-cats__link,
        .laboutique-cats__media img {
                transition: none;
        }

        .laboutique-cats__link:hover {
                transform: none;
        }

        .laboutique-cats__link:hover .laboutique-cats__media img {
                transform: none;
        }
}

/* Fondo dell'archivio -----------------------------------------------
   Nella home il banco sta su carta con le card bianche. Nell'archivio era
   l'inverso — card color carta su pagina bianca — e le card non si
   staccavano dal fondo. Qui si allinea al ritmo della home. */

.woocommerce-shop .wp-site-blocks,
.tax-product_cat .wp-site-blocks,
.post-type-archive-product .wp-site-blocks {
        background: var(--wp--preset--color--surface);
}

.woocommerce-shop .laboutique-header-shell,
.tax-product_cat .laboutique-header-shell,
.post-type-archive-product .laboutique-header-shell,
.woocommerce-shop .laboutique-footer,
.tax-product_cat .laboutique-footer,
.post-type-archive-product .laboutique-footer {
        background: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product {
        background: var(--wp--preset--color--base);
}

/* Hover solo dove esiste davvero -------------------------------------
   Su touch il browser applica :hover al tocco e ce lo lascia finché non si
   tocca altrove: il pulsante della card resta rosso pieno dopo un tap, e la
   card resta sollevata. Le regole di hover vanno quindi condizionate a
   `hover: hover`, che è vero solo con un puntatore vero.

   Va in coda perché deve rientrare sulle regole di hover dichiarate sopra. */

@media (hover: none) {
        .woocommerce ul.products li.product .button:hover {
                background: transparent;
                border-color: var(--wp--preset--color--border);
                color: var(--wp--preset--color--contrast);
        }

        .woocommerce ul.products li.product:hover {
                transform: none;
                box-shadow: 0 1px 2px rgba(29, 25, 26, 0.05), 0 6px 18px rgba(29, 25, 26, 0.07);
        }

        .woocommerce ul.products li.product:hover img,
        .laboutique-cats__link:hover .laboutique-cats__media img,
        .laboutique-home-banco .laboutique-product-card__link:hover {
                transform: none;
        }

        .laboutique-cats__link:hover {
                transform: none;
        }

        .laboutique-wa:hover {
                transform: none;
                background: var(--wp--preset--color--primary);
        }

        /* Senza questo il numero toccato resta rosso pieno accanto alla pagina
           corrente: due "correnti" sullo schermo, e non si capisce dove si è. */
        nav.woocommerce-pagination li a.page-numbers:hover {
                border-color: var(--wp--preset--color--border);
                background: var(--wp--preset--color--base);
                color: var(--wp--preset--color--contrast);
        }
}

/* Lo stato attivo resta invece utile ovunque: dà il riscontro del tocco. */
.woocommerce ul.products li.product .button:active {
        background: var(--wp--preset--color--primary);
        border-color: var(--wp--preset--color--primary);
        color: #FFFFFF;
}

/* Il pulsante della card, in coda per non dipendere dall'ordine dei blocchi.
   `align-self: center` centra sull'asse trasversale della colonna flex: non
   si appoggia all'aritmetica di larghezza e margini, quindi resta centrato
   anche se una regola altrove ne ridefinisce uno dei due lati. */
.woocommerce ul.products li.product .button {
        align-self: center;
        width: calc(100% - 2.3rem);
        margin-inline: auto;
        text-align: center;
}

/* Link "Visualizza carrello" dopo Aggiungi al carrello (AJAX WooCommerce).
   WooCommerce inietta <a class="added_to_cart wc-forward"> subito dopo il
   pulsante .button. Senza stili dedicati esce come link nero scoperto senza
   padding, rompendo l'allineamento della card. Qui lo rendiamo un pulsante
   secondario coerente col design system: stesso bordo, stesso font, stesso
   padding e stesso raggio d'angolo, ma solo testo uppercase e peso light. */

.woocommerce ul.products li.product .added_to_cart.wc-forward {
        display: block;
        align-self: center;
        width: calc(100% - 2.3rem);
        margin: -0.75rem auto 1.15rem;
        padding: 0.65rem 1.1rem;
        border: 1px solid var(--wp--preset--color--border);
        border-top: 0;
        border-radius: 0 0 2px 2px;
        background: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--contrast);
        font-family: var(--wp--preset--font-family--body);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward::before {
        content: "✓  ";
        display: inline-block;
        color: var(--wp--preset--color--accent);
        margin-right: 0.1rem;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward:hover,
.woocommerce ul.products li.product .added_to_cart.wc-forward:focus-visible {
        background: var(--wp--preset--color--primary);
        border-color: var(--wp--preset--color--primary);
        color: #FFFFFF;
        outline: none;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward:hover::before {
        color: #FFFFFF;
}

@media (hover: none) {
        .woocommerce ul.products li.product .added_to_cart.wc-forward:hover {
                background: var(--wp--preset--color--surface);
                border-color: var(--wp--preset--color--border);
                color: var(--wp--preset--color--contrast);
        }

        .woocommerce ul.products li.product .added_to_cart.wc-forward:hover::before {
                color: var(--wp--preset--color--accent);
        }
}

/* --- Orari bottega (server-side con badge + evidenziazioni) ---------
   Badge topbar + componente hero + footer week, generati da
   [laboutique_ore] e [laboutique_badge]. Coesistono con le regole JS
   client-side (.laboutique-hours__state) per il payload [laboutique_orari]. */

.laboutique-topbar .laboutique-badge--closed {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.9rem;
	padding: 0.18rem 0.65rem;
	border: 1px solid #FFF;
	border-radius: 2px;
	background: #FFFFFF;
	color: var(--wp--preset--color--primary);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	vertical-align: baseline;
	animation: laboutique-pulse 2.2s ease-in-out infinite;
}

.laboutique-topbar .laboutique-badge__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px rgba(217, 50, 50, 0.18);
}

@keyframes laboutique-pulse {
	0%,
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
	50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

body.laboutique-is-closed .laboutique-topbar {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(0, 0, 0, 0.14) 100%),
		var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

body.laboutique-is-exception-day .laboutique-hero__glass {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: -1px;
}

.laboutique-hours p {
	margin: 0;
}

.laboutique-hours--hero {
	display: grid;
	gap: 0.22rem;
}

.laboutique-hours--hero .laboutique-hours__exception-tag {
	display: inline-flex;
	justify-self: start;
	margin-bottom: 0.2rem;
	padding: 0.12rem 0.45rem;
	border-left: 2px solid var(--wp--preset--color--accent);
	background: rgba(184, 140, 47, 0.1);
	color: var(--wp--preset--color--accent);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.8;
}

.laboutique-hours--hero .laboutique-hours__status {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.2rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.laboutique-hours__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00C16B;
	box-shadow: 0 0 0 3px rgba(0, 193, 107, 0.18);
}

.laboutique-hours__dot--closed {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(217, 50, 50, 0.22);
}

.laboutique-hours--hero .laboutique-hours__status--closed {
	color: #FFC3C3;
}

.laboutique-hours--hero .laboutique-hours__slot {
	color: #F3EEE7;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.laboutique-hours--hero .laboutique-hours__closed-note {
	display: block;
	margin-top: 0.18rem;
	color: #FFD0D0;
	font-size: 0.75rem;
	font-style: italic;
	letter-spacing: 0.01em;
}

.laboutique-hours--footer {
	display: grid;
	gap: 0.2rem;
}

.laboutique-hours--footer .laboutique-hours__row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
        align-items: baseline;
        padding: 0.05rem 0;
}

/* ● Micro-evidenza di "oggi" nel footer.
   NESSUN blocco colorato, NESSUN bordo: solo un pallino 7×7px accent
   allineato verticalmente col giorno, e giorno + slot con colore.
   Il placebo (is-placeholder) invisibile mantiene l'allineamento nelle
   righe non-oggi così i nomi iniziano tutti alla stessa colonna. */

.laboutique-hours--footer .laboutique-hours__day {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #F3EEE7;
        font-family: var(--wp--preset--font-family--body);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.01em;
}

.laboutique-hours--footer .laboutique-hours__today-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--wp--preset--color--primary);
        flex-shrink: 0;
        box-shadow: 0 0 0 3px rgba(230, 25, 25, 0.13);
}

.laboutique-hours--footer .laboutique-hours__today-dot.is-placeholder {
        background: transparent;
        box-shadow: none;
}

.laboutique-hours--footer .laboutique-hours__day strong {
        font-weight: 700;
}

.laboutique-hours--footer .laboutique-hours__row.is-today .laboutique-hours__day,
.laboutique-hours--footer .laboutique-hours__row.is-today .laboutique-hours__day strong {
        color: var(--wp--preset--color--primary);
}

.laboutique-hours--footer .laboutique-hours__times {
        color: #C9BFB4;
        font-size: 0.8rem;
        font-variant-numeric: tabular-nums;
}

body.laboutique-is-exception-day .laboutique-hours--footer .laboutique-hours__row.is-today .laboutique-hours__times {
        color: #FFDAB3;
}

.laboutique-hours--footer .laboutique-hours__row--exception .laboutique-hours__day,
.laboutique-hours--footer .laboutique-hours__row--exception .laboutique-hours__times {
        color: #FFDAB3;
}

.laboutique-hours--footer .laboutique-hours__note {
        color: #FFDAB3;
        font-style: italic;
        opacity: 0.95;
}

@media (max-width: 640px) {
        .laboutique-topbar .laboutique-badge--closed {
                display: block;
                margin: 0.3rem 0 0;
                justify-content: center;
        }

        .laboutique-hours--footer .laboutique-hours__row {
                grid-template-columns: auto 1fr;
                gap: 0.65rem;
        }

        .laboutique-hours--footer .laboutique-hours__day {
                font-size: 0.78rem;
        }

        .laboutique-hours--footer .laboutique-hours__times {
                font-size: 0.76rem;
                line-height: 1.35;
        }
}

/* -------------------------------------------------------------------------
 * WooCommerce Single Product — Layout Grid + Bento Blueprint CTA
 * (Industrial Swiss Print: grid con gap 1px = "mura" blueprint,
 *  nessun border-radius extra, nessuna ombra, nessun gradiente)
 *
 * Layout:  0.52fr gallery  |  0.48fr summary entry
 *          ---------------------------------------
 *          52% spazio img  |  48% spazio controlli
 *
 * Bento rule: i gruppi form.cart e meta usano grid-gap:1px + grid-track
 * background grigio = illusion BENTO senza wrappers HTML extra.
 * ---------------------------------------------------------------------- */

body.single-product .woocommerce-notices-wrapper + div.product,
body.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
	gap: clamp(2rem, 4.2vw, 4.5rem);
	align-items: start;
	width: min(100% - 2rem, 1480px);
	margin-inline: auto;
	padding: clamp(1.2rem, 2.8vw, 3rem) 0 1rem;
}
body.single-product div.product::before,
body.single-product div.product::after { display: none; content: ""; }

body.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
	position: relative;
}

body.single-product div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
	border: 1px solid var(--wp--preset--color--border, #E4DECE);
	background: var(--wp--preset--color--base, #FBF9F5);
}
body.single-product div.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
body.single-product div.product .woocommerce-product-gallery__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
	body.single-product div.product .woocommerce-product-gallery__wrapper img:hover {
		transform: scale(1.04);
	}
}

body.single-product div.product .flex-control-nav.flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.55rem;
	width: 100%;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	position: static;
}
body.single-product div.product .flex-control-nav.flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--wp--preset--color--border, #E4DECE);
	overflow: hidden;
	float: none;
}
body.single-product div.product .flex-control-nav.flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- SUMMARY (destra colonna) ---------- */

body.single-product div.product .summary.entry-summary {
	max-width: 56ch;
	display: flex;
	flex-direction: column;
	gap: 1.45rem;
	padding-top: 0.2rem;
}

body.single-product div.product .summary .product_title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(1.7rem, 2.75vw, 2.5rem);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.022em;
	text-transform: uppercase;
	color: #0A0A0A;
	hyphens: none;
}

body.single-product div.product .summary p.price {
	margin: 0;
	padding: 1rem 0 1.1rem;
	border-top: 3px solid #0A0A0A;
	border-bottom: 1px solid var(--wp--preset--color--border, #E4DECE);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.75rem;
}
body.single-product div.product .summary p.price .woocommerce-Price-amount.amount {
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: clamp(1.85rem, 3.1vw, 2.85rem);
	font-weight: 900;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
body.single-product div.product .summary p.price .woocommerce-Price-currencySymbol {
	font-size: 0.62em;
	vertical-align: text-top;
	margin-right: 0.2em;
	font-weight: 700;
}

/* Prezzo scontato sulla scheda.
   La regola su `.woocommerce-Price-amount` qui sopra colpisce sia il vecchio
   prezzo sia il nuovo: senza questo override la scheda dichiara due cifre nere
   da 2,85rem una accanto all'altra. `p.price` è già flex con
   `align-items: baseline`, quindi vecchio, nuovo e unità si allineano da soli. */
body.single-product div.product .summary p.price del {
	text-decoration: line-through;
}

body.single-product div.product .summary p.price del .woocommerce-Price-amount.amount {
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	font-weight: 600;
	color: var(--wp--preset--color--muted, #6E6668);
}

body.single-product div.product .summary p.price ins {
	background: none;
	text-decoration: none;
}
body.single-product div.product .summary p.price + p.stock {
	margin: -0.4rem 0 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #E4DECE);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #0A0A0A;
	align-self: flex-start;
}

/* Short description (porzioni, note unità) */
body.single-product div.product .summary .woocommerce-product-details__short-description {
	margin: 0;
	max-width: none;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #E4DECE);
	font-size: 0.875rem;
	line-height: 1.55;
	color: #262626;
	letter-spacing: 0.01em;
}
body.single-product div.product .summary .woocommerce-product-details__short-description p {
	margin: 0.35rem 0 0;
}
body.single-product div.product .summary .woocommerce-product-details__short-description > p:first-child {
	margin-top: 0;
}

/* Badge unità misura: "Porzioni da 300g circa" */
body.single-product div.product .summary .product_meta {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: #595959;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
}
body.single-product div.product .summary .product_meta > div,
body.single-product div.product .summary .product_meta > span {
	margin: 0;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--wp--preset--color--border, #E4DECE);
	background: var(--wp--preset--color--base, #FBF9F5);
	color: #1A1A1A;
	letter-spacing: 0.06em;
}
body.single-product div.product .summary .product_meta .sku_wrapper,
body.single-product div.product .summary .product_meta .sku { color: #595959; }
body.single-product div.product .summary .product_meta a {
	color: #0A0A0A;
	text-decoration: none;
	border-bottom: 1px solid rgba(230,25,25,0.3);
}
body.single-product div.product .summary .product_meta a:hover { color: var(--wp--preset--color--primary, #E61919); }

/* SKU line (se esiste separata) */
body.single-product div.product .summary .sku_wrapper {
	margin: -0.3rem 0 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #595959;
}
body.single-product div.product .summary .sku_wrapper .sku { color: #0A0A0A; }

/* ---------- BENTO FORM CART: qty + Add to cart ---------- */

body.single-product div.product .summary form.cart {
	margin: 0.25rem 0 0;
	padding: 1px;
	background: var(--wp--preset--color--border, #E4DECE);
	display: grid;
	grid-template-columns: minmax(auto, 92px) 1fr;
	gap: 1px;
	align-items: stretch;
}
body.single-product div.product .summary form.cart .quantity {
	margin: 0;
	float: none;
	width: 100%;
	display: grid;
}
body.single-product div.product .summary form.cart .quantity input.qty {
	padding: 0 0.7rem;
	height: 3.35rem;
	border: 0;
	margin: 0;
	border-radius: 0;
	background: var(--wp--preset--color--base, #FBF9F5);
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 800;
	text-align: center;
	color: #0A0A0A;
	appearance: textfield;
	-moz-appearance: textfield;
	width: 100%;
}
body.single-product div.product .summary form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product div.product .summary form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body.single-product div.product .summary form.cart button.single_add_to_cart_button.button {
	height: 3.35rem;
	margin: 0;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 0;
	background: #0A0A0A;
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
	align-self: stretch;
}
@media (hover: hover) and (pointer: fine) {
	body.single-product div.product .summary form.cart button.single_add_to_cart_button.button:hover {
		background: var(--wp--preset--color--primary, #E61919);
		color: #FFFFFF;
	}
}
body.single-product div.product .summary form.cart .wc-forward.added_to_cart {
	grid-column: 1 / -1;
	padding: 0.7rem 1rem !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--base, #FBF9F5) !important;
	color: #0A0A0A !important;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

/* ---------- Prodotti variabili: gusto, formato, personalizzazione ----------
   Il bento qui sopra dà per scontato che i figli diretti di `form.cart` siano
   due: quantità e pulsante. Su un prodotto variabile non è così. WooCommerce
   emette invece `table.variations`, un alert per lettori di schermo e
   `.single_variation_wrap` — ed è quest'ultimo a contenere davvero quantità e
   pulsante, un livello più in basso di dove la griglia li cerca.

   Senza queste regole la tabella delle opzioni finisce schiacciata nella
   colonna da 92px, il menu a tendina esce tagliato e il pulsante scavalca la
   select. Si vede sugli arancini, che hanno l'attributo "Gusto".

   La correzione non tocca il bento: lo sposta di un livello, su
   `.woocommerce-variation-add-to-cart`, dove i figli tornano a essere i due
   che la griglia si aspetta. */

body.single-product div.product .summary form.variations_form.cart {
	display: block;
	padding: 0;
	background: transparent;
}

/* La tabella non è una tabella: è un'etichetta sopra un menu a tendina.
   WooCommerce lo dichiara già con `role="presentation"`, qui lo si rende
   vero anche nel layout. */
body.single-product div.product .summary form.variations_form .variations,
body.single-product div.product .summary form.variations_form .variations tbody,
body.single-product div.product .summary form.variations_form .variations tr,
body.single-product div.product .summary form.variations_form .variations th,
body.single-product div.product .summary form.variations_form .variations td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

/* Un prodotto può avere più attributi — "Formato" e "Gusto" insieme. */
body.single-product div.product .summary form.variations_form .variations tr + tr {
	margin-top: 0.95rem;
}

body.single-product div.product .summary form.variations_form .variations th.label label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #595959;
}

body.single-product div.product .summary form.variations_form .variations select {
	width: 100%;
	height: 3.35rem;
	margin: 0;
	padding: 0 2.6rem 0 0.9rem;
	border: 1px solid var(--wp--preset--color--border, #E4DECE);
	border-radius: 0;
	/* `appearance: none` toglie la freccia di sistema: senza un sostituto il
	   menu smette di somigliare a un menu. Il glifo è disegnato qui, così non
	   dipende da un file e segue il colore del testo. */
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--wp--preset--color--base, #FBF9F5);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.7rem;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	color: #0A0A0A;
	cursor: pointer;
}

body.single-product div.product .summary form.variations_form .variations select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #E61919);
	outline-offset: -2px;
}

/* "Svuota": WooCommerce ne governa la `visibility` da JavaScript, quindi lo
   spazio resta occupato anche quando è nascosto. Va tenuto piccolo. */
body.single-product div.product .summary form.variations_form .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #595959;
	text-decoration: none;
	border-bottom: 1px solid rgba(230, 25, 25, 0.32);
}

body.single-product div.product .summary form.variations_form .reset_variations:hover {
	color: var(--wp--preset--color--primary, #E61919);
	border-color: currentColor;
}

body.single-product div.product .summary .single_variation_wrap {
	margin-top: 1.15rem;
}

/* Prezzo e disponibilità della variante scelta. */
body.single-product div.product .summary .woocommerce-variation.single_variation {
	margin: 0 0 0.9rem;
}

body.single-product div.product .summary .woocommerce-variation .woocommerce-variation-price .amount {
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #0A0A0A;
}

body.single-product div.product .summary .woocommerce-variation .woocommerce-variation-availability p,
body.single-product div.product .summary .woocommerce-variation .woocommerce-variation-description p {
	margin: 0.45rem 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: #595959;
}

/* Qui torna il bento: due figli, quantità e pulsante, come per i semplici. */
body.single-product div.product .summary .woocommerce-variation-add-to-cart {
	display: grid;
	grid-template-columns: minmax(auto, 92px) 1fr;
	gap: 1px;
	padding: 1px;
	background: var(--wp--preset--color--border, #E4DECE);
	align-items: stretch;
}

/* I campi nascosti (`add-to-cart`, `variation_id`) stanno dentro allo stesso
   contenitore. Il browser li tiene già fuori dal flusso, ma dirlo qui evita
   che un giorno diventino celle vuote della griglia. */
body.single-product div.product .summary .woocommerce-variation-add-to-cart input[type="hidden"] {
	display: none;
}

/* Finché non si sceglie il gusto il pulsante non funziona: WooCommerce gli
   mette `.disabled`. Senza stile resta nero identico a quando è attivo, si
   clicca e non succede nulla. */
body.single-product div.product .summary form.cart button.single_add_to_cart_button.button:disabled,
body.single-product div.product .summary form.cart button.single_add_to_cart_button.button.disabled {
	background: var(--wp--preset--color--muted, #6E6668);
	color: #FFFFFF;
	cursor: not-allowed;
}

/* Meta categorie/tag finale fuori dal bento */
body.single-product div.product .summary .posted_in,
body.single-product div.product .summary .tagged_as {
	margin: 0;
	padding: 0.95rem 0 0;
	border-top: 1px solid var(--wp--preset--color--border, #E4DECE);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.7;
	text-transform: uppercase;
	color: #595959;
}
body.single-product div.product .summary .tagged_as { padding-top: 0.5rem; border-top: 0; }
body.single-product div.product .summary .posted_in a,
body.single-product div.product .summary .tagged_as a {
	color: #0A0A0A;
	text-decoration: none;
	border-bottom: 1px solid rgba(230,25,25,0.32);
	margin-right: 0.3rem;
}
body.single-product div.product .summary .posted_in a:hover,
body.single-product div.product .summary .tagged_as a:hover {
	color: var(--wp--preset--color--primary, #E61919);
	border-color: currentColor;
}

/* WooCommerce tabs: allineamento + stile blueprint */
body.single-product .woocommerce-tabs.wc-tabs-wrapper {
	width: min(100% - 2rem, 1480px);
	margin: 2.5rem auto 0;
	padding: 0;
	border-top: 3px solid #0A0A0A;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border, #E4DECE);
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
	margin: 0;
	padding: 0;
	float: none;
	border: 0;
	background: transparent;
}
body.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
	display: block;
	padding: 1rem 1.35rem;
	font-family: var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #595959;
	text-decoration: none;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	margin: 0;
	border-radius: 0;
}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: #0A0A0A;
	border-bottom-color: var(--wp--preset--color--primary, #E61919);
	background: transparent;
}
body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 1.8rem 0 0;
	border: 0;
	margin: 0;
}

/* ---------- Responsive breakpoints ---------- */

/* Tablet: 651-1024 — split 45/55, summary piena aria */
@media (max-width: 1024px) and (min-width: 651px) {
	body.single-product div.product {
		grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
		gap: 2.4rem;
	}
}

/* Mobile <650 — grid 1 colonna */
@media (max-width: 650px) {
	body.single-product .woocommerce-notices-wrapper + div.product,
	body.single-product div.product {
		grid-template-columns: 1fr;
		gap: 1.6rem;
		padding-top: 1rem;
		width: 100%;
		max-width: none;
	}
	body.single-product div.product .summary.entry-summary {
		padding: 0 1rem;
		max-width: none;
	}
	body.single-product div.product .summary .product_title {
		font-size: clamp(1.45rem, 5.8vw, 1.95rem);
	}
	body.single-product div.product .summary p.price .woocommerce-Price-amount.amount {
		font-size: clamp(1.6rem, 6vw, 2.1rem);
	}
	body.single-product div.product .summary form.cart,
	body.single-product div.product .summary .woocommerce-variation-add-to-cart {
		grid-template-columns: minmax(auto, 84px) 1fr;
	}
	body.single-product div.product .summary form.cart .quantity input.qty,
	body.single-product div.product .summary form.cart button.single_add_to_cart_button.button {
		height: 3rem;
	}
	/* La select segue l'altezza ridotta di quantità e pulsante. */
	body.single-product div.product .summary form.variations_form .variations select {
		height: 3rem;
	}
	body.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--with-images {
		padding: 0 0.4rem;
	}
	body.single-product .woocommerce-tabs.wc-tabs-wrapper {
		width: calc(100% - 2rem);
		padding: 0 1rem;
	}
	body.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
		padding: 0.85rem 0.95rem;
	}
}

/* -------------------------------------------------------------------------
 * Single product page — leggibilità contenuto + scala tipografica ridotta
 *
 * La pagina prodotto usa il legacy-template di WooCommerce. Di default il
 * blocco .entry-content (descrizione) eredita la scala tipografica globale
 * usata per le sezioni hero/homepage: headings mostruosi, lunghezza riga
 * senza controllo, ritmo verticale piatto. Qui controlliamo tutto senza
 * sovrascrivere il template.
 * ---------------------------------------------------------------------- */

body.single-product .entry-content,
body.single-product .woocommerce-product-details__short-description,
body.single-product #tab-description .woocommerce-Tabs-panel--description {
        max-width: 62ch;
        margin-inline: auto;
        color: #1A1A1A;
        font-size: 1.025rem;
        line-height: 1.68;
        letter-spacing: 0.005em;
        word-spacing: 0.02em;
        hyphens: auto;
}

body.single-product .entry-content > h1,
body.single-product #tab-description h1,
body.single-product #tab-description .woocommerce-Tabs-panel h1:first-child,
body.single-product .woocommerce-Tabs-panel--description > h2:first-child {
        margin: 3.4rem auto 1.1rem;
        font-family: var(--wp--preset--font-family--body);
        font-size: clamp(1.4rem, 2.1vw, 1.9rem);
        font-weight: 800;
        letter-spacing: -0.015em;
        line-height: 1.18;
        text-transform: uppercase;
        color: #0A0A0A;
}

body.single-product .entry-content h1::after,
body.single-product .woocommerce-Tabs-panel--description > h1:first-child::after,
body.single-product #tab-description h1:not([class])::after {
        content: "";
        display: block;
        width: 3.5rem;
        height: 3px;
        background: var(--wp--preset--color--primary);
        margin-top: 0.7rem;
}

body.single-product .entry-content h2,
body.single-product .woocommerce-Tabs-panel--description h2 {
        margin: 2.6rem 0 0.7rem;
        font-family: var(--wp--preset--font-family--body);
        font-size: clamp(1.18rem, 1.65vw, 1.5rem);
        font-weight: 800;
        letter-spacing: -0.008em;
        line-height: 1.22;
        color: #111111;
}

body.single-product .entry-content h3,
body.single-product .woocommerce-Tabs-panel--description h3 {
        margin: 2rem 0 0.5rem;
        font-size: 1.12rem;
        font-weight: 700;
        letter-spacing: -0.004em;
}

body.single-product .entry-content p,
body.single-product .woocommerce-Tabs-panel--description p {
        margin: 0 0 1.25rem;
        color: #262626;
        font-size: 1.025rem;
        line-height: 1.68;
        orphans: 2;
        widows: 2;
}

body.single-product .entry-content ul,
body.single-product .entry-content ol,
body.single-product .woocommerce-Tabs-panel--description ul,
body.single-product .woocommerce-Tabs-panel--description ol {
        margin: 0 0 1.25rem 1.6rem;
        padding: 0;
        font-size: 1.025rem;
        line-height: 1.65;
}

body.single-product .entry-content li,
body.single-product .woocommerce-Tabs-panel--description li {
        margin: 0 0 0.35rem;
}

body.single-product .entry-content hr,
body.single-product .woocommerce-Tabs-panel--description hr {
        border: 0;
        border-top: 1px solid #E4DECE;
        margin: 2.5rem 0;
}

body.single-product .entry-content strong,
body.single-product .woocommerce-Tabs-panel--description strong {
        color: #0A0A0A;
        font-weight: 700;
}

body.single-product .entry-content a,
body.single-product .woocommerce-Tabs-panel--description a {
        color: var(--wp--preset--color--primary);
        text-decoration: none;
        border-bottom: 1px solid rgba(230, 25, 25, 0.35);
        padding-bottom: 1px;
        transition: border-color 0.15s ease;
}

body.single-product .entry-content a:hover,
body.single-product .woocommerce-Tabs-panel--description a:hover {
        border-bottom-color: var(--wp--preset--color--primary);
}

body.single-product section.related.products,
body.single-product .up-sells,
body.single-product .upsells.products {
        margin-top: 4rem;
        padding-top: 0;
}

body.single-product .related.products > h2,
body.single-product .up-sells > h2,
body.single-product .upsells.products > h2 {
        max-width: 62ch;
        margin: 0 auto 2.2rem;
        font-family: var(--wp--preset--font-family--body);
        font-size: clamp(1.25rem, 1.75vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        color: #0A0A0A;
        position: relative;
}

body.single-product .related.products > h2::after,
body.single-product .up-sells > h2::after,
body.single-product .upsells.products > h2::after {
        content: "";
        display: block;
        width: 3.5rem;
        height: 3px;
        background: var(--wp--preset--color--primary);
        margin-top: 0.75rem;
}

body.single-product section.related.products,
body.single-product .up-sells.upsells.products {
        margin-top: 3.5rem;
        padding-top: 1rem;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
        margin-top: 2.8rem;
        padding: 0;
}

body.single-product ul.tabs.wc-tabs {
        padding: 0;
        margin: 2rem 0 0;
        border-bottom: 1px solid #E4DECE;
}

body.single-product ul.tabs.wc-tabs li {
        margin: 0 1.5rem 0 0;
        padding: 0.6rem 0;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.01em;
        text-transform: uppercase;
}

body.single-product ul.tabs.wc-tabs li a {
        color: #333;
        text-decoration: none;
}

body.single-product ul.tabs.wc-tabs li.active a {
        color: var(--wp--preset--color--primary);
}

body.single-product ul.tabs.wc-tabs li::after {
        display: none;
}

@media (max-width: 480px) {
        body.single-product .entry-content,
        body.single-product .woocommerce-Tabs-panel--description {
                max-width: 100%;
                padding: 0 0.9rem;
                font-size: 1rem;
                line-height: 1.62;
        }

        body.single-product .entry-content > h1,
        body.single-product .woocommerce-Tabs-panel--description > h1:first-child {
                font-size: 1.32rem;
                margin-top: 2.4rem;
        }

        body.single-product .entry-content h2 {
                font-size: 1.1rem;
                margin-top: 1.9rem;
        }

        body.single-product .related.products > h2 {
                font-size: 1.22rem;
                padding: 0 0.9rem;
                margin-bottom: 1.6rem;
        }
}

/* ============================================================
   PAGINE EDITORIALI — Chi siamo e Contatti
   ------------------------------------------------------------
   Queste due pagine hanno un template dedicato (templates/page-chi-siamo.html
   e templates/page-contatti.html): il markup arriva già in sezioni, quindi qui
   ci sono solo regole su classi reali.

   Nota storica: fino alla 0.8.0 il contenuto era HTML piatto salvato nel post
   e la grafica veniva ricostruita con catene `page-id-333 > h2:nth-of-type(n)`.
   Bastava aggiungere un paragrafo dal backend per far slittare tutte le
   sezioni. Da qui in poi nessun selettore dipende dall'ordine dei nodi.
   ============================================================ */

.laboutique-page {
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--contrast);
}

.laboutique-page > section {
        margin-block: 0;
        padding-top: clamp(3.5rem, 7vw, 7rem);
        padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

/* Testata di pagina --------------------------------------------------
   Stessa famiglia della hero di home, ma senza foto: qui il titolo deve
   respirare da solo, e la pagina sotto è chiara. */

.laboutique-page > .laboutique-page-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding-top: clamp(4rem, 8vw, 7.5rem);
        padding-bottom: clamp(3.5rem, 6.5vw, 6rem);
}

.laboutique-page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(120% 90% at 18% 0%, rgba(217, 50, 50, 0.22) 0%, transparent 62%);
}

/* La larghezza resta quella dello shell, così il testo della testata parte
   sulla stessa colonna delle sezioni sotto: a limitare la misura di lettura
   ci pensano titolo e occhiello, non il contenitore. */
.laboutique-page-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--20);
}

.laboutique-page-hero__inner > * {
        margin-block: 0;
}

.laboutique-page-hero__title {
        margin: 0;
        max-width: 18ch;
        font-size: clamp(2.6rem, 6vw, 4.5rem);
        line-height: 0.96;
        text-wrap: balance;
}

.laboutique-page-hero__title::after {
        content: "";
        display: block;
        width: 4.5rem;
        height: 3px;
        margin-top: clamp(1.1rem, 2vw, 1.6rem);
        background: var(--wp--preset--color--primary);
}

.laboutique-page-hero__lead {
        max-width: 46ch;
        color: #CFC6BC;
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: clamp(1rem, 1.4vw, 1.155rem);
        line-height: 1.75;
}

/* Titoli di sezione condivisi --------------------------------------- */

.laboutique-page :where(.laboutique-about-storia__title,
        .laboutique-about-stefano__title,
        .laboutique-about-valori__title,
        .laboutique-about-mestiere__title,
        .laboutique-about-cta__title,
        .laboutique-contatti-form__title,
        .laboutique-contatti-aside__title) {
        margin: 0 0 var(--wp--preset--spacing--30);
        font-size: clamp(1.85rem, 3.4vw, 2.9rem);
        line-height: 1.06;
        text-wrap: balance;
}

/* Immagini di sezione ------------------------------------------------ */

.laboutique-page :where(.wp-block-image) {
        margin: 0;
}

.laboutique-page :where(.wp-block-image) img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 3px;
}

/* ---------- Chi siamo · La nostra storia ---------- */

.laboutique-about-storia {
        background: var(--wp--preset--color--base);
}

.laboutique-about-storia__cols {
        gap: clamp(2rem, 5vw, 4.5rem);
}

.laboutique-about-storia__closing {
        margin-bottom: 0;
        padding-left: clamp(0.9rem, 1.6vw, 1.3rem);
        border-left: 3px solid var(--wp--preset--color--primary);
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 1.0625rem;
        line-height: 1.7;
}

.laboutique-about-storia__photo img {
        aspect-ratio: 4 / 5;
}

/* ---------- Chi siamo · Stefano ---------- */

.laboutique-about-stefano__cols {
        gap: clamp(2rem, 5vw, 4.5rem);
}

/* Il ritaglio di Stefano è un PNG con lo sfondo trasparente: pensato per
   posarsi sul fondo scuro. Ritagliarlo con `cover` gli taglierebbe la testa,
   quindi qui vale l'altezza naturale. */
.laboutique-about-stefano__photo img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        border-radius: 0;
}

.laboutique-about-stefano p {
        color: #CFC6BC;
}

p.laboutique-about-stefano__sign {
        margin-top: var(--wp--preset--spacing--30);
        color: var(--wp--preset--color--accent);
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 1.25rem;
        font-style: italic;
}

/* ---------- Chi siamo · I valori ---------- */

.laboutique-about-valori {
        background: var(--wp--preset--color--surface);
}

.laboutique-about-valori__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        margin-top: clamp(2rem, 4vw, 3rem);
        background: var(--wp--preset--color--border);
        border: 1px solid var(--wp--preset--color--border);
        list-style: none;
        padding: 0;
}

.laboutique-valore {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: clamp(1.6rem, 3vw, 2.4rem);
        background: var(--wp--preset--color--base);
}

.laboutique-valore__num {
        position: absolute;
        top: clamp(1.6rem, 3vw, 2.4rem);
        right: clamp(1.6rem, 3vw, 2.4rem);
        color: var(--wp--preset--color--border);
        font-family: var(--wp--preset--font-family--display);
        font-size: 2rem;
        line-height: 1;
}

.laboutique-valore__icon {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--wp--preset--color--primary);
        border-radius: 50%;
        color: var(--wp--preset--color--primary);
}

.laboutique-valore__icon svg {
        width: 1.5rem;
        height: 1.5rem;
}

.laboutique-valore__title {
        margin: 0;
        font-size: 1.375rem;
        line-height: 1.15;
}

.laboutique-valore__copy {
        margin: 0;
        color: var(--wp--preset--color--muted);
        font-size: 0.9375rem;
        line-height: 1.7;
}

/* ---------- Chi siamo · Il mestiere ---------- */

.laboutique-about-mestiere {
        background: var(--wp--preset--color--base);
}

.laboutique-about-mestiere__cols {
        gap: clamp(2rem, 5vw, 4.5rem);
}

.laboutique-about-mestiere__photo img {
        aspect-ratio: 4 / 3;
}

/* ---------- Chi siamo · I numeri ---------- */

.laboutique-page > .laboutique-about-numeri {
        padding-top: clamp(3rem, 5.5vw, 5rem);
        padding-bottom: clamp(3rem, 5.5vw, 5rem);
}

.laboutique-about-numeri__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(1.5rem, 3vw, 2.5rem);
        margin: 0;
}

.laboutique-numero {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding-left: clamp(0.9rem, 1.6vw, 1.4rem);
        border-left: 2px solid rgba(217, 50, 50, 0.55);
}

.laboutique-numero__value {
        color: var(--wp--preset--color--base);
        font-family: var(--wp--preset--font-family--display);
        font-size: clamp(2.4rem, 5vw, 3.75rem);
        line-height: 1;
}

.laboutique-numero__label {
        margin: 0;
        color: #CFC6BC;
        font-size: 0.875rem;
        letter-spacing: 0.06em;
        line-height: 1.4;
        text-transform: uppercase;
}

/* ---------- Chi siamo · Chiamata all'azione ---------- */

.laboutique-about-cta {
        background: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
        text-align: center;
}

.laboutique-about-cta__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--wp--preset--spacing--20);
}

.laboutique-about-cta__title {
        color: var(--wp--preset--color--base);
        margin-bottom: 0;
}

.laboutique-about-cta__copy {
        max-width: 52ch;
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        font-family: var(--wp--preset--font-family--subtitle);
        font-size: 1.0625rem;
        line-height: 1.75;
}

.laboutique-about-cta__actions {
        justify-content: center;
        gap: 0.75rem;
        margin-top: var(--wp--preset--spacing--20);
}

/* Sul rosso pieno il pulsante rosso sparisce: si inverte. */
.laboutique-about-cta .laboutique-button .wp-block-button__link {
        border-color: var(--wp--preset--color--base);
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--primary);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.laboutique-about-cta .laboutique-button .wp-block-button__link:hover,
.laboutique-about-cta .laboutique-button .wp-block-button__link:focus-visible {
        background: var(--wp--preset--color--contrast);
        border-color: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
}

.laboutique-about-cta .laboutique-button-ghost .wp-block-button__link {
        border-color: rgba(255, 255, 255, 0.7);
        background: transparent;
        color: var(--wp--preset--color--base);
        box-shadow: none;
}

.laboutique-about-cta .laboutique-button-ghost .wp-block-button__link:hover,
.laboutique-about-cta .laboutique-button-ghost .wp-block-button__link:focus-visible {
        background: rgba(255, 255, 255, 0.14);
        border-color: var(--wp--preset--color--base);
        color: var(--wp--preset--color--base);
}

/* ============================================================
   CONTATTI
   ============================================================ */

.laboutique-page > .laboutique-contatti-bento {
        background: var(--wp--preset--color--surface);
        padding-top: clamp(2.5rem, 5vw, 4rem);
        padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.laboutique-contacts-bento {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1px;
        margin: 0;
        padding: 0;
        background: var(--wp--preset--color--border);
        border: 1px solid var(--wp--preset--color--border);
        list-style: none;
}

.laboutique-contacts-bento__card {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        padding: clamp(1.3rem, 2.4vw, 1.9rem);
        background: var(--wp--preset--color--base);
}

.laboutique-contacts-bento__label {
        color: var(--wp--preset--color--accent);
        font-size: var(--wp--preset--font-size--x-small);
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
}

.laboutique-contacts-bento__value {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.45;
        /* Le email lunghe non devono allargare la colonna della griglia. */
        overflow-wrap: anywhere;
}

.laboutique-contacts-bento__value a {
        color: inherit;
        text-decoration: none;
}

.laboutique-contacts-bento__value a:hover,
.laboutique-contacts-bento__value a:focus-visible {
        color: var(--wp--preset--color--primary);
        text-decoration: underline;
}

.laboutique-contacts-bento__meta,
.laboutique-contacts-bento__link {
        margin-top: auto;
        padding-top: 0.35rem;
        color: var(--wp--preset--color--muted);
        font-size: 0.875rem;
}

.laboutique-contacts-bento__link {
        color: var(--wp--preset--color--primary);
        font-weight: 600;
        text-decoration: none;
}

.laboutique-contacts-bento__link:hover,
.laboutique-contacts-bento__link:focus-visible {
        text-decoration: underline;
}

/* ---------- Corpo: modulo + colonna informativa ---------- */

.laboutique-contatti-corpo__cols {
        gap: clamp(2rem, 4.5vw, 4rem);
}

.laboutique-contatti-form,
.laboutique-contatti-aside {
        padding: clamp(1.5rem, 3vw, 2.5rem);
        background: var(--wp--preset--color--base);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
}

.laboutique-contatti-form > :first-child,
.laboutique-contatti-aside > :first-child {
        margin-block-start: 0;
}

/* Titolo e occhiello del modulo stanno stretti: sotto arriva subito l'intro,
   non un'altra sezione. */
.laboutique-contatti-form__title,
.laboutique-contatti-aside__title {
        margin-bottom: var(--wp--preset--spacing--20);
}

.laboutique-contatti-form__intro {
        margin-block: 0 var(--wp--preset--spacing--30);
        color: var(--wp--preset--color--muted);
        font-size: 0.9375rem;
        line-height: 1.7;
}

/* Fluent Forms ------------------------------------------------------
   Il modulo lo genera il plugin, che a seconda della versione produce i
   propri wrapper `.ff-el-*` oppure un fieldset con i campi nudi. Qui si
   veste per elemento dentro il contenitore del tema: vale in entrambi i
   casi e non dipende dal numero o dall'ordine dei campi. */

.laboutique-contatti-form form fieldset {
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: 0;
}

.laboutique-contatti-form form legend {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
}

.laboutique-contatti-form form :where(p) {
        display: grid;
        gap: 0.35rem;
        margin: 0;
}

.laboutique-contatti-form :where(label, .ff-el-input--label label) {
        color: var(--wp--preset--color--contrast);
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.02em;
}

.laboutique-contatti-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
        width: 100%;
        margin-bottom: 0.9rem;
        padding: 0.75rem 0.9rem;
        background: var(--wp--preset--color--base);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        color: var(--wp--preset--color--contrast);
        font-family: var(--wp--preset--font-family--body);
        font-size: 1rem;
        line-height: 1.4;
}

.laboutique-contatti-form :where(input, select, textarea):focus-visible {
        outline: 2px solid var(--wp--preset--color--primary);
        outline-offset: 1px;
        border-color: var(--wp--preset--color--primary);
}

.laboutique-contatti-form textarea {
        min-height: 8.5rem;
        resize: vertical;
}

.laboutique-contatti-form :where(button[type="submit"], .ff-btn-submit) {
        width: 100%;
        margin-top: 0.4rem;
        padding: 0.95rem 1.6rem;
        border: 1.5px solid var(--wp--preset--color--primary);
        border-radius: 3px;
        background: var(--wp--preset--color--primary);
        box-shadow: 0 8px 26px rgba(217, 50, 50, 0.36);
        color: var(--wp--preset--color--base);
        font-family: var(--wp--preset--font-family--body);
        font-size: 0.9375rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
}

.laboutique-contatti-form :where(button[type="submit"], .ff-btn-submit):hover,
.laboutique-contatti-form :where(button[type="submit"], .ff-btn-submit):focus-visible {
        background: var(--wp--preset--color--primary-dark);
        border-color: var(--wp--preset--color--primary-dark);
}

/* ---------- Colonna informativa: orari + mappa ---------- */

/* Lo shortcode degli orari nasce per il piè di pagina scuro: i suoi colori
   sono chiari e su questa scheda bianca sparirebbero. Qui si ridipinge, senza
   toccare il markup né la versione del footer. */

.laboutique-contatti-aside .laboutique-hours--footer {
        gap: 0;
}

.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__row {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--wp--preset--color--border);
}

.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__row:last-child {
        border-bottom: 0;
}

.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__day {
        color: var(--wp--preset--color--contrast);
        font-size: 0.9375rem;
}

.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__times {
        color: var(--wp--preset--color--muted);
        font-size: 0.9375rem;
        text-align: right;
}

.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__row--exception .laboutique-hours__day,
.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__row--exception .laboutique-hours__times,
.laboutique-contatti-aside .laboutique-hours--footer .laboutique-hours__note {
        color: var(--wp--preset--color--primary-dark);
}

.laboutique-contatti-mappa {
        margin-top: var(--wp--preset--spacing--30);
        aspect-ratio: 4 / 3;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        overflow: hidden;
        background: var(--wp--preset--color--surface);
}

.laboutique-contatti-mappa iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
}

/* ============================================================
   Responsive — pagine editoriali
   ============================================================ */

@media (max-width: 900px) {
        .laboutique-about-valori__grid {
                grid-template-columns: minmax(0, 1fr);
        }

        .laboutique-about-numeri__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .laboutique-contacts-bento {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Su colonna singola il ritratto verticale mangerebbe tutto lo
           schermo prima del testo. */
        .laboutique-about-storia__photo img {
                aspect-ratio: 3 / 2;
        }
}

@media (max-width: 600px) {
        .laboutique-about-numeri__grid,
        .laboutique-contacts-bento {
                grid-template-columns: minmax(0, 1fr);
        }

        .laboutique-page-hero__lead,
        .laboutique-about-cta__copy {
                font-size: 1rem;
        }
}

/* ============================================================
   IL MIO ACCOUNT (WooCommerce)
   ------------------------------------------------------------
   Il tema toglie woocommerce-general, woocommerce-layout e
   woocommerce-smallscreen (laboutique_dequeue_woocommerce_styles) e li
   riscrive pagina per pagina. Per l'area account non era mai stato fatto:
   restava il markup nudo, con gli input di sistema e il pulsante "Accedi"
   appiccicato alla casella "Ricordami".

   Resta invece attivo woocommerce-blocktheme.css, che il plugin carica sui
   temi a blocchi e che porta opinioni proprio su questa pagina: padding di
   1em sulle celle, margini sui campi, `display:block` e `margin-bottom:1em`
   sul pulsante nelle righe ordine, sottolineatura sulla voce di menu attiva.
   Quelle regole sono agganciate a `.woocommerce-account`, la classe che
   WooCommerce mette sul body, e battono per specificità qualunque regola
   scritta sul solo `.laboutique-account`.

   Per questo qui il prefisso è `.woocommerce-account .laboutique-account`:
   non è un vezzo, è il minimo che serve per avere l'ultima parola senza
   ricorrere a !important. Dove WooCommerce alza ancora il tiro (le voci di
   menu, il link "Modifica" degli indirizzi) si aggiunge il selettore esatto
   che il plugin usa.
   ============================================================ */

.laboutique-account-corpo {
        background: var(--wp--preset--color--base);
}

/* Nel resto del sito le sezioni respirano molto; qui sotto c'è un modulo,
   quindi si sta più stretti. */
.laboutique-page > .laboutique-account-corpo {
        padding-top: clamp(2.5rem, 5vw, 4.5rem);
        padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* ---------- Avvisi ---------- */

.woocommerce-account .laboutique-account .woocommerce-notices-wrapper:empty {
        display: none;
}

.woocommerce-account .laboutique-account :where(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 var(--wp--preset--spacing--30);
        padding: 0.9rem 1.1rem;
        border: 1px solid var(--wp--preset--color--border);
        border-left: 3px solid var(--wp--preset--color--accent);
        border-radius: 3px;
        background: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--contrast);
        font-size: 0.9375rem;
        list-style: none;
}

.woocommerce-account .laboutique-account .woocommerce-message {
        border-left-color: #2E7D32;
}

.woocommerce-account .laboutique-account .woocommerce-error {
        border-left-color: var(--wp--preset--color--primary);
}

.woocommerce-account .laboutique-account :where(.woocommerce-message, .woocommerce-error, .woocommerce-info) .button {
        margin-left: auto;
}

/* Gli avvisi moderni di WooCommerce non usano più .woocommerce-info ma il
   banner dei blocchi, vestito da wc-blocks.css con la sua palette: fondo
   azzurro #f4f8ff e bordo #007cba, che su questo sito stonano. È quello che
   si vede oggi su Ordini e Download quando non c'è ancora nulla da mostrare,
   quindi vale la pena riportarlo in riga. */

.woocommerce-account .laboutique-account .wc-block-components-notice-banner {
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 var(--wp--preset--spacing--30);
        padding: 0.9rem 1.1rem;
        border: 1px solid var(--wp--preset--color--border);
        border-left: 3px solid var(--wp--preset--color--accent);
        border-radius: 3px;
        background-color: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--contrast);
        font-size: 0.9375rem;
}

.woocommerce-account .laboutique-account .wc-block-components-notice-banner.is-info {
        border-color: var(--wp--preset--color--border);
        border-left-color: var(--wp--preset--color--accent);
        background-color: var(--wp--preset--color--surface);
}

.woocommerce-account .laboutique-account .wc-block-components-notice-banner.is-error {
        border-left-color: var(--wp--preset--color--primary);
}

.woocommerce-account .laboutique-account .wc-block-components-notice-banner.is-success {
        border-left-color: #2E7D32;
}

/* Il pallino dell'icona segue il bordo invece del blu del plugin. */
.woocommerce-account .laboutique-account .wc-block-components-notice-banner.is-info > svg {
        background-color: var(--wp--preset--color--accent);
}

.woocommerce-account .laboutique-account .wc-block-components-notice-banner.is-error > svg {
        background-color: var(--wp--preset--color--primary);
}

.woocommerce-account .laboutique-account .wc-block-components-notice-banner > svg {
        width: 1.5rem;
        height: 1.5rem;
        align-self: center;
}

/* ---------- Accesso e recupero password ----------
   Sono le schermate di chi non è ancora entrato: prima impressione
   dell'area riservata, quindi scheda centrata e non fascia piena. */

.woocommerce-account .laboutique-account :where(.woocommerce-form-login, .woocommerce-ResetPassword, .woocommerce-form-register) {
        width: min(100%, 30rem);
        margin-inline: auto;
        padding: clamp(1.5rem, 3vw, 2.25rem);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        background: var(--wp--preset--color--base);
}

/* Il titolo "Accedi" lo stampa WooCommerce fuori dal form. */
.woocommerce-account .laboutique-account .woocommerce > h2 {
        width: min(100%, 30rem);
        margin: 0 auto var(--wp--preset--spacing--20);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        line-height: 1.1;
        text-align: center;
}

.woocommerce-account .laboutique-account .woocommerce-ResetPassword > p:first-of-type {
        margin-top: 0;
        color: var(--wp--preset--color--muted);
        font-size: 0.9375rem;
        line-height: 1.6;
}

/* ---------- Campi ---------- */

.woocommerce-account .laboutique-account .form-row,
.woocommerce-account .laboutique-account .woocommerce-form-row {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin: 0 0 1rem;
        padding: 0;
}

.woocommerce-account .laboutique-account .form-row label,
.woocommerce-account .laboutique-account .woocommerce-form-row label {
        margin-bottom: 0;
        color: var(--wp--preset--color--contrast);
        font-size: 0.875rem;
        font-weight: 600;
}

.woocommerce-account .laboutique-account .required {
        border: 0;
        color: var(--wp--preset--color--primary);
        text-decoration: none;
}

/* `input.input-text` e non il solo elemento: woocommerce-blocktheme usa
   proprio questa forma per imporre il suo padding. */
.woocommerce-account .laboutique-account .form-row input.input-text,
.woocommerce-account .laboutique-account .form-row select,
.woocommerce-account .laboutique-account .form-row textarea.input-text,
.woocommerce-account .laboutique-account :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], select, textarea) {
        width: 100%;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--contrast);
        font-family: var(--wp--preset--font-family--body);
        font-size: 1rem;
        line-height: 1.4;
}

.woocommerce-account .laboutique-account :where(input, select, textarea):focus-visible {
        outline: 2px solid var(--wp--preset--color--primary);
        outline-offset: 1px;
        border-color: var(--wp--preset--color--primary);
}

/* "Ricordami" e il pulsante stanno nella stessa riga: senza questo il
   pulsante finiva in linea con la casella. */
.woocommerce-account .laboutique-account .woocommerce-form-login__rememberme {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 0 1.1rem;
        font-weight: 500;
}

.woocommerce-account .laboutique-account .woocommerce-form__input-checkbox {
        width: auto;
        margin: 0;
        padding: 0;
        accent-color: var(--wp--preset--color--primary);
}

/* ---------- Pulsanti ---------- */

.woocommerce-account .laboutique-account :where(button[type="submit"], .woocommerce-button, .woocommerce-Button, a.button, button.button, input.button) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.9rem 1.75rem;
        border: 1.5px solid var(--wp--preset--color--primary);
        border-radius: 3px;
        background: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--small);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .laboutique-account :where(button[type="submit"], .woocommerce-button, .woocommerce-Button, a.button, button.button, input.button):hover,
.woocommerce-account .laboutique-account :where(button[type="submit"], .woocommerce-button, .woocommerce-Button, a.button, button.button, input.button):focus-visible {
        background: var(--wp--preset--color--primary-dark);
        border-color: var(--wp--preset--color--primary-dark);
        color: var(--wp--preset--color--base);
}

.woocommerce-account .laboutique-account .woocommerce-form-login__submit,
.woocommerce-account .laboutique-account .woocommerce-ResetPassword .button {
        width: 100%;
}

.woocommerce-account .laboutique-account .woocommerce-LostPassword {
        margin: 1.1rem 0 0;
        font-size: 0.875rem;
        text-align: center;
}

/* ---------- Impianto a due colonne dell'area loggata ---------- */

.woocommerce-account .laboutique-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        display: grid;
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        grid-template-areas: "nav content";
        gap: clamp(1.5rem, 3.5vw, 3rem);
        align-items: start;
        /* blocktheme fissa 1000px su main .woocommerce: qui serve tutta la
           colonna, il limite di lettura lo dà già lo shell. */
        max-width: none;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation {
        grid-area: nav;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-content {
        grid-area: content;
        min-width: 0;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation ul {
        margin: 0;
        padding: 0;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        list-style: none;
        overflow: hidden;
}

/* blocktheme mette .35em di padding sulle voci: qui lo spazio lo dà il
   link, così l'area cliccabile copre tutta la riga. */
.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li {
        margin: 0;
        padding: 0;
        list-style: none;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li + li {
        border-top: 1px solid var(--wp--preset--color--border);
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li a {
        display: block;
        padding: 0.8rem 1.1rem;
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--contrast);
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li a:focus-visible {
        background: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--primary);
        text-decoration: none;
}

/* La voce attiva si legge dal fondo pieno: la sottolineatura di blocktheme
   qui è rumore. */
.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li.is-active a {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
        text-decoration: none;
}

/* L'uscita è un'azione, non una destinazione. */
.woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
        color: var(--wp--preset--color--muted);
        font-weight: 500;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-content > :first-child {
        margin-top: 0;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-content :where(h2, h3) {
        margin: 0 0 var(--wp--preset--spacing--20);
        font-size: clamp(1.3rem, 2.4vw, 1.75rem);
        line-height: 1.15;
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-content :where(h2, h3):not(:first-child) {
        margin-top: var(--wp--preset--spacing--40);
}

.woocommerce-account .laboutique-account .woocommerce-MyAccount-content p {
        line-height: 1.7;
}

/* ---------- Tabelle: ordini, download, dettaglio ---------- */

.woocommerce-account .laboutique-account .shop_table,
.woocommerce-account .laboutique-account .woocommerce-orders-table {
        width: 100%;
        margin: 0 0 var(--wp--preset--spacing--30);
        border: 1px solid var(--wp--preset--color--border);
        border-collapse: collapse;
        font-size: 0.9375rem;
}

.woocommerce-account .laboutique-account .shop_table th,
.woocommerce-account .laboutique-account .woocommerce-orders-table th {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--wp--preset--color--border);
        background: var(--wp--preset--color--surface);
        color: var(--wp--preset--color--contrast);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
}

.woocommerce-account .laboutique-account .shop_table td,
.woocommerce-account .laboutique-account .woocommerce-orders-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--wp--preset--color--border);
        vertical-align: middle;
}

.woocommerce-account .laboutique-account .shop_table tr:last-child td,
.woocommerce-account .laboutique-account .woocommerce-orders-table tr:last-child td {
        border-bottom: 0;
}

.woocommerce-account .laboutique-account .woocommerce-orders-table__cell-order-actions {
        text-align: right;
        white-space: nowrap;
}

/* blocktheme rende il pulsante un blocco con 1em di margine sotto, e la
   riga cresce di conseguenza. */
.woocommerce-account .laboutique-account .woocommerce-orders-table__cell-order-actions a {
        display: inline-flex;
        margin: 0 0 0 0.4rem;
        padding: 0.45rem 0.9rem;
        background: transparent;
        color: var(--wp--preset--color--primary);
        font-size: 0.75rem;
}

.woocommerce-account .laboutique-account .woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-account .laboutique-account .woocommerce-orders-table__cell-order-actions a:focus-visible {
        background: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--base);
}

/* ---------- Indirizzi ---------- */

.woocommerce-account .laboutique-account .woocommerce-Addresses {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: clamp(1rem, 2.5vw, 1.75rem);
        margin-top: var(--wp--preset--spacing--20);
}

.woocommerce-account .laboutique-account .woocommerce-Address {
        padding: clamp(1.1rem, 2.2vw, 1.6rem);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
        background: var(--wp--preset--color--base);
}

/* Quando un indirizzo non è ancora stato inserito il link non dice
   "Modifica" ma "Aggiungi Indirizzo di fatturazione": va lasciato andare a
   capo invece di schiacciare il titolo. */
.woocommerce-account .laboutique-account .woocommerce-Address-title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.35rem 1rem;
        margin-bottom: 0.9rem;
}

.woocommerce-account .laboutique-account .woocommerce-Address-title :where(h2, h3) {
        flex: 1 1 auto;
}

.woocommerce-account .laboutique-account .woocommerce-Address-title :where(h2, h3) {
        margin: 0;
        font-size: 1.15rem;
}

/* blocktheme rende "Modifica" un blocco con 1em sotto: accanto al titolo
   deve restare un link in linea. */
.woocommerce-account .laboutique-account .addresses .title .edit,
.woocommerce-account .laboutique-account .woocommerce-Address-title .edit {
        display: inline;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--wp--preset--color--primary);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-decoration: none;
        text-transform: uppercase;
}

.woocommerce-account .laboutique-account .addresses .title .edit:hover,
.woocommerce-account .laboutique-account .woocommerce-Address-title .edit:hover,
.woocommerce-account .laboutique-account .addresses .title .edit:focus-visible {
        background: none;
        color: var(--wp--preset--color--primary-dark);
        text-decoration: underline;
}

.woocommerce-account .laboutique-account .woocommerce-Address address {
        color: var(--wp--preset--color--muted);
        font-style: normal;
        line-height: 1.7;
}

/* ---------- Dettagli account ---------- */

.woocommerce-account .laboutique-account .woocommerce-EditAccountForm fieldset {
        margin: var(--wp--preset--spacing--30) 0 0;
        padding: clamp(1.1rem, 2.2vw, 1.6rem);
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 3px;
}

.woocommerce-account .laboutique-account .woocommerce-EditAccountForm legend {
        padding: 0 0.5rem;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
}

.woocommerce-account .laboutique-account .woocommerce-EditAccountForm em {
        display: block;
        margin-top: 0.3rem;
        color: var(--wp--preset--color--muted);
        font-size: 0.8125rem;
        font-style: normal;
}

/* Il campo password ha accanto il pulsante "mostra password", che WooCommerce
   si aspetta posizionato dentro il campo: senza il suo CSS restava un
   rettangolino grigio sotto ogni riga. L'occhio è disegnato qui perché
   l'icona arrivava dal foglio rimosso. */

.woocommerce-account .laboutique-account .password-input {
        position: relative;
        display: block;
}

.woocommerce-account .laboutique-account .password-input input {
        padding-right: 2.9rem;
}

.woocommerce-account .laboutique-account .show-password-input {
        position: absolute;
        top: 50%;
        right: 0.55rem;
        width: 2rem;
        height: 2rem;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 3px;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D191A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12S5.8 5.6 12 5.6 21.8 12 21.8 12 18.2 18.4 12 18.4 2.2 12 2.2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.15rem;
        opacity: 0.5;
        cursor: pointer;
}

.woocommerce-account .laboutique-account .show-password-input:hover,
.woocommerce-account .laboutique-account .show-password-input:focus-visible,
.woocommerce-account .laboutique-account .show-password-input.display-password {
        opacity: 1;
}

/* Nome e cognome affiancati quando c'è spazio.
   In griglia e non con inline-flex: fra le due righe WooCommerce infila dei
   `div.clear`, e la somma di larghezze, margini e spazi bianchi fra elementi
   in linea mandava il cognome a capo. */
@media (min-width: 700px) {
        .woocommerce-account .laboutique-account .woocommerce-EditAccountForm {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 1rem;
        }

        .woocommerce-account .laboutique-account .woocommerce-EditAccountForm > * {
                grid-column: 1 / -1;
        }

        .woocommerce-account .laboutique-account .woocommerce-EditAccountForm > .form-row-first {
                grid-column: 1 / 2;
        }

        .woocommerce-account .laboutique-account .woocommerce-EditAccountForm > .form-row-last {
                grid-column: 2 / 3;
        }

        /* Servivano a chiudere i float del vecchio layout: in griglia
           lascerebbero solo righe vuote. */
        .woocommerce-account .laboutique-account .woocommerce-EditAccountForm > .clear {
                display: none;
        }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
        .woocommerce-account .laboutique-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                        "nav"
                        "content";
        }

        /* Il menu diventa una striscia orizzontale scorrevole. */
        .woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation ul {
                display: flex;
                overflow-x: auto;
                scrollbar-width: none;
        }

        .woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
                display: none;
        }

        .woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li + li {
                border-top: 0;
                border-left: 1px solid var(--wp--preset--color--border);
        }

        .woocommerce-account .laboutique-account .woocommerce-MyAccount-navigation li a {
                white-space: nowrap;
        }
}

/* Sotto i 600px le colonne non ci stanno: WooCommerce marca ogni cella con
   data-title, quindi si passa a righe etichettate. */
@media (max-width: 600px) {
        .woocommerce-account .laboutique-account .shop_table thead,
        .woocommerce-account .laboutique-account .woocommerce-orders-table thead {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                overflow: hidden;
                clip-path: inset(50%);
        }

        .woocommerce-account .laboutique-account .shop_table tr,
        .woocommerce-account .laboutique-account .woocommerce-orders-table tr {
                display: block;
                padding: 0.5rem 0;
                border-bottom: 1px solid var(--wp--preset--color--border);
        }

        .woocommerce-account .laboutique-account .shop_table tr:last-child,
        .woocommerce-account .laboutique-account .woocommerce-orders-table tr:last-child {
                border-bottom: 0;
        }

        .woocommerce-account .laboutique-account .shop_table td,
        .woocommerce-account .laboutique-account .woocommerce-orders-table td {
                display: flex;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.4rem 1rem;
                border-bottom: 0;
                text-align: right;
        }

        .woocommerce-account .laboutique-account .shop_table td::before,
        .woocommerce-account .laboutique-account .woocommerce-orders-table td::before {
                content: attr(data-title);
                color: var(--wp--preset--color--muted);
                font-size: 0.75rem;
                font-weight: 700;
                letter-spacing: 0.06em;
                text-align: left;
                text-transform: uppercase;
        }

        /* Con `td` nel selettore: la regola generica sulle celle qui sopra ha
           un elemento in più e vincerebbe, lasciando il pulsante a sinistra. */
        .woocommerce-account .laboutique-account .shop_table td.woocommerce-orders-table__cell-order-actions,
        .woocommerce-account .laboutique-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
                justify-content: flex-end;
        }

        .woocommerce-account .laboutique-account .woocommerce-orders-table__cell-order-actions::before {
                content: none;
        }
}