/*
Theme Name: Hello Elementor Child — GR Farma
Description: Child theme per il redesign GR Farma (approccio-9) — design token, tipografia Inter e fix di allineamento al mockup.
Template: hello-elementor
Version: 1.8.26
Author: Luca Rimediotti / Snyffo
Text Domain: hello-grfarma-child
*/

/* =========================================================
   DESIGN TOKEN — palette approccio-9
   ========================================================= */
:root {
	--grf-ink: #0A0A0A;
	--grf-surface: #FAFAFA;
	--grf-mint: #0D9488;
	--grf-mintsoft: #CCFBF1;
	--grf-torello: #DC2626;
	--grf-aphrodia: #9F1239;
	--grf-hair: #E5E5E5;
}

/* =========================================================
   TIPOGRAFIA — Inter ovunque, titoli extrabold
   ========================================================= */
body,
button,
input,
select,
textarea {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--grf-ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* =========================================================
   BOTTONI — sempre a pillola, peso 600
   ========================================================= */
.elementor-button {
	border-radius: 9999px !important;
	font-weight: 600;
}

/* =========================================================
   HEADER — navbar compatta, mini-cart solo icona
   ========================================================= */
/* Mini-cart WooCommerce: nasconde il subtotale, tiene icona + badge */
.elementor-menu-cart__toggle .elementor-button-text {
	display: none;
}
.elementor-menu-cart__toggle .elementor-button-icon {
	margin: 0;
}
.elementor-menu-cart__toggle.elementor-button {
	background: transparent;
	border: none;
	padding: 8px;
	color: var(--grf-ink);
}
/* Mini-cart come DROPDOWN su hover (non side-cart): il container Elementor
   da overlay fixed full-height diventa un pannello sotto l'icona. La visibilità
   la gestisce il JS (classe .grf-cart-hover sul wrapper); il click sull'icona
   porta alla pagina /carrello/. */
.elementor-menu-cart__toggle_wrapper,
.elementor-menu-cart__wrapper {
	position: relative;
}
.elementor-menu-cart__container {
	position: absolute !important;
	top: calc(100% + 12px) !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	width: 360px !important;
	max-width: 88vw !important;
	height: auto !important;
	max-height: 78vh !important;
	overflow: visible !important;
	background: transparent !important;
	transform: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	z-index: 9999 !important;
	display: none !important;
}
.elementor-menu-cart__wrapper.grf-cart-hover .elementor-menu-cart__container {
	display: block !important;
}
.elementor-menu-cart__main {
	position: relative !important;
	transform: none !important;
	opacity: 1 !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	max-height: 78vh !important;
	overflow-y: auto !important;
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(10, 10, 10, 0.12);
	padding: 20px !important;
}
/* La X di chiusura del side-cart non serve nel dropdown */
.elementor-menu-cart__close-button {
	display: none !important;
}
/* Bottoni mini-cart coerenti col brand: "Visualizza carrello" outline, "Pagamento" mint pieno */
.elementor-menu-cart__container .elementor-button--view-cart {
	background: #fff !important;
	color: var(--grf-mint) !important;
	border: 1px solid var(--grf-mint) !important;
	border-radius: 9999px !important;
}
.elementor-menu-cart__container .elementor-button--checkout {
	background: var(--grf-mint) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
}
.elementor-menu-cart__container .elementor-button--checkout:hover {
	background: #0B7C72 !important;
}
/* La pillola col nome (aggiunta via JS da loggati) è più larga dell'icona
   originale: il widget HTML che la contiene deve adattarsi, altrimenti la
   pillola sborda e si sovrappone al carrello. */
.elementor-widget-html:has( a.grf-account-pill-link ),
.elementor-widget-html:has( a[aria-label="Area personale"] ) {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}

/* =========================================================
   FOOTER — link neutri (niente rosso WooCommerce)
   ========================================================= */
.elementor-location-footer a {
	color: inherit;
	text-decoration: none;
}
.elementor-location-footer a:hover {
	color: var(--grf-mint);
}

/* =========================================================
   INFOGRAFICHE SVG — responsive dentro i widget HTML
   ========================================================= */
.elementor-widget-html svg {
	max-width: 100%;
	height: auto;
}
.elementor-widget-html .infographic svg,
.elementor-widget-html > .elementor-widget-container > div > svg {
	width: 100%;
}

/* =========================================================
   ACCORDION FAQ — card bianche, titoli ink, icona mint
   ========================================================= */
.elementor-accordion .elementor-accordion-item {
	background: #fff;
	border: 1px solid var(--grf-hair) !important;
	border-radius: 14px;
	margin-bottom: 10px;
	overflow: hidden;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title a {
	color: var(--grf-ink) !important;
	font-weight: 600;
}
.elementor-accordion .elementor-accordion-icon {
	color: var(--grf-mint) !important;
}

/* =========================================================
   FORM (Elementor Pro) — input arrotondati, focus mint
   ========================================================= */
.elementor-field-textual {
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	background: #fff;
}
.elementor-field-textual:focus {
	border-color: var(--grf-mint);
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
	outline: none;
}

/* =========================================================
   IMMAGINI — mai overflow dalle card
   ========================================================= */
.elementor-widget-image img {
	max-width: 100%;
	height: auto;
}

/* =========================================================
   CARD OFFERTE — nessun ring hover: il mockup non lo prevede
   (hover solo sui bottoni). Ring rimosso: colpiva anche i wrapper.
   ========================================================= */

/* =========================================================
   FAQ — accordion <details> nativi (.grf-faq)
   ========================================================= */
.grf-faq details {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 14px;
	margin-bottom: 10px;
	overflow: hidden;
}
.grf-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.grf-faq summary::-webkit-details-marker { display: none; }
.grf-faq .grf-faq-icon {
	color: var(--grf-mint);
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
	transition: transform .2s ease;
}
.grf-faq details[open] .grf-faq-icon { transform: rotate(45deg); }
.grf-faq .grf-faq-body {
	padding: 0 20px 20px;
	color: #525252;
	font-size: 15px;
	line-height: 1.65;
}

/* =========================================================
   Badge carrello header — mint come il mockup
   ========================================================= */
.elementor-menu-cart__toggle .elementor-button-icon [data-counter]::before,
.elementor-menu-cart__badge {
	background-color: var(--grf-mint) !important;
	color: #fff !important;
}

/* =========================================================
   Dicono di noi — card testimonianze con bordo tratteggiato
   ========================================================= */
.page-id-2966 [data-elementor-type="wp-page"] .e-con-full.e-child {
	border-style: dashed;
}

/* =========================================================
   Grazie — step numerati con badge circolare mint
   ========================================================= */
.page-id-24 ol {
	list-style: none;
	counter-reset: grf-step;
	padding-left: 0 !important;
}
.page-id-24 ol li {
	counter-increment: grf-step;
	position: relative;
	padding-left: 32px;
	margin-bottom: 10px;
}
.page-id-24 ol li::before {
	content: counter(grf-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: var(--grf-mintsoft);
	color: var(--grf-mint);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================
   VSL Home — player 16:9 + tab switch + overlay audio
   ========================================================= */
.grf-vsl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.grf-vsl-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 9999px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: all .2s ease;
	border: 2px solid transparent;
}
.grf-vsl-torello {
	background: #fff;
	color: var(--grf-torello);
	border-color: var(--grf-torello);
}
.grf-vsl-torello.is-active {
	background: var(--grf-torello);
	color: #fff;
}
.grf-vsl-aphrodia {
	background: #fff;
	color: var(--grf-aphrodia);
	border-color: var(--grf-aphrodia);
}
.grf-vsl-aphrodia.is-active {
	background: var(--grf-aphrodia);
	color: #fff;
}
.grf-vsl-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--grf-hair);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
	background: #000;
}
.grf-vsl-player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
/* Modalità immagine (VSL in attesa dei video definitivi): la scatola prodotto
   è contenuta nel riquadro 16:9 su sfondo chiaro invece del video nero. */
.grf-vsl-player--image {
	background: var(--grf-surface);
}
.grf-vsl-img {
	width: 100% !important;
	height: 100% !important;   /* batte img{height:auto} del tema: senza, l'immagine
	                              sborda dal box 16:9 e la scatola viene tagliata */
	object-fit: contain;       /* scatola SEMPRE interamente visibile, centrata */
	padding: 16px;
	display: block;
}
.grf-vsl-sound {
	position: absolute;
	inset: 0;
	z-index: 5;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(72%, 560px) auto;
	transition: transform .25s ease;
}
.grf-vsl-sound:hover {
	transform: scale(1.04);
}

/* ===== Sezione "Hai tre strade" (Home) ===== */
.grf-strade {
	border-top: 1px solid var(--grf-hair);
	border-bottom: 1px solid var(--grf-hair);
}
/* I widget HTML sono flex item che fanno shrink-to-fit nei container
   con align-items centrato: forza larghezza piena (timeline garanzia,
   SVG tre strade, sigilli, ecc.). */
.e-con .elementor-widget-html {
	width: 100%;
}
.grf-strade-svg {
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
}
.grf-strade-svg svg {
	width: 100%;
	height: auto;
	display: block;
}
.grf-strade-svg svg text {
	font-family: 'Inter', sans-serif;
}
.grf-strade-cards {
	max-width: 896px;
	margin-left: auto;
	margin-right: auto;
}

/* Badge pillola "Massima continuità": il widget non deve creare
   positioning context, così lo span absolute si ancora alla card
   e cavalca il bordo superiore come nel mockup (-top-3). */
.elementor-element-3f9b9e03,
.elementor-element-696c5e5c,
.elementor-element-45dbcb76,
.elementor-element-7b05327e {
	position: static !important;
}

/* Infografica "Tre approcci" (Home) */
.grf-approcci-svg {
	width: 100%;
	max-width: 976px;
	margin: 0 auto;
}
.grf-approcci-svg svg {
	width: 100%;
	height: auto;
	display: block;
}
.grf-approcci-svg svg text {
	font-family: 'Inter', sans-serif;
}

/* ===== Trust badge (Home) — griglia 3×2 di card come il mockup ===== */
.grf-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1152px;
	margin: 0 auto;
}
@media (max-width: 1023px) {
	.grf-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
	.grf-trust { grid-template-columns: 1fr; }
}
.grf-trust-card {
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	background: var(--grf-surface);
	padding: 20px;
}
.grf-trust-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.grf-trust-head svg {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
}
.grf-trust-title {
	font-weight: 700;
	font-size: 14px;
	margin: 0;
}
.grf-trust-desc {
	margin: 8px 0 0;
	font-size: 14px;
	color: #525252;
	line-height: 1.5;
}

/* ===== Mappa placeholder (Contatti) ===== */
.grf-map {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--grf-hair);
	background-color: #FAFAFA;
	background-image: linear-gradient(#E5E5E5 1px, transparent 1px), linear-gradient(90deg, #E5E5E5 1px, transparent 1px);
	background-size: 38px 38px;
}
.grf-map-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
}

/* ===== Link con freccia (hover: la freccia trasla, mockup group-hover) ===== */
.grf-arrow-link,
.grf-maps-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.grf-maps-link {
	color: var(--grf-mint);
}
.grf-maps-link:hover {
	text-decoration: underline;
}
.grf-arrow-link {
	transition: gap .2s ease;
}
.grf-arrow-link:hover {
	gap: 12px;
}

/* ===== Card "Quale fa per te" — hover border brand come il mockup ===== */
.elementor-element-62ce8bab,
.elementor-element-36f4c095 {
	transition: border-color .2s ease;
}
.elementor-element-62ce8bab:hover {
	border-color: var(--grf-torello) !important;
}
.elementor-element-36f4c095:hover {
	border-color: var(--grf-aphrodia) !important;
}

/* ===== Header "Attenzione!" (Home) — icona+titolo inline come il mockup ===== */
.grf-att-head {
	display: flex;
	align-items: center;
	gap: 16px;
}
.grf-att-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #FEF3C7;
	color: #D97706;
}
.grf-att-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

/* ===== Header mobile — una sola riga: logo · icone · hamburger ===== */
@media (max-width: 767px) {
	.elementor-element-3fcbf23d {
		flex-wrap: nowrap !important;
	}
	.elementor-element-afd14ac {
		order: 1;
	}
	.elementor-element-708fa866 {
		order: 2;
		width: auto !important;
		margin-left: auto;
		flex-shrink: 0;
	}
	.elementor-element-76c767d8 {
		order: 3;
		width: auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0;
	}
}

