/**
 * Custom Product Box Wizard - Styles
 * Version: 1.0
 */
 
 :root {
   /* Colori aziendali (palette ufficiale, vedi CLAUDE.md / DESIGN-SPEC.md) */
   --cpbw-primary-color: #324936;   /* verde scuro */
   --cpbw-primary-dark: #253527;
   --cpbw-primary-light: #3f5a44;

   --cpbw-secondary-color: #6c8f72; /* verde salvia */
   --cpbw-secondary-dark: #58745c;
   --cpbw-secondary-light: #8ba78f;
   --cpbw-sage-tint: #e8eee6;       /* sfondi tinta: note, badge, placeholder */

   --cpbw-white: #ffffff;
   --cpbw-ink: #28312a;             /* testo principale del redesign */
   --cpbw-muted: #70796d;           /* testo secondario del redesign */
   --cpbw-border: #dde3d8;          /* bordi del redesign */
   --cpbw-bg: #f8f7f3;              /* sfondo pagina del redesign */

   /* Font del redesign (Google Fonts, vedi enqueue_scripts()) */
   --cpbw-font-serif: 'Cormorant Garamond', Georgia, serif;
   --cpbw-font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Grigi neutri (UI + canvas), ancora usati da modali/notifiche non
      ancora toccate dal redesign */
   --cpbw-gray-50: #f8f9fa;
   --cpbw-gray-100: #e9ecef;
   --cpbw-gray-200: #dee2e6;
   --cpbw-gray-300: #ced4da;
   --cpbw-gray-400: #adb5bd;
   --cpbw-gray-500: #6c757d;
   --cpbw-gray-600: #495057;
   --cpbw-gray-700: #343a40;
   --cpbw-gray-800: #212529;

   /* Sfondo neutro del canvas Step 1 (la scatola è un PNG trasparente,
      lo sfondo NON è più "cotto" nei pixel dell'immagine) */
   --cpbw-canvas-bg: #eceeec;

   /* Stati: derivati dalla palette aziendale invece di verdi/rossi/gialli
      generici, coerenti con le indicazioni del redesign */
   --cpbw-success-color: #4b7a55;
   --cpbw-error-color: #a6453b;
   --cpbw-warning-color: #b8860b;
   --cpbw-info-color: #58745c;

   /* Ombre leggere, coerenti col resto del sistema */
   --cpbw-shadow-sm: 0 1px 3px rgba(50, 73, 54, 0.08);
   --cpbw-shadow-md: 0 4px 16px rgba(50, 73, 54, 0.1);
   --cpbw-shadow-lg: 0 8px 32px rgba(50, 73, 54, 0.14);
 }
 
 /* Nascondi vecchio loading quando è attivo il nuovo */
 body:has(#cpbw-fullscreen-loader) .cpbw-design-loading-overlay {
	 display: none !important;
 }
 
 /* Fallback per browser che non supportano :has() */
 .cpbw-design-loading-overlay.cpbw-hidden {
	 display: none !important;
 }

/* ==========================================================================
   App shell: header custom + progress bar a pallini + barra azioni (la
   pagina è un template Elementor Canvas senza header/footer del tema,
   quindi li fornisce interamente il plugin).

   Layout mobile-first: le regole qui sotto (senza media query) sono il
   layout mobile; @media (min-width: 901px) più sotto sovrascrive per il
   desktop (header su una riga sola con progress bar inline, barra
   prezzo/navigazione non più fissa in fondo ma subito sotto l'header).
   ========================================================================== */

.cpbw-app {
	font-family: var(--cpbw-font-sans);
	background: var(--cpbw-bg);
	color: var(--cpbw-ink);
	min-height: 100vh;
}

.cpbw-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.cpbw-app-sticky {
	position: sticky;
	top: 0;
	z-index: 200;
}

.cpbw-app-header {
	background: var(--cpbw-white);
	border-bottom: 1px solid var(--cpbw-border);
}

.cpbw-header-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
}

.cpbw-header-row--desktop {
	display: none;
}

.cpbw-header-row--mobile {
	padding: 10px 16px;
	justify-content: space-between;
}

.cpbw-header-logo {
	display: flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}

/* Prefisso #cpbw-app (specificità più alta dei selettori a classe del
   kit Elementor, stesso approccio già in uso per i pulsanti — vedi nota
   sotto "Buttons"): max-height resta comunque !important perché Elementor
   in questo caso specifico lo dichiara anche lui su "img", pareggiando la
   specificità — vince chi è !important. */
#cpbw-app .cpbw-header-logo img {
	height: 32px;
	max-height: 32px !important;
	width: auto;
	display: block;
}

.cpbw-header-logo--mobile {
	flex: 1;
	justify-content: center;
}

#cpbw-app .cpbw-header-logo--mobile img {
	height: 26px;
	max-height: 26px !important;
}

.cpbw-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Prefisso #cpbw-app: sono <a>, e il kit CSS di Elementor stila
   globalmente anche i link (colore/font/dimensione) con una specificità
   che una classe semplice non batte — stesso problema già visto sui
   <button>. */
#cpbw-app .cpbw-header-exit,
#cpbw-app .cpbw-header-logo,
#cpbw-app .cpbw-header-cart {
	text-decoration: none;
}

#cpbw-app .cpbw-header-exit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cpbw-secondary-color);
	font-family: var(--cpbw-font-sans);
	font-size: 12.5px;
	font-weight: 600;
	transition: color .15s ease;
}