/* ===== FIX 3 — Header mobile (≤767px): account VISIBILE accanto al carrello =====
   Il widget account (.elementor-element-5ad1b5e) era nascosto (display:none, ex
   "Hide on mobile" del widget Elementor): a 390px l'icona/pillola account spariva.
   Lo forziamo visibile e lo teniamo in riga col carrello, centrato verticalmente. */
@media (max-width: 767px) {
	.elementor-element-708fa866 {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
	}
	/* Account di nuovo visibile (sovrascrive l'Hide-on-mobile del widget) */
	.elementor-element-5ad1b5e {
		display: block !important;
	}
	/* Il link/disco account si centra in riga col carrello */
	.elementor-element-5ad1b5e a[aria-label="Area personale"],
	.elementor-element-5ad1b5e a.grf-account-pill-link {
		display: inline-flex !important;
	}
}

/* ===== Header sticky come il mockup (sticky top-0 z-50 bg-white/95 blur) ===== */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--grf-hair);
}
body.admin-bar .elementor-location-header {
	top: 32px;
}
/* Navbar: contenuto centrato con respiro ai bordi come il mockup (max-w-6xl).
   Il container header era full-width 1440px → logo e icone quasi sul bordo. */
.elementor-element-72f11025 {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Riga header (logo · menu · icone): elementi centrati verticalmente su tutti
   i breakpoint, così logo, hamburger e icone restano allineati. Serve anche
   come positioning context per il dropdown full-width del menu mobile. */
.elementor-element-3fcbf23d {
	align-items: center !important;
	position: relative;
}

/* ===== FIX 2 — Tablet/Mobile (≤1024px): respiro ai bordi =====
   In burger mode le icone account/carrello finivano a ~22px dal bordo destro
   (col badge del carrello che sporgeva ancora di più → quasi attaccato).
   Portiamo il padding laterale del container a 24px e azzeriamo il padding
   interno della riga e del cluster icone, così il cerchio del carrello ha un
   margine pieno e netto dal bordo destro. */
@media (max-width: 1024px) {
	.elementor-element-72f11025 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	/* La riga azzera il padding orizzontale extra; il cluster icone tiene un
	   piccolo padding destro così il cerchio del carrello (e il suo badge che
	   sporge) resta ben staccato dal bordo, non a filo. */
	.elementor-element-3fcbf23d {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Il cluster icone torna a padding destro standard (il respiro lo dà il
	   container header da 24px). */
	.elementor-element-708fa866 {
		padding-right: 0 !important;
	}
	/* Il widget carrello (4c003a81) era largo solo ~8px ma contiene un cerchio
	   da 40px: il cerchio sbordava a destra, finendo a filo bordo pagina.
	   Diamo al widget la larghezza reale del cerchio così il layout flex lo
	   contiene e lo stacca correttamente dal bordo. */
	.elementor-element-4c003a81 {
		width: 40px !important;
		flex: 0 0 40px !important;
		display: flex;
		justify-content: center;
	}
}

/* ===== FIX 4 — Menu hamburger come dropdown FULL-WIDTH sotto la navbar =====
   Il widget nav (.elementor-element-76c767d8) è un flex item nella riga: il suo
   dropdown nativo si apriva fluttuante a destra, spingeva giù logo/icone e non
   era allineato. Lo ancoriamo alla riga header (position:relative sopra) e lo
   stendiamo a tutta larghezza appena sotto l'header, come pannello a comparsa.
   Vale in burger mode (tablet ≤1024px e mobile). */
@media (max-width: 1024px) {
	/* il widget nav non deve occupare spazio orizzontale: solo l'hamburger */
	.elementor-element-76c767d8 {
		position: static !important;
	}
	.elementor-location-header .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 60;
		background: #fff;
		border-top: 1px solid var(--grf-hair);
		box-shadow: 0 12px 24px rgba(10, 10, 10, 0.08);
	}
	/* Voci a tutta larghezza, ben separate, tap target ampi */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
		padding: 16px 24px !important;
		border-bottom: 1px solid var(--grf-hair);
	}
	/* Voce attiva e hover del dropdown: sfondo verde GR Farma (mint), testo bianco
	   (di default Elementor usa un grigio scuro). */
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.highlighted,
	.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus {
		background-color: var(--grf-mint) !important;
		color: #fff !important;
	}
}
/* Menu nav: barra attiva/hover mint come il mockup (Elementor usa il verde #61CE70). */
.elementor-nav-menu .elementor-item::before,
.elementor-nav-menu .elementor-item::after {
	background-color: var(--grf-mint) !important;
}

/* ===== FIX 1 — Desktop (≥1024px): 9 voci su UNA riga =====
   Il menu inline (.elementor-nav-menu--main) andava a capo su 2 righe perché
   ogni voce aveva 20px di padding orizzontale (40px tra una voce e l'altra).
   Riduciamo il padding laterale e forziamo no-wrap così le 9 voci stanno su
   una riga sola fino a 1280px senza wrappare. NON tocchiamo il menu dropdown
   (mobile/tablet), che mantiene padding ampi per tap target comodi. */
@media (min-width: 1024px) {
	.elementor-location-header .elementor-nav-menu--main {
		white-space: nowrap;
	}
	.elementor-location-header .elementor-nav-menu--main .elementor-item {
		padding-left: 11px !important;
		padding-right: 11px !important;
		font-size: 14px;
		white-space: nowrap;
	}
}
/* Banda desktop stretta (1024–1199px): con account-pill + carrello lo spazio
   per il menu è minore e "Sala Stampa" wrappava ancora. Stringiamo padding e
   font-size delle voci solo in questa banda così le 9 voci restano su 1 riga
   fino al breakpoint burger (≤1023px). Sopra i 1200px torna tutto pieno. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.elementor-location-header .elementor-nav-menu--main .elementor-item {
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 12.5px;
	}
	/* Il widget nav è centrato e non reclamava abbastanza spazio: gli diamo la
	   priorità di crescita così usa tutta la larghezza tra logo e icone. */
	.elementor-element-76c767d8 {
		flex-grow: 1 !important;
	}
}

/* ===== Header account: disco mint da sloggato, pillola da loggato (mockup) =====
   Sloggato → icona persona dentro disco mintsoft. Loggato → .grf-account-pill-link
   (aggiunta via JS) trasforma il link nella pillola col nome. */
body:not(.logged-in) a[aria-label="Area personale"] {
	width: 40px;
	height: 40px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: var(--grf-mintsoft);
	color: var(--grf-mint) !important;
	border-radius: 9999px;
	transition: background 0.2s ease, color 0.2s ease;
}
/* Hover come il mockup: il disco si riempie di mint, icona bianca. */
body:not(.logged-in) a[aria-label="Area personale"]:hover {
	background: var(--grf-mint);
	color: #fff !important;
}

/* ===== Header carrello: cerchio bordato bianco (mockup), badge mint sporgente ===== */
a.elementor-menu-cart__toggle_button {
	position: relative;
	width: 40px;
	height: 40px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--grf-hair) !important;
	border-radius: 9999px !important;
	box-shadow: none !important;
	color: var(--grf-ink) !important;
}
a.elementor-menu-cart__toggle_button:hover {
	border-color: var(--grf-mint) !important;
}
/* Account e carrello più vicini nell'header (mockup: icone ravvicinate). */
.elementor-element-708fa866 {
	gap: 4px !important;
}
.elementor-menu-cart__toggle_button .elementor-button-icon-qty,
.elementor-menu-cart__toggle_button [data-counter]::before {
	background: var(--grf-mint) !important;
	color: #fff !important;
}
/* Badge ancorato al cerchio (il toggle è position:relative): sporge dall'angolo. */
.elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	top: -4px !important;
	right: -4px !important;
	line-height: 16px !important;
}
/* Icona Elementor (cart-light) via → SVG "shopping cart" del mockup come background.
   L'icona resta position:static così il badge si ancora al cerchio, non a lei. */
.elementor-menu-cart__toggle_button .elementor-button-icon svg.e-eicon-cart-light {
	display: none;
}
.elementor-menu-cart__toggle_button .elementor-button-icon {
	position: static;
	display: inline-block;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23404040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>');
}
.elementor-menu-cart__toggle_button:hover .elementor-button-icon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%230D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>');
}

/* ===== Card offerte: immagini edge-to-edge come il mockup (-mx-6) ===== */
.grf-offers .e-con.e-child .elementor-widget-image {
	margin-left: -24px;
	margin-right: -24px;
	width: calc(100% + 48px) !important;
	max-width: none;
}
.grf-offers .e-con.e-child .elementor-widget-image img {
	width: 100%;
	max-width: none;
}

/* Pillole assolute dentro text-editor: il widget non crea positioning context */
.grf-pill-abs-w {
	position: static !important;
}

/* ===== Avatar CEO (Home) — cerchio 128px mintsoft come il mockup ===== */
.grf-ceo-avatar img {
	width: 128px;
	height: 128px;
	border-radius: 9999px;
	object-fit: contain;
	object-position: bottom;
	padding-top: 16px;
	background: var(--grf-mintsoft);
	border: 1px solid var(--grf-hair);
}

/* ===== Foto CEO (Chi Siamo) — quadrato 224px rounded-2xl ===== */
.grf-cs-avatar img {
	width: 224px;
	height: 224px;
	border-radius: 16px;
	object-fit: contain;
	object-position: bottom;
	background: var(--grf-mintsoft);
	border: 1px solid var(--grf-hair);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ===== Box precisazione (Chi Siamo) — card contenuta max-w-3xl ===== */
.grf-precisazione {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
}

/* ===== Icone sintomi (Home) — quadrato mintsoft con stroke mint ===== */
.grf-sym-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--grf-mintsoft);
	color: var(--grf-mint);
}

/* Bottoni nelle card offerte: larghezza piena (il widget fa shrink-to-fit) */
.grf-offers .e-con.e-child .elementor-widget-button {
	width: 100%;
}

/* ===== Schede prodotto (Home/Prodotti): bottone full-width, ✓ in alto ===== */
.grf-schede .elementor-widget-button {
	width: 100%;
}
.grf-schede .elementor-icon-list-item {
	align-items: flex-start !important;
}
.grf-schede .elementor-icon-list-icon {
	margin-top: 3px;
}
.grf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
}
.grf-chips span {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	padding: 6px 12px;
	border-radius: 9999px;
}
.grf-chips-torello span {
	color: #DC2626;
	background: #FEF2F2;
	border: 1px solid #FEE2E2;
}
.grf-chips-aphrodia span {
	color: #9F1239;
	background: #FFF1F2;
	border: 1px solid #FFE4E6;
}

/* Icon-list: icone allineate in alto come il mockup (mt-0.5), non centrate */
.elementor-icon-list-item {
	align-items: flex-start !important;
}
.elementor-icon-list-icon {
	margin-top: 3px;
}

/* Chip vantaggi (sezione Attenzione) — pillole bianche bordate */
.grf-vant {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.grf-vant span.grf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--grf-hair);
	font-size: 14px;
	color: #404040;
	padding: 8px 16px;
	border-radius: 9999px;
}
.grf-vant .grf-vcheck {
	color: var(--grf-mint);
	font-weight: 700;
}

/* Bottoni card offerte ancorati al fondo (mockup: mt-auto su flex column) */
.grf-offers .e-con.e-child .elementor-widget-button,
.grf-schede .elementor-widget-button {
	margin-top: auto !important;
	padding-top: 20px;
}

/* Schede prodotto: blocco chips+bottone ancorato al fondo (mockup mt-auto) */
.grf-schede .elementor-widget-html:has(.grf-chips) {
	margin-top: auto;
	padding-top: 16px;
}
.grf-schede .elementor-widget-button {
	margin-top: 0 !important;
	padding-top: 16px;
}

/* ===== Tabelle ingredienti (Torello/Aphròdia) — stile mockup,
   colonne bilanciate per sfruttare lo spazio ===== */