#cpbw-app .cpbw-header-exit:hover {
	color: var(--cpbw-primary-color);
}

#cpbw-app .cpbw-header-exit--icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--cpbw-border);
	justify-content: center;
	color: var(--cpbw-primary-color);
}

#cpbw-app .cpbw-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--cpbw-border);
	color: var(--cpbw-primary-color);
	background: var(--cpbw-white);
	transition: background-color .15s ease;
}

#cpbw-app .cpbw-header-cart:hover {
	background: var(--cpbw-sage-tint);
}

.cpbw-header-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--cpbw-secondary-color);
	color: var(--cpbw-white);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.cpbw-header-cart-count:empty {
	display: none;
}

/* ==========================================================================
   Progress bar: pallini + linee, con etichetta nome+descrizione inline
   solo su desktop (vedi .cpbw-progress-step-label); su mobile il "Passo X
   di 3 + Titolo" (.cpbw-progress-current) sta nel blocco sotto l'header.
   ========================================================================== */

.cpbw-progress-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 16px;
	background: var(--cpbw-white);
	border-top: 1px solid var(--cpbw-border);
}

.cpbw-progress {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpbw-progress-line {
	width: 40px;
	height: 2px;
	background: var(--cpbw-border);
	margin: 0 8px;
}

.cpbw-progress-line.done {
	background: var(--cpbw-primary-color);
}

/* Prefisso #cpbw-app: i pallini raggiungibili sono <button>, altrimenti
   il kit CSS di Elementor (".elementor-kit-20 button") li riveste con
   sfondo/padding del pulsante globale del tema. */
#cpbw-app .cpbw-progress-step {
	display: flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	cursor: default;
}

#cpbw-app .cpbw-progress-step[type="button"] {
	cursor: pointer;
}

.cpbw-progress-dot {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--cpbw-muted);
	background: var(--cpbw-white);
	border: 1.5px solid var(--cpbw-border);
}

.cpbw-progress-dot-inner {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cpbw-primary-color);
}

.cpbw-progress-step.active .cpbw-progress-dot {
	border: 2px solid var(--cpbw-primary-color);
}

.cpbw-progress-step.completed .cpbw-progress-dot {
	background: var(--cpbw-primary-color);
	border-color: var(--cpbw-primary-color);
	color: var(--cpbw-white);
}

.cpbw-progress-step-label {
	display: none; /* solo desktop */
}

.cpbw-progress-current {
	text-align: center;
}

.cpbw-progress-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cpbw-secondary-color);
	font-weight: 700;
}

.cpbw-progress-current-title {
	display: block;
	font-family: var(--cpbw-font-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--cpbw-primary-color);
	margin-top: 2px;
}

/* ==========================================================================
   Toolbar contestuale allo step (filtro categoria vini, ecc.): resta in
   flusso normale subito sotto la progress bar, sia su mobile che desktop.
   La barra prezzo/CTA (.cpbw-price-nav-slot) è invece SEMPRE fissa in
   fondo allo schermo (brief 15/10/2026) — vedi la sua regola più sotto,
   non condivide più il contenitore con questa toolbar.
   ========================================================================== */

.cpbw-toolbar-region {
	background: var(--cpbw-white);
	border-bottom: 1px solid var(--cpbw-border);
}

.cpbw-toolbar-pills {
	display: flex;
	gap: 10px;
	padding: 12px 16px;
}

/* Prefisso #cpbw-app: vedi nota sui pulsanti e il kit CSS di Elementor. */
#cpbw-app .cpbw-toolbar-pill {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border-radius: 20px;
	border: 1.5px solid var(--cpbw-secondary-color);
	background: var(--cpbw-white);
	color: var(--cpbw-primary-color);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
}

#cpbw-app .cpbw-toolbar-pill:active {
	background: var(--cpbw-sage-tint);
}

.cpbw-toolbar-pill small {
	font-weight: 400;
	color: var(--cpbw-muted);
}

.cpbw-toolbar-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: var(--cpbw-white);
}

.cpbw-toolbar-count {
	flex-shrink: 0;
	font-size: 12.5px;
	color: var(--cpbw-muted);
	white-space: nowrap;
}

.cpbw-toolbar-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--cpbw-sage-tint);
	color: var(--cpbw-primary-color);
	font-size: 12.5px;
	font-weight: 600;
	text-align: center;
}

/* SEMPRE fissa in fondo allo schermo, da mobile E da desktop (brief
   15/10/2026) — prima lo era solo su mobile (su desktop stava sticky
   sotto l'header insieme alla toolbar, vedi la vecchia .cpbw-action-region
   qui sopra). I pulsanti restano nella stessa posizione reciproca, solo
   il contenitore cambia ancoraggio. */
.cpbw-price-nav-slot {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 199;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px 16px;
	background: var(--cpbw-white);
	border-top: 1px solid var(--cpbw-border);
	box-shadow: var(--cpbw-shadow-lg);
}

.cpbw-price-summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Step Riepilogo (ora il 5°, non più il 3°): il dettaglio costi è già nel
   riepilogo a centro pagina, non va ripetuto anche nella barra prezzo/nav. */
#cpbw-app[data-step="5"] .cpbw-price-summary {
	display: none;
}

.cpbw-price-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 11.5px;
	color: var(--cpbw-muted);
}

.cpbw-price-breakdown strong {
	color: var(--cpbw-ink);
	font-weight: 600;
}

.cpbw-price-total {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
}

.cpbw-nav-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cpbw-nav-buttons-group {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

/* Dimensione naturale (non "stiracchiati" a riempire), il gruppo va a
   destra grazie a justify-content:space-between sul genitore, "Ricomincia"
   resta a sinistra. */
.cpbw-nav-buttons-group #cpbw-app .cpbw-btn {
	flex: 0 0 auto;
}

/* Etichetta abbreviata del CTA "Aggiungi al carrello" (solo mobile, vedi
   media query sotto): di default (desktop) resta nascosta, si mostra la
   versione estesa. */
.cpbw-btn-label--short {
	display: none;
}

/* Link testuale (Ricomincia, Modifica...): niente chrome da pulsante. */
#cpbw-app .cpbw-link-muted {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 8px 0;
	margin: 0;
	color: var(--cpbw-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

#cpbw-app .cpbw-link-muted:hover {
	color: var(--cpbw-primary-color);
}

/* ==========================================================================
   Base Wizard Container
   ========================================================================== */

.cpbw-wizard-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 16px 100px; /* spazio in fondo per la barra prezzo/nav fissa */
}

.cpbw-main-content {
	background: var(--cpbw-white);
	border-radius: 16px;
	padding: 20px;
	box-shadow: var(--cpbw-shadow-sm);
}

/* Step Anteprima (3°, canvas Fabric.js): niente padding, il canvas riempie
   la larghezza esattamente — il suo contenitore (.cpbw-preview-viewport)
   ha già un proprio border-radius/sfondo indipendente, quindi non serve
   più la "card" bianca qui intorno. */
#cpbw-wizard-container[data-step="3"] .cpbw-main-content {
	padding: 0;
}

/* NESSUNO step ha più la "card" bianca di sfondo (brief 16/10/2026: prima
   lo step Anteprima era l'unica eccezione) — il contenuto sta sempre
   direttamente sullo sfondo neutro della pagina. NESSUN overflow:hidden,
   altrimenti contenuti più alti del previsto (menu a tendina del font,
   liste lunghe) verrebbero tagliati invece di poter scorrere con la
   pagina (brief 15/10/2026). */
.cpbw-main-content {
	background: none;
	box-shadow: none;
	overflow: visible;
}

/* ==========================================================================
   Desktop (>= 901px): header su una riga con progress bar inline, barra
   azioni non più fissa in fondo ma sticky subito sotto l'header.
   ========================================================================== */

@media (min-width: 901px) {
	.cpbw-header-row--mobile,
	.cpbw-progress-block {
		display: none;
	}

	.cpbw-header-row--desktop {
		display: flex;
		justify-content: space-between;
		padding: 14px 24px;
	}

	/* Con 5 step (brief 15/10/2026) mostrare l'etichetta di OGNI pallino
	   affiancata appesantirebbe troppo l'header: resta visibile solo
	   quella dello step attivo, per risparmiare spazio. */
	.cpbw-progress-step-label {
		display: none;
	}

	.cpbw-progress-step.active .cpbw-progress-step-label {
		display: flex;
		flex-direction: column;
		gap: 1px;
		text-align: left;
		white-space: nowrap;
	}

	/* text-transform:none esplicito: senza, il testo eredita l'uppercase
	   forzato dal kit CSS di Elementor (che qui non perdiamo per sfondo/
	   colore, essendo strong/small non dei <button>, ma per text-transform
	   sì, perché noi non lo dichiaravamo affatto). */
	#cpbw-app .cpbw-progress-step-label strong {
		font-size: 13px;
		font-weight: 700;
		text-transform: none;
		color: var(--cpbw-muted);
	}

	#cpbw-app .cpbw-progress-step-label small {
		font-size: 11px;
		text-transform: none;
		color: var(--cpbw-muted);
	}

	#cpbw-app .cpbw-progress-step.active .cpbw-progress-step-label strong {
		color: var(--cpbw-primary-color);
	}

	.cpbw-header-row--desktop .cpbw-progress {
		flex: 1;
	}

	.cpbw-progress-line {
		width: 56px;
	}

	/* Solo la toolbar (filtro vini) resta sticky sotto l'header: la barra
	   prezzo/nav è fissa in fondo allo schermo anche da desktop, vedi sotto
	   (eredita position:fixed dalla regola base di .cpbw-price-nav-slot). */
	.cpbw-toolbar-region {
		position: sticky;
		top: 65px; /* altezza della riga header desktop */
		z-index: 190;
		width: 100%;
		padding: 0 24px;
	}

	.cpbw-price-nav-slot {
		flex-direction: row;
		align-items: center;
		/* Costi/totale a sinistra (quando presenti). NON più
		   justify-content:space-between: con un solo figlio visibile (es.
		   nello step Riepilogo, dove .cpbw-price-summary è nascosto, vedi
		   sotto) "space-between" lo allinea a sinistra invece che a destra
		   — bug corretto 17/10/2026. .cpbw-nav-actions si allinea a destra
		   da solo via margin-left:auto, indipendentemente da cosa altro è
		   visibile accanto. */
		justify-content: flex-start;
		gap: 24px;
		padding: 14px 24px;
	}

	.cpbw-price-summary {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
	}

	.cpbw-price-breakdown {
		font-size: 13px;
		gap: 16px;
	}

	/* La "barra verticale" che separa il dettaglio dal totale è un bordo,
	   non un carattere nel markup: si gestisce nel responsive e non finisce
	   nel testo copiato dalla pagina. */
	.cpbw-price-total {
		font-size: 17px;
		border-left: 1px solid var(--cpbw-border);
		padding-left: 16px;
	}

	/* Sempre a destra (brief 17/10/2026), in OGNI step: margin-left:auto
	   invece di fare leva su justify-content del genitore, che si rompe
	   quando .cpbw-price-summary è nascosto (step Riepilogo). */
	.cpbw-nav-actions {
		flex: 0 0 auto;
		gap: 20px;
		margin-left: auto;
	}

	.cpbw-wizard-container {
		padding: 24px 24px 120px; /* spazio in fondo per la barra prezzo/nav, fissa anche da desktop */
	}

	.cpbw-main-content {
		padding: 32px;
	}
}