.page-id-2930 table,
.page-id-2934 table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.page-id-2930 table th,
.page-id-2934 table th,
.page-id-2930 table td,
.page-id-2934 table td {
	border: none !important;
	padding: 14px 16px;
	text-align: left;
}
.page-id-2930 table thead th,
.page-id-2934 table thead th {
	background: var(--grf-surface) !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #404040;
	font-weight: 600;
}
.page-id-2930 table tbody td,
.page-id-2934 table tbody td {
	border-top: 1px solid var(--grf-hair) !important;
	background: #fff !important;
}
/* Bilanciamento colonne: solo tabelle a 3 colonne */
.page-id-2930 table:has(th:nth-child(3)) th:nth-child(1),
.page-id-2930 table:has(th:nth-child(3)) td:nth-child(1),
.page-id-2934 table:has(th:nth-child(3)) th:nth-child(1),
.page-id-2934 table:has(th:nth-child(3)) td:nth-child(1) {
	width: 25%;
}
.page-id-2930 table:has(th:nth-child(3)) th:nth-child(2),
.page-id-2930 table:has(th:nth-child(3)) td:nth-child(2),
.page-id-2934 table:has(th:nth-child(3)) th:nth-child(2),
.page-id-2934 table:has(th:nth-child(3)) td:nth-child(2) {
	width: 18%;
	white-space: nowrap;
}
/* Tabella 2 colonne (Cosa contiene — Aphròdia): ingrediente 35% */
.page-id-2934 table:not(:has(th:nth-child(3))) th:nth-child(1),
.page-id-2934 table:not(:has(th:nth-child(3))) td:nth-child(1) {
	width: 35%;
}

/* Elementi ancorati al fondo card (mockup mt-auto), larghezza piena */
.grf-mtauto {
	margin-top: auto !important;
	padding-top: 24px;
	width: 100%;
}

/* Schede prodotto: il body riempie la card (i blocchi mt-auto vanno al fondo) */
.grf-schede .e-con.e-child > .e-con:last-child {
	flex-grow: 1;
}
/* Header card: immagine 112×112 contenuta come il mockup (w-28 h-28) */
.grf-schede .e-con.e-child > .e-con:first-child .elementor-widget-image img {
	width: 112px;
	height: 112px;
	object-fit: contain;
}
.grf-schede .e-con.e-child > .e-con:first-child .elementor-widget-image {
	width: auto;
	flex-shrink: 0;
}

/* ===== Offerte (grf-offers): ritmo verticale mockup
   eyebrow→titolo 8px, titolo→desc 4px, desc→prezzo 12px (gap base 4px) ===== */
.grf-offers .e-con.e-child .elementor-widget-heading + .elementor-widget-heading {
	margin-top: 4px;
}
.grf-offers .e-con.e-child .elementor-widget-text-editor + .elementor-widget-heading {
	margin-top: 8px;
}
/* Pill assoluta (h=0) come primo elemento: l'eyebrow resta in cima */
.grf-offers .e-con.e-child .elementor-widget-text-editor:first-child + .elementor-widget-heading {
	margin-top: 0;
}
.grf-offers .e-con.e-child .elementor-widget-text-editor p {
	margin-bottom: 0;
}

/* Card offerte con immagine scatole: immagini allineate tra le card
   (altezza uniforme + ancoraggio al fondo; l'auto passa dall'immagine,
   il bottone torna in flusso) */
.grf-offers .e-con.e-child .elementor-widget-image {
	margin-top: auto;
	padding-top: 16px; /* respiro minimo prezzo→immagine (mockup mt-4) */
}
.grf-offers .e-con.e-child .elementor-widget-image img {
	height: 240px;
	object-fit: contain;
}
.grf-offers .e-con.e-child:has(.elementor-widget-image) .elementor-widget-button {
	margin-top: 0 !important;
}

/* Suffisso /mese piccolo e grigio come il mockup (text-sm neutral-500) */
.grf-permese {
	font-size: 14px;
	font-weight: 500;
	color: #737373;
}

/* ===== Piani abbonamento (grf-piani, sezione torello): label→prezzo 16px ===== */
.grf-piani .e-con.e-child .elementor-widget-heading + .elementor-widget-heading {
	margin-top: 12px;
}

/* ===== Schede prodotto: lista come il mockup (text-sm, space-y-3, ✓ sottile) ===== */
.grf-schede .elementor-icon-list-items .elementor-icon-list-item {
	padding: 0 !important;
}
.grf-schede .elementor-icon-list-items .elementor-icon-list-item + .elementor-icon-list-item {
	margin-top: 12px;
}
.grf-schede .elementor-icon-list-text {
	font-size: 14px;
	line-height: 1.45;
}
.grf-schede .elementor-icon-list-icon svg {
	display: none;
}
.grf-schede .elementor-icon-list-icon::before {
	content: "✓";
	font-size: 14px;
	line-height: 1.45;
	font-weight: 400;
}
/* Colore ✓ per card: 1ª Torello, 2ª Aphròdia (stessa palette chips) */
.grf-schede .e-con-inner > .e-con-full:nth-child(1) .elementor-icon-list-icon::before {
	color: #DC2626;
}
.grf-schede .e-con-inner > .e-con-full:nth-child(2) .elementor-icon-list-icon::before {
	color: #9F1239;
}

/* Catena flex per body boxed (e-con-inner): chips+bottone ancorati al fondo */
.grf-schede .e-con.e-child > .e-con:last-child {
	display: flex;
	flex-direction: column;
}
.grf-schede .e-con.e-child > .e-con:last-child > .e-con-inner {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* ===== Prodotti (catalogo): header card centrato col mockup
   (img grande 260×224, pill a sinistra) ===== */
.page-id-3106 .grf-schede .e-con.e-child > .e-con:first-child .elementor-widget-image img {
	width: auto;
	max-width: 260px;
	height: 224px;
	object-fit: contain;
}
.page-id-3106 .grf-schede .e-con.e-child > .e-con:first-child .e-con-inner > .elementor-widget-text-editor:first-child {
	width: 100%; /* il widget fa shrink-to-fit nei container centrati */
}
.page-id-3106 .grf-schede .e-con.e-child > .e-con:first-child .e-con-inner > .elementor-widget-text-editor:first-child p {
	text-align: left;
}

/* ===== My Account (WooCommerce) — skin stile approccio-9
   Hello theme non stila my-account: layout grid + nav a pill + card ===== */
.woocommerce-account.logged-in .site-main .woocommerce {
	display: grid;
	grid-template-columns: 220px 1fr;
	grid-template-rows: auto 1fr; /* riga 1 = altezza nav, così l'Assistenza le sta subito sotto */
	gap: 32px;
	align-items: start;
	max-width: 1140px;
	margin: 48px auto 72px;
	padding: 0 24px;
}
/* Vista sloggato: come il mockup account-login.html */
.woocommerce-account:not(.logged-in) .site-main .woocommerce {
	max-width: 960px;
	margin: 0 auto 0;
	padding: 0 24px;
}
/* Hero "Area riservata" full-bleed su surface */
.grf-account-hero {
	margin: 0 calc(50% - 50vw) 56px;
	padding: 56px 24px 60px;
	background: var(--grf-surface);
	border-bottom: 1px solid var(--grf-hair);
	text-align: center;
}
.grf-account-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--grf-mint);
	background: var(--grf-mintsoft);
	padding: 6px 14px;
	border-radius: 9999px;
}
.grf-account-hero h1 {
	margin: 20px 0 0;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--grf-ink);
}
.grf-account-hero p {
	margin: 16px auto 0;
	max-width: 640px;
	font-size: 18px;
	color: #525252;
}
/* Card Accedi (bianca) e Registrati (evidenziata mint) */
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 32px;
}
.woocommerce-account #customer_login .col-2 {
	border: 2px solid var(--grf-mint);
	background: #F3FCFA;
}
/* Titoli card con icona quadrata (mockup: lucchetto / user+) */
.woocommerce-account #customer_login h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 24px;
}
.woocommerce-account #customer_login h2::before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 14px;
	flex-shrink: 0;
	background-color: var(--grf-mintsoft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/></svg>');
}
.woocommerce-account #customer_login .col-2 h2::before {
	background-color: var(--grf-mint);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>');
}
/* Niente doppia cornice: il bordo lo dà già la card */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	border: none;
	padding: 0;
	margin: 0;
}
/* Campi: surface nella card Accedi, bianchi nella Registrati */
.woocommerce-account #customer_login .col-1 input.input-text {
	background: var(--grf-surface);
}
.woocommerce-account #customer_login .col-2 input.input-text {
	background: #fff;
}
/* Bottoni full-width: Accedi mint, Registrati nero (mockup) */
.woocommerce-account #customer_login button.button {
	width: 100%;
	margin-top: 8px;
}
.woocommerce-account #customer_login .col-2 button.button {
	background: var(--grf-ink);
}
.woocommerce-account #customer_login .col-2 button.button:hover {
	background: #262626;
}
/* Password dimenticata? centrato mint */
.woocommerce-account #customer_login .lost_password {
	text-align: center;
	margin-top: 16px;
}
.woocommerce-account #customer_login .lost_password a {
	color: var(--grf-mint);
	font-weight: 500;
}
/* Privacy text nel box bianco bordato (mockup) */
.woocommerce-account #customer_login .col-2 .woocommerce-privacy-policy-text {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.woocommerce-account #customer_login .col-2 .woocommerce-privacy-policy-text p {
	font-size: 13px;
	color: #525252;
	margin: 0;
}
/* Rassicurazione sotto Registrati */
.grf-register-note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
	color: #737373;
}
/* Trust bar full-bleed su surface (mockup) */
.grf-account-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 64px calc(50% - 50vw) 0;
	padding: 28px 24px;
	background: var(--grf-surface);
	border-top: 1px solid var(--grf-hair);
}
.grf-account-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 9999px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #404040;
}
.grf-account-trust i {
	font-style: normal;
	font-weight: 700;
	color: var(--grf-mint);
}
/* Il CSS base Woo usa float+width 30%/68%: dentro il grid vanno neutralizzati
   e nav/content piazzati esplicitamente */
.woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
	float: none !important;
	width: auto !important;
}
.woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1 / span 2; /* occupa entrambe le righe: l'Assistenza resta sotto la nav */
	float: none !important;
	width: auto !important;
}
/* Nav in card bordata (mockup account.html) */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
}
.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #404040;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.woocommerce-MyAccount-navigation a:hover {
	background: var(--grf-surface);
	color: var(--grf-ink);
}
/* Voce attiva: nera come il mockup */
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--grf-ink);
	color: #fff;
}
/* Icone voce menu: mask SVG → seguono il colore del testo */
.woocommerce-MyAccount-navigation a::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--grf-nav-ico) no-repeat center / contain;
	mask: var(--grf-nav-ico) no-repeat center / contain;
}
.woocommerce-MyAccount-navigation-link--dashboard a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>');
}
.woocommerce-MyAccount-navigation-link--orders a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>');
}
.woocommerce-MyAccount-navigation-link--subscriptions a,
.woocommerce-MyAccount-navigation-link--iw-subscriptions a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.5 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.5 15"/></svg>');
}
.woocommerce-MyAccount-navigation-link--edit-address a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
}
.woocommerce-MyAccount-navigation-link--payment-methods a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>');
}
.woocommerce-MyAccount-navigation-link--edit-account a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}
.woocommerce-MyAccount-navigation-link--customer-logout a {
	--grf-nav-ico: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>');
}
/* Esci separato in fondo (mockup) */
.woocommerce-MyAccount-navigation-link--customer-logout {
	border-top: 1px solid var(--grf-hair);
	margin-top: 6px;
	padding-top: 6px;
}
/* Card Assistenza sotto la nav (mockup) — item del grid, colonna 1 riga 2 */
.grf-account-assistenza {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	margin-top: -12px; /* compensa il gap 32 del grid (mockup ~20px) */
	background: var(--grf-mintsoft);
	border-radius: 16px;
	padding: 24px;
}
.grf-account-assistenza-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--grf-mint);
	margin: 0 0 10px;
}
.grf-account-assistenza p:not(.grf-account-assistenza-label) {
	font-size: 14px;
	color: var(--grf-ink);
	margin: 0 0 16px;
}
.grf-account-assistenza a.button {
	background: var(--grf-mint);
	color: #fff;
	border-radius: 9999px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
}
/* ===== Dashboard (template override grf-dash) ===== */
.grf-dash .grf-account-pill {
	margin-bottom: 4px;
}
.grf-dash-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 14px 0 28px;
}
.grf-dash-head h1 {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.grf-dash-head p {
	margin: 8px 0 0;
	color: #525252;
}
.grf-dash-esci {
	white-space: nowrap;
	font-size: 15px;
	color: #525252;
	text-decoration: none;
	margin-top: 14px;
}
.grf-dash-esci span {
	color: var(--grf-mint);
	font-weight: 600;
}
.grf-dash-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.grf-stat {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 22px 24px;
	background: #fff;
}
.grf-stat p {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #737373;
}
.grf-stat strong {
	display: block;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
}
.grf-stat strong.grf-stat-ordine {
	font-size: 17px;
	line-height: 1.4;
}
.grf-stat a {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--grf-mint) !important;
	text-decoration: none;
}
.grf-stat-mint {
	background: var(--grf-mintsoft);
	border-color: rgba(13, 148, 136, 0.3);
}
.grf-stat-mint p,
.grf-stat-stato {
	color: var(--grf-mint);
}
.grf-stat-stato {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
}
.grf-dash-note {
	margin-top: 24px;
	background: var(--grf-surface);
	border-radius: 12px;
	padding: 24px 28px;
	font-size: 16px;
	line-height: 1.7;
}
.grf-dash-note a {
	color: var(--grf-mint) !important;
	font-weight: 600;
	text-decoration: none;
}
.grf-dash-azioni {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}
.grf-dash-azioni a {
	display: block;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 24px;
	text-decoration: none;
	color: var(--grf-ink) !important;
	transition: border-color 0.15s;
}
.grf-dash-azioni a:hover {
	border-color: var(--grf-mint);
}
.grf-dash-azioni strong {
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-top: 14px;
}
.grf-dash-azioni span {
	display: block;
	font-size: 14px;
	color: #737373;
	margin-top: 4px;
}
.grf-dash-ico {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: var(--grf-mintsoft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
}
.grf-ico-bag {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>');
}
.grf-ico-faq {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
}
/* La dashboard non sta nella card bianca standard: il layout lo fa il template */
.woocommerce-account.logged-in .woocommerce-MyAccount-content:has(.grf-dash) {
	border: none;
	padding: 0;
	background: transparent;
}
.woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 32px;
	font-size: 15px;
	line-height: 1.6;
}
.woocommerce-MyAccount-content a {
	color: var(--grf-mint);
}
/* Banner informativi Woo: da blu default a soft brand */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	border-top-color: var(--grf-mint);
	background: var(--grf-surface);
	border-radius: 8px;
}
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
	color: var(--grf-mint);
}
/* Bottoni Woo nel contesto account: pill mint come il mockup */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button {
	background: var(--grf-mint);
	color: #fff;
	border-radius: 9999px;
	padding: 12px 24px;
	font-weight: 600;
	border: none;
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover {
	background: #0B7C72;
	color: #fff;
}
/* Campi form account */
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce select {
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
	padding: 10px 14px;
	background: #fff;
}
/* Indirizzi: due card affiancate, titoli compatti, niente corsivo */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
/* Il clearfix ::before/::after di Woo diventerebbe un grid item fantasma */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	content: none;
}
.woocommerce-account .woocommerce-Addresses .col-1 {
	grid-column: 1;
	grid-row: 1;
}
.woocommerce-account .woocommerce-Addresses .col-2 {
	grid-column: 2;
	grid-row: 1;
}
.woocommerce-account .woocommerce-Address {
	width: auto !important;
	float: none !important;
	max-width: none !important;
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	padding: 20px 24px;
	background: #fff;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap; /* su card strette il link "Modifica…" va a capo invece di sforare */
	gap: 12px;
	margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.woocommerce-account .woocommerce-Address-title a {
	font-size: 14px;
	font-weight: 600;
}
.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: #404040;
	border: none;
	padding: 0;
}
/* Tablet/mobile: con la nav che occupa 220px, due card indirizzo affiancate
   restano troppo strette per titolo + link "Modifica…" → colonna singola. */
@media (max-width: 1023px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
	/* Senza reset, grid-column:2 su .col-2 crea una colonna fantasma e l'overflow. */
	.woocommerce-account .woocommerce-Addresses .col-1,
	.woocommerce-account .woocommerce-Addresses .col-2 {
		grid-column: 1;
		grid-row: auto;
	}
	/* Titolo + link "Modifica…" (nowrap) sulla stessa riga sforano: li impiliamo. */
	.woocommerce-account .woocommerce-Address-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* Lost password: card centrata con respiro */
.woocommerce-account .woocommerce-ResetPassword {
	max-width: 520px;
	margin: 56px auto 72px;
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 32px;
}
.woocommerce-account .woocommerce-ResetPassword .form-row {
	width: 100% !important;
	float: none !important;
}

/* Dettagli account: fieldset password come box */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 28px 0;
}
.woocommerce-account .woocommerce-EditAccountForm legend {
	font-weight: 700;
	padding: 0 8px;
}

/* Tabella ordini coerente con le tabelle ingredienti */
.woocommerce-account table.shop_table {
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce-account table.shop_table th {
	background: var(--grf-surface);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
@media (max-width: 767px) {
	/* La griglia logged-in usa un selettore con .logged-in (4 classi): va eguagliato
	   in specificità o il "220px 1fr" base vince anche dentro la media query. */
	.woocommerce-account.logged-in .site-main .woocommerce,
	.woocommerce-account .site-main .woocommerce {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 20px;
		margin: 24px auto 48px;
	}
	/* In colonna singola grid-column:2 / grid-row:1/span 2 creerebbe una colonna
	   fantasma: riportiamo tutti gli elementi nel normale flusso a 1 colonna. */
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content,
	.grf-account-assistenza {
		grid-column: 1;
		grid-row: auto;
	}
	/* Nav come card verticale full-width sopra il contenuto (tap target ampi). */
	.woocommerce-MyAccount-content {
		padding: 20px;
	}
}
/* Telefoni: le griglie interne della dashboard (stat 3-col, azioni 2-col) hanno
   min-content troppo largo e sforano oltre il viewport. Collassano a 1 colonna. */
@media (max-width: 600px) {
	.grf-dash-stats,
	.grf-dash-azioni {
		grid-template-columns: 1fr;
	}
	/* Header in colonna: il titolo prende tutta la larghezza (l'emoji non va a capo)
	   e il link "Non sei …? Esci" si impila sotto. */
	.grf-dash-head {
		flex-direction: column;
		gap: 8px;
	}
	.grf-dash-head h1 {
		font-size: 32px;
	}
}

/* =========================================================
   HEADER — icona "Area personale" → pillola mint col nome
   (mockup account.html: bg-mintsoft + text-mint, hover pieno)
   Il nome è aggiunto via JS da loggati (functions.php); l'icona
   SVG resta dal widget Elementor, qui la trasformiamo in pillola.
   ========================================================= */
.grf-account-pill-link {
	align-items: center;
	gap: 8px;
	background: var(--grf-mintsoft);
	color: var(--grf-mint) !important; /* override del color:#404040 inline del widget */
	padding: 8px 14px !important;      /* override del padding:8px inline */
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}
.grf-account-pill-link:hover {
	background: var(--grf-mint);
	color: #fff !important;
}
.grf-account-pill-link svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
/* Nomi lunghi (display_name da import, es. "CARMINE DE VINCENTIIS DE VINCENTIIS")
   non devono mandare la pillola a capo e rompere l'header: tronchiamo con ellissi. */
.grf-account-name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================
   AREA ACCOUNT — intestazione pagina (badge + titolo + sottotitolo)
   Replica il pattern della Dashboard su tutti gli endpoint (hook in functions.php).
   ========================================================= */
.grf-account-pagehead {
	margin-bottom: 28px;
}
.grf-account-pagehead h1 {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 16px 0 8px;
	line-height: 1.1;
}
.grf-account-pagehead p {
	color: #525252;
	font-size: 16px;
	margin: 0;
}
@media (max-width: 600px) {
	.grf-account-pagehead h1 {
		font-size: 30px;
	}
}

/* =========================================================
   AREA ACCOUNT — tabella Ordini (mockup: pallini stato, bottone view nero,
   paginazione testuale). La riga ha già la classe ...__row--status-{stato}.
   ========================================================= */
.woocommerce-orders-table__cell-order-status::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	background: #9CA3AF; /* default/neutro */
}
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before {
	background: var(--grf-mint);
}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
	background: #22C55E;
}
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before {
	background: #F59E0B;
}
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before {
	background: #DC2626;
}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
	background: #9CA3AF;
}
/* Bottone "Visualizza" nero come il mockup; "Paga" resta mint (CTA). */
.woocommerce-orders-table .woocommerce-button.view {
	background: var(--grf-ink) !important;
}
.woocommerce-orders-table .woocommerce-button.view:hover {
	background: #262626 !important;
}
/* Look pulito coerente col sito su TUTTE le tabelle dell'area account
   (ordini, dettaglio ordine, abbonamenti, metodi pagamento): via la griglia
   pesante e lo zebra di Woo, solo separatori orizzontali sottili. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border: none !important;
	border-bottom: 1px solid var(--grf-hair) !important;
	background: transparent !important;
	padding: 16px 14px !important;
	vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	color: #737373;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td {
	border-bottom: none !important;
}
/* Prezzi WooCommerce sempre in nero (non ereditano il mint dei link/contesti). */
.woocommerce-Price-amount.amount {
	color: var(--grf-ink) !important;
}
/* Mini-cart: la "×" di rimozione è disegnata dai pseudo-elementi ::before/::after
   del CONTAINER (le due linee), dentro un cerchio (border). Coloriamo le linee
   in rosso (di default sono grigie). */
.elementor-menu-cart__product-remove::before,
.elementor-menu-cart__product-remove::after {
	background-color: var(--grf-torello) !important;
	color: var(--grf-torello) !important;
}
/* Mini-cart: bottoni footer impilati verticalmente, full-width. */
.elementor-menu-cart__footer-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.elementor-menu-cart__footer-buttons .elementor-button {
	width: 100%;
	justify-content: center;
}
/* Mini-cart riga prezzo: testo/prezzo in nero, quantità ("2 ×") in rosso. */
.elementor-menu-cart__product-price {
	color: var(--grf-ink);
}
.elementor-menu-cart__product-price .product-quantity {
	color: var(--grf-torello);
	font-weight: 600;
}
/* Bottoni azioni affiancati con spazio fra loro (flex + gap). */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.woocommerce-orders-table .woocommerce-button {
	padding: 9px 20px !important;
	font-size: 14px;
	margin: 0;
}
/* Paginazione: link testuali con frecce, non bottoni pieni (mockup). */
.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: 20px;
	justify-content: flex-end;
	margin-top: 24px;
}
.woocommerce-account .woocommerce-pagination .button {
	background: transparent !important;
	color: var(--grf-ink) !important;
	border: 1px solid var(--grf-hair) !important;
	border-radius: 9999px;
	padding: 8px 18px !important;
	font-weight: 600;
}
.woocommerce-account .woocommerce-pagination .button:hover {
	border-color: var(--grf-mint) !important;
	color: var(--grf-mint) !important;
}
.woocommerce-account .woocommerce-pagination .button--previous::before {
	content: '← ';
}
.woocommerce-account .woocommerce-pagination .button--next::after {
	content: ' →';
}

/* =========================================================
   AREA ACCOUNT — Indirizzi (mockup: niente sottotitolo doppio, link "Modifica")
   ========================================================= */
/* Il <p> introduttivo di Woo duplica il sottotitolo dell'intestazione di pagina. */
.woocommerce-edit-address .woocommerce-MyAccount-content > p {
	display: none;
}
/* Link "Modifica Indirizzo di fatturazione/spedizione" → solo "Modifica" (mockup). */
.woocommerce-Address-title a.edit {
	font-size: 0;
}
.woocommerce-Address-title a.edit::after {
	content: 'Modifica';
	font-size: 14px;
	font-weight: 600;
}

/* =========================================================
   AREA ACCOUNT — breadcrumb "Home / Area Personale" (mockup)
   ========================================================= */
.grf-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #737373;
	margin-bottom: 24px;
}
.grf-breadcrumb a {
	color: #737373;
	text-decoration: none;
}
.grf-breadcrumb a:hover {
	color: var(--grf-mint);
}
.grf-breadcrumb-current {
	color: var(--grf-ink);
	font-weight: 600;
}
/* Dettaglio ordine: titolo sezione svuotato ("Order extra") non lascia spazio. */
.woocommerce-order-details__title:empty {
	display: none;
}

/* =========================================================
   AREA ACCOUNT — form modifica indirizzo (select2 coerenti, no titolo doppio)
   ========================================================= */
/* Il titolo del form (h2/h3 figlio del form, generato dal plugin campi) duplica
   l'intestazione di pagina: lo nascondiamo solo sul form edit-address. */
.woocommerce-edit-address .woocommerce-MyAccount-content form > h2,
.woocommerce-edit-address .woocommerce-MyAccount-content form > h3 {
	display: none;
}
/* Select Paese/Provincia (select2) allineati agli input: stessa altezza, bordo, raggio. */
.woocommerce-account .select2-container--default .select2-selection--single {
	height: 44px;
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	padding-left: 14px;
	color: var(--grf-ink);
}
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
}
/* Focus mint sui campi del form, coerente col mockup. */
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	border-color: var(--grf-mint);
	outline: none;
}