@media (max-width: 900px) {
	/* position:fixed/left/bottom/width/background/ombra sono già nella
	   regola base di .cpbw-price-nav-slot (ora fissa anche da desktop):
	   qui restano solo gli adattamenti specifici del layout mobile. */

	/* Dettaglio e totale sulla STESSA riga, separati dalla barra verticale:
	   in colonna il blocco totale andava a capo e rubava altezza alla barra
	   fissa (che su mobile copre il contenuto). */
	.cpbw-price-summary {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.cpbw-price-breakdown {
		flex: 1;
		min-width: 0;
		font-size: 11px;
		gap: 2px 8px;
	}

	/* La parola "Totale" è ridondante qui: l'importo in grassetto dopo il
	   separatore è già leggibile come totale, e su schermi stretti era la
	   causa principale dell'a-capo. */
	.cpbw-price-total-label {
		display: none;
	}

	.cpbw-price-total {
		flex: 0 0 auto;
		border-left: 1px solid var(--cpbw-border);
		padding-left: 10px;
	}

	/* Rete di sicurezza su schermi molto stretti: i pulsanti restano
	   compatti (niente stretch/full-width forzato), ma possono andare a
	   capo se davvero non c'entrano tutti sulla stessa riga. */
	.cpbw-nav-actions,
	.cpbw-nav-buttons-group {
		flex-wrap: wrap;
		min-width: 0;
	}

	#cpbw-app .cpbw-nav-buttons-group .cpbw-btn {
		min-width: 0;
	}

	/* CTA "Aggiungi al carrello" abbreviata in "Carrello — 27,00 €" su
	   mobile: resta compatta, in riga con Indietro, invece di andare a
	   capo a piena larghezza. */
	.cpbw-btn-label--full {
		display: none;
	}

	.cpbw-btn-label--short {
		display: inline;
	}
}

/* ==========================================================================
   Design Section (Step 1)
   ========================================================================== */

.cpbw-design-section {
	position: relative;
}

.cpbw-loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.cpbw-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--cpbw-secondary-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: cpbw-spin 2s linear infinite;
	margin-bottom: 20px;
}
/* Spostato dallo Step 1 (era sotto il canvas) allo Step 3, prima del
   disclaimer spedizione: margine coerente con .cpbw-summary-grid/-costs
   (solo sopra, il contenitore qui ha già il suo padding). */
.cpbw-quality-disclaimer {
	background: var(--cpbw-sage-tint);
	border-radius: 10px;
	padding: 14px;
	margin-top: 20px;
	font-size: 12.5px;
	line-height: 1.5;
}

#cpbw-app .cpbw-quality-disclaimer h5 {
	color: var(--cpbw-primary-color) !important;
	font-family: var(--cpbw-font-sans) !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	margin: 0 0 4px 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cpbw-quality-disclaimer p {
	color: var(--cpbw-ink);
	margin: 0;
	font-size: 12.5px;
}

/* Design save loading overlay - NOMI CAMBIATI */
.cpbw-design-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpbw-design-loading-content {
	background: white;
	padding: 30px;
	border-radius: 12px;
	text-align: center;
	max-width: 400px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#cpbw-app .cpbw-design-loading-content h4 {
	margin: 15px 0 10px 0;
	color: #2c3e50;
	font-size: 18px;
}

.cpbw-design-loading-content p {
	color: #666;
	margin-bottom: 20px;
	line-height: 1.5;
}

.cpbw-save-progress {
	width: 100%;
}

.cpbw-save-progress-bar {
	width: 100%;
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}

.cpbw-save-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4CAF50, #45a049);
	border-radius: 4px;
	transition: width 2s ease-in-out;
	width: 0%;
}

/* Spinner esistente riutilizzato */
.cpbw-design-loading-overlay .cpbw-spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
/* ==========================================================================
   Loader a schermo intero / notifica centrale — stessa card bianca dei
   pop-up (backdrop tinta verde + riquadro bianco), niente pulsanti: sono
   schermate di sola attesa/esito. Un solo overlay che cambia contenuto
   (spinner+testo mentre carica, icona+testo per il risultato), vedi
   showFullscreenLoader()/showCenterNotification() in cpbw-wizard.js.
   ========================================================================== */

.cpbw-fullscreen-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cpbw-info-card {
	position: relative;
	z-index: 10;
	background: var(--cpbw-white);
	border-radius: 16px;
	padding: 36px 32px;
	max-width: 320px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(40, 49, 42, 0.28);
}

.cpbw-info-card .cpbw-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--cpbw-sage-tint);
	border-top: 4px solid var(--cpbw-secondary-color);
	margin: 0 auto 20px;
}