/* =========================================================
   CARRELLO (WooCommerce) — skin approccio-9 come il mockup carrello.html
   Tutto prefissato .grf-cart-. La meccanica Woo (form/nonce/qty/remove/
   coupon/checkout) resta nel template, qui solo la veste.
   ========================================================= */

/* Larghezza pagina come il resto del sito (max-w-6xl ≈ 1152px) */
.grf-cart {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 24px 56px;
}

/* ===== Intestazione: breadcrumb · badge · titolo · sottotitolo · step ===== */
.grf-cart-head {
	padding: 40px 0 8px;
}
.grf-cart-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #737373;
	margin-bottom: 28px;
}
.grf-cart-breadcrumb a {
	color: #737373;
	text-decoration: none;
}
.grf-cart-breadcrumb a:hover {
	color: var(--grf-mint);
}
.grf-cart-breadcrumb__current {
	color: var(--grf-ink);
	font-weight: 600;
}
.grf-cart-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--grf-hair);
}
.grf-cart-head__badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--grf-mint);
	background: var(--grf-mintsoft);
	padding: 6px 14px;
	border-radius: 9999px;
}
.grf-cart-head__title {
	margin: 16px 0 0;
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.grf-cart-head__subtitle {
	margin: 8px 0 0;
	color: #525252;
	font-size: 16px;
}
/* Step indicator 1·2·3 (mockup) */
.grf-cart-steps {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
}
.grf-cart-steps__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #A3A3A3;
}
.grf-cart-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
	color: #A3A3A3;
	font-weight: 700;
}
.grf-cart-steps__item.is-active {
	color: var(--grf-ink);
	font-weight: 600;
}
.grf-cart-steps__item.is-active .grf-cart-steps__num {
	background: var(--grf-mint);
	border-color: var(--grf-mint);
	color: #fff;
}
.grf-cart-steps__sep {
	width: 40px;
	height: 1px;
	background: var(--grf-hair);
}
@media (max-width: 767px) {
	.grf-cart-steps {
		display: none;
	}
}

/* ===== Layout 2 colonne: righe a sinistra, riepilogo sticky a destra ===== */
.grf-cart-form {
	margin: 32px 0 0;
}
@media (min-width: 1024px) {
	.grf-cart {
		display: grid;
		grid-template-columns: 1fr 360px;
		grid-template-rows: auto auto auto;
		column-gap: 32px;
		align-items: start;
	}
	/* L'intestazione e gli hook before_cart occupano tutta la larghezza. */
	.grf-cart-head,
	.grf-cart > .woocommerce-info,
	.grf-cart > .woocommerce-message,
	.grf-cart > .woocommerce-error {
		grid-column: 1 / -1;
	}
	.grf-cart-form {
		grid-column: 1;
		grid-row: 2;
	}
	.grf-cart-summary {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ===== Lista card prodotto (layout a div, non più table) ===== */
.grf-cart-items {
	display: block;
}

/* ===== Card riga prodotto (rounded-2xl border) ===== */
.grf-cart-card {
	display: flex;
	gap: 20px;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
	background: #fff;
}
@media (min-width: 640px) {
	.grf-cart-card {
		gap: 24px;
		padding: 24px;
	}
}
/* Immagine prodotto: riquadro 96/112px contenuto */
.grf-cart-card__media {
	flex: 0 0 auto;
	display: flex;
	width: 96px;
	height: 96px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--grf-surface);
	align-items: center;
	justify-content: center;
}
@media (min-width: 640px) {
	.grf-cart-card__media {
		width: 112px;
		height: 112px;
	}
}
/* Tinta riquadro per variante (mockup: red-50 / rose-50) */
.grf-cart-card--torello .grf-cart-card__media {
	background: #FEF2F2;
}
.grf-cart-card--aphrodia .grf-cart-card__media {
	background: #FFF1F2;
}
.grf-cart-card__media a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.grf-cart-card__media img {
	display: block;
	width: 100% !important; /* batte .woocommerce-cart table.cart img { width:32px } */
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	padding: 8px;
	margin: 0;
}
/* Corpo card */
.grf-cart-card__body {
	flex: 1 1 auto;
	display: block;
	min-width: 0;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}
.grf-cart-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.grf-cart-card__head {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}
.grf-cart-card__eyebrow {
	display: block;
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #737373;
	text-align: left;
}
.grf-cart-card--torello .grf-cart-card__eyebrow {
	color: var(--grf-torello);
}
.grf-cart-card--aphrodia .grf-cart-card__eyebrow {
	color: var(--grf-aphrodia);
}
.grf-cart-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.grf-cart-card__title a {
	color: inherit;
	text-decoration: none;
}
.grf-cart-card__title a:hover {
	color: var(--grf-mint);
}
/* Badge offerta (pillola) */
.grf-cart-card__badge {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 5px 10px;
	border-radius: 9999px;
	color: #525252;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
}
.grf-cart-card--torello .grf-cart-card__badge {
	color: var(--grf-torello);
	background: #FEF2F2;
	border-color: #FEE2E2;
}
.grf-cart-card--aphrodia .grf-cart-card__badge {
	color: var(--grf-aphrodia);
	background: #FFF1F2;
	border-color: #FFE4E6;
}
/* Pulsante rimuovi (X) — link .remove di WooCommerce */
.grf-cart-card__remove .remove {
	display: flex !important;   /* WooCommerce forza display:block: senza flex,
	                               align/justify non centrano il glifo × */
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9999px;
	font-size: 20px;
	line-height: 1;
	color: #A3A3A3 !important;
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.grf-cart-card__remove .remove:hover {
	color: var(--grf-torello) !important;
	background: #FEF2F2;
}
/* Riga inferiore: stepper quantità + prezzo riga */
.grf-cart-card__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}
/* Stepper quantità: il widget Woo (.quantity con input number) → pillola bordata */
.grf-cart-card__qty .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--grf-hair);
	border-radius: 9999px;
	overflow: hidden;
}
.grf-cart-card__qty .quantity .qty {
	width: 48px;
	border: 0;
	background: transparent;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	padding: 8px 0;
	-moz-appearance: textfield;
}
.grf-cart-card__qty .quantity .qty::-webkit-outer-spin-button,
.grf-cart-card__qty .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Bottoni +/- se il tema/Woo li genera (plus/minus); altimenti resta lo spinner nativo */
.grf-cart-card__qty .quantity .plus,
.grf-cart-card__qty .quantity .minus {
	width: 38px;
	border: 0;
	background: transparent;
	color: #525252;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	padding: 8px 0;
}
.grf-cart-card__qty .quantity .plus:hover,
.grf-cart-card__qty .quantity .minus:hover {
	color: var(--grf-mint);
}
/* Bottoni +/- dello stepper (creati via JS, classe .grf-qty-btn): senza bordo
   proprio (eliminano il doppio bordo dentro il pill); colore per variante. */
.grf-qty-btn {
	width: 40px;
	border: 0 !important;       /* annulla il bordo magenta ereditato dai <button> generici */
	border-radius: 0 !important;
	background: transparent;
	color: #525252;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 11px 0;
	transition: background 0.15s ease, color 0.15s ease;
}
.grf-qty-btn:hover {
	background: var(--grf-mintsoft);
	color: var(--grf-mint);
}
/* Gli estremi seguono la curva del pill: lo sfondo hover non sborda dagli
   angoli arrotondati (− a sinistra, + a destra). */
.grf-cart-card__qty .quantity .grf-qty-btn:first-of-type {
	border-radius: 9999px 0 0 9999px !important;
}
.grf-cart-card__qty .quantity .grf-qty-btn:last-of-type {
	border-radius: 0 9999px 9999px 0 !important;
}
/* Variante Torello: bordo pill rosso e hover bottoni rosso pieno (richiesta). */
.grf-cart-card--torello .grf-cart-card__qty .quantity {
	border-color: var(--grf-torello);
}
.grf-cart-card--torello .grf-qty-btn:hover {
	background: var(--grf-torello);
	color: #fff;
}
/* Variante Aphrodia: stesso pattern col colore brand femminile (coerenza). */
.grf-cart-card--aphrodia .grf-cart-card__qty .quantity {
	border-color: var(--grf-aphrodia);
}
.grf-cart-card--aphrodia .grf-qty-btn:hover {
	background: var(--grf-aphrodia);
	color: #fff;
}
/* Prezzo riga */
.grf-cart-card__price {
	font-size: 16px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

/* ===== Coupon (card) + barra azioni (continua / aggiorna) ===== */
.grf-cart-coupon {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 20px 24px;
	margin-top: 16px;
}
/* Barra azioni sotto il coupon: "Continua" a sinistra, "Aggiorna" a destra. */
.grf-cart-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;   /* "Continua" e "Aggiorna carrello" sempre su una riga unica */
	gap: 16px;
	margin-top: 16px;
}
/* Su mobile i due bottoni non ci stanno su una riga (sforavano di 4px): wrap. */
@media (max-width: 600px) {
	.grf-cart-actions {
		flex-wrap: wrap;
	}
}
.grf-cart-coupon__label {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
}
.grf-cart-coupon__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
@media (min-width: 640px) {
	.grf-cart-coupon__row {
		flex-direction: row;
	}
}
.grf-cart-coupon__input {
	flex: 1 1 auto;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
	border-radius: 9999px;
	padding: 12px 18px;
	font-size: 14px;
}
.grf-cart-coupon__input:focus {
	outline: none;
	border-color: var(--grf-mint);
	background: #fff;
}
/* Bottone "Applica" nero (mockup), hover mint */
.grf-cart-coupon__btn {
	background: var(--grf-ink) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 12px 28px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	cursor: pointer;
}
.grf-cart-coupon__btn:hover {
	background: var(--grf-mint) !important;
}
/* "Aggiorna carrello": secondario ma leggibile (testo scuro, bordo visibile);
   white-space:nowrap così non va a capo nella riga unica. */
.grf-cart-update {
	background: transparent !important;
	color: var(--grf-ink) !important;
	border: 1px solid #d4d4d4 !important;
	border-radius: 9999px !important;
	padding: 10px 22px !important;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.grf-cart-update:hover {
	border-color: var(--grf-mint) !important;
	color: var(--grf-mint) !important;
}
/* Link "Continua lo shopping" */
.grf-cart-continue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #525252;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.grf-cart-continue:hover {
	color: var(--grf-mint);
}

/* ===== Sidebar Riepilogo (sticky) ===== */
.grf-cart-summary {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (min-width: 1024px) {
	.grf-cart-summary {
		position: sticky;
		top: 96px;
		margin-top: 0;
		align-self: start;
	}
	body.admin-bar .grf-cart-summary {
		top: 128px;
	}
}
/* Card totali */
.grf-cart-totals {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	background: var(--grf-surface);
	padding: 24px;
}
.grf-cart-totals__title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
}
.grf-cart-totals__lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--grf-hair);
	font-size: 14px;
}
.grf-cart-totals__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.grf-cart-totals__label {
	color: #525252;
}
.grf-cart-totals__value {
	font-weight: 600;
}
.grf-cart-totals__value--muted {
	font-weight: 500;
	color: #737373;
}
.grf-cart-totals__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0;
	border-bottom: 1px solid var(--grf-hair);
}
.grf-cart-totals__total-label {
	font-size: 18px;
	font-weight: 700;
}
.grf-cart-totals__total-value {
	font-size: 20px;
	font-weight: 700;
}
.grf-cart-totals__note {
	margin: 16px 0 20px;
	font-size: 12px;
	line-height: 1.6;
	color: #737373;
}
/* La .cart_totals di Woo ha float:right + width ridotta → la card si restringe
   (e con lei il bottone). La liberiamo dal float e la stiriamo alla sidebar. */
.grf-cart-summary .cart_totals,
.grf-cart-totals {
	float: none !important;
	width: 100% !important;
}
/* CTA "Procedi al checkout" → bottone mint full-width (mockup) */
.grf-cart-totals__cta,
.grf-cart-totals__cta .wc-proceed-to-checkout {
	width: 100%;
	display: block;
}
.grf-cart-totals__cta .checkout-button,
.grf-cart-totals__cta a.button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--grf-mint) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 14px 24px !important;
	font-weight: 600 !important;
	font-size: 15px;
	text-decoration: none;
}
.grf-cart-totals__cta .checkout-button:hover,
.grf-cart-totals__cta a.button:hover {
	background: #0B7C72 !important;
}
/* Box trust sotto il riepilogo */
.grf-cart-trust {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	background: #fff;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 12px;
	color: #404040;
}
.grf-cart-trust__row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.grf-cart-trust__row svg {
	flex: 0 0 auto;
}
.grf-cart-trust__row strong {
	color: var(--grf-ink);
}