#cpbw-app .cpbw-info-card h3 {
	margin: 0;
	font-family: var(--cpbw-font-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--cpbw-primary-color);
}

.cpbw-info-card p {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--cpbw-muted);
	line-height: 1.5;
}

.cpbw-info-card .cpbw-result-icon-circle {
	margin: 0 auto 16px;
}


@keyframes cpbw-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.cpbw-loading-text {
	color: var(--cpbw-secondary-color);
	font-weight: bold;
	margin: 0;
}

/* ==========================================================================
   Wine Section (Step 2)
   ========================================================================== */

.cpbw-wine-section {
	position: relative;
}

.cpbw-wine-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.cpbw-wine-item {
	border: 1px solid var(--cpbw-border);
	border-radius: 14px;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	background: var(--cpbw-white);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}

.cpbw-wine-item:hover {
	border-color: var(--cpbw-secondary-color);
	transform: translateY(-2px);
	box-shadow: var(--cpbw-shadow-md);
}

.cpbw-wine-item.selected {
	border-color: var(--cpbw-primary-color);
	border-width: 1.5px;
	background: var(--cpbw-sage-tint);
}

.cpbw-selected-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--cpbw-secondary-color);
	color: var(--cpbw-white);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

/* height:auto (bug corretto 17/10/2026): con un'altezza non esplicita,
   "max-height:100%" sull'img dentro (vedi sotto) non ha niente a cui
   riferirsi — le percentuali di altezza si risolvono solo contro un
   genitore con altezza esplicita — quindi "object-fit:cover" non
   ritagliava mai davvero: ogni foto prodotto manteneva la propria
   proporzione naturale, con risultato disomogeneo da una card all'altra.
   aspect-ratio (stessa proporzione 3:4 già usata su mobile, dove
   l'altezza era già fissa in px) dà un'altezza esplicita che si adatta
   comunque alla larghezza responsive della card. */
.cpbw-wine-image {
	aspect-ratio: 3 / 4;
	height: auto;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cpbw-sage-tint);
}

/* width/height:100% (non più max-width/max-height): con "max-*" l'immagine
   non viene mai COSTRETTA a riempire il riquadro, solo limitata a non
   superarlo — se la foto, alla sua dimensione naturale, è più piccola del
   riquadro (es. un prodotto fotografato "stretto" al centro di uno sfondo
   quadrato), restava della sua dimensione naturale, lasciando lo sfondo
   verde chiaro visibile sopra/sotto. Così l'immagine riempie sempre tutto
   lo spazio e object-fit:cover può ritagliarla in modo uniforme. */
#cpbw-app .cpbw-wine-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpbw-wine-info {
	margin-bottom: 20px;
}

/* !important: vedi nota sui titoli e il kit CSS di Elementor. */
#cpbw-app .cpbw-wine-name {
	margin: 0 0 10px 0 !important;
	font-family: var(--cpbw-font-sans) !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: var(--cpbw-ink) !important;
	font-weight: 700 !important;
}

.cpbw-wine-price {
	color: var(--cpbw-primary-color);
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 10px;
}

.cpbw-wine-description {
	font-size: 13px;
	color: var(--cpbw-muted);
	line-height: 1.4;
	margin: 0;
}

.cpbw-wine-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}

/* Prefisso #cpbw-app: applicata a un <select>, stilato anche lui a
   livello globale dal kit di Elementor. */
#cpbw-app .cpbw-category-select {
	width: 100%;
	max-width: 260px;
	padding: 8px 12px;
	border: 1px solid var(--cpbw-border);
	border-radius: 8px;
	font-size: 13px;
	background: var(--cpbw-white);
	color: var(--cpbw-ink);
}

#cpbw-app .cpbw-category-select:focus {
	outline: none;
	border-color: var(--cpbw-secondary-color);
}

/* Load more button */
.cpbw-load-more-container {
	text-align: center;
	margin-top: 30px;
}

#cpbw-load-more-wines {
	min-width: 200px;
}

/* Loading states */
.cpbw-wines-loading,
.cpbw-wines-error {
	text-align: center;
	padding: 40px;
	font-size: 16px;
	color: var(--cpbw-gray-600);
}

.cpbw-wines-error {
	color: var(--cpbw-error-color);
}

/* ==========================================================================
   Summary Section (Step 3)
   ========================================================================== */

.cpbw-summary-section {
	position: relative;
}

.cpbw-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin: 30px 0;
}

.cpbw-summary-item {
	display: flex;
	gap: 14px;
	border: 1px solid var(--cpbw-border);
	border-radius: 14px;
	padding: 16px;
	background: var(--cpbw-white);
}

.cpbw-summary-item-image {
	flex: 0 0 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	background: var(--cpbw-sage-tint);
	overflow: hidden;
}

#cpbw-app .cpbw-summary-item-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cpbw-summary-item-body {
	flex: 1;
	min-width: 0;
}

.cpbw-summary-item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* !important + #cpbw-app: il kit CSS di Elementor stila i titoli per tag
   (".elementor-kit-20 h4") con font-size/line-height/font-family propri;
   senza forzatura i titoli delle card diventano enormi. */
#cpbw-app .cpbw-summary-item h4 {
	margin: 0 !important;
	font-family: var(--cpbw-font-sans) !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: var(--cpbw-primary-color) !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

#cpbw-app .cpbw-summary-edit {
	padding: 0;
	font-size: 12px;
	color: var(--cpbw-secondary-color);
	flex-shrink: 0;
}

.cpbw-summary-status {
	margin: 8px 0 4px;
	font-weight: 600;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cpbw-summary-status.success {
	color: var(--cpbw-success-color);
}

.cpbw-summary-status.error {
	color: var(--cpbw-error-color);
}

.cpbw-summary-price {
	color: var(--cpbw-muted);
	font-size: 13px;
}

.cpbw-summary-costs {
	background: var(--cpbw-white);
	border: 1px solid var(--cpbw-border);
	border-radius: 14px;
	padding: 20px;
	margin-top: 20px;
}

.cpbw-cost-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	color: var(--cpbw-ink);
	padding: 4px 0;
}

.cpbw-cost-row.total {
	font-size: 17px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
}

.cpbw-cost-divider {
	border-top: 1px solid var(--cpbw-border);
	margin: 8px 0;
}

.cpbw-shipping-disclaimer {
	margin-top: 12px;
	font-size: 12px;
	color: var(--cpbw-muted);
	font-style: italic;
}

/* Punto 7 del brief: accettazione obbligatoria termini e condizioni prima
   di aggiungere al carrello (vedi render_step_summary() in
   class-cpbw-wizard.php e il toggle del pulsante "Aggiungi al carrello"
   in cpbw-wizard.js). */
.cpbw-terms-acceptance {
	margin-top: 16px;
	padding: 14px;
	border: 1px solid var(--cpbw-gray-200);
	border-radius: 10px;
	background: var(--cpbw-canvas-bg);
}

/* font-size/line-height !important: il kit CSS di Elementor sovrascrive
   altrimenti la dimensione del testo qui dentro (brief 16/10/2026). */
.cpbw-terms-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cpbw-gray-800);
	cursor: pointer;
}

/* Il testo vive in uno <span> dentro la label: se il kit di Elementor lo
   bersaglia direttamente (non solo la label), l'!important sul genitore
   da solo non basterebbe — serve anche qui. */
.cpbw-terms-label span {
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#cpbw-app .cpbw-terms-label input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	accent-color: var(--cpbw-primary-color);
	cursor: pointer;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Selettori con prefisso #cpbw-app: senza questa specificità aggiuntiva
   il kit CSS globale di Elementor (es. ".elementor-kit-20 button") vince
   sulla cascata e riscrive lo stile dei pulsanti nativi <button>. */

#cpbw-app .cpbw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: .55rem 1.4rem !important;
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: var(--cpbw-font-sans) !important;
	font-size: .875rem !important;
	font-weight: 600;
	text-transform: none !important;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
	min-width: 90px;
}

#cpbw-app .cpbw-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#cpbw-app .cpbw-btn-primary {
	background: var(--cpbw-primary-color) !important;
	color: var(--cpbw-white);
}

#cpbw-app .cpbw-btn-primary:hover:not(:disabled) {
	background: var(--cpbw-primary-dark) !important;
}

#cpbw-app .cpbw-btn-secondary {
	background: var(--cpbw-gray-100);
	color: var(--cpbw-primary-color);
}

#cpbw-app .cpbw-btn-secondary:hover:not(:disabled) {
	background: var(--cpbw-gray-200);
}

#cpbw-app .cpbw-btn-success {
	background: var(--cpbw-secondary-color);
	color: var(--cpbw-white);
}

#cpbw-app .cpbw-btn-success:hover:not(:disabled) {
	background: var(--cpbw-secondary-dark);
}

#cpbw-app .cpbw-btn-outline {
	background: transparent;
	color: var(--cpbw-error-color);
	border-color: var(--cpbw-error-color);
}

#cpbw-app .cpbw-btn-outline:hover:not(:disabled) {
	background: var(--cpbw-error-color);
	color: var(--cpbw-white);
}

/* "Chiudi" nel pop-up dettaglio vino (desktop): basso contrasto, per non
   competere con la CTA primaria "Seleziona questo vino". */
#cpbw-app .cpbw-btn-ghost-border {
	background: var(--cpbw-white);
	color: var(--cpbw-muted);
	border-color: var(--cpbw-border);
}

#cpbw-app .cpbw-btn-ghost-border:hover:not(:disabled) {
	background: var(--cpbw-gray-50);
}

/* "Vedi il carrello" nel pop-up di conferma: secondaria ma più marcata
   della precedente, bordo salvia e testo verde scuro. */
#cpbw-app .cpbw-btn-ghost-sage {
	background: var(--cpbw-white);
	color: var(--cpbw-primary-color);
	border-color: var(--cpbw-secondary-color);
}

#cpbw-app .cpbw-btn-ghost-sage:hover:not(:disabled) {
	background: var(--cpbw-sage-tint);
}

#cpbw-app .cpbw-btn-small {
	padding: 8px 16px;
	font-size: 14px;
	min-width: 80px;
}

#cpbw-app .cpbw-btn-full {
	width: 100%;
}

/* ==========================================================================
   Modals — bottom sheet su mobile, card centrata su desktop (stessa
   struttura per il pop-up dettaglio vino e quello di conferma carrello).
   Mobile-first: le regole di base qui sotto sono il bottom sheet; la
   media query desktop più sotto sovrascrive per la card centrata.
   ========================================================================== */

.cpbw-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cpbw-modal.active,
.cpbw-success-modal {
	opacity: 1;
	visibility: visible;
}