/* ===== Carrello vuoto (mockup) ===== */
/* Nasconde il messaggio inglese di default dell'hook Woo: il testo IT è nostro */
.grf-cart .cart-empty.woocommerce-info,
.grf-cart .wc-empty-cart-message {
	display: none;
}
.grf-cart-empty {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	background: var(--grf-surface);
	padding: 48px 32px;
	text-align: center;
	margin-top: 32px;
}
.grf-cart-empty__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}
.grf-cart-empty__text {
	margin: 8px 0 0;
	font-size: 14px;
	color: #525252;
}
.grf-cart-empty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	background: var(--grf-mint);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 28px;
	border-radius: 9999px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.grf-cart-empty__btn:hover {
	background: #0B7C72;
}

/* =========================================================
   CHECKOUT (WooCommerce) — skin approccio-9 come il mockup checkout.html
   Tutto prefissato .grf-checkout-. La meccanica Woo (form/nonce/hook/
   gateway/#place_order) resta nei template core (review-order/payment),
   qui solo la veste: griglia 2 colonne, campi, card sticky, bottone pill.
   ========================================================= */

/* Larghezza pagina come il resto del sito (max-w-6xl ≈ 1152px) */
.grf-checkout {
	max-width: 1152px;
	margin: 0 auto;
	padding: 0 24px 56px;
}

/* ===== Intestazione: riusa .grf-cart-head / .grf-cart-steps (step 2 attivo) ===== */
.grf-checkout-head {
	padding: 40px 0 0;
}

/* ===== Layout 2 colonne: billing a sinistra, card ordine sticky a destra ===== */
.grf-checkout-form {
	margin: 32px 0 0;
}
@media (min-width: 1024px) {
	.grf-checkout-form {
		display: grid;
		grid-template-columns: 1fr 400px;
		column-gap: 40px;
		align-items: start;
	}
	/* I dettagli cliente (billing/shipping) occupano la colonna sinistra. */
	.grf-checkout-details {
		grid-column: 1;
	}
	/* La card "Il tuo ordine" + pagamento occupa la colonna destra, sticky.
	   align-self:start evita che la cella si stiri all'altezza della colonna
	   sinistra (causa del vuoto in cima alla card). */
	.grf-checkout-aside {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: 96px;
		align-self: start;
	}
	body.admin-bar .grf-checkout-aside {
		top: 128px;
	}
}

/* La col2-set è una griglia a 2 colonne nel core: la rendiamo a blocco singolo
   (billing + shipping uno sotto l'altro nella colonna sinistra). */
.grf-checkout-details.col2-set {
	display: block;
	width: 100%;
}
.grf-checkout-details .col-1,
.grf-checkout-details .col-2 {
	width: 100% !important;     /* batte .woocommerce .col2-set .col-1/.col-2 del core */
	max-width: none !important;
	float: none !important;
	margin: 0;
}
/* Sezioni come card (mockup: rounded-2xl border p-6): billing in una card,
   spedizione/note in una card sotto. Dà alla colonna sinistra l'aspetto del
   mockup invece dei campi "nudi" sulla pagina. */
.grf-checkout-details .col-1,
.grf-checkout-details .col-2 {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 28px;
}
/* Shipping + note ordine (col-2) impilati SOTTO i dati di fatturazione. */
.grf-checkout-details .col-2 {
	margin-top: 24px;
}
.grf-checkout-details .col-2:empty {
	display: none;
	margin-top: 0;
}

/* ===== Titoli sezione con icona (mockup: documento mint accanto al titolo) ===== */
.grf-checkout-details h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 20px;
	color: var(--grf-ink);
}
.grf-checkout-details h3::before {
	content: '';
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%230D9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>');
}
.grf-checkout-details .col-2 h3 {
	margin-top: 0;
}

/* ===== Campi billing in GRIGLIA 2 colonne (mockup): niente più form a colonna
   singola lunga ("vecchio"). I campi lunghi (CF, azienda, P.IVA, paese,
   indirizzo, appartamento, email) occupano l'intera riga; gli altri si
   affiancano a coppie. ===== */
.grf-checkout-details .woocommerce-billing-fields__field-wrapper,
.grf-checkout-details .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}
.grf-checkout-details .woocommerce-billing-fields__field-wrapper > .form-row,
.grf-checkout-details .woocommerce-shipping-fields__field-wrapper > .form-row {
	width: auto !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.grf-checkout-details #billing_wooccm11_field,
.grf-checkout-details #billing_company_field,
.grf-checkout-details #billing_wooccm14_field,
.grf-checkout-details #billing_country_field,
.grf-checkout-details #billing_address_1_field,
.grf-checkout-details #billing_address_2_field,
.grf-checkout-details #billing_email_field,
.grf-checkout-details #billing_address_1_field,
.grf-checkout-details #billing_address_2_field {
	grid-column: 1 / -1;
}
/* Mobile: tutto a colonna singola. */
@media (max-width: 600px) {
	.grf-checkout-details .woocommerce-billing-fields__field-wrapper,
	.grf-checkout-details .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.grf-checkout-details .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: 1 !important;
	}
}

/* ===== Campi form (input radius 10px, focus mint) — mockup ===== */
.grf-checkout .form-row {
	margin: 0 0 18px;
	padding: 0;
}
.grf-checkout-details .form-row label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--grf-ink);
}
.grf-checkout-details .form-row .optional {
	color: #a3a3a3;
	font-weight: 400;
	font-size: 12px;
}
.grf-checkout-details .form-row .required {
	color: var(--grf-mint);
	text-decoration: none;
	border: 0;
}
.grf-checkout-details input.input-text,
.grf-checkout-details textarea,
.grf-checkout-details select {
	width: 100%;
	box-sizing: border-box;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--grf-ink);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.grf-checkout-details textarea {
	resize: vertical;
	min-height: 88px;
}
.grf-checkout-details input.input-text:focus,
.grf-checkout-details textarea:focus,
.grf-checkout-details select:focus {
	outline: none;
	border-color: var(--grf-mint);
	background: #fff;
}
.grf-checkout-details input.input-text::placeholder,
.grf-checkout-details textarea::placeholder {
	color: #a3a3a3;
}

/* Select2 (Paese/Provincia) coerente con gli input: altezza 44px, raggio 10px */
.grf-checkout .select2-container--default .select2-selection--single {
	height: 44px;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
}
.grf-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	padding-left: 14px;
	color: var(--grf-ink);
}
.grf-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
}
.grf-checkout .select2-container--focus .select2-selection--single,
.grf-checkout .select2-container--open .select2-selection--single {
	border-color: var(--grf-mint);
}

/* Checkbox "Spedisci a un indirizzo diverso" — accent mint, label inline */
.grf-checkout-details .woocommerce-shipping-fields > h3 {
	border-top: 1px solid var(--grf-hair);
	padding-top: 24px;
	margin-top: 32px;
}
.grf-checkout-details #ship-to-different-address label,
.grf-checkout-details .woocommerce-shipping-fields h3 label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 500;
	color: #404040;
	cursor: pointer;
}
.grf-checkout-details input[type="checkbox"] {
	accent-color: var(--grf-mint);
	width: 16px;
	height: 16px;
}

/* ===== Card destra "Il tuo ordine" (rounded-2xl border, sticky) ===== */
.grf-checkout-card {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	background: var(--grf-surface);
	padding: 24px;
}
.grf-checkout-card #order_review_heading {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
}
/* Il funnel upsell (plugin VillaTheme WCUF) inietta in cima a #order_review un
   container "nascosto" (classe .viwcuf-hidden) che però conserva ~500px di
   altezza, creando un vuoto sopra il riepilogo. Lo collassiamo del tutto. */
.grf-checkout-card .viwcuf-checkout-us-container.viwcuf-hidden,
.grf-checkout-card .viwcuf-hidden {
	display: none !important;
}

/* Tabella riepilogo ordine: da table a righe pulite (mockup) */
.grf-checkout-card .shop_table {
	width: 100%;
	border: 0 !important;          /* WooCommerce mette border 1px + radius sulla table */
	border-radius: 0 !important;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}
.grf-checkout-card .shop_table thead {
	display: none; /* le intestazioni Prodotto/Subtotale non servono nel mockup */
}
.grf-checkout-card .shop_table th,
.grf-checkout-card .shop_table td {
	border: 0 !important;   /* WooCommerce mette border-top su ogni td: lo azzeriamo
	                           e teniamo solo i 2 separatori voluti (sotto). */
	padding: 0;
}
.grf-checkout-card .shop_table .cart_item td {
	padding: 14px 0;
	vertical-align: top;
}
.grf-checkout-card .shop_table .cart_item td.product-name {
	color: var(--grf-ink);
	font-weight: 600;
	line-height: 1.4;
	padding-right: 12px;
}
.grf-checkout-card .shop_table .cart_item td.product-name .product-quantity {
	color: #737373;
	font-weight: 500;
}
/* Riga prodotto con THUMBNAIL (override review-order): immagine a sinistra,
   testo a destra — il riepilogo non è più scarno. */
.grf-checkout-card .grf-co-item {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-areas:
		"thumb name"
		"meta meta";
	gap: 14px 16px;
	align-items: center;
}
.grf-checkout-card .grf-co-item__thumb {
	grid-area: thumb;
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
}
.grf-checkout-card .grf-co-item__thumb img {
	width: 100% !important;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 4px;
}
.grf-checkout-card .grf-co-item__text {
	grid-area: name;
	align-self: center;
	min-width: 0;
}
.grf-checkout-card .grf-co-item__meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--grf-hair);
}
.grf-checkout-card .grf-co-item__qty {
	font-size: 14px;
	color: var(--grf-ink);
}
.grf-checkout-card .grf-co-item__price {
	font-weight: 800;
	font-size: 16px;
	color: var(--grf-ink);
}
/* Allinea il prezzo dell'item al bordo destro della tabella, come subtotale/totale
   del tfoot (la cella prodotto in colspan aveva un padding-right che lo staccava di 12px). */
.grf-checkout-card .woocommerce-checkout-review-order-table td.product-name {
	padding-right: 0 !important;
}
/* Coupon al checkout: nascosto (il codice si applica nel carrello, dove c'è il
   box dedicato). Evita la notice incoerente "Hai un codice promozionale?". */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}
.grf-checkout-card .shop_table .cart_item td.product-total {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}
/* Righe totali (subtotale / spedizione / fee / totale) */
.grf-checkout-card .shop_table tfoot th,
.grf-checkout-card .shop_table tfoot td {
	padding: 12px 0;
}
.grf-checkout-card .shop_table tfoot tr th {
	font-weight: 500;
	color: #525252;
	text-align: left;
}
.grf-checkout-card .shop_table tfoot tr td {
	text-align: right;
	font-weight: 600;
	color: var(--grf-ink);
}
/* Nessun bordo nella card ordine: i totali sono staccati dai prodotti solo da
   spazio (padding extra sopra il subtotale). */
.grf-checkout-card .shop_table tfoot tr.cart-subtotal th,
.grf-checkout-card .shop_table tfoot tr.cart-subtotal td {
	padding-top: 18px;
}
.grf-checkout-card .shop_table tfoot tr.cart-subtotal th {
	font-size: 18px;
	font-weight: 700;
	color: var(--grf-ink);
}
/* Ammontare subtotale: dimensione intermedia tra il prezzo dei singoli item (16px)
   e il totale finale con spedizione (20px) -> gerarchia visiva a 18px. */
.grf-checkout-card .shop_table tfoot tr.cart-subtotal td {
	font-size: 18px;
	font-weight: 700;
	color: var(--grf-ink);
}
.grf-checkout-card .shop_table tfoot tr.order-total th,
.grf-checkout-card .shop_table tfoot tr.order-total td {
	border-top: 0 !important;
}
.grf-checkout-card .shop_table tfoot tr.order-total th {
	font-size: 18px;
	font-weight: 700;
	color: var(--grf-ink);
	padding-top: 16px;
}
.grf-checkout-card .shop_table tfoot tr.order-total td {
	font-size: 20px;
	font-weight: 700;
	padding-top: 16px;
}
/* Spedizione: label "Spedizione" su una riga, opzioni A TUTTA LARGHEZZA sotto e
   allineate a sinistra (il metodo contrassegno ha un testo lungo che a destra,
   in 205px, andava a capo illeggibile). */