.cpbw-success-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Tinta verde aziendale invece del nero/grigio generico: stessa su
   entrambi i pop-up redesignati. */
.cpbw-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(50, 73, 54, 0.5);
}

.cpbw-modal-content {
	background: var(--cpbw-white);
	border-radius: 20px 20px 0 0;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	z-index: 10;
	box-shadow: 0 -8px 30px rgba(40, 49, 42, 0.18);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.cpbw-modal.active .cpbw-modal-content,
.cpbw-success-modal .cpbw-modal-content {
	transform: translateY(0);
}

.cpbw-modal-drag-handle {
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--cpbw-border);
	margin: 10px auto 0;
}

#cpbw-app .cpbw-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: var(--cpbw-white);
	color: var(--cpbw-muted);
	border: 1px solid var(--cpbw-border);
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	z-index: 10;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

#cpbw-app .cpbw-modal-close:hover {
	background: var(--cpbw-sage-tint);
}

.cpbw-modal-body {
	padding: 6px 22px 22px;
}

/* ==========================================================================
   Pop-up dettaglio vino — griglia con aree nominate: stesso markup,
   disposizione diversa per breakpoint (vedi media query desktop sotto).
   ========================================================================== */

.cpbw-wine-modal-grid {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-areas:
		"image   heading"
		"content content"
		"actions actions";
	gap: 6px 14px;
	align-items: center;
}

.cpbw-wine-modal-image {
	grid-area: image;
	width: 72px;
	height: 110px;
	border-radius: 8px;
	background: var(--cpbw-sage-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* cover invece di contain, width/height:100% invece di max-*: stessa
   correzione già applicata a .cpbw-wine-image (griglia vini) — su
   richiesta esplicita, dopo aver visto il risultato più "pieno" lì
   (brief 17/10/2026, si accetta qui lo stesso rischio di ritaglio del
   collo/base della bottiglia per foto con proporzioni molto diverse dal
   pannello, risolto in cambio di un riempimento sempre coerente). */
#cpbw-app .cpbw-wine-modal-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpbw-wine-modal-heading {
	grid-area: heading;
}

#cpbw-app .cpbw-wine-modal-heading h2 {
	margin: 0 !important;
	font-family: var(--cpbw-font-serif) !important;
	font-size: 21px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	color: var(--cpbw-primary-color) !important;
}

.cpbw-wine-modal-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
	margin-top: 3px;
}

.cpbw-wine-modal-body-content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 8px;
}

.cpbw-wine-modal-description {
	font-size: 13px;
	line-height: 1.55;
	color: var(--cpbw-ink);
}

.cpbw-wine-attribute-list {
	display: flex;
	flex-direction: column;
}

.cpbw-wine-attribute-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cpbw-border);
}

.cpbw-wine-attribute-label {
	flex-shrink: 0;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cpbw-secondary-color);
	font-weight: 700;
}

.cpbw-wine-attribute-value {
	font-size: 12.5px;
	color: var(--cpbw-ink);
	font-weight: 600;
	text-align: right;
}

.cpbw-wine-modal-notes-label {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
	margin-bottom: 5px;
}

.cpbw-wine-modal-notes-text {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--cpbw-muted);
}

.cpbw-wine-modal-actions {
	grid-area: actions;
	margin-top: 10px;
}

.cpbw-wine-modal-actions .cpbw-wine-modal-secondary-close {
	display: none; /* solo desktop: su mobile basta la X / lo swipe */
}

/* ==========================================================================
   Pop-up conferma aggiunta al carrello
   ========================================================================== */

.cpbw-result-modal-content {
	padding: 14px 24px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.cpbw-result-icon-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
}

.cpbw-result-icon-circle--success {
	background: var(--cpbw-sage-tint);
	color: var(--cpbw-primary-color);
}

.cpbw-result-icon-circle--error {
	background: rgba(166, 69, 59, 0.12);
	color: var(--cpbw-error-color);
}

#cpbw-app .cpbw-result-heading h3 {
	margin: 0;
	font-family: var(--cpbw-font-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--cpbw-primary-color);
}

.cpbw-result-heading p {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--cpbw-muted);
	line-height: 1.5;
	max-width: 280px;
}

.cpbw-result-total {
	font-size: 15px;
	font-weight: 700;
	color: var(--cpbw-primary-color);
}

.cpbw-result-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

/* ==========================================================================
   Modals — desktop (>= 901px): card centrata invece di bottom sheet.
   ========================================================================== */