.grf-checkout-card .shop_table tfoot tr.woocommerce-shipping-totals th,
.grf-checkout-card .shop_table tfoot tr.woocommerce-shipping-totals td {
	display: block;
	width: 100%;
	text-align: left;
}
.grf-checkout-card .shop_table tfoot tr.woocommerce-shipping-totals th {
	font-size: 18px;
	font-weight: 700;
	color: var(--grf-ink);
}
.grf-checkout-card .shop_table tfoot tr.woocommerce-shipping-totals td {
	padding-top: 6px;
	font-weight: 500;
	color: var(--grf-ink);
}
.grf-checkout-card .shop_table .woocommerce-shipping-totals td ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 500;
}
.grf-checkout-card .shop_table .woocommerce-shipping-totals td ul li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	line-height: 1.45;
}
.grf-checkout-card .shop_table .woocommerce-shipping-totals td ul li:last-child {
	margin-bottom: 0;
}
.grf-checkout-card .shop_table .woocommerce-shipping-totals td ul input[type="radio"] {
	margin-top: -3px;   /* radio 20px centrato sulla PRIMA riga del testo (line-height 14px) */
	align-self: flex-start;
	flex: 0 0 auto;
}
.grf-checkout-card .shop_table .woocommerce-shipping-totals td ul label {
	font-weight: 500;
	color: var(--grf-ink);
}
/* Niente zebra sulle righe prodotto del riepilogo. */
.grf-checkout-card .shop_table .cart_item,
.grf-checkout-card .shop_table .cart_item td {
	background: transparent !important;
}

/* ===== Metodi di pagamento (#payment) — card radio come il mockup ===== */
.grf-checkout-card #payment {
	background: transparent;
	border: 0;
	padding: 16px 0 0;
}
.grf-checkout-card #payment .payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}
.grf-checkout-card #payment .payment_methods > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 0 0 12px;
	background: #fff;
	transition: border-color 0.15s ease;
}
.grf-checkout-card #payment .payment_methods > li:hover {
	border-color: var(--grf-mint);
}
/* Metodo SELEZIONATO: card evidenziata (bordo mint + sfondo mint tenue) — look
   moderno "card selezionabile" invece del solo bullet. */
.grf-checkout-card #payment .payment_methods > li:has( > input[name="payment_method"]:checked ) {
	border-color: var(--grf-mint);
	background: #f0fdfa;
}
.grf-checkout-card #payment .payment_methods > li > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;   /* resta sulla riga del radio (no wrap sotto); va a capo solo il payment_box */
	min-width: 0;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	margin: 0;
}
/* Radio custom (cerchio outline + pallino mint) su TUTTI i radio della card
   destra: metodi di pagamento, token salvati e opzioni di spedizione.
   width/height !important + align-self:center: i radio dei token Nexi stavano
   dentro label flex che li deformava a ovale. */
.grf-checkout-card input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	margin: 0;
	flex: 0 0 20px;
	align-self: center;
	border: 2px solid #d4d4d4;
	border-radius: 50%;
	background: #fff;
	position: relative;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.grf-checkout-card input[type="radio"]:checked {
	border-color: var(--grf-mint);
}
.grf-checkout-card input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--grf-mint);
}
/* Carta salvata (token Nexi): il campo CVV non deve stare attaccato al testo. */
.grf-checkout-card #payment .xpay-card-cvv {
	display: inline-block;
	margin-top: 8px;
}
.grf-checkout-card #payment .payment_methods > li img {
	max-height: 24px;
	width: auto;
	margin: 0 0 0 4px;
	vertical-align: middle;
}
/* Nexi inietta nel label un container con l'immagine delle carte che gonfia la riga
   (li a 68px) e disallinea il radio: ne limito l'altezza, così resta sulla riga del testo. */
.grf-checkout-card #payment .nexixpay-loghi-container {
	display: none;   /* icone carte decorative: gonfiavano la riga del label (li a 72px) e
	                    facevano wrappare il testo sotto il radio. Nascoste -> radio allineato al testo. */
}
.grf-checkout-card #payment .payment_box {
	flex: 0 0 100%;   /* va a capo sotto radio+label, a tutta larghezza */
	background: var(--grf-surface) !important;   /* batte il grigio-lavanda #dfdcde di Woo */
	border: 1px solid var(--grf-hair);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 12px 0 0;
	font-size: 13px;
	color: #525252;
	line-height: 1.6;
}
/* Via il triangolo grigio del box pagamento (default Woo). */
.grf-checkout-card #payment .payment_box::before {
	display: none !important;
}
.grf-checkout-card #payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* Termini e condizioni */
.grf-checkout-card .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0;
	font-size: 12px;
	color: #737373;
	line-height: 1.6;
}
.grf-checkout-card .woocommerce-terms-and-conditions-wrapper a {
	color: var(--grf-mint);
	text-decoration: underline;
}

/* ===== Bottone "Effettua l'ordine" — pill mint full-width (mockup) ===== */
.grf-checkout-card #place_order,
.grf-checkout-card .place-order .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--grf-mint) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 16px 24px !important;
	font-size: 16px;
	font-weight: 600 !important;
	text-align: center;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.15s ease;
}
.grf-checkout-card #place_order:hover,
.grf-checkout-card .place-order .button:hover {
	background: #0B7C72 !important;
}
.grf-checkout-card .place-order {
	margin: 0;
	padding: 0;
}

/* Nota sicurezza SSL sotto il bottone (riusa il box mint del mockup) */
.grf-checkout-card .place-order::after {
	content: '✓  Transazione crittografata SSL';
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 11px;
	color: #737373;
}

/* Avvisi/errori Woo a larghezza piena sopra il form */
.grf-checkout > .woocommerce-info,
.grf-checkout > .woocommerce-message,
.grf-checkout > .woocommerce-error,
.grf-checkout-form > .woocommerce-NoticeGroup {
	border-radius: 12px;
}

/* ===== Mobile: una colonna, card ordine sotto i campi ===== */
@media (max-width: 1023px) {
	.grf-checkout-aside {
		margin-top: 32px;
	}
}

/* =========================================================
   BLOG — archivio (griglia card) + singolo articolo + commenti
   Coerente con .grf-cart-head / .grf-account-pagehead / .grf-cart-card:
   token mint, card radius 16px, hairline, pill mint, bottoni pill.
   Prefisso classi custom: .grf-blog-
   ========================================================= */

/* Larghezza del contenitore main per le pagine blog (allineato al resto del sito). */
.grf-blog-archive,
.grf-blog-single {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 24px 72px;
}

/* ---- Pill categoria (riusata da archivio e singolo) ---- */
.grf-blog-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--grf-mint);
	background: var(--grf-mintsoft);
	padding: 6px 14px;
	border-radius: 9999px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
a.grf-blog-pill:hover {
	background: var(--grf-mint);
	color: #fff;
}
.grf-blog-pill--static {
	cursor: default;
}

/* ---- Breadcrumb (gemello di .grf-cart-breadcrumb) ---- */
.grf-blog-breadcrumb {
	font-size: 14px;
	color: #737373;
	margin-bottom: 20px;
}
.grf-blog-breadcrumb a {
	color: #737373;
	text-decoration: none;
}
.grf-blog-breadcrumb a:hover {
	color: var(--grf-mint);
}
.grf-blog-breadcrumb span[aria-hidden] {
	margin: 0 8px;
	color: var(--grf-hair);
}
.grf-blog-breadcrumb__current {
	color: var(--grf-ink);
	font-weight: 600;
}

/* =========================================================
   ARCHIVIO — intestazione
   ========================================================= */
.grf-blog-archive__head {
	margin-bottom: 40px;
}
.grf-blog-archive__head .grf-blog-pill {
	margin-bottom: 16px;
}
.grf-blog-archive__title {
	margin: 0;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--grf-ink);
}
.grf-blog-archive__sub {
	margin: 14px 0 0;
	max-width: 640px;
	font-size: 18px;
	line-height: 1.6;
	color: #525252;
}

/* =========================================================
   ARCHIVIO — griglia di card
   ========================================================= */
.grf-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.grf-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.grf-blog-card:hover {
	border-color: var(--grf-mint);
	box-shadow: 0 12px 28px rgba(13, 148, 136, 0.10);
	transform: translateY(-2px);
}
/* Immagine featured: ratio costante, cover (niente immagini giganti). */
.grf-blog-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--grf-surface);
}
.grf-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.grf-blog-card:hover .grf-blog-card__img {
	transform: scale(1.04);
}
.grf-blog-card__img--placeholder {
	background:
		linear-gradient(135deg, var(--grf-mintsoft) 0%, var(--grf-surface) 100%);
}
.grf-blog-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 24px 26px;
	flex: 1;
}
.grf-blog-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.grf-blog-card__title a {
	color: var(--grf-ink);
	text-decoration: none;
}
.grf-blog-card__title a:hover {
	color: var(--grf-mint);
}
.grf-blog-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: #525252;
}
.grf-blog-card__excerpt p {
	margin: 0;
}
/* "Leggi di più →" spinto in basso, allineato fra le card. */
.grf-blog-card__more {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--grf-mint);
	text-decoration: none;
}
.grf-blog-card__more span {
	transition: transform 0.15s ease;
	display: inline-block;
}
.grf-blog-card__more:hover span {
	transform: translateX(4px);
}

.grf-blog-empty {
	padding: 48px 0;
	color: #525252;
	font-size: 17px;
}

/* ---- Paginazione ---- */
.grf-blog-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 48px;
	gap: 16px;
}
.grf-blog-pagination a {
	display: inline-block;
	border: 1px solid var(--grf-hair);
	border-radius: 9999px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--grf-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.grf-blog-pagination a:hover {
	border-color: var(--grf-mint);
	color: var(--grf-mint);
}

/* =========================================================
   SINGOLO ARTICOLO — header + contenuto leggibile
   ========================================================= */
.grf-blog-single {
	max-width: 1100px;
}
.grf-blog-single__head {
	max-width: 760px;
	margin: 0 auto 36px;
	text-align: left;
}
.grf-blog-single__head .grf-blog-pill {
	margin-bottom: 18px;
}
.grf-blog-single__title {
	margin: 0;
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--grf-ink);
}
.grf-blog-single__meta {
	margin-top: 16px;
	font-size: 15px;
	color: #737373;
}
.grf-blog-single__meta span[aria-hidden] {
	margin: 0 8px;
	color: var(--grf-hair);
}
.grf-blog-single__meta-cat {
	color: var(--grf-mint);
	font-weight: 600;
}
/* Featured image grande, border-radius coerente con le card. */
.grf-blog-single__media {
	margin: 32px 0 0;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--grf-hair);
	background: var(--grf-surface);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.grf-blog-single__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Corpo articolo: colonna leggibile centrata (~720px). */
.grf-blog-single__content {
	max-width: 720px;
	margin: 40px auto 0;
}
.grf-blog-single .entry-content {
	font-size: 18px;
	line-height: 1.75;
	color: #262626;
}
.grf-blog-single .entry-content > *:first-child {
	margin-top: 0;
}
.grf-blog-single .entry-content p {
	margin: 0 0 1.4em;
}
.grf-blog-single .entry-content h2 {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 2em 0 0.6em;
}
.grf-blog-single .entry-content h3 {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 1.6em 0 0.5em;
}
.grf-blog-single .entry-content ul,
.grf-blog-single .entry-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}
.grf-blog-single .entry-content li {
	margin-bottom: 0.5em;
}
.grf-blog-single .entry-content ul li::marker {
	color: var(--grf-mint);
}
.grf-blog-single .entry-content a {
	color: var(--grf-mint);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.grf-blog-single .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.grf-blog-single .entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--grf-mint);
	color: #525252;
	font-style: italic;
}
.grf-blog-single__tags {
	max-width: 720px;
	margin: 32px auto 0;
	font-size: 14px;
	color: #737373;
}
.grf-blog-single__tags a {
	color: var(--grf-mint);
	text-decoration: none;
}

/* =========================================================
   COMMENTI — pulizia coerente col sito (bottone pill mint)
   ========================================================= */