@media (min-width: 901px) {
	.cpbw-modal,
	.cpbw-success-modal {
		align-items: center;
		padding: 20px;
	}

	.cpbw-modal-backdrop {
		background: rgba(50, 73, 54, 0.45);
	}

	.cpbw-modal-content {
		border-radius: 16px;
		width: auto;
		max-height: 90vh;
		box-shadow: 0 20px 60px rgba(40, 49, 42, 0.28);
		transform: scale(0.94);
		transition: transform 0.3s ease;
	}

	.cpbw-modal.active .cpbw-modal-content,
	.cpbw-success-modal .cpbw-modal-content {
		transform: scale(1);
	}

	.cpbw-modal-drag-handle {
		display: none;
	}

	#cpbw-app .cpbw-modal-close {
		top: 18px;
		right: 18px;
		width: 32px !important;
		height: 32px !important;
	}

	/* Pop-up dettaglio vino: pannello immagine a piena altezza + colonna
	   contenuto, la CTA "Chiudi" secondaria torna visibile accanto alla
	   primaria. */
	.cpbw-wine-modal-grid {
		width: 720px;
		max-width: 90vw;
		grid-template-columns: 260px 1fr;
		grid-template-areas:
			"image heading"
			"image content"
			"image actions";
		gap: 0;
		align-items: stretch;
	}

	.cpbw-wine-modal-image {
		width: auto;
		height: auto;
		border-radius: 0;
		padding: 32px;
	}

	.cpbw-wine-modal-heading,
	.cpbw-wine-modal-body-content,
	.cpbw-wine-modal-actions {
		padding: 0 36px;
	}

	.cpbw-wine-modal-heading {
		padding-top: 36px;
	}

	#cpbw-app .cpbw-wine-modal-heading h2 {
		font-size: 26px !important;
	}

	.cpbw-wine-modal-price {
		font-size: 16px;
	}

	.cpbw-wine-modal-body-content {
		margin-top: 14px;
	}

	.cpbw-wine-modal-actions {
		display: flex;
		gap: 10px;
		margin-top: auto;
		padding-top: 16px;
		padding-bottom: 32px;
	}

	.cpbw-wine-modal-actions .cpbw-btn-full {
		flex: 1;
	}

	.cpbw-wine-modal-actions .cpbw-wine-modal-secondary-close {
		display: inline-flex; /* nascosta su mobile, torna visibile qui */
		flex: 0 0 auto;
	}

	/* Pop-up conferma: card più stretta e centrata, non a tutta larghezza. */
	.cpbw-result-modal-content {
		width: 440px;
		padding: 44px 40px 36px;
	}

	.cpbw-result-icon-circle {
		width: 72px;
		height: 72px;
	}

	#cpbw-app .cpbw-result-heading h3 {
		font-size: 25px;
	}

	.cpbw-result-heading p {
		max-width: 320px;
	}

	.cpbw-result-total {
		font-size: 17px;
	}

	.cpbw-result-actions {
		width: 260px;
	}
}

/* ==========================================================================
   Messages & Notifications
   ========================================================================== */

.cpbw-error,
.cpbw-warning {
	padding: 20px;
	border-radius: 8px;
	margin: 20px 0;
}

.cpbw-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.cpbw-warning {
	background: #fff3cd;
	color: #856404;
	border: 1px solid #ffeaa7;
}

#cpbw-app .cpbw-error h4,
#cpbw-app .cpbw-warning h4 {
	margin: 0 0 10px 0;
}

.cpbw-loading-content,
.cpbw-error-content {
	text-align: center;
	padding: 40px;
}

.cpbw-loading-content p,
.cpbw-error-content p {
	margin: 0;
	color: #666;
}

#cpbw-app .cpbw-error-content h4 {
	color: #dc3545;
	margin-bottom: 15px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 900px) {
	/* Sotto i 900px le card vino passano da verticali (immagine sopra) a
	   orizzontali (miniatura a sinistra, info+azioni a destra) — più
	   leggibili in una lista scrollabile su mobile, come nel mockup. */
	.cpbw-wine-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Grid, non flex: la card ha TRE figli (immagine, info, azioni) e in
	   riga i pulsanti finivano in una terza colonna che schiacciava il
	   testo a una parola per riga e sbordava dalla card. Qui l'immagine
	   occupa la colonna 1 su due righe, mentre info e azioni si impilano
	   nella colonna 2. */
	.cpbw-wine-item {
		display: grid;
		grid-template-columns: 60px 1fr;
		gap: 4px 12px;
		align-items: start;
		text-align: left;
		padding: 12px;
	}

	.cpbw-wine-image {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 60px;
		height: 80px;
		margin-bottom: 0;
	}

	.cpbw-wine-info {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		margin-bottom: 0;
	}

	#cpbw-app .cpbw-wine-name {
		font-size: 14px !important;
		margin-bottom: 4px !important;
	}

	.cpbw-wine-price {
		font-size: 14px;
		margin-bottom: 0;
	}

	/* La descrizione lunga rende la card illeggibile in lista su mobile
	   (il mockup mostra solo nome, prezzo e azione): resta consultabile
	   dal modale "Dettagli". */
	.cpbw-wine-description {
		display: none;
	}

	.cpbw-wine-actions {
		grid-column: 2;
		grid-row: 2;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	#cpbw-app .cpbw-wine-actions .cpbw-btn {
		min-width: 0;
		padding: .45rem .9rem !important;
		font-size: .8rem !important;
	}

	.cpbw-selected-badge {
		width: 26px;
		height: 26px;
		top: 8px;
		right: 8px;
	}
}

@media (max-width: 768px) {
	.cpbw-summary-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.cpbw-main-content {
		padding: 15px;
	}
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes cpbw-fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cpbw-main-content {
	animation: cpbw-fadeIn 0.3s ease-out;
}

.cpbw-wine-item {
	animation: cpbw-fadeIn 0.3s ease-out;
}

.cpbw-notification {
	animation: cpbw-fadeIn 0.3s ease-out;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.cpbw-app-sticky,
	.cpbw-price-nav-slot,
	.cpbw-wine-actions,
	.cpbw-modal,
	.cpbw-notification {
		display: none !important;
	}
	
	.cpbw-wizard-container {
		box-shadow: none;
	}
	
	.cpbw-main-content {
		box-shadow: none;
		border: 1px solid #ddd;
	}
}