.grf-blog-single .comments-area {
	max-width: 720px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--grf-hair);
}
.grf-blog-single .comments-area .title-comments,
.grf-blog-single .comments-area .comment-reply-title {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
}
.grf-blog-single .comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}
.grf-blog-single .comment-list .comment-body {
	background: #fff;
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 22px 24px;
	margin-bottom: 16px;
}
.grf-blog-single .comment-list .comment-author .fn {
	font-weight: 700;
	font-style: normal;
}
.grf-blog-single .comment-list .comment-author .says {
	display: none;
}
.grf-blog-single .comment-list .comment-meta {
	font-size: 13px;
	color: #737373;
}
.grf-blog-single .comment-list .comment-meta a {
	color: #737373;
	text-decoration: none;
}
.grf-blog-single .comment-list .reply a {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--grf-mint);
	text-decoration: none;
}
/* Form: campi col linguaggio del sito (radius, hairline, focus mint). */
.grf-blog-single .comment-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.grf-blog-single .comment-form p {
	margin: 0;
}
.grf-blog-single .comment-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}
.grf-blog-single .comment-form input[type="text"],
.grf-blog-single .comment-form input[type="email"],
.grf-blog-single .comment-form input[type="url"],
.grf-blog-single .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--grf-surface);
	border: 1px solid var(--grf-hair);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 15px;
	color: var(--grf-ink);
}
.grf-blog-single .comment-form input:focus,
.grf-blog-single .comment-form textarea:focus {
	outline: none;
	border-color: var(--grf-mint);
	box-shadow: 0 0 0 3px var(--grf-mintsoft);
}
.grf-blog-single .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: #525252;
}
.grf-blog-single .comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 3px;
}
/* Bottone "Invia commento": pill mint come gli altri CTA del sito. */
.grf-blog-single .comment-form .form-submit {
	margin: 0;
}
.grf-blog-single .comment-form #submit {
	background: var(--grf-mint);
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.grf-blog-single .comment-form #submit:hover {
	background: #0B7C72;
}

/* =========================================================
   BLOG — responsive
   ========================================================= */
@media (max-width: 1023px) {
	.grf-blog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
}
@media (max-width: 640px) {
	.grf-blog-archive,
	.grf-blog-single {
		padding: 32px 18px 56px;
	}
	.grf-blog-grid {
		grid-template-columns: 1fr;
	}
	.grf-blog-single .entry-content {
		font-size: 17px;
	}
	.grf-blog-pagination {
		flex-direction: column;
	}
}

/* =========================================================
   SALA STAMPA — pagina istituzionale (veste coerente col sito; testi placeholder)
   ========================================================= */
.grf-press {
	max-width: 860px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}
.grf-press-hero {
	text-align: center;
	margin-bottom: 48px;
}
.grf-press-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--grf-mint);
	background: var(--grf-mintsoft);
	padding: 6px 14px;
	border-radius: 9999px;
}
.grf-press-hero h1 {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 16px 0 12px;
}
.grf-press-lead {
	font-size: 17px;
	line-height: 1.7;
	color: #525252;
	max-width: 640px;
	margin: 0 auto;
}
.grf-press-section {
	margin-bottom: 40px;
}
.grf-press-section h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--grf-hair);
}
.grf-press-section p {
	font-size: 16px;
	line-height: 1.75;
	color: #404040;
}
.grf-press-section__hint {
	color: #737373;
	font-size: 15px;
}
/* Card contatti stampa */
.grf-press-card {
	border: 1px solid var(--grf-hair);
	border-radius: 16px;
	padding: 24px 28px;
	background: var(--grf-surface);
}
.grf-press-card__label {
	margin: 0 0 6px !important;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--grf-mint);
}
.grf-press-card__name {
	margin: 0 0 4px !important;
	font-size: 18px;
	font-weight: 700;
	color: var(--grf-ink);
}
.grf-press-card__meta a {
	color: var(--grf-mint);
	text-decoration: none;
}
.grf-press-card__meta a:hover {
	text-decoration: underline;
}
/* Materiali per la stampa: card-bottoni download */
.grf-press-downloads {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}
/* wpautop inserisce <br> tra i link: vanno neutralizzati o diventano grid item. */
.grf-press-downloads br {
	display: none;
}
.grf-press-dl {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 64px;
	padding: 16px;
	border: 1px solid var(--grf-hair);
	border-radius: 14px;
	background: #fff;
	color: var(--grf-ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.grf-press-dl:hover {
	border-color: var(--grf-mint);
	background: var(--grf-mintsoft);
	color: var(--grf-mint);
}
@media (max-width: 640px) {
	.grf-press-hero h1 { font-size: 30px; }
	.grf-press-downloads { grid-template-columns: 1fr; }
}

/* =========================================================
   PAGINA PRODOTTI — card Torello/Aphrodia (set offerte): il bottone "Scopri"
   ancorato in fondo, così resta allineato tra le due card anche quando la riga
   badge ha altezze diverse (es. "ABBONAMENTO 3·6·12 MESI" vs "IN ARRIVO").
   La card inner è già flex-column → margin-top:auto spinge il bottone in fondo.
   ponytail: ID Elementor hardcoded — da convertire in classe custom prima del go-live online.
   ========================================================= */
/* La DESCRIZIONE (widget-icon, primo blocco) cresce a riempire lo spazio: così
   la riga badge e il bottone scendono insieme in fondo e restano allineati tra
   le due card, anche se le descrizioni hanno altezze diverse (Torello +23px). */
.elementor-element-14461ab3 > .e-con-inner > .elementor-widget:first-child,
.elementor-element-1de7613f > .e-con-inner > .elementor-widget:first-child {
	flex-grow: 1 !important;
}

/* ============================================================
   Coming Soon / Manutenzione — pagina Elementor (slug coming-soon)
   Struttura: widget Elementor con classi grf-cs-*; qui lo stile.
   ============================================================ */
.grf-cs-wrap, .elementor-element-grfcs01{ background:radial-gradient(1100px 600px at 50% -10%,#CCFBF1 0%,transparent 60%),#FAFAFA !important; text-align:center; }
.elementor-element-grfcs01 > .elementor-widget{ margin-left:auto !important; margin-right:auto !important; max-width:560px !important; }
.grf-cs-logo{ margin-bottom:30px; }
.grf-cs-logo img{ width:240px; max-width:74%; height:auto; }
.grf-cs-badge{ margin-bottom:22px; }
.grf-cs-badge .elementor-heading-title{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#0D9488 !important; background:#fff; border:1px solid #CCFBF1; padding:7px 14px; border-radius:999px; }
.grf-cs-title{ margin-bottom:18px; }
.grf-cs-title .elementor-heading-title{ font-size:clamp(30px,7vw,46px) !important; line-height:1.05; letter-spacing:-.03em; color:#0A0A0A !important; max-width:8em; margin-left:auto; margin-right:auto; }
.grf-cs-lead{ font-size:16px; line-height:1.6; color:#6B7280; }
.grf-cs-lead .elementor-widget-container{ max-width:440px; margin:0 auto; }
.grf-cs-lead p{ margin:0 0 14px; }
.grf-cs-lead p:last-child{ margin-bottom:0; }
.grf-cs-lead strong{ color:#0A0A0A; }
.grf-cs-barbox{ margin-top:34px; }
.grf-cs-bar{ height:8px; width:260px; max-width:80%; margin:0 auto; background:#fff; border:1px solid #E5E7EB; border-radius:999px; overflow:hidden; }
.grf-cs-bar i{ display:block; height:100%; width:40%; border-radius:999px; background:linear-gradient(90deg,#0D9488,#0B7A70); animation:grfslide 1.8s ease-in-out infinite; }
@keyframes grfslide{ 0%{margin-left:-40%} 100%{margin-left:100%} }
.grf-cs-work{ margin-top:14px; font-size:13px; color:#6B7280; text-align:center; }
.grf-cs-work .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#0D9488; margin-right:6px; animation:grfpulse 1.4s ease-in-out infinite; }
@keyframes grfpulse{ 0%,100%{opacity:.3} 50%{opacity:1} }
.grf-cs-contact{ margin-top:40px; padding-top:24px; border-top:1px solid #E5E7EB; font-size:14px; color:#6B7280; }
.grf-cs-contact a{ color:#0D9488; font-weight:700; text-decoration:none; }
.grf-cs-foot{ margin-top:18px; font-size:12px; color:#9CA3AF; }

/* ============================================================
   Shop / archivio prodotti WooCommerce — allineamento design GR Farma
   (prezzi giallo-oliva -> ink; bottoni grigi -> mint)
   ============================================================ */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price > .amount { color: #0A0A0A !important; font-weight: 700; }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount { color: #9CA3AF !important; font-weight: 400; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: #0A0A0A; font-weight: 700; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button {
	background: #0D9488 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	transition: background .15s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover { background: #0B7A70 !important; }
/* "in offerta" badge + risultati/ordinamento coerenti */
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select { color: #6B7280; }

/* ============================================================
   Notice WooCommerce (messaggi / avvisi / errori) — allineate al brand
   (default: bordo verde-lime/blu/rosso WooCommerce -> mint / rosso Torello)
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: #0D9488 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #0A0A0A;
	border-radius: 0 0 8px 8px;
}
.woocommerce-message::before { color: #0D9488 !important; }   /* spunta success */
.woocommerce-info::before    { color: #0D9488 !important; }
.woocommerce-error { border-top-color: #DC2626 !important; }
.woocommerce-error::before   { color: #DC2626 !important; }
/* link dentro le notice (es. "Annullare?", "Visualizza carrello") -> mint */
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) { color: #0D9488 !important; font-weight: 600; text-decoration: underline; }
/* bottoni dentro le notice (es. "Visualizza carrello") -> mint pieno */
.woocommerce-message a.button,
.woocommerce-info a.button {
	background: #0D9488 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 600 !important;
}

/* Badge "In offerta" (onsale) nello shop -> spostato a sinistra (era a destra) */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product span.onsale {
	right: auto !important;
	left: 0 !important;
	margin-left: -6.856px !important;
	margin-right: 0 !important;
}

/* ============================================================
   HEADER: contenuto boxed (allineato al contenuto del sito, 1200px)
   Online il contenitore interno dell'header era full-width -> le icone
   account/carrello restavano incollate al bordo su schermi larghi.
   Lo riportiamo a 1200px centrato come il resto del sito.
   (Su local il container e' gia boxed: la regola e' innocua.)
   ============================================================ */
.elementor-location-header > .e-con > .e-con {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================================
   BADGE CARD PRODOTTO ("Massima continuita" / "Presto disponibile")
   I badge sono <span> con stile inline (senza classe) dentro un widget
   di testo Elementor. Online quel widget e' arrivato con position:relative
   (differenza di migrazione), intrappolando il badge absolute dentro al
   widget invece di ancorarlo alla CARD. Lo riportiamo a static: cosi' il
   badge si ancora al container-card (relative) e straddla il bordo superiore.
   Selettori via :has() perche' i badge non hanno una classe propria e gli
   ID degli elementi Elementor cambiano tra local e online.
   ============================================================ */
.elementor-widget-text-editor:has(span[style*="top:-12px"]),
.elementor-widget-text-editor:has(span[style*="border-radius:9999px"][style*="#9F1239"]) {
	position: static !important;
}

/* "Presto disponibile": stessa posizione di "Massima continuita"
   (a cavallo del bordo superiore). Sul mockup era una pill statica:
   la rendiamo absolute e centrata come l'altro badge.
   NB: il discriminante "border-radius:9999px" e' essenziale -> il badge e' una
   pill, mentre l'icona ♀ della card "Sei una donna" usa gli STESSI colori
   (#FFF1F2/#9F1239) ma e' un quadrato (border-radius:16px): senza il
   discriminante il selettore la rendeva absolute facendola sovrapporre al titolo. */
.elementor-widget-text-editor:has(span[style*="border-radius:9999px"][style*="#9F1239"]) > p {
	margin: 0 !important;
}
span[style*="border-radius:9999px"][style*="#FFF1F2"][style*="#9F1239"] {
	position: absolute !important;
	top: -12px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	white-space: nowrap !important;
}

/* ============================================================
   PAGINE LEGALI / TESTO (es. Condizioni generali di vendita)
   Contenuto nativo (non Elementor): colonna leggibile + gerarchia tipografica
   coerente col brand. Hook via .grf-legal aggiunto nel contenuto della pagina.
   ============================================================ */
.grf-legal {
	max-width: 820px;
	margin: 0 auto;
	padding: 8px 0 56px;
}
.grf-legal h1 {
	font-size: 2rem;
	font-weight: 800;
	color: var(--grf-ink, #0A0A0A);
	line-height: 1.2;
	margin: 0 0 28px;
}
.grf-legal h2 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--grf-mintdk, #0B7A70);
	line-height: 1.3;
	margin: 36px 0 10px;
}
.grf-legal p {
	font-size: 15px;
	line-height: 1.7;
	color: #374151;
	margin: 0 0 12px;
}
.grf-legal a {
	color: var(--grf-mint, #0D9488);
	text-decoration: underline;
}