/**
 * =========================================================================
 *  STORE.CSS - Stili per l'e-commerce Gibertini (area store)
 * =========================================================================
 *
 * Contiene:
 * - Variabili CSS (colori tema verde/oro Gibertini)
 * - Layout: top bar, header, category navbar, footer
 * - Componenti: search bar, icon buttons, product cards, badges
 * - Responsive: mobile-first approach
 *
 * Colori primari:
 * - Verde scuro: #1e4d2b (NCS 7020-G10Y)
 * - Oro: #E5A835 (da logo)
 *
 * Font: Inter (unico su tutto il sito dal 2026-05-22)
 */


@font-face {
	font-family: 'Phyllis CG';
	src: url('../fonts/PhyllisCG-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   VARIABILI CSS - Colori Tema Gibertini
   ========================================================================= */
:root {
	/* Colore primario - Verde foresta (RC2: forest-700 #1B4630) */
	--primary-color: #1B4630;
	--primary-color-hover: #245C3F;
	--primary-color-active: #133523;
	--primary-color-light: #2C6B49;
	--primary-color-rgb: 27, 70, 48;

	/* Colore secondario - Oro (RC2: gold-500 #F7B71D) */
	--secondary-color: #F7B71D;
	--secondary-color-hover: #D89A2C;
	--secondary-color-active: #C0851F;
	--secondary-color-light: #F4D799;
	--secondary-color-rgb: 247, 183, 29;

	/* Layout */
	--store-header-height: 70px;
	--store-catnav-height: 46px;
	--store-total-header: calc(var(--store-header-height) + var(--store-catnav-height));
	/* Altezza della barra "prezzi riservati agli iscritti", che sta sotto
	   l'intestazione e c'e' solo per chi non ha fatto l'accesso. La misura il
	   piccolo script in store/layout/header.php e la scrive qui: da sola il CSS
	   non puo' saperla, perche' cambia con la larghezza dello schermo e sparisce
	   se l'utente chiude la barra. Zero = barra assente. */
	--reserved-bar-height: 0px;

	/* Footer */
	--footer-bg: var(--primary-color);
	--footer-text: #ffffff;
	--footer-muted: rgba(255, 255, 255, 0.65);
	--footer-link-hover: var(--secondary-color);

	/* Superfici */
	--surface-bg: #f8f7f4;
	--card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	--card-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.14);

	/* -------------------------------------------------------------------
	   FONT — restyle 2026-05-23: il body resta Inter (richiesta cliente
	   del 22/05 di avere un font unico sans), ma i titoli display tornano
	   ad avere personalita' con Fraunces (graziato variabile moderno).
	   Tracciabilita' completa: --font-display e --font-hero restano DISTINTE
	   da --font-base, cosi' chi tocca il CSS vede subito quali elementi sono
	   "display" (puntano a --font-display) vs corpo testo (--font-base).
	   Per tornare al sans unico (stato 22/05) basta assegnare:
	     --font-display: var(--font-base);
	     --font-hero:    var(--font-base);
	   Per provare un altro graziato si cambia qui sotto.
	   ------------------------------------------------------------------- */
	/* RC2 (15/06, design Gibertini approvato): 3 famiglie.
	   - Outfit = corpo/label  -> --font-base
	   - EB Garamond = titoli serif eleganti (h1-h3) -> --font-display/-hero
	   - Anton = display condensato maiuscolo (hero statement, flip-clock, eyebrow) -> --font-condensed
	   Supera la regola "font unico Inter" del 22/05 (feedback-font-unico): scelta cliente.
	   30/07/2026: il corpo passa da Spartan a OUTFIT (scelta del cliente). Chi cambia
	   famiglia qui deve cambiarla anche nel <link> a Google Fonts, che sta in
	   store/layout/header.php e nelle 7 pagine autonome di store/views (login,
	   registrati, ...): il CSS da solo non scarica niente. */
	--font-base: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-display: var(--font-base); /* RC2 (29/06): heading default = font base ovunque (era EB Garamond) */
	--font-hero: var(--font-base);
	--font-serif: 'EB Garamond', 'Georgia', serif; /* serif EDITORIALE: solo home/chi-siamo/servizi (via .font-display o site.css/home-unified.css) */
	--font-condensed: 'Anton', 'Impact', 'Arial Narrow', sans-serif;

	/* -------------------------------------------------------------------
	   DESIGN SYSTEM RC2 — token esatti dal Figma (qSv9w5rbqEJrIwFUVnvChJ).
	   Vedi docs/design/analisi-design-rc2-2026-06-15.md. Additivi: i selettori
	   restyle puntano qui; i vecchi continuano a usare --primary/--secondary.
	   ------------------------------------------------------------------- */
	/* neutri crema */
	--c-white: #FFFFFF;
	--c-cream-100: #F4ECDC;
	--c-cream-200: #E8E0D1;
	--c-cream-300: #D6CCB8;
	--c-neutral-500: #7A7160;
	--c-ink: #15130F;
	--c-ink-soft: #544E43;
	--c-border: rgba(229, 224, 214, .5);
	/* forest brand */
	--c-forest-700: #1B4630;
	--c-forest-900: #0E2A1B;
	--grad-forest: linear-gradient(180deg, #0A1F14 0%, #0F2E1D 40%, #0A1F14 100%);
	--grad-forest-light: linear-gradient(135deg, #0E2A1B 0%, #1B4630 50%, #2D5C40 100%);
	/* gold accent */
	--c-gold-200: #F4D799;
	--c-gold-500: #F7B71D;
	--c-gold-600: #D89A2C;
	/* scala tipografica */
	--fs-display-lg: 56px;
	--fs-h1: 40px;
	--fs-h2: 32px;
	--fs-h3: 24px;
	--fs-body-lg: 18px;
	--fs-body: 16px;
	--fs-body-sm: 14px;
	--fs-eyebrow: 12px;
	/* forme */
	--r-btn: 5px;
	--r-card: 8px;
	--r-banner: 10px;
	/* spaziatura sezioni desktop */
	--sp-section: 80px;
	--gap-section: 64px;

	/* -------------------------------------------------------------------
	   RITMO VERTICALE — restyle 2026-05-23.
	   Prima il padding-y delle sezioni era sempre 3rem ovunque. Variando
	   il ritmo nasce gerarchia: sezioni "respiro" (hero blocks, categorie
	   primarie) usano --section-pad-lg; sezioni intermedie --section-pad-md
	   (default ex-3rem); fasce informative compatte --section-pad-sm.
	   ------------------------------------------------------------------- */
	--section-pad-sm: 1.5rem;
	--section-pad-md: 3rem;
	--section-pad-lg: 5rem;

	/* -------------------------------------------------------------------
	   MOTION — restyle 2026-05-23.
	   Curva ease-out-quart: decelera in modo esponenziale, sensazione
	   "premium" piu' marcata rispetto a ease/ease-in-out di default.
	   Niente bounce, niente elastic.
	   ------------------------------------------------------------------- */
	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}


/* =========================================================================
   TIPOGRAFIA
   ========================================================================= */
body.store-body {
	font-family: var(--font-base);
	font-size: 0.95rem;
	color: #2d2d2d;
	background-color: #fff; /* RC2 (2026-06-18): pagine su bianco (rimosso il beige di sfondo) */
	overscroll-behavior-y: none;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.store-body h1,
.store-body h2,
.store-body h3,
.store-body h4,
.store-body h5,
.store-body h6,
.font-display {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--primary-color);
}
/* RC2 (29/06): .font-display = opt-in SERIF (il default heading qui sopra ora è Spartan) */
.font-display { font-family: var(--font-serif); }



/* =========================================================================
   HEADER PRINCIPALE
   Decisione cliente 2026-05-05 (restyling): sfondo verde scuro, icone bianche.
   ========================================================================= */
.store-header {
	background: var(--grad-forest-light);
	height: var(--store-header-height);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 100;
}

.store-header > .container {
	height: 100%;
}

.store-header .header-inner {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Logo */
.store-header .header-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.store-header .header-logo a {
	display: flex;
	align-items: center;
}

.store-header .header-logo img {
	display: block;
	max-height: 38px;
	max-width: 240px;
	width: auto;
	height: auto;
}

/* Search Bar */
.store-header .header-search {
	flex: 0 1 360px;
	max-width: 360px;
	margin: 0 auto;
}

.store-search-form {
	position: relative;
	display: flex;
	align-items: center;
}

/* Autocomplete ricerca header (desktop + mobile) */
.search-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e3e0d8;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	z-index: 1050;
	max-height: 70vh;
	overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.search-suggest-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	text-decoration: none;
	color: #2a2a2a;
	border-bottom: 1px solid #f0ede8;
}
.search-suggest-item:hover { background: #f7f5f0; }
.search-suggest-item img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex-shrink: 0;
	background: #f5f3ef;
	border-radius: 6px;
}
.search-suggest-item .ss-name {
	flex: 1;
	font-size: 0.9rem;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.search-suggest-item .ss-price {
	font-weight: 600;
	font-size: 0.88rem;
	white-space: nowrap;
	color: var(--primary-color, #1e4d2b);
}
.search-suggest-all {
	display: block;
	text-align: center;
	padding: 10px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--primary-color, #1e4d2b);
	background: #f7f5f0;
	border-top: 1px solid #ece8e0;
}
.search-suggest-all:hover { background: #efebe3; }
.search-suggest-empty {
	padding: 16px 14px;
	text-align: center;
	color: #9a9a9a;
	font-size: 0.88rem;
}

.store-search-form .form-control {
	border: none;
	border-radius: 50px;
	padding: 0.4rem 2.6rem 0.4rem 1rem;
	font-size: 0.85rem;
	background-color: #faf9f7;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	height: 36px;
}

.store-search-form .form-control::placeholder {
	color: #999;
	font-size: 0.85rem;
}

.store-search-form .form-control:focus {
	border: none;
	box-shadow: 0 0 0 2px rgba(var(--secondary-color-rgb), 0.25);
	background-color: #ffffff;
	outline: none;
}

.store-search-form .btn-search {
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	/* RC2 (2026-06-18): lente oro su sfondo bianco del campo (no cerchio pieno). */
	background-color: transparent;
	color: var(--secondary-color);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
	cursor: pointer;
	font-size: 0.8rem;
}

.store-search-form .btn-search:hover {
	color: var(--secondary-color-hover);
}

/* Icon Buttons (wishlist, account, cart) */
.store-header .header-icons {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.header-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background-color: transparent;
	color: var(--c-gold-500, #F7B71D); /* RC2: icone dorate su header gradiente */
	font-size: 1.15rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	cursor: pointer;
}

.header-icon-btn:hover {
	background-color: rgba(247, 183, 29, 0.14);
	color: var(--c-gold-200, #F4D799);
}

.header-icon-btn .badge {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 0.6rem;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	/* RC2 (2026-06-18): badge header bianco + testo verde scuro (era oro/bianco). */
	background-color: #ffffff;
	color: var(--primary-color);
	font-weight: 700;
	text-align: center;
}

/* Dropdown categorie nell'header (2026-05-23) — wrapper attorno al bottone
   "fa-th-large" per ancorare la tendina. */
.header-icon-dropdown {
	position: relative;
}
.header-categories-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: var(--primary-color);
	border-radius: 10px;
	/* Ombra marcata su tutti i lati per staccare bene dal verde dell'header */
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(0, 0, 0, 0.25);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
	z-index: 1000;
	overflow: hidden;
}
.header-icon-dropdown.is-open .header-categories-dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0s;
}
.header-categories-dropdown-link {
	display: block;
	padding: 10px 18px;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: background-color 0.15s;
}
.header-categories-dropdown-link:hover {
	background-color: #153820;
	color: #ffffff;
}

/* User name label (desktop) */
.header-icon-btn .user-name-label {
	font-size: 0.78rem;
	margin-left: 4px;
	font-weight: 500;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* =========================================================================
   MOBILE SEARCH TOGGLE
   ========================================================================= */
.mobile-search-toggle {
	display: none;
}

/* =========================================================================
   OVERLAY RICERCA MOBILE — 2026-05-22
   La barra di ricerca non e' un pannello a se': l'header resta dov'e' (lo
   sfondo verde non si muove). Il contenuto dell'header (logo + icone) sfuma
   e al suo posto compare in dissolvenza il campo di ricerca. Il backdrop
   oscura solo la pagina SOTTO l'header. Chiusura: X, tap sul backdrop, ESC.
   ========================================================================= */
.mobile-search-overlay {
	display: none;
}

@media (max-width: 991.98px) {
	.mobile-search-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		pointer-events: none;
	}
	.mobile-search-overlay.active {
		pointer-events: auto;
	}

	/* Backdrop: oscura SOLO la pagina sotto l'header (l'header resta pulito).
	   Dissolvenza globale uniforme, niente backdrop-filter. */
	.mobile-search-backdrop {
		position: absolute;
		top: var(--store-header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(15, 24, 17, 0.62);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.mobile-search-overlay.active .mobile-search-backdrop {
		opacity: 1;
	}

	/* Header: il contenuto (logo + icone) sfuma quando si apre la ricerca.
	   Lo sfondo verde dell'header NON si muove: nessuna animazione di colore. */
	.store-header .header-inner {
		transition: opacity 0.25s ease;
	}
	body.mobile-search-open .store-header .header-inner {
		opacity: 0;
		pointer-events: none;
	}

	/* Pannello ricerca: sfondo TRASPARENTE, sovrapposto all'header verde.
	   Solo contenitore di layout: la tendina autocomplete (figlia del form)
	   non viene mai tagliata. */
	.mobile-search-panel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: var(--store-header-height);
		padding: 0 12px;
	}

	/* Form: compare in dissolvenza in contemporanea allo sfumare del logo. */
	.mobile-search-form {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 10px;
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.mobile-search-overlay.active .mobile-search-form {
		opacity: 1;
	}
	.mobile-search-field {
		position: relative;
		flex: 1;
		display: flex;
	}
	.mobile-search-field > i {
		position: absolute;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: #9a9a9a;
		font-size: 0.95rem;
		pointer-events: none;
	}
	.mobile-search-form .form-control {
		height: 46px;
		width: 100%;
		border: none;
		border-radius: 999px;
		background: #ffffff;
		padding: 0 1rem 0 2.75rem;
		font-size: 0.95rem;
	}
	.mobile-search-form .form-control:focus {
		box-shadow: 0 0 0 3px rgba(229, 168, 53, 0.45);
		outline: none;
	}
	.mobile-search-close {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.14);
		color: #ffffff;
		font-size: 1.15rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.mobile-search-close:hover,
	.mobile-search-close:active {
		background: rgba(255, 255, 255, 0.26);
	}

	/* Blocca lo scroll della pagina mentre la ricerca e' aperta */
	html.mobile-search-open,
	body.mobile-search-open {
		overflow: hidden;
	}
}


/* =========================================================================
   CATEGORY NAVBAR
   ========================================================================= */
/* RC2 (2026-06-18): titolo hero categoria col font condensato (Anton), non EB Garamond. */
.store-body .page-hero h1,
.site-body .page-hero h1 { font-family: var(--font-condensed); font-weight: 400; }

.store-catnav {
	background: var(--grad-forest-light); /* RC2 (2026-06-18): banda categorie a gradiente (era verde piatto) */
	height: var(--store-catnav-height);
	display: flex;
	align-items: flex-end;
	padding-top: 12px; /* respiro sopra le tab schedario */
	box-sizing: content-box;
	position: relative;
	z-index: 90;
}

.store-catnav > .container {
	height: 100%;
}

.store-catnav .catnav-inner {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	height: 100%;
}

.store-catnav .catnav-list {
	display: flex;
	align-items: flex-end;
	justify-content: center; /* tab centrate nella pagina (decisione cliente 2026-05-05) */
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	height: 100%;
}

.store-catnav .catnav-list::-webkit-scrollbar {
	display: none;
}

.store-catnav .catnav-list li {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	height: 100%;
}

/* Schedario style: tab dorato bordato, attivo prende il colore della pagina.
   Cliente 2026-05-05: testo bianco su verde, oro solo come bordo. */
.store-catnav .catnav-link {
	display: inline-flex;
	align-items: center;
	color: #ffffff;
	background-color: #235139; /* RC2 (2026-06-18): verde un po' più chiaro per le tab inattive (era #153820) */
	text-decoration: none;
	font-family: var(--font-base); /* RC2 (13/07): tab categorie col font base (Spartan), come il resto della pagina — Anton "compact" non voluto dal cliente */
	font-size: 1rem;
	font-weight: 500;
	padding: 8px 22px;
	letter-spacing: 0.02em; /* RC2 (13/07): tornato a 0.02em — non più Anton (Spartan non è compresso) */
	text-transform: none;
	border: none;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin-bottom: 0;
	transition: color 0.2s, background-color 0.2s;
	position: relative;
}

.store-catnav .catnav-link:hover {
	background-color: #1c4a2a;
	color: #ffffff;
}

.store-catnav .catnav-link.active {
	color: var(--primary-color);
	background-color: #fff; /* RC2 (2026-06-18): tab attiva bianca (era beige) */
	font-weight: 700;
	z-index: 2;
}

/* Curve concave esterne alla base sx/dx della tab attiva — stile "Chrome tab":
   il riempimento color tab "fluisce" oltre i bordi laterali con un angolo
   inverso, dando l'idea che la tab si fonda con il pannello sottostante.
   Tecnica: due pseudo-elementi 10x10 ai lati esterni della tab, ognuno con
   un radial-gradient che disegna l'angolo invertito (concavo). */
.store-catnav .catnav-link.active::before,
.store-catnav .catnav-link.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 10px;
	height: 10px;
	pointer-events: none;
}
.store-catnav .catnav-link.active::before {
	left: -10px;
	background: radial-gradient(circle at 0 0, transparent 10px, var(--surface-bg) 10.5px);
}
.store-catnav .catnav-link.active::after {
	right: -10px;
	background: radial-gradient(circle at 100% 0, transparent 10px, var(--surface-bg) 10.5px);
}

/* RC2 (13/07): al breakpoint LG (992–1199px) le 8 tab categorie non entrano tutte
   e la barra scrolla. Riduco il padding orizzontale per avvicinare il testo ai
   bordi e farcele stare senza scorrimento (a XL≥1200 entrano già col padding pieno). */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.store-catnav .catnav-link {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Mobile catnav buttons (filtri + categorie) */
.catnav-btn {
	display: none;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 8px 4px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.catnav-btn i {
	font-size: 1rem;
}

.catnav-btn:hover,
.catnav-btn.active {
	color: #ffffff;
}

.catnav-btn-categories {
	margin-left: auto;
}

/* Dropdown overlay categorie (mobile) */
/* RC2 (2026-06-26): menu Categorie/Account BIANCO come la catnav + i bottoni pill (continuità visiva). */
.catnav-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: auto;
	min-width: 200px;
	white-space: nowrap;
	background-color: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(27, 70, 48, 0.14);
	z-index: 100;
	padding: 8px;
	margin-top: 6px;
}

.catnav-dropdown.open {
	display: block;
}

.catnav-dropdown-link {
	display: flex;
	align-items: center;
	padding: 9px 14px;
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 8px;
	transition: background-color 0.15s;
}

.catnav-dropdown-link:hover {
	background-color: #f3f1ec;
	color: var(--primary-color);
}

.catnav-dropdown-link.active {
	color: var(--secondary-color);
	font-weight: 600;
}

.catnav-dropdown-link i {
	width: 18px;
	text-align: center;
	margin-right: 8px;
	font-size: 0.85rem;
	color: var(--secondary-color);
}

.catnav-dropdown-left {
	left: 0;
	right: auto;
}


/* =========================================================================
   STICKY HEADER (scrolled state)
   ========================================================================= */
.store-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
}


/* =========================================================================
   MAIN CONTENT AREA
   ========================================================================= */
.store-main {
	flex: 1;
	/* RC2 (2026-06-18): niente padding-bottom — footer a filo del contenuto.
	   Le pagine che vogliono respiro prima del footer mettono un margin-bottom locale. */
	padding-bottom: 0;
}


/* =========================================================================
   BOTTONI - Override Bootstrap (Store)
   ========================================================================= */
.store-body .btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.store-body .btn-primary:hover {
	background-color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
}

.store-body .btn-primary:focus,
.store-body .btn-primary.focus {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5);
}

.store-body .btn-outline-primary {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.store-body .btn-outline-primary:hover {
	color: #ffffff;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* Bottone oro (CTA principale) */
/* RC2: CTA oro piena, testo verde scuro MAIUSCOLO, radius 5px (Button/Primary) */
.btn-gold {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--primary-color);
	/* RC2 (2026-06-18): peso bottoni uniformato a 500 (era 700).
	   30/07/2026: 400, cioe' Outfit Regular, come chiesto dal designer. */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--r-btn);
	transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-gold:hover {
	background-color: var(--secondary-color-hover);
	border-color: var(--secondary-color-hover);
	color: var(--primary-color);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(var(--secondary-color-rgb), 0.35);
}

.btn-gold:active {
	transform: translateY(0);
}

/* Bottone outline oro */
.btn-outline-gold {
	color: var(--secondary-color);
	border-color: var(--secondary-color);
	background-color: transparent;
}

.btn-outline-gold:hover {
	color: #ffffff;
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}


/* =========================================================================
   FORM - Focus colori store
   ========================================================================= */
.store-body .form-control:focus,
.store-body .form-select:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-rgb), 0.2);
}

.store-body .form-check-input:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}


/* =========================================================================
   PRODUCT CARD
   ========================================================================= */
.product-card {
	background: #ffffff;
	/* RC2 (2026-06-18): bordo oro su tutte le card prodotto (home, catalogo, preferiti…). */
	border: 1px solid var(--c-gold-200, #F4D799);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.25s ease;
	box-shadow: var(--card-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	box-shadow: 0 28px 48px -18px rgba(27, 70, 48, 0.32);
	transform: translateY(-8px) scale(1.03); /* RC2 card-lift (comp.2) */
}

/* Image container with aspect ratio */
.product-card .card-img-wrapper {
	position: relative;
	padding-top: 100%; /* 1:1 aspect ratio */
	overflow: hidden;
	background-color: #fff;
}

.product-card .card-img-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	transition: transform 0.4s ease;
}

.product-card:hover .card-img-wrapper img {
	transform: scale(1.05);
}

/* Badges on product image (new, sale, etc.) */
.product-card .product-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

.product-card .product-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.product-badge-new {
	background-color: var(--primary-color);
	color: #ffffff;
}

.product-badge-sale {
	background-color: #c0392b;
	color: #ffffff;
}

.product-badge-coming {
	background-color: #0d6efd;
	color: #ffffff;
}

.product-badge-exclusive {
	background-color: var(--secondary-color);
	color: #ffffff;
}

/* Wishlist button on card */
.product-card .btn-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.95rem;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
	z-index: 2;
}

.product-card .btn-wishlist:hover,
.product-card .btn-wishlist.active {
	color: #c0392b;
	background-color: #ffffff;
}

/* Card body */
.product-card .card-body {
	padding: 2px 16px 14px; /* RC2 (2026-06-18): brand ancora più su (top→2) */
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.product-card .product-brand {
	font-size: 0.72rem;
	text-transform: uppercase;
	color: #888;
	letter-spacing: 0.06em;
	font-weight: 500; /* RC2 (2026-06-18): brand più leggero */
	margin-bottom: 9px; /* RC2 (2026-06-18): più spazio tra brand e nome prodotto */
}

.product-card .product-name {
	font-size: 0.9rem;
	font-weight: 400; /* RC2 (2026-06-18): nome prodotto più leggero */
	color: #2d2d2d;
	line-height: 1.35;
	margin-bottom: 8px;
	min-height: calc(0.9rem * 1.35 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card .product-name a {
	color: inherit;
	text-decoration: none;
}

.product-card .product-name a:hover {
	color: var(--primary-color);
}

/* Price formatting */
.product-card .product-price-wrapper {
	margin-top: auto;
	margin-bottom: 10px;
}

.product-price {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
}

.product-price-old {
	font-size: 0.72rem; /* ridotto (2026-07-24): prezzi lunghi (barrato + scontato) su UNA riga anche con il lucchetto */
	color: #bbb;
	text-decoration: line-through;
	margin-right: 5px;
	font-weight: 400;
}

.product-price-discount {
	font-size: 0.75rem;
	color: #c0392b;
	font-weight: 600;
	margin-left: 6px;
}

/* RC2 (2026-06-26): prezzo + simbolo € = un'unica parola — il € non va MAI a capo (ovunque) */
.product-price, .product-price-old, .product-price-discount,
.product-info .product-price-main, .product-info .product-price-original, .product-info .product-price-save { white-space: nowrap; }

/* Prezzo clienti (gruppo sconti) */
.product-price.user-price,
.product-price-main.user-price {
	color: var(--primary-color);
	font-weight: 700;
}

.dual-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
}

.dual-price-row .product-price-old {
	margin-right: 0;
}

.user-price-label {
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--secondary-color);
	letter-spacing: 0.03em;
	margin-top: 1px;
	text-align: right;
}

/* Add to cart button */
.product-card .btn-add-cart {
	width: 100%;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 8px 16px;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #ffffff;
	transition: background-color 0.2s, transform 0.15s;
}

.product-card .btn-add-cart:hover:not(:disabled) {
	background-color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
	transform: translateY(-1px);
}

.product-card .btn-add-cart:disabled {
	background-color: #ccc !important;
	border-color: #ccc !important;
	color: #888 !important;
	cursor: not-allowed;
	transform: none;
}

.product-card .btn-add-cart i {
	margin-right: 6px;
}


/* =========================================================================
   BREADCRUMB
   ========================================================================= */
.store-breadcrumb {
	background-color: transparent;
	padding: 10px 0;
	margin-bottom: 0;
	font-size: 0.82rem;
}

.store-breadcrumb .breadcrumb {
	background: transparent;
	margin-bottom: 0;
	padding: 0;
}

.store-breadcrumb .breadcrumb-item a {
	color: #888;
	text-decoration: none;
}

.store-breadcrumb .breadcrumb-item a:hover {
	color: var(--primary-color);
}

.store-breadcrumb .breadcrumb-item.active {
	color: var(--primary-color);
	font-weight: 500;
}


/* =========================================================================
   FOOTER
   ========================================================================= */
.store-footer {
	background: var(--grad-forest-light);
	color: var(--footer-text);
	padding: 3rem 0 0;
	/* RC2 (2026-06-18): nessun margin-top — footer a filo. Lo spazio prima del footer,
	   se una pagina lo richiede, va messo come margin-bottom su quella pagina. */
}

.store-footer h5 {
	color: var(--secondary-color);
	font-family: var(--font-base);
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1.2rem;
	letter-spacing: 0.02em;
}

.store-footer p {
	color: var(--footer-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}

.store-footer .footer-logo {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	margin-bottom: 1rem;
}

.store-footer .footer-description {
	color: var(--footer-muted);
	font-size: 0.85rem;
	line-height: 1.7;
	max-width: 280px;
}

/* Social icons */
.store-footer .footer-social {
	display: flex;
	gap: 10px;
	margin-top: 1.2rem;
}

.store-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.store-footer .footer-social a:hover {
	background-color: var(--secondary-color);
	color: #ffffff;
}

/* Footer links */
.store-footer .footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.store-footer .footer-links li {
	margin-bottom: 8px;
}

.store-footer .footer-links a {
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	font-size: 0.88rem;
	transition: color 0.2s, padding-left 0.2s;
}

.store-footer .footer-links a:hover {
	color: var(--secondary-color);
	padding-left: 4px;
}

/* Footer contact info */
.store-footer .footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--footer-muted);
	font-size: 0.88rem;
}

.store-footer .footer-contact li i {
	color: var(--secondary-color);
	margin-top: 3px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.store-footer .footer-contact a {
	color: var(--footer-muted);
	text-decoration: none;
}

.store-footer .footer-contact a:hover {
	color: var(--secondary-color);
}

/* Widget stato negozio (aperto / chiuso adesso) nel footer */
.footer-store-status {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-store-status .status-dot {
	font-size: 0.6rem !important;
	margin-top: 6px !important;
	animation: pulseDot 2s ease-in-out infinite;
}
.footer-store-status.is-open .status-dot {
	color: #4ade80 !important;
}
.footer-store-status.is-closed .status-dot {
	color: #ef4444 !important;
	animation: none;
}
.footer-store-status span {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
}
@keyframes pulseDot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Newsletter form in footer */
.store-footer .footer-newsletter .input-group {
	max-width: 320px;
}

.store-footer .footer-newsletter .form-control {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 0.85rem;
	border-radius: 6px 0 0 6px;
}

.store-footer .footer-newsletter .form-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.store-footer .footer-newsletter .form-control:focus {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--secondary-color);
	box-shadow: none;
}

.store-footer .footer-newsletter .btn {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #ffffff;
	border-radius: 0 6px 6px 0;
	font-weight: 600;
	font-size: 0.85rem;
}

.store-footer .footer-newsletter .btn:hover {
	background-color: var(--secondary-color-hover);
}

/* Footer bottom bar */
.store-footer-bottom {
	background-color: #0E2A1B;
	padding: 1rem 0;
	margin-top: 2rem;
	font-size: 0.82rem;
	color: rgba(255,255,255,0.7);
}

.store-footer-bottom a {
	color: var(--footer-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.store-footer-bottom a:hover {
	color: var(--secondary-color);
}

.store-footer-bottom .footer-legal-links {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}


/* =========================================================================
   PAGINA LOGIN STORE (Clienti)
   ========================================================================= */
.store-login-page {
	background: linear-gradient(135deg, #f8f7f4 0%, #ece8df 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.store-login-container {
	width: 100%;
	max-width: 440px;
}

.store-login-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.store-login-header {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-active) 100%);
	padding: 32px;
	text-align: center;
}

.store-login-header img {
	height: 45px;
	max-width: 100%;
	object-fit: contain;
	margin-bottom: 16px;
}

.store-login-header h1 {
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
}

.store-login-header p {
	color: rgba(255, 255, 255, 0.8);
	margin: 8px 0 0;
	font-size: 0.9rem;
}

.store-login-body {
	padding: 32px;
}

.store-login-body .form-floating {
	margin-bottom: 18px;
}

.store-login-body .form-floating > .form-control {
	border-radius: 10px;
	border: 2px solid #e9ecef;
	padding: 1.625rem 0.75rem 0.625rem;
	height: calc(3.5rem + 4px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.store-login-body .form-floating > .form-control:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-rgb), 0.2);
}

.store-login-body .form-floating > label {
	padding: 1rem 0.75rem;
	color: #6c757d;
	font-size: 0.95rem;
}

.store-login-body .form-floating > .form-control:focus ~ label,
.store-login-body .form-floating > .form-control:not(:placeholder-shown) ~ label {
	font-size: 0.7rem;
	opacity: 0.8;
	transform: scale(0.85) translateY(-0.6rem) translateX(0.15rem);
}

.btn-toggle-password {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px 6px;
	color: #aaa;
	cursor: pointer;
	z-index: 5;
	font-size: 0.9rem;
	transition: color 0.2s;
}

.btn-toggle-password:hover {
	color: var(--primary-color);
}

.btn-store-login {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-active) 100%);
	border: none;
	border-radius: 10px;
	padding: 14px;
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	width: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-store-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
	color: #ffffff;
}

.btn-store-login:active {
	transform: translateY(0);
}

.btn-store-login:disabled {
	opacity: 0.7;
	transform: none;
}

.store-login-footer {
	padding: 0 32px 28px;
	text-align: center;
	font-size: 0.88rem;
}

.store-login-footer a {
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
}

.store-login-footer a:hover {
	color: var(--secondary-color);
}

.store-login-divider {
	display: flex;
	align-items: center;
	margin: 20px 0;
	color: #aaa;
	font-size: 0.82rem;
}

.store-login-divider::before,
.store-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: #e0e0e0;
}

.store-login-divider span {
	padding: 0 12px;
}


/* =========================================================================
   404 PAGE
   ========================================================================= */
.store-404 {
	text-align: center;
	padding: 4rem 1rem;
}

.store-404 .display-404 {
	font-size: 8rem;
	font-weight: 700;
	color: var(--primary-color);
	opacity: 0.15;
	line-height: 1;
	font-family: var(--font-display);
}

.store-404 h2 {
	font-size: 1.5rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.store-404 p {
	color: #888;
	margin-bottom: 1.5rem;
	font-size: 1rem;
}


/* =========================================================================
   UTILITY
   ========================================================================= */
.text-gold {
	color: var(--secondary-color) !important;
}

.bg-gold {
	background-color: var(--secondary-color) !important;
}

.text-green {
	color: var(--primary-color) !important;
}

.bg-green {
	background-color: var(--primary-color) !important;
}

.badge.bg-gold {
	background-color: var(--secondary-color) !important;
	color: #ffffff;
}


/* =========================================================================
   RESPONSIVE - Tablet (max 991px)
   ========================================================================= */
@media (max-width: 991.98px) {
	.store-header .header-search {
		display: none;
	}

	.mobile-search-toggle {
		display: inline-flex;
	}

	.store-header .header-logo img {
		max-height: 34px;
		max-width: 210px;
	}

	.store-header .header-inner {
		justify-content: space-between;
		gap: 10px;
	}

	/* Allinea icona cerca al bordo destro del container */
	.store-header .header-icons {
		margin-right: -10px;
	}

	/* Category nav mobile: filtri (sx) + categorie (dx) */
	.catnav-btn {
		display: inline-flex;
	}

	.store-catnav .catnav-list {
		display: none;
	}

	/* Nascondi il filter toggle inline nella pagina catalogo (spostato in catnav) */
	.filter-toggle-btn {
		display: none !important;
	}

	/* Footer mobile */
	.store-footer .footer-description {
		max-width: 100%;
	}

	.store-footer-bottom .row {
		text-align: center;
	}

	.store-footer-bottom .footer-legal-links {
		justify-content: center;
		margin-top: 8px;
	}
}


/* =========================================================================
   RESPONSIVE - Mobile (max 767px)
   ========================================================================= */
@media (max-width: 767.98px) {
	/* RC2 (2026-07-20): overflow-x CLIP (non hidden). "hidden" su html+body forza
	   overflow-y:auto su entrambi -> due scroll container annidati -> su vari
	   Android lo scroll verticale col dito si blocca (il tap continua a funzionare).
	   "clip" taglia l'eccedenza orizzontale senza creare scroll container, quindi
	   lo scroll della pagina resta quello nativo del viewport. */
	html, body {
		overflow-x: clip;
		max-width: 100vw;
	}

	/* Sotto i 768px l'header e' piu' basso: ridefinendo la variabile (anziche'
	   l'altezza diretta) restano allineati header, hero e pannello ricerca.
	   Anche la catnav viene compressa (era 46px → 36px su mobile, era troppo
	   alta per i 2 soli bottoni "Filtri" e "Categorie" che la abitano qui). */
	:root {
		--store-header-height: 58px;
		--store-catnav-height: 36px;
	}
	/* Su mobile niente padding-top "schedario" (non ci sono tab visibili) e
	   i due bottoni Filtri/Categorie vanno CENTRATI verticalmente. */
	.store-catnav {
		padding: 8px 0;
		height: auto;
		align-items: center;
		background: #fff; /* RC2 (2026-06-26): barra bianca su mobile (era gradiente verde) */
		border-bottom: 1px solid #eee; /* riga grigia come quella sotto Confronta/Novità */
	}
	.store-catnav .catnav-inner {
		align-items: center;
	}
	/* RC2 (2026-06-26): Filtri/Categorie = bottoni pill (icona+testo) su barra bianca */
	.store-catnav .catnav-btn {
		padding: 7px 16px;
		font-size: 0.74rem;
		line-height: 1;
		background: #fff;
		border: 1px solid #d8d8d8;
		border-radius: 999px;
		color: var(--primary-color);
		box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	}
	.store-catnav .catnav-btn i {
		font-size: 0.95rem;
		color: var(--secondary-color);
	}
	.store-catnav .catnav-btn:hover,
	.store-catnav .catnav-btn.active {
		color: var(--primary-color);
		border-color: var(--secondary-color);
	}

	.store-header .header-logo img {
		max-height: 30px;
		max-width: 190px;
	}

	.header-icon-btn {
		width: 38px;
		height: 38px;
		font-size: 1.05rem;
	}

	.header-icon-btn .user-name-label {
		display: none;
	}

	/* Footer columns stack */
	.store-footer {
		padding-top: 2rem;
	}

	.store-footer .col-md-3,
	.store-footer .col-lg-3 {
		margin-bottom: 1.5rem;
	}

	/* Login page */
	.store-login-header {
		padding: 24px 20px;
	}

	.store-login-body {
		padding: 24px 20px;
	}

	.store-login-footer {
		padding: 0 20px 20px;
	}

	/* Product cards grid */
	.product-card .card-body {
		padding: 10px 12px;
	}

	.product-card .product-name {
		font-size: 0.85rem;
	}

	.product-price {
		font-size: 1rem;
	}

	.product-price-old { font-size: 0.7rem; } /* RC2 (2026-06-26): prezzo barrato più piccolo su mobile (il prezzo reale verde resta invariato) */
	/* RC2 (2026-06-26): su mobile i due prezzi della card vanno SEMPRE su due righe forzate (barrato sopra, reale sotto) — uniforme, niente più a-capo incoerente */
	.product-card .product-price, .product-card .product-price-old { display: block; }
	.product-card .product-price-old { margin-right: 0; line-height: 1.3; }

}


/* =========================================================================
   RESPONSIVE - Small Mobile (max 400px)
   ========================================================================= */
@media (max-width: 400px) {
	.header-icon-btn {
		width: 34px;
		height: 34px;
		font-size: 0.95rem;
	}

	.header-icon-btn .badge {
		font-size: 0.55rem;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
	}
}


/* =========================================================================
   CATALOG PAGE LAYOUT
   ========================================================================= */

.catalog-layout {
	display: flex;
	gap: 30px;
	margin-top: 1rem;
}

.catalog-sidebar {
	width: 220px;
	flex-shrink: 0;
}

.catalog-content {
	flex: 1;
	min-width: 0;
}

/* Filter Groups */
.filter-group {
	margin-bottom: 1.25rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 1rem;
}

.filter-group:has(> .filter-group-title.collapsed) {
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
}

.filter-group:last-child {
	border-bottom: none;
}

.filter-group-title {
	font-size: 0.85rem;
	font-weight: 500; /* RC2 (2026-06-18): nomi caratteristiche sidebar più leggeri */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #333;
	margin-bottom: 0.75rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.filter-group-title.collapsed {
	margin-bottom: 0;
}

.filter-group-title i {
	font-size: 0.7rem;
	transition: transform 0.2s;
	color: #999;
}

.filter-group-title.collapsed i {
	transform: rotate(-90deg);
}

.filter-group-body {
}

.filter-group-body::-webkit-scrollbar {
	width: 4px;
}

.filter-group-body::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 2px;
}

.filter-checkbox {
	display: flex;
	align-items: flex-start;
	padding: 0.25rem 0;
	font-size: 0.8rem;
	color: #555;
	cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.2em;
	margin-right: 0.5rem;
	accent-color: var(--primary-color);
}

.filter-link {
	display: flex;
	align-items: center;
	padding: 0.3rem 0;
	font-size: 0.8rem;
	color: #555;
	text-decoration: none;
	transition: color 0.15s;
}

.filter-link:hover {
	color: var(--primary-color);
}

.filter-link .filter-count {
	margin-left: auto;
	font-size: 0.72rem;
	color: #aaa;
}

.filter-link-active {
	color: var(--primary-color);
	font-weight: 600;
}

.filter-checkbox .filter-count {
	margin-left: auto;
	font-size: 0.75rem;
	color: #aaa;
}

/* Active filters bar */
.active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 0.75rem 0;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
}

.active-filters-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #666;
	white-space: nowrap;
}

.active-filters-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background-color: var(--primary-color);
	color: #fff;
	border-radius: 20px;
	font-size: 0.75rem;
	cursor: pointer;
	transition: opacity 0.2s;
}

.active-filter-tag:hover {
	opacity: 0.8;
}

.active-filter-tag i {
	font-size: 0.65rem;
}

.active-filters-clear {
	margin-left: auto;
	font-size: 0.75rem;
	color: #999;
	white-space: nowrap;
	text-decoration: none;
}

.active-filters-clear:hover {
	color: var(--primary-color);
}

/* Price range filter */
.price-slider-wrap {
	position: relative;
	height: 30px;
	margin-bottom: 0.5rem;
}

.price-slider-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: #ddd;
	border-radius: 2px;
	transform: translateY(-50%);
	pointer-events: none;
}

.price-slider-track::after {
	content: '';
	position: absolute;
	height: 100%;
	background: var(--primary-color);
	border-radius: 2px;
	left: var(--low, 0%);
	right: var(--high, 0%);
}

.price-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	margin: 0;
}

.price-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--primary-color);
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.price-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--primary-color);
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.price-range-filter .price-inputs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.price-range-filter input[type="number"] {
	width: 75px;
	text-align: center;
	font-size: 0.8rem;
}

.price-range-filter .price-separator {
	color: #999;
}

.price-range-filter .price-currency {
	color: #999;
	font-size: 0.8rem;
}

/* Filter scrollable body (for long lists) */
.filter-scrollable {
	max-height: 230px;
	overflow-y: auto;
}

/* Filter search input */
.filter-search-input {
	font-size: 0.8rem !important;
}

/* Radio styling for category/brand filters */
.filter-checkbox input[type="radio"] {
	margin-right: 0.5rem;
	accent-color: var(--primary-color);
}

/* Product Grid Header (sort + count) */
.product-grid-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
}

.product-grid-count {
	font-size: 0.85rem;
	color: #888;
}

.product-grid-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.product-grid-sort label {
	font-size: 0.82rem;
	color: #888;
	white-space: nowrap;
}

.product-grid-sort select {
	padding: 0.35rem 0.75rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.82rem;
	color: #333;
	background-color: #fff;
	outline: none;
}

.product-grid-sort select:focus {
	border-color: var(--primary-color);
}

/* Product Grid */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	transition: opacity 0.2s var(--ease-out-quart, cubic-bezier(0.165,0.84,0.44,1));
}
/* Loading state: la griglia resta visibile, leggermente sbiadita, mentre
   uno spinner overlay segnala il fetch dei nuovi prodotti.
   Evita il "flash" da svuotamento/repaint al click di un filtro. */
.product-grid.product-grid-loading {
	opacity: 0.45;
	pointer-events: none;
}
.product-grid-loader {
	position: absolute;
	left: 50%;
	top: 100px;
	transform: translateX(-50%);
	z-index: 2;
	color: var(--secondary-color, #E5A835);
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
/* Parent del productGrid: serve position:relative per ancorare il loader assoluto. */
.catalog-content { position: relative; }


/* =========================================================================
   INCISIONI v2 — card editoriale + modal full-width
   ========================================================================= */

/* --- Card editoriale nella scheda prodotto (dopo area di acquisto) --- */
.product-engraving-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 1.25rem;
	background: linear-gradient(180deg, #fafaf6 0%, #f5f1e8 100%);
	border: 1px solid #c9b87b;
	border-radius: 10px;
	box-shadow: 0 1px 0 rgba(30, 77, 43, 0.04), 0 6px 18px rgba(30, 77, 43, 0.06);
}
.product-engraving-card-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(229, 168, 53, 0.18);
	color: var(--secondary-color, #E5A835);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}
.product-engraving-card-body { flex: 1; min-width: 0; }
.product-engraving-card-eyebrow {
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--secondary-color, #E5A835);
	display: block;
	margin-bottom: 0.25rem;
}
.product-engraving-card .product-engraving-card-title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-weight: 400;
	font-style: italic;
	font-size: 1.35rem;
	color: var(--primary-color, #1e4d2b);
	margin: 0 0 0.35rem;
	line-height: 1.2;
}
.product-engraving-card-desc {
	font-family: var(--font-base, 'Inter', sans-serif);
	color: #555;
	font-size: 0.92rem;
	margin: 0 0 0.85rem;
	line-height: 1.5;
}
.product-engraving-card-cta {
	background: transparent;
	border: 1.5px solid var(--primary-color, #1e4d2b);
	color: var(--primary-color, #1e4d2b);
	font-family: var(--font-base, 'Inter', sans-serif);
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.25s var(--ease-out-quart, cubic-bezier(0.165,0.84,0.44,1)),
	            color 0.25s var(--ease-out-quart, cubic-bezier(0.165,0.84,0.44,1));
}
.product-engraving-card-cta:hover {
	background: var(--primary-color, #1e4d2b);
	color: #fff;
}

/* Stato compatto: pill con riepilogo + modifica/rimuovi */
.product-engraving-card-status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: #fff;
	border: 1px solid #d9c98a;
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	font-size: 0.88rem;
	color: var(--primary-color, #1e4d2b);
}
.product-engraving-card-status .fa-check {
	color: #2f7a4d;
	font-size: 0.85rem;
}
/* Avviso del giorno in piu' per l'incisione: era una scrittina uguale a tutte
   le altre e non si notava (collaudo 122). Ora e' una pillola dorata. */
.product-engraving-card-note {
	display: inline-flex;
	align-items: center;
	margin-top: 0.6rem;
	padding: 0.3rem 0.7rem;
	background: #fff5dc;
	border: 1px solid #e6d3a3;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #8a6a23;
}
.product-engraving-card-note .fa-clock { color: #c09e56; }
.engraving-status-text { font-weight: 500; }
.engraving-status-edit {
	background: none;
	border: none;
	color: var(--primary-color, #1e4d2b);
	text-decoration: underline;
	font-size: 0.82rem;
	padding: 0;
	cursor: pointer;
}
.engraving-status-edit:hover { color: var(--primary-color-hover, #265e35); }
.engraving-status-remove {
	background: none;
	border: none;
	color: #999;
	font-size: 0.8rem;
	padding: 0;
	margin-left: 0.2rem;
	cursor: pointer;
}
.engraving-status-remove:hover { color: #c0392b; }


/* --- Modal --- */
.engraving-modal .modal-dialog { max-width: 720px; }
.engraving-modal-content {
	background: #fbf9f3;
	border: none;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(15, 36, 24, 0.25);
}
.engraving-modal-header {
	position: relative;
	padding: 1.75rem 2rem 1.25rem;
	border-bottom: none;
	background: var(--primary-color, #1e4d2b);
	border-radius: 12px 12px 0 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.engraving-modal-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--secondary-color, #E5A835);
}
.engraving-modal-header .btn-close {
	filter: invert(1) brightness(2);
	opacity: 0.85;
}
.engraving-modal-header .engraving-eyebrow {
	display: inline-block;
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--secondary-color, #E5A835);
	margin-bottom: 0.4rem;
}
.engraving-modal-header .engraving-title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-weight: 400;
	font-style: italic;
	font-size: 1.9rem;
	color: #fbf9f3;
	margin: 0;
	line-height: 1.15;
}
.engraving-modal-body {
	padding: 1.5rem 2rem 1.25rem;
	max-height: 70vh;
	overflow-y: auto;
}
.engraving-lede {
	font-family: var(--font-base, 'Inter', sans-serif);
	color: #555;
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0 0 1.5rem;
}
.engraving-lede em {
	font-family: var(--font-display, 'Fraunces', serif);
	font-style: italic;
	color: var(--primary-color, #1e4d2b);
	font-weight: 500;
}

.engraving-steps {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.engraving-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
.engraving-row > .engraving-field-text { grid-column: 1 / -1; }
.engraving-field {
	display: flex;
	flex-direction: column;
	transition: opacity 0.25s var(--ease-out-quart, cubic-bezier(0.165,0.84,0.44,1));
}
.engraving-label {
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-color, #1e4d2b);
	font-weight: 600;
	margin-bottom: 0.45rem;
}
.engraving-select, .engraving-input {
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.95rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid #d9d2c0;
	border-radius: 6px;
	background: #fff;
	color: #1a1a1a;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.engraving-select:focus, .engraving-input:focus {
	outline: none;
	border-color: var(--primary-color, #1e4d2b);
	box-shadow: 0 0 0 3px rgba(30, 77, 43, 0.12);
}
textarea.engraving-input { resize: vertical; min-height: 70px; }

.engraving-hint {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78rem;
	color: #888;
	margin-top: 0.35rem;
}
/* Il "+1 giorno di spedizione" deve saltare all'occhio anche qui. */
.engraving-hint > span:first-child {
	padding: 0.2rem 0.6rem;
	background: #fff5dc;
	border: 1px solid #e6d3a3;
	border-radius: 999px;
	font-weight: 600;
	color: #8a6a23;
}
.engraving-hint > span:first-child .fa-clock { color: #c09e56; }

.engraving-block {
	border-top: 1px solid #ece4d0;
	padding-top: 1.25rem;
}

/* Anteprima generosa */
.engraving-preview-wrap {
	margin-top: 1rem;
	background: #fff;
	border: 1px solid #ece4d0;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	text-align: center;
}
.engraving-preview-label {
	display: block;
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--secondary-color, #E5A835);
	margin-bottom: 0.65rem;
}
.engraving-preview-canvas {
	font-size: 2.2rem;
	line-height: 1.25;
	color: var(--primary-color, #1e4d2b);
	min-height: 2.6rem;
	white-space: pre-wrap;
	word-break: break-word;
	padding: 0.5rem 0;
}
.engraving-preview-note {
	display: block;
	font-size: 0.74rem;
	color: #999;
	margin-top: 0.65rem;
	font-style: italic;
}

/* Box info immagine */
.engraving-image-note {
	display: flex;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid #ece4d0;
	border-radius: 8px;
	padding: 1rem 1.25rem;
}
.engraving-image-note i {
	color: var(--secondary-color, #E5A835);
	font-size: 1.4rem;
	flex-shrink: 0;
	margin-top: 0.2rem;
}
.engraving-image-note strong {
	display: block;
	color: var(--primary-color, #1e4d2b);
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}
.engraving-image-note p {
	margin: 0;
	font-size: 0.88rem;
	color: #555;
	line-height: 1.5;
}

/* Footer */
.engraving-modal-footer {
	padding: 1rem 2rem 1.5rem;
	border-top: 1px solid #ece4d0;
	background: #fff;
	border-radius: 0 0 12px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.engraving-modal-price {
	display: flex;
	flex-direction: column;
	font-family: var(--font-base, 'Inter', sans-serif);
}
.engraving-modal-price-label {
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 0.1rem;
}
.engraving-modal-price strong {
	font-family: var(--font-display, 'Fraunces', serif);
	font-size: 1.4rem;
	color: var(--primary-color, #1e4d2b);
	font-weight: 500;
}
.engraving-modal-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.btn-link-cancel {
	background: none;
	border: none;
	color: #777;
	font-size: 0.9rem;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.4rem 0.6rem;
}
.btn-link-cancel:hover { color: var(--primary-color, #1e4d2b); }

/* --- Custom dropdown (posizione + font) --- */
.eng-dropdown { position: relative; }
.eng-dropdown-toggle {
	display: flex; align-items: center; gap: 0.75rem;
	width: 100%;
	background: #fff;
	border: 1px solid #d9d2c0;
	border-radius: 6px;
	padding: 0.65rem 0.9rem;
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.95rem;
	color: #1a1a1a;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	text-align: left;
}
.eng-dropdown-toggle:hover { border-color: #c8bfa8; }
.eng-dropdown.open .eng-dropdown-toggle,
.eng-dropdown-toggle:focus {
	outline: none;
	border-color: var(--primary-color, #1e4d2b);
	box-shadow: 0 0 0 3px rgba(30, 77, 43, 0.12);
}
.eng-dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-dropdown-caret {
	color: #888;
	font-size: 0.8rem;
	transition: transform 0.2s ease;
}
.eng-dropdown.open .eng-dropdown-caret { transform: rotate(180deg); }
.eng-dropdown-menu {
	position: absolute;
	top: calc(100% + 4px); left: 0; right: 0;
	background: #fff;
	border: 1px solid #ece4d0;
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(15, 36, 24, 0.12);
	padding: 0.35rem;
	margin: 0;
	list-style: none;
	z-index: 5;
	max-height: 280px;
	overflow-y: auto;
	display: none;
}
.eng-dropdown.open .eng-dropdown-menu { display: block; }
.eng-dropdown-item {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.eng-dropdown-item:hover { background: #f5efde; }
.eng-dropdown-item[aria-selected="true"] {
	background: rgba(30, 77, 43, 0.07);
	font-weight: 500;
}
.eng-dropdown-item .eng-dropdown-label { font-size: 1.02rem; }

/* Pill prezzo */
.eng-pill {
	flex-shrink: 0;
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	white-space: nowrap;
}
.eng-pill.free {
	background: rgba(30, 77, 43, 0.1);
	color: var(--primary-color, #1e4d2b);
}
.eng-pill.paid {
	background: rgba(229, 168, 53, 0.18);
	color: #8a5a05;
}

/* Separazione slot multipli (Fondello + Fibbia) */
.engraving-slot { padding-top: 0.25rem; }
.engraving-slot-multi {
	background: #fff;
	border: 1px solid #ece4d0;
	border-radius: 10px;
	padding: 1.25rem 1.25rem 1rem;
	margin-top: 1rem;
	position: relative;
}
.engraving-slot-multi + .engraving-slot-multi { margin-top: 1.5rem; }
.engraving-slot-header {
	display: flex; align-items: center; gap: 0.85rem;
	margin: -0.25rem 0 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px dashed #ece4d0;
}
.engraving-slot-badge {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--primary-color, #1e4d2b);
	color: #fff;
	border-radius: 50%;
	font-family: var(--font-display, 'Fraunces', serif);
	font-weight: 500;
	font-size: 0.95rem;
}
.engraving-slot-titles { display: flex; flex-direction: column; line-height: 1.15; }
.engraving-slot-eyebrow {
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--secondary-color, #E5A835);
	margin-bottom: 0.15rem;
}
.engraving-slot-title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-weight: 500;
	font-style: italic;
	font-size: 1.25rem;
	color: var(--primary-color, #1e4d2b);
	margin: 0;
}

@media (max-width: 575.98px) {
	.engraving-modal-header, .engraving-modal-body, .engraving-modal-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
	.engraving-row { grid-template-columns: 1fr; gap: 1rem; }
	.engraving-title { font-size: 1.55rem; }
	.engraving-preview-canvas { font-size: 1.7rem; }
	.engraving-slot-multi { padding: 1rem; }
}

@media (min-width: 1200px) {
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Home Banner (between trust bar and categories) */
.home-banner-section {
	padding: 1.5rem 0 0;
}
.home-banner-img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
.home-banner-section .carousel-indicators {
	bottom: 8px;
}
.home-banner-section .carousel-indicators button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	opacity: 0.5;
}
.home-banner-section .carousel-indicators button.active {
	opacity: 1;
}

/* Category Banner (above hero, full-width in container) */
.category-banner-section {
	padding: 0.75rem 0 0;
}
.category-banner-img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
.category-banner-section .carousel-indicators {
	bottom: 8px;
}
.category-banner-section .carousel-indicators button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	opacity: 0.5;
}
.category-banner-section .carousel-indicators button.active {
	opacity: 1;
}

/* Category Hero */
.category-hero {
	text-align: center;
	padding: 0.5rem 0 0.6rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
}

.category-hero h1 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-bottom: 0;
	font-weight: 600;
}

.category-hero p {
	color: #888;
	font-size: 0.85rem;
	margin-bottom: 0;
	margin-top: 0.2rem;
}

.category-hero .subcategory-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.category-hero .subcategory-chip {
	display: inline-block;
	padding: 0.35rem 1rem;
	background-color: #fff;
	color: var(--primary-color);
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

.category-hero .subcategory-chip:hover,
.category-hero .subcategory-chip.active {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

/* Pagination */
.pagination-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #eee;
}

.pagination-wrapper .pagination {
	gap: 0.25rem;
}

.pagination-wrapper .page-link {
	border-radius: 8px;
	color: #555;
	border: 1px solid #e0e0e0;
	padding: 0.5rem 0.85rem;
	font-size: 0.85rem;
}

.pagination-wrapper .page-link:hover {
	background-color: rgba(30, 77, 43, 0.08);
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.pagination-wrapper .page-item.active .page-link {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.pagination-wrapper .page-item.disabled .page-link {
	color: #ccc;
}

/* No Results */
.no-results {
	text-align: center;
	padding: 3rem 1rem;
}

.no-results i {
	font-size: 3rem;
	color: #ddd;
	margin-bottom: 1rem;
}

.no-results h3 {
	font-family: var(--font-display);
	color: #555;
	margin-bottom: 0.5rem;
}

.no-results p {
	color: #999;
	font-size: 0.95rem;
}

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */

/* RC2 (13/07): stacca la trust-bar (partial condiviso) dal blocco prodotto — margine
   sotto al container della scheda, scoped così da non toccare gli altri .container. */
.product-detail-container {
	margin-bottom: 2rem;
}

.product-detail {
	display: flex;
	gap: 40px;
	margin-top: 1rem;
}

.product-gallery {
	flex: 0 0 42%;
	max-width: 42%;
}

.product-gallery .main-image {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
	margin-bottom: 0.75rem;
}

.product-gallery .main-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.product-gallery .thumbnail-list {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.product-gallery .thumbnail-item {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	background-color: #fff;
	transition: border-color 0.2s;
}

.product-gallery .thumbnail-item:hover,
.product-gallery .thumbnail-item.active {
	border-color: var(--secondary-color); /* RC2 (2026-06-18): miniatura attiva bordo oro (non verde scuro/nero) */
}

.product-gallery .thumbnail-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-info {
	flex: 1;
	min-width: 0;
}

.product-info .product-brand-link {
	font-family: var(--font-base); /* RC2 (2026-06-18): brand League Spartan compatto (NON Anton) */
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--secondary-color); /* RC2 (2026-06-18): brand dorato */
	text-decoration: none;
}

.product-info .product-brand-link:hover {
	color: var(--primary-color);
}

.product-info .product-title {
	font-family: var(--font-base);
	font-size: 1.6rem;
	font-weight: 600;
	color: #2d2d2d;
	margin: 0.5rem 0;
	line-height: 1.3;
}

.product-info .product-sku {
	font-size: 0.78rem;
	color: #aaa;
	margin-bottom: 1rem;
}

.product-info .product-price-block {
	padding: 1rem 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin-bottom: 1.25rem;
}

.product-info .product-price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.product-info .product-price-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}

.product-info .product-price-main {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--primary-color);
}

.product-info .product-price-original {
	font-size: 1rem;
	color: #999;
	text-decoration: line-through;
	margin-right: 0.75rem;
}

.product-info .product-price-save {
	display: inline-block;
	background-color: #c0392b;
	color: #fff;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	margin-top: 0.35rem;
}

.product-availability {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	margin-top: 0.6rem;
	line-height: 1;
}

.product-availability i {
	font-size: 1rem;
}

/* Varianti per stato — decisione cliente 2026-05-18:
   badge ben visibile "Disponibile ora" per evitare le chiamate "ce l'avete?". */
.product-availability--available {
	background: rgba(47, 179, 68, 0.12);
	color: #1f9d3a;
}
.product-availability--available i { color: #1f9d3a; }

/* Poche unità (Ultima disponibile / Solo N): il prodotto C'È → verde come
   "Disponibile ora" (richiesta Gibertini 2026-06-05: il verde rassicura che
   il prodotto è lì e acquistabile). Solo gli stati realmente disponibili. */
.product-availability--last {
	/* RC2 (2026-06-18): niente pill di sfondo — solo icona + testo colorato. */
	background: transparent;
	padding: 0;
	border-radius: 0;
	color: #1f9d3a;
}
.product-availability--last i { color: #1f9d3a; }

.product-availability--reserved {
	background: rgba(212, 175, 55, 0.18);
	color: #8a6b14;
}
.product-availability--reserved i { color: #8a6b14; }

.product-availability--unavailable {
	background: rgba(120, 120, 120, 0.14);
	color: #777;
}
.product-availability--unavailable i { color: #777; }

.product-availability--coming {
	background: rgba(13, 110, 253, 0.12);
	color: #0a3c8a;
}
.product-availability--coming i { color: #0a3c8a; }

.product-info .product-short-desc {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

/* Blocchi desktop: visibili LG+ / nascosti sotto */
.product-attributes-mobile,
.product-extras-mobile {
	display: none;
}

.product-info .product-attributes {
	margin-bottom: 1.25rem;
}

.product-info .product-attributes table {
	width: 100%;
	font-size: 0.88rem;
}

.product-info .product-attributes td {
	padding: 0.4rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.product-info .product-attributes td:first-child {
	color: #888;
	width: 40%;
}

.product-info .product-attributes td:last-child {
	color: #333;
	font-weight: 500;
}

.product-info .btn-add-cart-lg {
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none; /* RC2 (2026-06-18): testo normale "Aggiungi al carrello" (no maiuscolo) */
	border: 1.5px solid var(--primary-color); /* RC2 (2026-06-18): bordo verde scuro come LA STORIA */
	border-radius: 8px;
	white-space: nowrap;
}

.product-info-badges {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

.product-info-badge {
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
}

.product-info-badge i {
	color: var(--primary-color);
	margin-right: 4px;
}

.product-wishlist-btn,
.btn-compare-product,
.product-share-btn {
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: #888;
	border-color: #ddd;
	transition: all 0.2s;
	margin-right: 0.5rem;
}

.product-wishlist-btn:hover,
.btn-compare-product:hover,
.product-share-btn:hover {
	color: #fff;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.product-wishlist-btn.in-wishlist,
.btn-compare-product.active {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.product-wishlist-btn.in-wishlist i.far {
	font-weight: 900;
}

/* Product Description Full */
.product-description-full {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #eee;
}

.product-description-full h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 1rem;
}

.product-description-full p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #555;
}

/* Related Products: banda con sfondo beige piu' scuro per staccare dalla pagina */
.related-products {
	margin-top: 0; /* RC2 (2026-06-26): rimosso margin-top 48px (il blocco ha già il suo padding) */
	padding: 2rem 1.75rem 2.25rem;
	background: transparent; /* RC2 (2026-06-18): rimosso contenitore beige — correlati su bianco */
	border: none;
	border-radius: 0;
}

.related-products h3 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
}

.related-grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Product detail responsive: < 768px (must come AFTER base rules) */
@media (max-width: 767.98px) {
	.product-detail {
		flex-direction: column;
		gap: 20px;
	}

	.product-gallery {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	.product-attributes-desktop,
	.product-extras-desktop {
		display: none;
	}

	.product-extras-mobile {
		display: block;
		margin-bottom: 1rem; /* RC2 (2026-06-26): spazio sotto (non sopra) per staccarsi dal blocco seguente */
	}

	.product-attributes-mobile {
		display: block;
		margin-top: 1rem;
	}

	.product-attributes-mobile table {
		width: 100%;
		font-size: 0.88rem;
	}

	.product-attributes-mobile td {
		padding: 0.4rem 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-attributes-mobile td:first-child {
		color: #888;
		width: 35%;
	}

	.product-attributes-mobile td:last-child {
		color: #333;
		font-weight: 500;
	}
}

/* =========================================================================
   BRAND PAGE
   ========================================================================= */

.brand-hero {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background-color: #faf9f7;
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 1.5rem;
	position: relative;
	overflow: hidden;
}
.brand-hero .brand-hero-content {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	position: relative;
	z-index: 2;
}
/* Variante con banner di sfondo (decisione cliente 2026-05-04) */
.brand-hero.brand-hero-banner {
	min-height: 220px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
}
.brand-hero.brand-hero-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
	z-index: 1;
}
.brand-hero.brand-hero-banner h1,
.brand-hero.brand-hero-banner .brand-count {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.brand-hero.brand-hero-banner .brand-logo {
	background: rgba(255,255,255,0.92);
	border-radius: 8px;
	padding: 8px;
}

.brand-hero .brand-logo {
	width: 100px;
	height: 100px;
	object-fit: contain;
	flex-shrink: 0;
}

.brand-hero h1 {
	font-family: var(--font-display);
	font-size: 1.8rem;
	color: var(--primary-color);
	margin-bottom: 0.25rem;
}

.brand-hero .brand-count {
	color: #888;
	font-size: 0.9rem;
}

/* Carosello marchi home (decisione cliente 2026-05-04, restyling 2026-05-05)
   - 2 righe sfalsate
   - Scroll automatico LENTO + scroll manuale via bottoni prev/next + drag
   - Pausa al hover */
/* L'override dello !important serve a battere `.site-section { padding: 5rem 0 }`
   di site.css che viene caricato dopo nel layout store. */
section.home-brands-carousel {
	background: #fff; /* RC2 (2026-06-18): banda Concessionario BIANCA (Figma), non crema */
	padding: 3rem 0 !important;
}
.brands-carousel-viewport {
	position: relative;
	/* RC2 (2026-06-18): niente overflow:hidden qui — il clipping dei loghi resta sul
	   .brands-carousel-track interno. Così le frecce (figlie del viewport) NON sono
	   dentro il contenitore che taglia e la loro ombra si vede tutta. */
}
/* RC2 (2026-06-18): sfumatura bianca ai bordi sx/dx (no taglio netto) — i loghi
   svaniscono prima delle frecce, che restano "libere". z-index 4 < frecce (5). */
.brands-carousel-viewport::before,
.brands-carousel-viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100px;
	z-index: 4;
	pointer-events: none;
}
.brands-carousel-viewport::before { left: 0; background: linear-gradient(to right, #fff 50px, rgba(255, 255, 255, 0)); }
.brands-carousel-viewport::after { right: 0; background: linear-gradient(to left, #fff 50px, rgba(255, 255, 255, 0)); }
.brands-carousel-track {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: hidden;
}
.brands-carousel-row {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-shrink: 0;
	width: max-content;
	/* 2026-05-23: transform-based (era scrollLeft sul track). iOS non
	   aggiornava scrollLeft programmatico su flex+overflow:auto. */
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
.brands-carousel-row-offset {
	margin-left: 70px; /* sfalsamento estetico tra le 2 righe */
}
.brand-tile {
	flex-shrink: 0;
	width: 140px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	padding: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
}
.brand-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.brand-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(20%);
	transition: filter 0.2s ease;
}
.brand-tile:hover img {
	filter: grayscale(0%);
}
/* Bottoni navigazione manuale (decisione cliente 2026-05-05: oro su verde) */
/* RC2 (2026-06-18): frecce bianche + ombra, icona verde — uniformi a .cf-arrow del coverflow. */
.brands-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--c-white, #fff);
	color: var(--primary-color);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(27, 70, 48, 0.18);
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.brands-carousel-nav:hover {
	background: var(--primary-color);
	color: var(--c-gold-200);
	box-shadow: 0 8px 22px rgba(27, 70, 48, 0.28);
}
.brands-carousel-nav-prev { left: 0.25rem; }
.brands-carousel-nav-next { right: 0.25rem; }
@media (max-width: 575.98px) {
	.brand-tile { width: 110px; height: 64px; padding: 8px; }
	.brands-carousel-row { gap: 1rem; }
	.brands-carousel-nav { width: 38px; height: 38px; font-size: 0.8rem; }
}

/* Pallini gerarchici della pagina marca (decisione cliente 2026-05-04) */
.brand-pivots-wrapper {
	margin-bottom: 1.5rem;
}
.brand-pivots-label {
	font-size: 0.85rem;
	color: #6b6b6b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5rem;
}
.brand-pivots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.brand-pivot {
	border: 1px solid var(--primary-color, #1e4d2b);
	background: #fff;
	color: var(--primary-color, #1e4d2b);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.brand-pivot:hover {
	background: rgba(30, 77, 43, 0.08);
}
.brand-pivot.active {
	background: var(--primary-color, #1e4d2b);
	color: #fff;
}

/* =========================================================================
   SEARCH RESULTS
   ========================================================================= */

.search-header {
	margin-bottom: 1.5rem;
}

.search-header h1 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--primary-color);
}

.search-header .search-query {
	color: var(--secondary-color);
	font-style: italic;
}

/* =========================================================================
   IMAGE LIGHTBOX (simple overlay)
   ========================================================================= */

.lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.lightbox-overlay.active {
	display: flex;
}

.lightbox-overlay img {
	max-width: 90%;
	max-height: 90vh;
	object-fit: contain;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 25px;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.lightbox-close:hover {
	opacity: 1;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	opacity: 0.7;
	padding: 1rem;
	transition: opacity 0.2s;
}

.lightbox-nav:hover {
	opacity: 1;
}

.lightbox-nav.prev {
	left: 15px;
}

.lightbox-nav.next {
	right: 15px;
}

/* =========================================================================
   MOBILE FILTER OFFCANVAS
   ========================================================================= */

.filter-toggle-btn {
	display: none;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	font-size: 0.85rem;
	color: #555;
	cursor: pointer;
	margin-bottom: 1rem;
}

.filter-toggle-btn i {
	margin-right: 0.4rem;
}

/* =========================================================================
   CATALOG RESPONSIVE
   ========================================================================= */

@media (min-width: 576px) and (max-width: 767px) {
	.product-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Gallery: image + thumbnails side by side */
	.product-gallery {
		display: flex;
		gap: 10px;
		flex-direction: row;
		width: 100%;
	}

	.product-gallery .main-image {
		flex: 1;
		min-width: 0;
		margin-bottom: 0;
	}

	.product-gallery .thumbnail-list {
		flex-direction: column;
		flex-shrink: 0;
		width: 60px;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 400px;
		gap: 6px;
		padding-bottom: 0;
	}

	.product-gallery .thumbnail-item {
		width: 60px;
		height: 60px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.product-detail {
		gap: 25px;
	}

	.product-gallery {
		flex: 0 0 38%;
		max-width: 38%;
	}

	.product-attributes-desktop,
	.product-extras-desktop {
		display: none;
	}

	.product-extras-mobile {
		display: block;
		margin-bottom: 1.25rem; /* RC2 (2026-06-26): spazio sotto (non sopra) per staccarsi dal blocco seguente */
	}

	.product-attributes-mobile {
		display: block;
		margin-top: 1rem;
	}

	.product-attributes-mobile table {
		width: 100%;
		font-size: 0.88rem;
	}

	.product-attributes-mobile td {
		padding: 0.4rem 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.product-attributes-mobile td:first-child {
		color: #888;
		width: 35%;
	}

	.product-attributes-mobile td:last-child {
		color: #333;
		font-weight: 500;
	}
}

@media (max-width: 991px) {
	.catalog-sidebar {
		display: none;
	}

	.filter-toggle-btn {
		display: inline-flex;
		align-items: center;
	}

	#filterOffcanvas {
		--bs-offcanvas-width: 80%;
		max-width: 320px;
	}

	.product-info .product-title {
		font-size: 1.4rem;
	}

	.product-info .product-price-main {
		font-size: 1.5rem;
	}

	.brand-hero {
		flex-direction: column;
		text-align: center;
	}

	.category-hero h1 {
		font-size: 1.25rem;
	}
}

@media (max-width: 575px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.product-grid-header {
		gap: 0.5rem;
		margin-left: -12px; margin-right: -12px; /* RC2 (2026-06-26): riga grigia FULL-WIDTH (esce dal padding 12px del .container) */
		padding-left: 12px; padding-right: 12px;
	}
	.subcat-inline-section { border-bottom: 1px solid #eee; } /* RC2 (2026-06-26): riga grigia full-width sotto le pills sotto-categoria (3 righe uniformi) */
	.catalog-layout { margin-top: 8px; } /* RC2 (2026-06-26): gap-top del grid-header uniforme al bottom (era 16px) */
	.product-grid-count { display: none; } /* RC2 (2026-06-26): conteggio nascosto su mobile (spazio per Confronta + Ordina per) */

	.product-grid-sort label {
		display: none;
	}
	/* RC2 (2026-06-26): select "Ordina per" come pill (stile bottone Confronta) — SOLO mobile */
	.product-grid-sort select {
		-webkit-appearance: none; appearance: none;
		border: 1px solid #dad7d1; border-radius: 999px;
		color: var(--primary-color); font-weight: 500; font-size: 0.85rem !important; /* batte l'anti-zoom 16px, allinea il font a Confronta */
		padding: 6px 28px 6px 14px; background-color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%231B4630'%20stroke-width='1.6'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 13px center;
	}

	.product-info-badges {
		flex-wrap: wrap;
	}

	.product-gallery .thumbnail-item {
		width: 56px;
		height: 56px;
	}

	.product-info .product-price-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.product-info .btn-add-cart-lg {
		width: 100%;
	}
}


/* ============================================================
   CART & CHECKOUT STYLES (Phase 4)
   ============================================================ */

/* ----- 1. Cart Page ----- */
.cart-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 15px;
}

.cart-layout {
	display: flex;
	gap: 30px;
}

.cart-items {
	flex: 1;
}

.cart-item-row {
	display: flex;
	align-items: center;
	padding: 20px;
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid #eee; /* RC2 (29/06): bordo+ombra come il blocco Riepilogo (card poco visibili su bianco) */
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
	gap: 15px;
}

.cart-item-image {
	width: 100px;
	height: 100px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

.cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cart-item-details {
	flex: 1;
}

.cart-item-name {
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.95rem;
}

.cart-item-name:hover {
	color: var(--secondary-color);
}

.cart-item-sku {
	font-size: 0.7rem;
	color: #999;
	margin-top: 2px;
}

.cart-item-price {
	font-weight: 500;
}

.cart-item-price .original-price {
	text-decoration: line-through;
	color: #999;
	font-size: 0.85rem;
	margin-right: 5px;
}

.cart-item-price .discount-price {
	color: #c0392b;
	font-weight: 600;
}

/* Prezzo pieno barrato accanto al TOTALE di riga: serve solo sotto i 575px,
   dove il prezzo unitario qui sopra e' nascosto. Su schermi piu' larghi resta
   nascosto, altrimenti lo stesso barrato comparirebbe due volte per riga. */
.cart-item-total .original-line-total {
	display: none;
}

.cart-quantity-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
}

.cart-quantity-control button {
	width: 22px;
	height: 22px;
	border: none;
	background: #f5f5f5;
	cursor: pointer;
	font-size: 0.75rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	flex-shrink: 0;
}

.cart-quantity-control button:hover {
	background: #e0e0e0;
}

.cart-quantity-control button:disabled {
	opacity: .35;
	cursor: not-allowed;
	background: #f5f5f5;
}

.cart-quantity-control input {
	width: 30px;
	height: 22px;
	text-align: center;
	border: none;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	font-size: 0.8rem;
	-moz-appearance: textfield;
}

.cart-quantity-control input::-webkit-outer-spin-button,
.cart-quantity-control input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.cart-item-qty-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.cart-qty-limit-note {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.7rem;
	color: #e67e22;
	white-space: nowrap;
	margin-top: 3px;
}

.cart-item-total {
	font-weight: 600;
	min-width: 90px;
	text-align: right;
}

.cart-item-remove {
	color: #999;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	padding: 8px;
	transition: color 0.2s;
}

.cart-item-remove:hover {
	color: #c0392b;
}

/* ----- 2. Cart Summary ----- */
.cart-summary {
	width: 380px;
	position: sticky;
	top: 120px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.cart-summary-title {
	font-family: var(--font-base);
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--primary-color);
}

.cart-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 0.95rem;
}

.cart-summary-row.total {
	font-size: 1.2rem;
	font-weight: 700;
	padding-top: 15px;
	margin-top: 10px;
	border-top: 2px solid #eee;
	color: var(--primary-color);
}

.cart-summary-row .label {
	color: #666;
}

.cart-summary-row .value {
	font-weight: 500;
}

.cart-summary-row.discount .value {
	color: #27ae60;
}

/* Buono piu' capiente dell'ordine: la differenza si perde (collaudo 157). */
.gift-leftover-notice {
	margin: 10px 0 4px;
	padding: 10px 12px;
	background: #fff8e7;
	border: 1px solid #e6d3a3;
	border-radius: 6px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: #8a6a23;
}
.gift-leftover-notice .fa-circle-info { color: #c09e56; }

/* ----- 3. Free Shipping Progress Bar ----- */
.free-shipping-bar {
	margin: 15px 0;
	padding: 12px 15px;
	background: #f0f7f2;
	border-radius: 8px;
}

.free-shipping-bar .progress-text {
	font-size: 0.85rem;
	color: #555;
	margin-bottom: 8px;
}

.free-shipping-bar .progress-text .amount {
	font-weight: 600;
	color: var(--secondary-color);
}

.free-shipping-bar .progress {
	height: 8px;
	background: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}

.free-shipping-bar .progress-bar {
	height: 100%;
	background: var(--secondary-color);
	border-radius: 4px;
	transition: width 0.5s ease;
}

.free-shipping-bar.complete {
	background: #e8f5e9;
}

.free-shipping-bar.complete .progress-bar {
	background: #27ae60;
}

.free-shipping-bar.complete .progress-text {
	color: #27ae60;
}

/* ----- 4. Coupon Input ----- */
.coupon-form {
	display: flex;
	gap: 8px;
	margin: 15px 0;
}

.coupon-form input {
	flex: 1;
	min-width: 0; /* RC2 (29/06): permette all'input di restringersi → "Applica" non sborda */
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 0.9rem;
}

.coupon-form button {
	padding: 8px 18px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}

.coupon-form button:hover {
	background: #163d22;
}

.coupon-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	background: #e8f5e9;
	border-radius: 6px;
	margin: 10px 0;
}

.coupon-applied .coupon-code {
	font-weight: 600;
	color: #27ae60;
}

.coupon-applied .coupon-remove {
	background: none;
	border: none;
	color: #c0392b;
	cursor: pointer;
}

/* ----- 5. Cart Buttons ----- */
.cart-btn-checkout {
	display: block;
	width: 100%;
	padding: 14px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	margin-top: 20px;
}

.cart-btn-checkout:hover {
	background: #163d22;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(30, 77, 43, 0.3);
}

.cart-btn-checkout:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.cart-btn-continue {
	display: block;
	text-align: center;
	margin-top: 12px;
	color: var(--primary-color);
	font-size: 0.9rem;
	text-decoration: none;
}

.cart-btn-continue:hover {
	text-decoration: underline;
}

/* ----- 6. Cart Empty State ----- */
.cart-empty {
	text-align: center;
	padding: 60px 20px;
}

.cart-empty i {
	font-size: 4rem;
	color: #ddd;
	margin-bottom: 20px;
}

.cart-empty h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.cart-empty p {
	color: #888;
	margin-bottom: 25px;
}

.cart-empty .btn {
	display: inline-block;
	width: auto;
	padding: 12px 30px;
	background: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}

.cart-empty .btn:hover {
	background: #163d22;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(30, 77, 43, 0.3);
}

/* ----- 7. Checkout Page ----- */
.checkout-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 30px 15px;
}

.checkout-steps {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
	padding: 0;
	list-style: none;
	position: relative;
}

.checkout-steps::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 15%;
	right: 15%;
	height: 2px;
	background: #e0e0e0;
}

.checkout-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
	flex: 1;
	max-width: 180px;
}

.checkout-step-number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e0e0e0;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 8px;
	transition: all 0.3s;
}

.checkout-step-item.active .checkout-step-number {
	background: var(--primary-color);
	color: #fff;
}

.checkout-step-item.completed .checkout-step-number {
	background: var(--secondary-color);
	color: #fff;
}

.checkout-step-label {
	font-size: 0.8rem;
	color: #999;
	text-align: center;
}

.checkout-step-item.active .checkout-step-label {
	color: var(--primary-color);
	font-weight: 600;
}

.checkout-step-item.completed .checkout-step-label {
	color: var(--secondary-color);
}

/* ----- 8. Checkout Panels ----- */
.checkout-layout {
	display: flex;
	gap: 30px;
}

.checkout-panel {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06); /* RC2 (29/06): ombra come gli altri blocchi (Riepilogo sidebar / carrello) */
}
/* RC2 (29/06): "Modifica carrello" = bottone bianco bordo verde (come il bottone telefono Servizi) */
.checkout-btn-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0.7rem 1.6rem;
	border: 2px solid var(--primary-color);
	border-radius: 999px;
	background: #fff;
	color: var(--primary-color);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.checkout-btn-back:hover { background: var(--primary-color); color: #fff; text-decoration: none; }
/* RC2 (29/06): mobile — Riepilogo Ordine padding ridotto + i 2 bottoni su righe separate */
@media (max-width: 575px) {
	.checkout-panel { padding: 20px 14px; }
	.checkout-step-actions { flex-direction: column; align-items: stretch; gap: 12px; }
	.checkout-step-actions > * { width: 100% !important; }
	/* Conferma: prezzo articolo su riga nuova su mobile (prezzo+€ resta unito) */
	#step4Items .checkout-summary-item { flex-wrap: wrap; }
	#step4Items .checkout-item-line-total { width: 100%; text-align: right; margin-top: 2px; }
}

.checkout-panel-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.checkout-form .form-group {
	margin-bottom: 15px;
}

.checkout-form label {
	font-weight: 500;
	font-size: 0.9rem;
	margin-bottom: 5px;
	display: block;
	color: #333;
}

.checkout-form .form-control {
	border-radius: 6px;
	border: 1px solid #ddd;
	padding: 10px 12px;
}

/* Confezione regalo al checkout: riquadro dedicato, non un'etichetta come le
   altre — il cliente deve accorgersene (collaudo 139) */
.checkout-gift-box {
	background: #fdfaf3;
	border: 1px solid #e6d5ab;
	border-radius: 10px;
	padding: 16px 18px;
}

.checkout-gift-title {
	font-family: var(--font-display, inherit);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.checkout-gift-title i {
	font-size: 1.4rem;
	color: #c09e56;
}

.checkout-gift-free {
	background: #c09e56;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 20px;
}

.checkout-gift-box .form-check-label {
	color: #2c2c2c;
}

/* Campo obbligatorio non compilato: evidenziato finché non si corregge */
.checkout-form .form-control.field-invalid {
	border-color: #d63939;
	border-width: 2px;
	background: #fff6f6;
}

/* ----- 9. Address Cards ----- */
.address-card {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}

.address-card:hover {
	border-color: var(--primary-color);
}

.address-card.selected {
	border-color: var(--primary-color);
	border-width: 2px;
	background: #f0f7f2;
}

/* Indirizzo in una nazione che non serviamo piu': si vede ma non si sceglie. */
.address-card--unavailable {
	cursor: not-allowed;
	opacity: 0.6;
	background: #fafafa;
}
.address-card--unavailable:hover {
	border-color: #ddd;
}
.address-unavailable-note {
	margin-top: 8px;
	font-size: 0.78rem;
	color: #a3462c;
}

.address-card .address-name {
	font-weight: 600;
}

.address-card .address-text {
	font-size: 0.9rem;
	color: #555;
	margin-top: 5px;
	line-height: 1.5;
}

.address-card .address-radio {
	position: absolute;
	top: 15px;
	right: 15px;
}

/* ----- 10. Payment Options ----- */
.payment-option {
	display: flex;
	align-items: center;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s;
	margin-bottom: 10px;
	gap: 15px;
}

.payment-option:hover {
	border-color: var(--primary-color);
	background: #fafafa;
}

.payment-option.selected {
	border-color: var(--primary-color);
	border-width: 2px;
	background: #f0f7f2;
}

.payment-option-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--primary-color);
}

.payment-option-info {
	flex: 1;
}

.payment-option-name {
	font-weight: 600;
	font-size: 0.95rem;
}

.payment-option-desc {
	font-size: 0.82rem;
	color: #888;
}

.payment-option-surcharge {
	font-size: 0.85rem;
	color: #c0392b;
	font-weight: 500;
}

/* ----- 11. Checkout Order Summary (sidebar) ----- */
.checkout-summary {
	width: 400px;
	position: sticky;
	top: 120px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.checkout-summary-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.checkout-summary-item-image {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.checkout-summary-item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.checkout-summary-item-details {
	flex: 1;
	font-size: 0.85rem;
}

.checkout-summary-item-name {
	font-weight: 500;
}

/* ----- 12. Order Success Page ----- */
.order-success {
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	padding: 50px 20px;
}

.order-success-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #e8f5e9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
}

.order-success-icon i {
	font-size: 2.5rem;
	color: #27ae60;
}

.order-success h1 {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.order-success .order-number {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--secondary-color);
	margin-bottom: 30px;
}

.order-success-details {
	text-align: left;
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ----- 13. Order Timeline (success page) ----- */
.order-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 20px 0 30px;
	background: #fff;
	border-radius: 12px;
	padding: 28px 30px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	text-align: left;
}

/* vertical connecting line */
.order-timeline::before {
	content: '';
	position: absolute;
	left: 49px;
	top: 44px;
	bottom: 44px;
	width: 2px;
	background: #e8e8e8;
	z-index: 0;
}

.order-timeline-step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	padding: 14px 0;
	position: relative;
	z-index: 1;
}

.order-timeline-step::before {
	display: none;
}

.order-timeline-icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: #efefef;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: #bbb;
	border: 2px solid #e8e8e8;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.order-timeline-step.completed .order-timeline-icon {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
}

.order-timeline-step.active .order-timeline-icon {
	background: var(--secondary-color);
	color: #fff;
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 4px rgba(229,168,53,0.15);
}

.order-timeline-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 6px;
}

.order-timeline-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #bbb;
	text-align: left;
}

.order-timeline-desc {
	font-size: 0.8rem;
	color: #bbb;
	margin-top: 2px;
}

.order-timeline-step.completed .order-timeline-label,
.order-timeline-step.active .order-timeline-label {
	color: #333;
}

.order-timeline-step.completed .order-timeline-desc,
.order-timeline-step.active .order-timeline-desc {
	color: #888;
}

.order-timeline-step.active .order-timeline-label {
	color: var(--primary-color);
}

/* "Cosa succede ora?" heading inside the card */
.order-timeline-heading {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 8px;
	text-align: center;
	letter-spacing: 0.01em;
}

/* ----- Contrassegno Note ----- */
.cart-cod-note {
	font-size: 0.82rem;
	color: #888;
	font-style: italic;
	margin-top: 5px;
}

/* ----- 14. Cart & Checkout Responsive ----- */
@media (max-width: 991px) {
	.cart-layout {
		flex-direction: column;
	}

	.cart-summary {
		width: 100%;
		position: static;
	}

	.checkout-layout {
		flex-direction: column;
	}

	.checkout-summary {
		width: 100%;
		position: static;
	}

	.checkout-steps {
		gap: 5px;
	}

	.checkout-steps::before {
		left: 10%;
		right: 10%;
	}
}

@media (max-width: 575px) {
	.cart-item-row {
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		padding: 16px 14px; /* RC2 (29/06): meno padding-x su mobile (era 20px) */
	}

	.cart-item-image {
		width: 72px;
		height: 72px;
	}

	/* riga 1 = immagine + dettagli; qty/totale/cestino vanno in riga 2 */
	.cart-item-details {
		flex: 1 1 calc(100% - 86px);
	}

	/* prezzo unitario nascosto su mobile: in scheda resta il totale riga */
	.cart-item-price {
		display: none;
	}

	/* ...e siccome sparisce il prezzo unitario, qui il pieno barrato va a
	   sinistra del totale di riga, se no da telefono lo sconto non si vede */
	.cart-item-total .original-line-total {
		display: inline;
		text-decoration: line-through;
		color: #999;
		font-weight: 400;
		font-size: 0.85rem;
		margin-right: 6px;
	}

	/* riga 2: stepper quantità + totale riga + cestino */
	.cart-item-total {
		width: auto;
		flex: 1;
		text-align: right;
		margin-top: 0;
	}

	.cart-summary {
		padding: 20px 14px; /* RC2 (29/06): meno padding-x su mobile (era 25px) */
	}

	/* coupon: input + Applica più piccoli su mobile (Applica sbordava) */
	.coupon-form input { font-size: 0.8rem; padding: 7px 10px; }
	.coupon-form button { padding: 7px 12px; font-size: 0.85rem; }

	.checkout-step-label {
		font-size: 0.7rem;
	}
}

/* ============================================================
   ACCOUNT AREA STYLES
   ============================================================ */

/* Account layout: sidebar + content */
.account-layout {
	display: flex;
	gap: 2rem;
}

.account-sidebar {
	width: 200px;
	flex-shrink: 0;
}

.account-sidebar-nav {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	overflow: hidden;
	position: sticky;
	top: 140px;
}

.account-sidebar-header {
	padding: 1.25rem 1.5rem;
	background: var(--primary-color);
	color: #fff;
}

.account-sidebar-header h6 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	color: #fff;
}

.account-sidebar-header small {
	opacity: 0.8;
	font-size: 0.8rem;
}

.account-sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.5rem;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #f0f0f0;
	transition: all 0.2s;
	font-size: 0.9rem;
}

.account-sidebar-link:hover {
	background: #f8f9fa;
	color: var(--primary-color);
}

.account-sidebar-link.active {
	background: rgba(30, 77, 43, 0.05);
	color: var(--primary-color);
	font-weight: 600;
	border-left: 3px solid var(--primary-color);
}

.account-sidebar-link i {
	width: 20px;
	text-align: center;
	font-size: 0.95rem;
}

/* Badge conteggio (es. messaggi non letti) sulla voce di menu account */
.account-sidebar-badge {
	margin-left: auto;
	min-width: 20px;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--secondary-color);
	color: #3a2c08;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.account-sidebar-link.text-danger:hover {
	background: #fff5f5;
}

/* Paginazione "I miei ordini" — tema EG (sostituisce il blu Bootstrap) */
#ordersPagination .page-link {
	color: var(--primary-color);
	border-color: #e3e1d9;
}
#ordersPagination .page-link:hover {
	background: #f3f1ea;
	color: var(--primary-color);
	border-color: #d8d5c8;
}
#ordersPagination .page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}
#ordersPagination .page-item.disabled .page-link {
	color: #bbb;
}


.account-content {
	flex: 1;
	min-width: 0;
}

.account-header {
	margin-bottom: 1.5rem;
}

.account-header h2 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0.25rem;
}

.account-header p {
	color: #666;
	margin: 0;
}

/* Account stats cards */
.account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.account-stat-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.25rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	text-align: center;
}

.account-stat-card .stat-icon {
	width: 48px;
	min-width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.account-stat-card .stat-icon.bg-primary-light {
	background: rgba(30, 77, 43, 0.1);
	color: var(--primary-color);
}

.account-stat-card .stat-icon.bg-gold-light {
	background: rgba(229, 168, 53, 0.15);
	color: var(--secondary-color);
}

.account-stat-card .stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: #333;
	display: block;
}

.account-stat-card .stat-label {
	font-size: 0.8rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Account card (generic widget) */
.account-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	margin-bottom: 1.5rem;
}

.account-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid #f0f0f0;
}

.account-card-header h5 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.account-card-body {
	padding: 1.5rem;
}

/* Order status badges (customer side) */
.order-status-badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: capitalize;
}

.order-status-badge.status-pending { background: #fff3cd; color: #856404; }
.order-status-badge.status-confirmed { background: #d1ecf1; color: #0c5460; }
.order-status-badge.status-processing { background: #cce5ff; color: #004085; }
.order-status-badge.status-shipped { background: #e2e3e5; color: #383d41; }
.order-status-badge.status-delivered { background: #d4edda; color: #155724; }
.order-status-badge.status-cancelled { background: #f8d7da; color: #721c24; }
.order-status-badge.status-refunded { background: #d6d8db; color: #1b1e21; }

/* Pill ordine (storico Punti Gibe, riferimenti ordine cliccabili) */
.pg-order-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: rgba(var(--primary-color-rgb), 0.08);
	border: 1px solid rgba(var(--primary-color-rgb), 0.18);
	color: var(--primary-color);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pg-order-pill:hover,
.pg-order-pill:focus {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	text-decoration: none;
}

.pg-order-pill i {
	font-size: 0.72rem;
	opacity: 0.7;
}

.pg-order-pill:hover i,
.pg-order-pill:focus i {
	opacity: 1;
}

/* Riga marcatore "Unione account" nello storico Punti Gibe (annotazione, non movimento) */
.pg-merge-row td {
	background: rgba(var(--primary-color-rgb), 0.04);
	font-style: italic;
	color: #6c757d;
}

/* Orders table (account-ordini) */
.orders-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	overflow: hidden;
}

.orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.orders-table thead tr {
	border-bottom: 2px solid #e8e8e8;
}

.orders-table thead th {
	padding: 10px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #999;
	white-space: nowrap;
}

.orders-table tbody tr {
	border-bottom: 1px solid #f2f2f2;
	transition: background 0.15s;
}

.orders-table tbody tr:last-child {
	border-bottom: none;
}

.orders-table tbody tr:hover {
	background: #fafaf8;
}

.orders-table tbody td {
	padding: 12px 14px;
	color: #444;
	vertical-align: middle;
}

.orders-order-number {
	font-family: 'Courier New', monospace;
	font-size: 0.82rem;
	font-weight: 600;
	color: #555 !important;
	letter-spacing: 0.03em;
}

.orders-total {
	font-weight: 600;
	color: var(--primary-color) !important;
}

.orders-detail-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--primary-color);
	border: 1.5px solid var(--primary-color);
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.orders-detail-btn:hover {
	background: var(--primary-color);
	color: #fff;
	text-decoration: none;
}

.orders-detail-btn i {
	font-size: 0.7rem;
}

/* Riga cliccabile */
.orders-row-link {
	cursor: pointer;
}

/* Card mobile (nascosta su desktop) */
.orders-cards-view {
	display: none;
}

/* Smartphone: card al posto della tabella */
@media (max-width: 575.98px) {
	.orders-table-view {
		display: none;
	}
	.orders-cards-view {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}
}

.order-card-mobile {
	display: block;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
	padding: 0.9rem 1rem;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s;
}
.order-card-mobile:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	text-decoration: none;
	color: inherit;
}

/* RC2 (2026-06-26): bordo oro pallido sulle card bianche dell'account (come le card prodotto/recensioni) — enfatizza i bordi su sfondo bianco */
.account-stat-card,
.order-card-mobile,
.account-layout .card {
	border: 1px solid var(--c-gold-200, #F4D799) !important; /* !important per battere l'utility Bootstrap .border-0 sulle card dashboard */
}
.account-sidebar-nav { border: 1px solid #f0f0f0; } /* RC2 (2026-06-26): sidebar = bordo grigio come i separatori tra le voci (#f0f0f0), non oro */
/* RC2 (2026-06-26): titoli area account = Spartan (no serif EB Garamond del default .store-body h1-h3) — è e-commerce, font uniformato */
.account-layout h1, .account-layout h2, .account-layout h3, .account-layout h4, .account-layout h5, .account-layout h6 { font-family: var(--font-base); }
/* RC2 (2026-06-26): cuore "rimuovi da wishlist" — GLOBALE (prima era inline solo in account-wishlist.php, quindi assente sulla preview in /account) */
.wishlist-remove-btn {
	position: absolute; top: 8px; right: 8px;
	border: none; background: #fff; color: var(--primary-color);
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	transition: background 0.2s, transform 0.2s; z-index: 3;
}
.wishlist-remove-btn:hover { background: var(--primary-color); color: #fff; transform: scale(1.1); }
/* RC2 (2026-06-26): titoli dei modal = Spartan (non il serif del default .store-body h*) */
.store-body .modal-title { font-family: var(--font-base); }
/* RC2 (2026-06-26): col modal aperto, lo scroll della pagina era su <html> (overflow-y:auto) e Bootstrap blocca solo il body → doppio scroll. Blocco anche <html>. */
html:has(body.modal-open) { overflow: hidden; }
/* RC2 (2026-06-26): col modal aperto nascondi la bottom-bar flottante (copriva i tasti Conferma in fondo al modal) */
body.modal-open .mobile-bottom-bar { display: none; }
.order-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}
.order-card-bottom {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: #777;
}
.order-card-date i {
	margin-right: 3px;
	font-size: 0.7rem;
}
.order-card-total {
	margin-left: auto;
	font-weight: 700;
	color: var(--primary-color);
	font-size: 0.9rem;
}

/* SM: nascondi colonna bottone, riga cliccabile */
@media (max-width: 991.98px) {
	.orders-col-action {
		display: none;
	}
}

/* Address cards grid */
.address-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

.address-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 1.25rem;
	position: relative;
	transition: all 0.2s;
}

.address-card:hover {
	border-color: var(--primary-color);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.address-card .address-label {
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.address-card .address-text {
	color: #555;
	font-size: 0.88rem;
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.address-card .address-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
}

/* Indirizzo predefinito: card evidenziata come al checkout (collaudo 154) */
.address-card.is-default {
	border-color: var(--primary-color);
	border-width: 2px;
	background: #f0f7f2;
}

/* Badge "Predefinito ..." in flusso sopra i bottoni: hanno tutta la larghezza
   della card, quindi il testo esteso non finisce sotto l'etichetta. */
.address-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 0.75rem;
}
.address-card .badge-default {
	background: var(--primary-color);
	color: #fff;
	font-size: 0.7rem;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	text-align: left;
	white-space: nowrap;
}

/* Wishlist grid (reuses product card styles) */
.wishlist-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.wishlist-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	overflow: hidden;
	transition: all 0.3s;
}

.wishlist-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.wishlist-card .wishlist-img {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

.wishlist-card .wishlist-img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wishlist-card .wishlist-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	border: none;
	color: #dc3545;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.wishlist-card .wishlist-remove:hover {
	background: #dc3545;
	color: #fff;
}

.wishlist-card .wishlist-info {
	padding: 1rem;
}

.wishlist-card .wishlist-name {
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: #333;
}

.wishlist-card .wishlist-name a {
	color: inherit;
	text-decoration: none;
}

.wishlist-card .wishlist-name a:hover {
	color: var(--primary-color);
}

.wishlist-card .wishlist-price {
	font-weight: 700;
	color: var(--primary-color);
	font-size: 1rem;
}

.wishlist-card .wishlist-price .price-old {
	text-decoration: line-through;
	color: #999;
	font-weight: 400;
	font-size: 0.85rem;
	margin-right: 0.5rem;
}

/* Profile form */
.profile-form {
	max-width: 600px;
}

.profile-form .form-label {
	font-weight: 500;
	color: #333;
	font-size: 0.9rem;
}

.profile-form .form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(30, 77, 43, 0.15);
}

.profile-form .form-control[readonly] {
	background: #f8f9fa;
	cursor: not-allowed;
}

/* Order progress stepper (account-ordine-dettaglio) */
.order-progress-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	padding: 28px 24px;
}

.order-progress {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.order-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
	gap: 10px;
}

/* horizontal connector line */
.order-progress-line {
	position: absolute;
	top: 20px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: #e0e0e0;
	z-index: 0;
}

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

.order-progress-icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: #f0f0f0;
	border: 2px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	color: #bbb;
	position: relative;
	z-index: 1;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.order-progress-step.completed .order-progress-icon {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.order-progress-step.active .order-progress-icon {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(229,168,53,0.18);
}

.order-progress-label {
	font-size: 0.75rem;
	font-weight: 500;
	color: #bbb;
	text-align: center;
	line-height: 1.3;
}

.order-progress-step.completed .order-progress-label {
	color: var(--primary-color);
	font-weight: 600;
}

.order-progress-step.active .order-progress-label {
	color: #333;
	font-weight: 700;
}

@media (max-width: 575px) {
	.order-progress-card {
		padding: 16px 14px;
	}

	.order-progress {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.order-progress-step {
		flex-direction: row;
		flex: none;
		width: 100%;
		align-items: center;
		gap: 10px;
		position: relative;
	}

	.order-progress-icon {
		width: 28px;
		height: 28px;
		min-width: 28px;
		font-size: 0.7rem;
		flex-shrink: 0;
	}

	/* Linea verticale: copre il gap tra questo step e il precedente */
	.order-progress-line {
		position: absolute;
		left: 13px;
		right: auto;
		top: -6px;        /* risale nel gap sopra lo step */
		width: 2px;
		height: 6px;      /* = gap tra gli step */
		background: #e0e0e0;
		z-index: 0;
	}

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

	.order-progress-label {
		text-align: left;
		font-size: 0.8rem;
	}
}

/* Order detail timeline */
.order-timeline {
	position: relative;
	padding-left: 2rem;
}

.order-timeline::before {
	content: '';
	position: absolute;
	left: 0.6rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #e0e0e0;
}

.order-timeline-step {
	position: relative;
	padding-bottom: 1.5rem;
	padding-left: 1rem;
}

.order-timeline-step:last-child {
	padding-bottom: 0;
}

.order-timeline-step::before {
	content: '';
	position: absolute;
	left: -1.65rem;
	top: 0.3rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e0e0e0;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #e0e0e0;
}

.order-timeline-step.completed::before {
	background: var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-color);
}

.order-timeline-step.active::before {
	background: var(--secondary-color);
	box-shadow: 0 0 0 2px var(--secondary-color);
}

.order-timeline-step .step-title {
	font-weight: 600;
	font-size: 0.9rem;
	color: #333;
}

.order-timeline-step .step-date {
	font-size: 0.8rem;
	color: #888;
}

/* Empty state */
.account-empty-state {
	text-align: center;
	padding: 3rem 1.5rem;
}

.account-empty-state i {
	font-size: 3rem;
	color: #ddd;
	margin-bottom: 1rem;
}

.account-empty-state h5 {
	color: #666;
	margin-bottom: 0.5rem;
}

.account-empty-state p {
	color: #999;
	margin-bottom: 1.5rem;
}

/* Password reset page */
.password-reset-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f0;
	padding: 2rem;
}

/* Mobile: sidebar becomes horizontal tabs */
@media (max-width: 991.98px) {
	.account-layout {
		flex-direction: column;
		gap: 1rem;
	}

	/* Sotto LG la sidebar diventa una griglia di card di navigazione,
	   cosi' tutte le sezioni restano raggiungibili anche da smartphone. */
	.account-sidebar {
		width: 100%;
	}
	.account-sidebar-nav {
		position: static;
		top: auto;
	}
	.account-sidebar-links {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.account-sidebar-link {
		font-size: 0.85rem;
		padding: 0.8rem 1rem;
		border-right: 1px solid #f0f0f0;
	}

	.address-cards-grid {
		grid-template-columns: 1fr;
	}

	.wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}


@media (max-width: 575.98px) {
	.wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.account-stats {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		margin-bottom: 1rem !important;
	}
	.account-stat-card {
		padding: 0.75rem 1rem;
	}
	.stat-card-orders {
		display: none;
	}
}


/* =========================================================================
   STORE HOMEPAGE
   ========================================================================= */

/* Hero statico */
.store-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 0;
}

.store-hero-overlay {
	/* RC2 (13/07): overlay verde rimosso — foto pulita, niente alterazioni davanti. */
	display: none;
}

.store-hero .container {
	position: relative;
	z-index: 1;
}

.store-hero-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.82rem;
	color: var(--secondary-color);
	margin-bottom: 0.5rem;
}

.store-hero .store-hero-title {
	font-family: var(--font-hero);
	font-weight: 400;
	color: #ffffff;
	font-size: 3.2rem;
	line-height: 1.15;
	margin-bottom: 1rem;
}

.store-hero-subtitle {
	color: rgba(255,255,255,0.85);
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	max-width: 500px;
}

.store-hero-logo {
	max-width: 280px;
	opacity: 0.15;
}

/* Hero slider */
.store-hero-slider {
	position: relative;
}

.store-hero-slider .carousel-item img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
}

.store-hero-slider .carousel-caption {
	background: rgba(0,0,0,0.45);
	border-radius: 8px;
	padding: 1rem 2rem;
	bottom: 2rem;
}

.store-hero-slider .carousel-caption h2 {
	font-family: var(--font-display);
	font-size: 1.8rem;
	margin-bottom: 0.25rem;
}

.store-hero-slider .carousel-caption p {
	font-size: 1rem;
	margin-bottom: 0;
}

/* Trust bar */
.store-trust-bar {
	padding: 1.25rem 0;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.trust-item i {
	font-size: 1.5rem;
	color: var(--secondary-color);
	margin-bottom: 4px;
}

.trust-item strong {
	font-size: 0.82rem;
}

.trust-item small {
	color: #999;
	font-size: 0.75rem;
}

/* Section layout */
.store-section {
	padding: 3rem 0;
}

.store-section-alt {
	background-color: #faf9f7;
}

.store-section-title {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--primary-color);
}

.store-section-subtitle {
	color: #888;
	font-size: 0.9rem;
}

/* Category cards */
.category-card-link {
	text-decoration: none;
	display: block;
}

.category-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem 0.75rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%;
}

.category-card:hover {
	transform: translateY(-8px) scale(1.03); /* RC2 card-lift (comp.2) */
	box-shadow: 0 28px 48px -18px rgba(27, 70, 48, 0.32);
}

.category-card i {
	font-size: 2rem;
	color: var(--secondary-color);
	margin-bottom: 0.5rem;
	display: block;
}

.category-card img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 0.5rem;
}

.category-card h6 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.category-card small {
	color: #aaa;
	font-size: 0.75rem;
}

/* 7 categorie su una riga per schermi xl+ */
@media (min-width: 1200px) {
	.col-xl-cat7 {
		flex: 0 0 calc(100% / 7);
		max-width: calc(100% / 7);
	}
}

/* Product horizontal scroll row */
.product-scroll-row {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: #ddd transparent;
}

.product-scroll-row::-webkit-scrollbar {
	height: 6px;
}

.product-scroll-row::-webkit-scrollbar-track {
	background: transparent;
}

.product-scroll-row::-webkit-scrollbar-thumb {
	background: #ddd;
	border-radius: 3px;
}

.product-card-home {
	min-width: 200px;
	max-width: 220px;
	flex-shrink: 0;
	scroll-snap-align: start;
}

.product-card-home .card-img-wrapper {
	padding-top: 0;
	height: 200px;
}

.product-card-home .card-img-wrapper img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
}

/* Brand grid */
.brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
	align-items: center;
}

.brand-logo-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 8px;
	padding: 1rem;
	height: 80px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.brand-logo-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.brand-logo-card img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(40%);
	transition: filter 0.2s;
}

.brand-logo-card:hover img {
	filter: grayscale(0);
}

/* CTA section */
.store-cta-section {
	background: linear-gradient(135deg, var(--primary-color) 0%, #163d21 100%);
	padding: 3.5rem 0;
}

.store-cta-section .store-section-title {
	color: #fff;
}

/* Responsive */
@media (max-width: 767.98px) {
	.store-hero {
		padding: 2.5rem 0;
	}

	.store-hero-title {
		font-size: 2rem;
	}

	.store-hero-logo {
		max-width: 180px;
	}

	.store-hero-slider .carousel-item img {
		max-height: 280px;
	}

	.store-hero-slider .carousel-caption {
		padding: 0.5rem 1rem;
		bottom: 0.5rem;
	}

	.store-hero-slider .carousel-caption h2 {
		font-size: 1.2rem;
	}

	.store-section {
		padding: 2rem 0;
	}

	.store-section-title {
		font-size: 1.3rem;
	}

	.product-card-home {
		min-width: 160px;
		max-width: 180px;
	}

	.product-card-home .card-img-wrapper {
		height: 160px;
	}

	.brand-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.5rem;
	}

	.brand-logo-card {
		height: 60px;
		padding: 0.5rem;
	}
}

/* =========================================================================
   MODAL ALERT/CONFIRM — Gibertini Design
   ========================================================================= */
#modalAlert .modal-content {
	border: none;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
#modalAlert .modal-header-brand {
	background-color: var(--primary-color);
	color: #fff;
	border-bottom: 3px solid var(--secondary-color);
	padding: 1.25rem 1.5rem;
}
#modalAlert .modal-header-brand .modal-title {
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
#modalAlert .modal-header-brand #modalAlertIcon {
	color: var(--secondary-color);
	font-size: 1.15rem;
}
#modalAlert .modal-body {
	padding: 1.75rem 1.5rem;
	font-size: 0.95rem;
	color: #333;
	line-height: 1.6;
	text-align: center;
}
#modalAlert .modal-footer {
	border-top: none;
	padding: 0 1.5rem 1.5rem;
	justify-content: center;
	gap: 0.75rem;
}
.btn-brand {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	border-radius: 50px;
	padding: 0.5rem 1.75rem;
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	transition: all 0.2s ease;
}
.btn-brand:hover,
.btn-brand:focus {
	background-color: #163d22;
	border-color: #163d22;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(30, 77, 43, 0.3);
}
#modalAlert .btn-secondary {
	background-color: transparent;
	border: 1.5px solid var(--primary-color);
	color: var(--primary-color);
	border-radius: 50px;
	padding: 0.5rem 1.75rem;
	font-weight: 500;
	font-size: 0.875rem;
	transition: all 0.2s ease;
}
#modalAlert .btn-secondary:hover {
	background-color: var(--primary-color);
	color: #fff;
	transform: translateY(-1px);
}

/* =========================================================================
   COMPARE — Toolbar + Page
   ========================================================================= */

/* Compare toggle button on product cards */
.btn-compare-toggle {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e0e0e0;
    display: none; /* RC2 (2026-06-18): nascosto di default, visibile solo in "modalità confronto" */
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #999;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    padding: 0;
}
.btn-compare-toggle:hover {
    background: #fff;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-compare-toggle.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
/* RC2 (2026-06-18): "modalità confronto" → i bottoni compaiono in alto a DESTRA
   (in alto a sinistra c'è il badge sconto). */
body.compare-mode .product-card .btn-compare-toggle { display: flex; left: auto; right: 8px; }
/* Toggle "Confronta" nella toolbar catalogo. */
.btn-compare-mode {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #dad7d1; color: var(--primary-color);
    border-radius: 999px; padding: 6px 14px; font-family: var(--font-base);
    font-weight: 500; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.btn-compare-mode:hover { border-color: var(--primary-color); }
.btn-compare-mode.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* Compare floating toolbar */
.compare-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 1050;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}
.compare-toolbar.hidden {
    transform: translateY(100%);
}
.compare-toolbar-items {
    display: flex;
    gap: 8px;
    flex: 1;
}
.compare-toolbar-item {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--primary-color);
}
.compare-toolbar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.compare-toolbar-item .compare-toolbar-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #fff;
}
.compare-toolbar-slot {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px dashed #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.2rem;
}

/* Mobile: compare toolbar */
@media (max-width: 575.98px) {
    .compare-toolbar {
        padding: 8px 12px;
    }
    .compare-toolbar-item,
    .compare-toolbar-slot {
        width: 40px;
        height: 40px;
    }
}


/* =========================================================================
   BOTTONI A CAPSULA — restyling 2026-05-22
   Tutto il frontend store/vetrina adotta bottoni "pill" (raggio pieno).
   In coda al file per vincere sull'ordine sorgente; le poche eccezioni a
   specificita' piu' alta (es. input-group newsletter) restano squadrate.
   ========================================================================= */
.store-body .btn,
.site-body .btn {
	border-radius: 999px;
}

/* Carosello "In evidenza": riserva sempre la riga del brand, cosi' le card
   restano allineate anche per i prodotti senza marca (2026-05-22). */
.product-card-home .product-brand {
	min-height: 0.9rem;
}


/* =========================================================================
   NIENTE ZOOM iOS SUGLI INPUT — 2026-05-22
   iOS Safari ingrandisce automaticamente la pagina quando un input con
   font-size < 16px riceve il focus. Forzando 16px su TUTTI i campi del
   frontend mobile, lo zoom automatico non scatta piu'.
   ========================================================================= */
@media (max-width: 991.98px) {
	input:not([type=checkbox]):not([type=radio]):not([type=range]),
	select,
	textarea {
		font-size: 16px !important;
	}
}


/* =========================================================================
   CATALOGO — GRIGLIA SOTTO-CATEGORIE (pagina categoria madre) — 2026-05-22
   La pagina di una categoria madre mostra le sue sotto-categorie come card
   quadrate (immagine = icon_path, fallback = foto di un prodotto) + nome.
   ========================================================================= */
.subcat-grid-section {
	padding: 2.5rem 0 3.5rem;
}
.subcat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
.subcat-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #ece9e3;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	box-shadow: var(--card-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.subcat-card:hover {
	transform: translateY(-8px) scale(1.03); /* RC2 card-lift (comp.2) */
	box-shadow: 0 28px 48px -18px rgba(27, 70, 48, 0.32);
}
.subcat-card-img {
	display: block;
	aspect-ratio: 1 / 1;
	/* 2026-05-23: sfondo bianco per uniformarsi con quello dei loghi/foto
	   sotto-categoria (prima era #f5f3ef beige → contrasto stonato). */
	background: #ffffff;
	overflow: hidden;
}
.subcat-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Foto-prodotto di fallback: mostrata INTERA (contain) e centrata, con un
   po' di padding — cosi' le card restano visivamente uniformi a prescindere
   dalle proporzioni della foto. I loghi dedicati (icon_path) restano cover. */
.subcat-card-img.is-photo img {
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
}
.subcat-card-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--secondary-color);
	font-size: 2.4rem;
}
.subcat-card-name {
	padding: 0.8rem 0.6rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--primary-color);
	font-family: var(--font-display);
}
@media (max-width: 991.98px) {
	.subcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
	.subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
}

/* Sotto-categorie inline su pagine "?all=1": SEMPRE su riga singola.
   Se le card stanno tutte nel viewport → render statico, niente carosello.
   Altrimenti → carosello orizzontale infinite-loop con auto-scroll,
   drag/touch nativi e frecce laterali (stesso pattern home-brands-carousel). */
.subcat-inline-section {
	padding: 1.5rem 0 0.75rem;
	background: transparent;
}
.subcat-inline-section .subcat-card,
.subcat-inline-section .subcat-card-tile {
	border: none;
	box-shadow: none;
}
.subcat-carousel-viewport {
	position: relative;
	overflow: hidden;
}
.subcat-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.6rem;
	padding: 2px 0;
	/* 2026-05-23: transform-based (era scrollLeft). iOS Safari non
	   aggiornava lo scrollLeft programmatico su flex+overflow:auto. */
	will-change: transform;
	transform: translate3d(0, 0, 0);
}
/* Card-tile: larghezza fissa sempre uguale, indipendente dal numero di
   sotto-categorie. Quando le card entrano tutte nel viewport, il track
   le centra (classe .is-fit applicata dal JS). */
.subcat-card-tile {
	flex: 0 0 auto;
	width: 160px;
}
.subcat-carousel-track.is-fit {
	justify-content: center;
}
.subcat-card-tile .subcat-card-name {
	padding: 0.5rem 0.4rem;
	font-size: 0.82rem;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.subcat-card-tile .subcat-card-img.is-photo img {
	padding: 6px;
}
/* Frecce nav: visibili solo quando il carosello e' attivo (is-active) */
.subcat-carousel-nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #ece9e3;
	color: var(--primary-color);
	font-size: 0.85rem;
	z-index: 3;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.subcat-carousel-nav:hover { color: var(--secondary-color); }
.subcat-carousel-prev { left: -6px; }
.subcat-carousel-next { right: -6px; }
.subcat-carousel-viewport.is-active .subcat-carousel-nav { display: inline-flex; align-items: center; justify-content: center; }
/* Quando il carosello e' attivo, sfumiamo i bordi laterali per dare l'idea
   di "continuita'" del flusso. */
.subcat-carousel-viewport.is-active::before,
.subcat-carousel-viewport.is-active::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32px;
	pointer-events: none;
	z-index: 2;
}
.subcat-carousel-viewport.is-active::before {
	left: 0;
	background: linear-gradient(to right, var(--surface-bg, #f8f7f4), rgba(248, 247, 244, 0));
}
.subcat-carousel-viewport.is-active::after {
	right: 0;
	background: linear-gradient(to left, var(--surface-bg, #f8f7f4), rgba(248, 247, 244, 0));
}
/* Tablet/mobile: card un filo piu' strette ma sempre single-row e uguali */
@media (max-width: 991.98px) {
	.subcat-card-tile { width: 140px; }
}
@media (max-width: 575.98px) {
	.subcat-card-tile { width: 120px; }
	.subcat-card-tile .subcat-card-name { font-size: 0.78rem; }
	.subcat-carousel-prev { left: -2px; }
	.subcat-carousel-next { right: -2px; }
}

/* Catalogo: link "categoria madre" in cima all'elenco sotto-categorie */
.filter-link-root {
	font-weight: 600;
	color: var(--primary-color);
	border-bottom: 1px solid #ece9e3;
	margin-bottom: 4px;
	padding-bottom: 8px;
}

/* Catalogo: bottone "Vedi tutti i prodotti di ..." sotto la lista prodotti */
.catalog-see-all {
	text-align: center;
	margin: 2rem 0 0.5rem;
}


/* =========================================================================
   RESTYLE 2026-05-23 — Ritmo verticale variato + motion ease-out-quart
   In coda al file per vincere sull'ordine sorgente. Non duplica le regole
   esistenti, le rifinisce. Tutto e' annullabile cambiando le variabili
   --section-pad-* e --ease-out-quart in :root.
   ========================================================================= */

/* Ritmo verticale: la classe base resta con il padding medio, ma ora le
   sezioni "respiro" (sezione "In evidenza", "Categorie", "Lasciati ispirare")
   guadagnano aria; trust bar e quick-contacts restano compatte. */
.store-body .store-section,
.site-body .store-section {
	padding: var(--section-pad-md) 0;
}
.store-body .store-section.store-section-lg,
.site-body .store-section.store-section-lg {
	padding: var(--section-pad-lg) 0;
}
.store-body .store-section.store-section-sm,
.site-body .store-section.store-section-sm {
	padding: var(--section-pad-sm) 0;
}
/* Sezioni home con identita' forte: piu' aria sopra/sotto */
.store-body .home-categories-tabs,
.site-body .home-categories-tabs {
	padding-top: var(--section-pad-lg);
	padding-bottom: var(--section-pad-lg);
}
.store-body .home-band-inspire,
.site-body .home-band-inspire {
	padding-top: var(--section-pad-lg);
	padding-bottom: var(--section-pad-lg);
}
/* Trust bar: rivalutata 2026-05-23 — il cliente vuole darle piu' importanza.
   Vedi blocco TRUST BAR rivisitato in fondo allo store.css.
   (Niente piu' override "compatto" qui.) */

/* Motion: curva ease-out-quart su hover/lift dei pattern principali.
   transition-timing-function viene applicata in modo specifico cosi'
   non riscriviamo tutte le shorthand 'transition: ...' sparse nel file. */
.store-body .product-card,
.store-body .product-card .card-img-wrapper img,
.store-body .product-card .btn-add-cart,
.store-body .product-card .btn-wishlist,
.store-body .subcat-card,
.store-body .cat-tab,
.store-body .category-card,
.store-body .btn-gold,
.store-body .btn-outline-gold,
.store-body .btn-add-cart,
.site-body .product-card,
.site-body .cat-tab,
.site-body .btn-gold {
	transition-timing-function: var(--ease-out-quart);
	transition-duration: 0.35s;
}

/* Affinamento tipografico per Fraunces a display size — leggera stretta
   delle lettere sui titoli grandi (>1.5rem) cosi' i tratti graziati restano
   coesi. Sotto 1.5rem Fraunces sta gia' bene di default. */
.store-body h1.font-display,
.store-body .store-section-title,
.store-body .store-hero-title,
.store-body .home-band-title,
.store-body .home-eg-hero-claim {
	letter-spacing: -0.005em;
}

/* Mobile: niente ritmo XXL. Sotto 768px riduciamo le sezioni "lg" a "md"
   per non sprecare spazio prezioso verticale del telefono. */
@media (max-width: 767.98px) {
	:root {
		--section-pad-lg: 3rem;
		--section-pad-md: 2.25rem;
		--section-pad-sm: 1.25rem;
	}
}


/* =========================================================================
   BREADCRUMB NASCOSTO — restyling 2026-05-23.
   Decisione cliente 23/05: rimuovere il breadcrumb in testa a TUTTE le
   pagine front-end:
   — store (scheda prodotto, carrello, checkout, ricerca, confronto,
     esito ordine) usano .store-breadcrumb
   — vetrina (servizi, chi-siamo, pagamento-sicuro, ecc.) usano
     <nav aria-label="breadcrumb"> dentro .page-hero / .site-breadcrumb
     / .tag-breadcrumb
   HTML lasciato in essere — basta togliere queste regole per riattivarlo.
   ========================================================================= */
.store-body .store-breadcrumb,
.store-body nav[aria-label="breadcrumb"],
.store-body .site-breadcrumb,
.site-body nav[aria-label="breadcrumb"],
.site-body .site-breadcrumb {
	display: none;
}


/* =========================================================================
   TRUST BAR — versione "importante" (restyle 2026-05-23).
   Il cliente vuole dare piu' peso ai 4 reassurance item della home
   (spedizione gratuita, pagamento sicuro, garanzia, assistenza).
   Trasformiamo ogni cella in una mini-card con icona dorata in cerchio,
   tipografia piu' generosa, spaziatura piu' ampia. Sezione su sfondo
   crema caldo per staccare dalle sezioni adiacenti.
   ========================================================================= */
.store-body .store-trust-bar,
.site-body .store-trust-bar {
	padding: 0.9rem 0;          /* RC2 (2026-06-18): blocco 4-info più compatto in altezza */
	background: #ffffff;         /* sfondo bianco, niente piu' crema */
	border-bottom: none;
	border-top: 1px solid #ece9e3;
	margin-top: 0; /* RC2 (2026-06-26): nessun margin-top — il blocco precedente ha già il suo spazio (era clamp 2-3rem = spazio doppio) */
	margin-bottom: 0;            /* a filo del footer (cliente 2026-05-24) */
}
/* RC2 (2026-06-18): footer a filo del contenuto per default (vedi .store-main
   padding-bottom:0 e .store-footer senza margin-top). Niente più override :has()
   per azzerare i margini caso per caso. */
.store-body .store-trust-bar .trust-item,
.site-body .store-trust-bar .trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem;
}
/* Icona dorata grande dentro un cerchio crema scuro */
.store-body .store-trust-bar .trust-item i,
.site-body .store-trust-bar .trust-item i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(229, 168, 53, 0.14);
	color: var(--secondary-color);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}
.store-body .store-trust-bar .trust-item strong,
.site-body .store-trust-bar .trust-item strong {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.2;
}
.store-body .store-trust-bar .trust-item small,
.site-body .store-trust-bar .trust-item small {
	font-size: 0.88rem;
	color: #6b6b6b;
	line-height: 1.3;
}
/* Mobile: padding ridotto + icone leggermente piu' piccole */
@media (max-width: 767.98px) {
	.store-body .store-trust-bar,
	.site-body .store-trust-bar {
		padding: 1.25rem 0;
	}
	.store-body .store-trust-bar .trust-item i,
	.site-body .store-trust-bar .trust-item i {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}
	.store-body .store-trust-bar .trust-item strong,
	.site-body .store-trust-bar .trust-item strong {
		font-size: 0.95rem;
	}
	.store-body .store-trust-bar .trust-item small,
	.site-body .store-trust-bar .trust-item small {
		font-size: 0.82rem;
	}
}


/* =========================================================================
   PRODUCT CARD — INTERA CLICCABILE (2026-05-23).
   Pattern "stretched link": il link gia' presente sul nome prodotto si
   estende invisibilmente su tutta l'area della card via ::after assoluto.
   Resta tutto semantico (un solo <a> per card), niente JS, niente <a>
   annidati. Bottoni e link interni (immagine, wishlist, compare, add-cart)
   salgono su z-index: 2 per restare cliccabili indipendentemente.
   ========================================================================= */
.store-body .product-card,
.site-body .product-card {
	position: relative;
	cursor: pointer;
}
.store-body .product-card .product-name a::after,
.site-body .product-card .product-name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: auto;
}
/* Elementi che sono GIA' position:absolute nel CSS originale (badge sconto in
   alto, wishlist heart, compare): solo z-index, senza toccare la position
   (altrimenti perderebbero il loro top/left/right e crollerebbero nel flow). */
.store-body .product-card .product-badges,
.store-body .product-card .btn-wishlist,
.store-body .product-card .btn-compare-toggle,
.site-body .product-card .product-badges,
.site-body .product-card .btn-wishlist,
.site-body .product-card .btn-compare-toggle {
	z-index: 2;
}
/* Elementi che sono in flusso normale (aggiungi al carrello, bottoni generici):
   z-index richiede una position non-static, quindi promuoviamo a relative. */
.store-body .product-card .btn-add-cart,
.store-body .product-card .btn,
.site-body .product-card .btn-add-cart,
.site-body .product-card .btn {
	position: relative;
	z-index: 2;
}
/* L'<a> dell'immagine prodotto va ABSOLUTE-coverage del card-img-wrapper.
   Mettendolo come 'relative' (come gli altri interattivi) si rompeva l'img
   interna che, a sua volta position:absolute, si riferiva all'<a> inline e
   collassava a 24px. Coverage assoluta + z-index 2 = clic sull'immagine
   funziona, e l'img dentro resta dimensionata correttamente. */
.store-body .product-card .card-img-wrapper a,
.site-body .product-card .card-img-wrapper a {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 2;
}


/* =========================================================================
   TITLE DECORATOR — firma oro sotto i titoli di sezione (2026-05-23).
   Prima esisteva solo su .section-title-centered ("I Nostri Servizi") ed
   era orfana — un dettaglio decorativo applicato a una sola sezione e
   assente nelle altre. Decisione design 2026-05-23: estendere a tutti i
   titoli di sezione H2 dello store (.store-section-title) con un tratto
   piu' sobrio (48x2px invece di 60x3px), per farne un elemento di sistema.
   ========================================================================= */
.store-body .store-section-title,
.site-body .store-section-title {
	position: relative;
}
.store-body .store-section-title::after,
.site-body .store-section-title::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: var(--secondary-color);
	margin: 0.85rem auto 0;
	border-radius: 1px;
}

/* =========================================================================
   Checkout — scelta metodo spedizione (mig 090, 2026-05-26)
   ========================================================================= */
.checkout-shipping-method-choice { display: flex; flex-direction: column; gap: 0.75rem; }
.shipping-method-option {
	display: flex; gap: 0.85rem; align-items: flex-start;
	padding: 0.85rem 1rem;
	border: 1px solid #e6e3d4;
	border-radius: 10px;
	background: #fafaf6;
	cursor: pointer;
	transition: border-color 0.2s var(--ease-out-quart, ease), background 0.2s var(--ease-out-quart, ease);
}
.shipping-method-option:has(input:checked) {
	border-color: var(--primary-color, #1e4d2b);
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 77, 43, 0.08);
}
.shipping-method-option input[type="radio"] { margin-top: 0.25rem; accent-color: var(--primary-color, #1e4d2b); }
.shipping-method-body { flex: 1; }
.shipping-method-title {
	font-family: var(--font-display, 'Fraunces', serif);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--primary-color, #1e4d2b);
}
.shipping-method-free {
	display: inline-block; margin-left: 0.5rem;
	font-family: var(--font-base, 'Inter', sans-serif);
	font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--secondary-color, #E5A835);
	background: rgba(229, 168, 53, 0.12);
	padding: 0.15rem 0.5rem; border-radius: 999px;
}
.shipping-method-desc {
	font-size: 0.88rem; color: #666; line-height: 1.5;
	margin-top: 0.25rem;
}

/* =========================================================================
   RC2 — Card lift (componente dinamico 2)
   Le card cliccabili si sollevano verso l'utente al hover/focus
   (translateY -8px + scale 1.03), niente tilt. Easing morbido condiviso.
   Reference: " - mat/Design/specifica/componenti/02-card-lift/lift-card.css"
   ========================================================================= */
.lift,
.product-card,
.product-card-home,
.category-card,
.subcat-card,
.review-card {
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.lift:hover,
.lift:focus-visible,
.product-card-home:hover,
.review-card:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 28px 48px -18px rgba(27, 70, 48, 0.32);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.lift, .lift:hover, .lift:focus-visible,
	.product-card:hover, .product-card-home:hover,
	.category-card:hover, .subcat-card:hover, .review-card:hover {
		transform: none;
	}
}

/* =========================================================================
   RC2 — Eyebrow (occhiello) riutilizzabile
   Spartan 12px SemiBold, UPPERCASE, tracking ampio. Sopra i titoli sezione.
   ========================================================================= */
.rc-eyebrow {
	display: block;
	font-family: var(--font-base);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--secondary-color-active);
	margin-bottom: 0.5rem;
}

/* =========================================================================
   RC2 — Medaglioni categoria (Home "Cosa stai cercando?", REQ.H5)
   Disco circolare con icona/medaglione caricabile da admin (categories.icon_path)
   + nome sotto. Card cliccabile -> eredita .lift (card-lift comp.2, REQ.H4).
   ========================================================================= */
/* 04/08/2026: le 8 categorie stanno o tutte in fila, o 4 per riga, o 2 per
   riga. Niente vie di mezzo (5, 6, 7 per riga facevano righe spaiate).
   Colonne di larghezza fissa e griglia centrata: le card non si deformano. */
.cat-medallions {
	display: grid;
	grid-template-columns: repeat(8, 140px);
	justify-content: center;
	gap: 18px;
}
/* Sotto i 1400 il container scende a 1140 e otto card non ci stanno: 4 per riga. */
@media (max-width: 1399.98px) {
	.cat-medallions { grid-template-columns: repeat(4, 140px); }
}
/* Sotto i 768 il container e' 540: quattro non entrano, si passa a 2 per riga. */
@media (max-width: 767.98px) {
	.cat-medallions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cat-medallion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 04/08/2026: le icone di Niccolo' erano perse dentro la card. Meno
	   imbottitura, meno spazio fra disco e nome, disco piu' grande. */
	gap: 8px;
	width: 100%;      /* la larghezza la decide la colonna della griglia */
	height: 140px;
	padding: 14px 10px 12px;
	text-decoration: none;
	border: 1px solid var(--c-gold-500, #F7B71D);
	border-radius: 16px;
	background: var(--c-forest-700, #1B4630); /* RC2 (2026-06-26): card categoria mono-colore pieno (Figma #1B4630), non più trasparente */
	box-shadow: 0 12px 20px -10px rgba(247,183,29,.55), inset 0 1px 0 0 rgba(244,215,153,.14);
	transition: transform .25s var(--ease-out-quart, ease), box-shadow .25s var(--ease-out-quart, ease), border-color .25s ease;
}
.cat-medallion:hover,
.cat-medallion:focus-visible {
	transform: translateY(-4px);
	border-color: var(--c-gold-200, #F4D799);
	box-shadow: 0 18px 28px -12px rgba(247,183,29,.7), inset 0 1px 0 0 rgba(244,215,153,.22);
}

/* ---- Selettore /catalogo (2026-06-26): hero foto negozio + medaglioni 4 per riga, più grandi ---- */
.catalog-chooser-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: clamp(220px, 30vw, 340px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.catalog-chooser-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14,42,27,.5) 0%, rgba(14,42,27,.82) 100%);
}
.catalog-chooser-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding: 1.5rem;
}
.catalog-chooser-hero-inner h1 {
	font-family: var(--font-base);
	color: var(--c-gold-200, #F4D799);
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	margin: 0 0 .5rem;
}
.catalog-chooser-hero-inner p {
	color: rgba(255,255,255,.92);
	font-size: clamp(.95rem, 2vw, 1.1rem);
	margin: 0;
}
.catalog-chooser .cat-medallions { max-width: 900px; margin: 0 auto; gap: 24px; grid-template-columns: repeat(4, 1fr); }
.catalog-chooser .cat-medallion { height: 190px; padding: 18px 12px 16px; }
.catalog-chooser .cat-medallion-disc { width: 116px; height: 116px; }
@media (max-width: 767.98px) {
	.catalog-chooser .cat-medallions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.catalog-chooser .cat-medallion { height: 165px; }
	.catalog-chooser .cat-medallion-disc { width: 98px; height: 98px; }
}
.cat-medallion-disc {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--c-cream-100, #F4ECDC);
	border: 1px solid var(--c-gold-600, #D89A2C);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.cat-medallion-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cat-medallion-icon {
	font-size: 1.6rem;
	color: var(--primary-color);
}
.cat-medallion-name {
	font-family: var(--font-base);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	color: var(--c-gold-200, #F4D799);
}
.cat-medallion:hover .cat-medallion-name,
.cat-medallion:focus .cat-medallion-name {
	color: var(--c-gold-200, #F4D799);
}

@media (max-width: 575.98px) {
	.cat-medallions { gap: 16px 12px; } /* RC2 (2026-06-26): 2 per riga su mobile (Figma) */
	.cat-medallion { height: 140px; padding: 12px 10px 10px; gap: 6px; }
	.cat-medallion-disc { width: 78px; height: 78px; }
	.cat-medallion-icon { font-size: 1.2rem; }
	.cat-medallion-name { font-size: 11px; }
}

/* =========================================================================
   RC2 (2026-06-16) — Sotto-categorie come MEDAGLIONI-PILLOLA in alto al catalogo
   PDF pag.4: riga orizzontale di pillole (disco circolare medaglione + nome
   inline). "Tutto" = primo item attivo. Scorre col carosello esistente.
   ========================================================================= */
.subcat-inline-section { padding: 0.75rem 0; background: transparent; } /* RC2 (2026-06-26): padding top/bottom bilanciato (era 1.25/0.5) */
/* RC2 (2026-06-18): riga pills sotto-categoria — scroll manuale (no auto/frecce), "Tutto" sticky. */
.subcat-pill-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px 2px;
	scrollbar-width: none; /* RC2 (2026-06-26): scrollbar orizzontale nascosta (scroll resta attivo) */
	-webkit-overflow-scrolling: touch;
}
.subcat-pill-row::-webkit-scrollbar { display: none; }
.subcat-pill-row .subcat-pill { flex: 0 0 auto; }
.subcat-pill-row .subcat-pill-all {
	position: sticky;
	left: 0;
	z-index: 3;
	margin-right: 0.2rem;
	/* RC2 (2026-06-18): mask bianca DIETRO il bottone (il box-shadow si dipinge dietro lo
	   sfondo verde) ed estesa a SINISTRA → nasconde le pills che, scorrendo verso sinistra,
	   sbucano dietro a "Tutto". 3 livelli: bottone verde (sopra) > mask bianca (dietro) >
	   pills che scorrono (in fondo, nascoste). */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09), -70px 0 0 30px #fff;
}
.subcat-inline-section .subcat-carousel-track { gap: 0.65rem; align-items: center; padding: 4px 0; }
.subcat-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.32rem 0.95rem 0.32rem 0.4rem;
	border: 1px solid #dad7d1; /* RC2 (2026-06-18): bordo grigio tenue (non più oro) */
	border-radius: 999px;
	background: var(--c-white, #fff);
	text-decoration: none;
	color: var(--c-ink, #15130F);
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09); /* RC2 (2026-06-18): ombra lieve a riposo */
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.subcat-pill:hover { box-shadow: 0 14px 28px -16px rgba(27, 70, 48, 0.32); border-color: var(--c-gold-600, #D89A2C); }
.subcat-pill-disc {
	flex: 0 0 auto;
	width: 30px; height: 30px; /* RC2 (2026-06-18): cerchio più piccolo → pill più bassa */
	border-radius: 50%;
	background: #fff; /* RC2 (2026-06-18): cerchio foto sotto-categoria bianco + bordo oro */
	border: 1px solid var(--c-gold-600, #D89A2C);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
/* Nelle pillole il cerchio resta: fa parte del disegno (disco crema, bordo
   dorato). Cambia solo come ci sta dentro l'icona: `contain` con un filo di
   spazio, cosi' il disegno si vede intero invece di essere ritagliato. */
.subcat-pill-img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; box-sizing: border-box; }
.subcat-pill-img.is-photo { object-fit: cover; padding: 0; box-sizing: border-box; } /* RC2 (2026-06-18): foto copre il cerchio */
.subcat-pill-icon { font-size: 1.05rem; color: var(--primary-color); }
.subcat-pill-name { font-family: var(--font-base); font-size: var(--fs-body-sm, 14px); font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; color: var(--primary-color); } /* RC2 (2026-06-18): peso 400 + testo verde scuro */
.subcat-pill.is-active { background: var(--primary-color); border-color: var(--primary-color); }
.subcat-pill.is-active .subcat-pill-name { color: var(--c-white, #fff); }
.subcat-pill.is-active .subcat-pill-disc { background: var(--secondary-color); border-color: var(--secondary-color); }
.subcat-pill.is-active .subcat-pill-icon { color: var(--primary-color); }
.subcat-pill:hover .subcat-pill-name, .subcat-pill:focus .subcat-pill-name { color: var(--primary-color); }
.subcat-pill.is-active:hover .subcat-pill-name { color: var(--c-white, #fff); }
.subcat-inline-section .subcat-carousel-nav { border-color: var(--c-border, rgba(229, 224, 214, 0.7)); color: var(--primary-color); }
.subcat-inline-section .subcat-carousel-nav:hover { color: var(--secondary-color-active, var(--secondary-color)); }
@media (max-width: 575.98px) {
	.subcat-pill { padding: 0.28rem 0.8rem 0.28rem 0.34rem; gap: 0.45rem; }
	.subcat-pill-disc { width: 28px; height: 28px; }
	.subcat-pill-icon { font-size: 0.95rem; }
	.subcat-pill-name { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .subcat-pill:hover { transform: none; } }

/* =========================================================================
   RC2 — Pagina "La Storia" (Chi Siamo): hero d'epoca + timeline verde.
   Namespace .rc-storia-* / .rc-tl-* per non toccare la .timeline legacy.
   ========================================================================= */
/* 30/07/2026 (collaudo 164) — l'altezza si lega alla LARGHEZZA, non all'altezza
   dello schermo. Con `min-height: 46vh` su un portatile 1440x900 la fascia
   veniva 1440x414, cioe' 3,5:1, mentre la foto e' 1,5:1: con `cover` restava
   una striscia orizzontale, e Tommaso l'ha descritta come "schiacciata". Sul
   telefono invece 46vh davano una fascia quasi quadrata, molto piu' vicina
   alle proporzioni della foto, ed era "molto bella".
   Con 38vw il rapporto resta intorno a 2,6:1 sia sul portatile sia su iPad,
   e il tetto di 620px evita la fascia enorme sugli schermi molto larghi.
   Vale sia per Servizi sia per La Storia: stessa classe, stesso difetto. */
.rc-storia-hero {
	position: relative; min-height: clamp(380px, 38vw, 620px);
	display: flex; align-items: center; justify-content: center;
	background-size: cover; background-position: center;
	overflow: hidden; padding: 3rem 1rem;
	/* RC2 (13/07): rimossa la riga crema (border-bottom 6px) — non presente nel Figma né nel PDF di design */
}
/* RC2 (13/07): overlay rimosso — le hero foto (servizi, chi-siamo) mostrano l'immagine pulita, senza gradiente davanti (non previsto in Figma/PDF). Div .rc-storia-hero-overlay rimosso anche dal markup. */
.rc-storia-hero-inner { position: relative; z-index: 2; text-align: center; }
.rc-storia-hero .rc-storia-hero-title {
	font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .02em;
	color: var(--primary-color); font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: .95; margin: 0;
	text-shadow: none; /* RC2 (2026-07): titolo hero "LA STORIA" senza ombra/bordo crema */
}
.rc-storia-breadcrumb { margin-top: .75rem; }
.rc-storia-breadcrumb .breadcrumb { justify-content: center; margin: 0; }
.rc-storia-breadcrumb .breadcrumb-item, .rc-storia-breadcrumb .breadcrumb-item a { color: var(--c-forest-900); font-weight: 600; font-size: .85rem; }
.rc-storia-breadcrumb .breadcrumb-item.active { color: var(--c-ink-soft); }
.rc-storia-timeline { background: var(--grad-forest-light); color: var(--c-cream-100); padding: var(--sp-section) 0; } /* RC2 (2026-06-18): stesso gradiente dell'header (Linear Forest Light), non il forest scuro quasi-mono */
.rc-tl { list-style: none; margin: 0 auto; padding: 0; position: relative; z-index: 1; max-width: 1040px; }
.rc-tl::before {
	content: ""; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
	width: 0; border-left: 3px dashed var(--c-gold-500); opacity: .85; z-index: 0; display: none;
}
.rc-tl-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.5rem; min-height: 240px; margin-bottom: var(--gap-section); }
.rc-tl-item:last-child { margin-bottom: 0; }
.rc-tl-left  { flex-direction: row; }
.rc-tl-right { flex-direction: row-reverse; }
.rc-tl-year {
	flex: 1 1 0; font-family: var(--font-condensed); text-transform: uppercase; color: var(--c-gold-500);
	font-size: clamp(3.5rem, 10vw, 8rem); line-height: 1; letter-spacing: .01em; text-align: center;
	text-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.rc-tl-card { flex: 1 1 0; max-width: 420px; text-align: left; }
.rc-tl-media { background: var(--c-cream-100); border-radius: var(--r-card); padding: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.35); margin-bottom: 1.1rem; }
/* RC2 (2026-06-18): foto storyline QUADRATE 1:1 (Figma), non più landscape. */
/* Foto per intero, nelle sue proporzioni (non più ritagliate a quadrato). */
.rc-tl-media img { width: 100%; height: auto; border-radius: 4px; display: block; }
.rc-tl-placeholder { width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; background: var(--c-cream-200); border: 2px dashed var(--c-gold-600); display: flex; align-items: center; justify-content: center; }
.rc-tl-placeholder i { font-size: 3.4rem; color: var(--c-gold-600); }
.rc-tl-card .rc-tl-title { font-family: var(--font-base); font-size: var(--fs-h3); font-weight: 600; color: var(--c-gold-200, #F4D799); margin: 0 0 .5rem; }
.rc-tl-text { font-family: var(--font-base); font-weight: 400; font-size: var(--fs-body); line-height: 1.55; color: #FFFFFF; margin: 0; } /* RC2 (2026-06-18): interlinea ridotta. 30/07/2026: peso 400, Outfit Regular */
.rc-tl-item::after {
	content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 14px; height: 14px; border-radius: 50%; background: var(--c-gold-500);
	box-shadow: 0 0 0 4px rgba(14,42,27,.9), 0 0 0 6px rgba(247,183,29,.35); z-index: 2; display: none;
}
@media (max-width: 767.98px) {
	.rc-storia-hero { min-height: 34vh; }
	.rc-tl { padding-left: 28px; }
	/* 30/07/2026: la serpentina sfiorava le prime lettere dei paragrafi. L'onda
	   arriva fino a 21px dentro una fascia larga 28, e il testo partiva a 28:
	   restavano 7px. Spostandola di 10px a sinistra (dentro il margine del
	   container, spazio che non serviva a nessuno) il respiro sale a ~17px
	   senza accorciare le righe di testo. */
	.rc-tl::before { display: block; left: -10px; width: 28px; border-left: none; transform: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='620'%3E%3Cpath%20d='M14%200%20Q0%20155%2014%20310%20T14%20620'%20fill='none'%20stroke='%23F7B71D'%20stroke-width='3'%20stroke-dasharray='7%209'/%3E%3C/svg%3E") repeat-y left center; } /* RC2 (2026-06-26): spine ondulata dolce ~5 onde su tutta la timeline (periodo 620px), non rail dritto */
	.rc-tl-spine { display: none; }
	/* 30/07/2026: gap da .9rem a 1.4rem — l'anno era appiccicato alla foto. */
	.rc-tl-item, .rc-tl-left, .rc-tl-right { flex-direction: column; align-items: flex-start; gap: 1.4rem; min-height: 0; margin-bottom: 2.75rem; }
	.rc-tl-year { flex: none; text-align: left; font-size: clamp(2.8rem, 14vw, 4.2rem); }
	.rc-tl-card { flex: none; max-width: 100%; width: 100%; }
	.rc-tl-media img, .rc-tl-placeholder { height: auto; }
	.rc-tl-item::after { display: none; } /* RC2 (2026-06-26): rimossi i bullet gialli sull'anno (non nel Figma, si sovrapponevano) */
}
@media (prefers-reduced-motion: reduce) { .rc-tl-card.lift:hover { transform: none; } }

/* =========================================================================
   RC2 — Pagina SERVIZI: hero crema + line-art, banda verde 6 ticket, "Bisogno di aiuto?"
   ========================================================================= */
.svc-hero { background: var(--c-cream-100); overflow: hidden; }
.svc-hero-inner { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 4rem 0; } /* RC2 (29/06): titolo hero Servizi centrato anche su desktop */
.svc-hero .svc-hero-title {
	font-family: var(--font-condensed); font-weight: 400; text-transform: uppercase; color: var(--primary-color);
	font-size: clamp(3rem, 9vw, 6.5rem); letter-spacing: 0.01em; line-height: 1; margin: 0; position: relative; z-index: 2; text-align: center;
}
.svc-hero-art { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 320px; width: auto; color: var(--c-gold-500); opacity: 0.9; z-index: 1; pointer-events: none; }
.svc-band { background: var(--grad-forest-light); padding: var(--sp-section) 0; }
.svc-band .container { display: flex; flex-direction: column; gap: 2.25rem; }
.svc-row {
	position: relative; min-height: 170px;
	--stub: 360px; --notch: 20px;
	background: var(--c-gold-500); /* layer cornice oro (sotto al contenuto) */
	border-radius: 18px;
	-webkit-mask:
		radial-gradient(circle var(--notch) at 0 0,         #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 0,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 0 100%,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 100%,   #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 0,    #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px));
	-webkit-mask-composite: source-in;
	mask:
		radial-gradient(circle var(--notch) at 0 0,         #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 0,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 0 100%,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 100%,   #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 0,    #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px));
	mask-composite: intersect;
}
.svc-row-inner {
	position: absolute; inset: 2px;
	display: grid; grid-template-columns: var(--stub) 1fr; align-items: stretch;
	border-radius: 16px; overflow: hidden;
	-webkit-mask:
		radial-gradient(circle var(--notch) at 0 0,         #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 0,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 0 100%,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 100%,   #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at var(--stub) 0,    #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px));
	-webkit-mask-composite: source-in;
	mask:
		radial-gradient(circle var(--notch) at 0 0,         #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 0,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 0 100%,      #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at 100% 100%,   #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at var(--stub) 0,    #0000 var(--notch), #000 calc(var(--notch) + 0.5px)),
		radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px));
	mask-composite: intersect;
}
.svc-row-label {
	display: flex; align-items: center; padding: 1.5rem 1.9rem; background: #1C3B2A;
	border: none; border-radius: 16px 0 0 16px;
}
.svc-row .svc-row-title { font-family: var(--font-condensed); font-weight: 400; text-transform: uppercase; color: #EAC074; font-size: 28px; line-height: 1.05; letter-spacing: 0.02em; margin: 0; }
.svc-row-medallion {
	position: absolute; left: calc(var(--stub) + 2px); top: 50%; transform: translate(-50%, -50%); z-index: 3;
	width: 84px; height: 84px; border-radius: 50%; background: var(--c-white); border: 1.5px solid var(--c-gold-500);
	display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -2px rgba(10, 23, 15, 0.25);
}
.svc-row-medallion i { font-size: 1.7rem; color: var(--c-gold-500); }
.svc-row-body { background: var(--c-white); border: none; border-left: 2px dashed rgba(247,183,29,.7); border-radius: 0 16px 16px 0; padding: 1.5rem 2rem 1.5rem 3.2rem; display: flex; align-items: center; }
.svc-checklist { list-style: none; margin: 0; padding: 0; width: 100%; }
.svc-checklist li { display: flex; align-items: flex-start; gap: 0.7rem; font-family: var(--font-base); font-weight: 400; font-size: var(--fs-body); color: #1F1C16; line-height: 1.4; padding: 0.28rem 0; } /* RC2 (2026-06-18): descrizioni uniformi agli altri testi. 30/07/2026: peso 400, Outfit Regular */
.svc-checklist li i { color: var(--c-gold-500); font-weight: 600; font-size: 1rem; margin-top: 0.18rem; flex: 0 0 auto; }
.svc-help { background: var(--c-white); padding: var(--sp-section) 0; }
.svc-help .svc-help-title { font-family: var(--font-condensed); font-weight: 400; text-transform: uppercase; color: var(--primary-color); font-size: clamp(2.2rem, 5vw, 3.25rem); letter-spacing: 0.02em; margin: 0 0 0.75rem; }
.svc-help-sub { font-family: var(--font-base); font-weight: 400; font-size: 1.25rem; color: var(--primary-color); max-width: none; margin: 0 auto 2rem; } /* RC2 (2026-06-18): verde, no max-width (resta su una riga). 30/07/2026: peso 400, Outfit Regular */
.svc-help-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.svc-help .svc-help-cta, .svc-help .btn-gold {
	background: var(--grad-forest-light); border: 1px solid rgba(0,0,0,0.55); color: var(--c-gold-500); font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 0.85rem 2.4rem;
}
.svc-help .svc-help-cta:hover, .svc-help .btn-gold:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10, 23, 15, 0.28); }
.svc-help-phone { font-family: var(--font-base); font-weight: 500; font-size: var(--fs-body-lg); color: var(--primary-color); text-decoration: none; display: inline-flex; align-items: center; border: 2px solid var(--primary-color); border-radius: 999px; padding: 0.7rem 1.8rem; } /* RC2 (29/06): bordo verde pill anche su desktop (era solo mobile) */
.svc-help-phone i { color: inherit; }
.svc-help-phone:hover { color: var(--secondary-color-hover); }

/* RC2 (2026-06-18): dimensione UNIFORME dei CTA principali (home: Scopri i servizi /
   Scopri le selezioni / Lasciaci una recensione; servizi: Contattaci). Variano solo per
   larghezza (testo) e colore; padding/font/ls/radius/altezza identici. Specificità alta
   e .store-body per battere gli override per-bottone, ordine-indipendente. */
.store-body .home-why .btn-gold,
.store-body .home-band-inspire .inspire-cta.btn-gold,
.store-body .review-cta-forest,
.store-body .svc-help .svc-help-cta,
.store-body .error-actions .btn {
	font-size: 1.25rem;
	font-weight: 400; /* 30/07/2026: Outfit Regular sui bottoni (era 500), indicazione del designer */
	letter-spacing: 0.08em;
	line-height: 1.5;
	padding: 0.85rem 2.4rem;
	border-radius: 999px;
}
/* I due CTA su oro non hanno bordo visibile: bordo trasparente 1px per pareggiare
   l'altezza ai due CTA forest (che hanno bordo 1px). Nessun cambio estetico. */
.store-body .home-why .btn-gold,
.store-body .home-band-inspire .inspire-cta.btn-gold {
	border: 1px solid transparent;
}
/* 30/07/2026 — telefoni: tutti i CTA principali a 16px, stessa misura per tutti.
   Prima l'hero della home scendeva a 14,7px per una regola di maggio mentre gli
   altri restavano a 20px: nessuno se n'era accorto perche' l'hero era una barra
   larga l'82% dello schermo. A 20px, poi, "Lascia una recensione" occupava 350px
   sui 351 disponibili di un telefono da 375, cioe' un pixel di margine.
   Il gemello di questa regola, per l'hero, sta in home-unified.css. */
@media (max-width: 575.98px) {
	.store-body .home-why .btn-gold,
	.store-body .home-band-inspire .inspire-cta.btn-gold,
	.store-body .review-cta-forest,
	.store-body .svc-help .svc-help-cta,
	.store-body .error-actions .btn {
		font-size: 1rem;
		padding: 0.7rem 1.6rem;
	}
}
@media (max-width: 767.98px) {
	.svc-hero-inner { min-height: 240px; padding: 2.5rem 0; flex-direction: column; align-items: center; justify-content: center; }
	.svc-hero-art { height: 150px; right: -10px; top: 12px; transform: none; }
	.svc-hero-title { font-size: clamp(2.4rem, 13vw, 3.2rem); margin-top: 4.5rem; text-align: center; width: 100%; } /* RC2 (2026-06-26): titolo hero centrato come gli altri */
	.svc-band .container { gap: 2.75rem; }
	/* RC2 (2026-06-26): biglietto su mobile = STESSE tacche a semicerchio del desktop, ma VERTICALI (titolo sopra | body sotto). Cucitura orizzontale a y=--seam; notch ai 4 angoli + 2 ai lati. */
	.svc-row {
		--seam: 132px;
		display: block; min-height: 0;
		-webkit-mask:
			radial-gradient(circle var(--notch) at 0 0,    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 calc(var(--seam) + 2px),    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% calc(var(--seam) + 2px), #0000 var(--notch), #000 calc(var(--notch) + .5px));
		-webkit-mask-composite: source-in;
		mask:
			radial-gradient(circle var(--notch) at 0 0,    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 calc(var(--seam) + 2px),    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% calc(var(--seam) + 2px), #0000 var(--notch), #000 calc(var(--notch) + .5px));
		mask-composite: intersect;
	}
	.svc-row-inner {
		position: static; inset: auto; display: block; margin: 2px; border-radius: 16px;
		-webkit-mask:
			radial-gradient(circle var(--notch) at 0 0,    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 var(--seam),    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% var(--seam), #0000 var(--notch), #000 calc(var(--notch) + .5px));
		-webkit-mask-composite: source-in;
		mask:
			radial-gradient(circle var(--notch) at 0 0,    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 0 var(--seam),    #0000 var(--notch), #000 calc(var(--notch) + .5px)),
			radial-gradient(circle var(--notch) at 100% var(--seam), #0000 var(--notch), #000 calc(var(--notch) + .5px));
		mask-composite: intersect;
	}
	.svc-row-label { height: var(--seam); box-sizing: border-box; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; padding: 1.5rem 1.25rem 0; } /* RC2 (2026-06-26): titolo in alto, staccato dal cerchio */
	.svc-row-title { font-size: var(--fs-h3); }
	.svc-row-medallion { left: 50%; top: calc(var(--seam) + 2px); bottom: auto; transform: translate(-50%, -50%); }
	.svc-row-body { border: none; border-top: 2px dashed rgba(247,183,29,.7); border-radius: 0 0 16px 16px; padding: 4.8rem 1.5rem 1.5rem; } /* RC2 (2026-06-26): spazio sotto al cerchio uniforme a quello sopra (~37px) */
	.svc-help-title { font-size: var(--fs-h2); }
	.svc-help-actions { flex-direction: column; gap: 1rem; }
	.svc-help-phone { border: 2px solid var(--primary-color); border-radius: 999px; padding: 0.7rem 1.8rem; } /* RC2 (2026-06-26): pill come gli altri bottoni (era squadrato --r-btn) */
}

/* =========================================================================
   RC2 — HOME "PERCHE' SCEGLIERCI" (4 colonne, blocco verde)
   ========================================================================= */
.home-why { background: var(--grad-forest-light); color: var(--c-cream-100); padding: var(--sp-section) 0; position: relative; overflow: hidden; }
.home-why::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 1px; background: linear-gradient(to right, transparent, var(--secondary-color), transparent); }
.home-why .container { position: relative; max-width: 1100px; }
.why-head { text-align: center; margin-bottom: var(--gap-section); }
.home-why .why-title { font-family: var(--font-base); font-weight: 700; font-size: 28px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold-200, #F4D799); margin: 0; line-height: 1.1; } /* 30/07/2026: grassetto, come gli altri titoli di sezione */
.why-rule { display: block; width: 64px; height: 3px; background: var(--c-gold-200, #F4D799); border-radius: 2px; margin: 0.95rem auto 0; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.why-col { text-align: center; }
.why-ico { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--c-gold-600, #D89A2C); font-size: 2.4rem; }
.home-why .why-col-title { font-family: var(--font-base); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-gold-200, #F4D799); margin: 0 0 0.6rem; }
.why-col-text { font-family: var(--font-base); font-weight: 400; font-size: var(--fs-body); line-height: 1.4; color: #FFFFFF; margin: 0; }
.why-cta { text-align: center; margin-top: var(--gap-section); }
/* 30/07/2026: niente larghezza imposta, il bottone e' largo quanto il suo testo. */
@media (max-width: 991.98px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; } }
/* 30/07/2026 — telefoni: a una colonna sola i paragrafi arrivavano quasi al
   bordo dello schermo (12px del container e basta). Un rientro laterale li fa
   respirare e accorcia la riga, che si legge meglio. */
@media (max-width: 575.98px) { .home-why { padding: clamp(3rem, 10vw, 4.5rem) 0; } .why-grid { grid-template-columns: 1fr; } .why-col-text { padding: 0 1.25rem; } }
body.js-on .why-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.165,0.84,0.44,1) var(--reveal-delay, 0ms), transform 0.7s cubic-bezier(0.165,0.84,0.44,1) var(--reveal-delay, 0ms); }
body.js-on .home-why.is-visible .why-reveal { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { body.js-on .why-reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   RC2 — HOME "IN EVIDENZA" coverflow a carillon (componente 3)
   Markup espone gli hook; coverflow.js aggiunge .cf-on per il 3D.
   Senza JS (.cf:not(.cf-on)) si ricade nella fila scroll orizzontale.
   ========================================================================= */
.cf { position: relative; }
.cf:not(.cf-on) .cf-arrow, .cf:not(.cf-on) .cf-dots { display: none !important; }
/* RC2 (2026-06-18): clip-path al posto di overflow:hidden — taglia le card laterali
   ai lati (sx/dx a 0) ma lascia ~80px sopra/sotto, così l'ombra delle card non viene
   troncata di netto in basso.
   30/07/2026 — il commento diceva "niente scrollbar (overflow resta visible)": FALSO.
   `clip-path` nasconde le card laterali ma NON toglie lo spazio che occupano, quindi
   la pagina restava scorrevole a destra e si vedeva una fascia bianca vuota. Provato
   nascondendo le sezioni una per una: togliendo "In evidenza" la larghezza scorrevole
   tornava esatta. Si aggiunge `overflow-x: clip`, che taglia davvero senza creare una
   zona di scorrimento (a differenza di `hidden`); l'asse verticale resta `visible`,
   quindi le ombre sopra e sotto non si toccano e l'aspetto non cambia. */
.cf.cf-on .cf-stage { position: relative; height: 390px; perspective: 1500px; clip-path: inset(-80px 0 -80px 0); overflow-x: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.cf.cf-on.cf-dragging .cf-stage { cursor: grabbing; }
.cf.cf-on .cf-track { position: absolute; inset: 0; display: block; overflow: visible; transform-style: preserve-3d; }
.cf.cf-on .cf-item {
	position: absolute; left: 50%; top: 50%;
	width: 240px; min-width: 240px; max-width: 240px; margin: 0;
	background: var(--c-white); border-radius: var(--r-card); box-shadow: 0 16px 34px rgba(27, 70, 48, 0.12);
	transform: translate(-50%, -50%) translateX(calc(var(--pos, 0) * 180px)) translateZ(calc(var(--abs, 0) * -140px)) rotateY(calc(var(--pos, 0) * -22deg)) scale(calc(1 - var(--abs, 0) * 0.06));
}
/* RC2 (2026-06-18): card tutte opache; effetto "nebbia" verso il fondo via velo
   bianco semitrasparente crescente con la profondità (--abs, impostata dal JS). */
.cf.cf-on .cf-item::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3; /* sopra la <a> di coverage immagine (z-index 2), così il velo copre anche la foto */
	border-radius: var(--r-card);
	background: #fff;
	opacity: calc(var(--abs, 0) * 0.3);
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.cf.cf-on .cf-item.is-active { box-shadow: 0 24px 50px rgba(27, 70, 48, 0.20), 0 6px 14px rgba(27, 70, 48, 0.10); }
.cf.cf-on .cf-item.is-active .product-price { font-size: 1.35rem; }
.cf .cf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--c-white); color: var(--primary-color); box-shadow: 0 6px 18px rgba(27, 70, 48, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.cf .cf-arrow-prev { left: 8px; }
.cf .cf-arrow-next { right: 8px; }
.cf .cf-arrow:hover { background: var(--primary-color); color: var(--c-gold-200); box-shadow: 0 8px 22px rgba(27, 70, 48, 0.28); }
/* RC2 (2026-06-18): dots rimossi su richiesta (non presenti nel Figma). */
.cf-dots { display: none; }
.cf-dot { width: 8px; height: 8px; border: 0; border-radius: 999px; background: rgba(27, 70, 48, 0.25); cursor: pointer; transition: all 0.25s ease; }
.cf-dot.is-active { background: var(--c-gold-600); width: 22px; }
@media (max-width: 767.98px) { .cf.cf-on .cf-stage { height: 360px; } .cf.cf-on .cf-item { width: 200px; min-width: 200px; max-width: 200px; } .cf .cf-arrow { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .cf.cf-on .cf-item { transition: none; } }

/* ============================================================
   FLIP-CLOCK "RITORNO AL 1937" (REQ.H3) — overlay Chi Siamo
   Cifre split-flap: card verde scuro (forest) + cifre oro. z-index 100.
   ============================================================ */
.flip-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(3px) saturate(0.85); backdrop-filter: blur(3px) saturate(0.85); display: flex; align-items: center; justify-content: center; z-index: 100; animation: flip-overlay-in 0.18s ease both; }
@keyframes flip-overlay-in { from { opacity: 0; } to { opacity: 1; } }
body.flip-overlay-open { overflow: hidden; }
.flip-stage { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.flip-clock { text-align: center; perspective: 700px; font-family: Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.flip-clock, .flip-clock *, .flip-clock *::before, .flip-clock *::after { box-sizing: border-box; }
.flip-clock .flip-clock__piece { display: inline-block; margin: 0 14px; }
.flip-clock .card { display: block; position: relative; padding-bottom: 0.72em; font-size: 130px; line-height: 0.95; font-family: Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-weight: 400; letter-spacing: 0.02em; }
.flip-clock .card__top, .flip-clock .card__bottom, .flip-clock .card__back::before, .flip-clock .card__back::after { display: block; height: 0.72em; color: var(--c-gold-200); background: var(--c-forest-700); padding: 0.16em 0.18em 0; border-radius: 0.08em 0.08em 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; width: 1.55em; transform: translateZ(0); text-align: center; font-family: Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-weight: 400; }
.flip-clock .card__bottom { color: var(--c-gold-200); position: absolute; top: 50%; left: 0; border-top: solid 1px var(--c-forest-900); background: #0F2E1D; border-radius: 0 0 0.08em 0.08em; pointer-events: none; overflow: hidden; }
.flip-clock .card__bottom::after { display: block; margin-top: -0.72em; }
.flip-clock .card__back::before, .flip-clock .card__bottom::after { content: attr(data-value); }
.flip-clock .card__back { position: absolute; top: 0; height: 100%; left: 0; pointer-events: none; }
.flip-clock .card__back::before { position: relative; z-index: -1; overflow: hidden; }
.flip-clock .flip .card__back::before { animation-name: flip-top; animation-duration: var(--flip-top, 100ms); animation-timing-function: cubic-bezier(0.37, 0.01, 0.94, 0.35); animation-fill-mode: both; transform-origin: center bottom; }
.flip-clock .flip .card__back .card__bottom { transform-origin: center top; animation-fill-mode: both; animation-name: flip-bottom; animation-duration: var(--flip-bot, 200ms); animation-timing-function: cubic-bezier(0.15, 0.45, 0.28, 1); }
@keyframes flip-top { 0% { transform: rotateX(0deg); z-index: 2; } 0%, 99% { opacity: 0.99; } 100% { transform: rotateX(-90deg); opacity: 0; } }
@keyframes flip-bottom { 0%, 50% { z-index: -1; transform: rotateX(90deg); opacity: 0; } 51% { opacity: 0.99; } 100% { opacity: 0.99; transform: rotateX(0deg); z-index: 5; } }
@media (max-width: 575.98px) { .flip-clock .card { font-size: 84px; } .flip-clock .flip-clock__piece { margin: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .flip-overlay { animation: none; } .flip-clock .flip .card__back::before, .flip-clock .flip .card__back .card__bottom { animation: none; } }

/* =========================================================================
   RC2 — SCHEDA PRODOTTO (SP1 gallery centrata, prezzo/titolo, CTA incisione,
   badge Punti Gibe, pill azioni, caratteristiche verdi 2 col, titolo related)
   ========================================================================= */
.product-detail { align-items: center; }
.product-info .product-brand-link.rc-eyebrow { margin-bottom: 0.25rem; color: var(--secondary-color); } /* RC2 (2026-07): brand GIALLO */
.product-info .product-title { font-family: var(--font-base); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; color: var(--primary-color); margin: 0.35rem 0 0.5rem; } /* RC2 (2026-07): titolo VERDE (era oro) */
.product-info .product-price-main { font-family: var(--font-base); font-weight: 700; font-size: var(--fs-h1); color: var(--c-forest-700); line-height: 1; } /* RC2 (2026-06-18): prezzo League Spartan bold, verde (NON Anton/impact) */
.product-info .product-price-vat { font-family: var(--font-base); font-size: var(--fs-body-sm); color: var(--c-neutral-500); margin-left: 0.5rem; }
/* CTA "Incisione su misura": barra verde full-width, testo oro */
.product-engraving-card { position: relative; display: flex; align-items: center; gap: 0.75rem; width: 100%; background: var(--c-forest-700); border: 1px solid var(--c-forest-900); border-radius: 999px; padding: 0.85rem 1.1rem; margin: 1rem 0 1.25rem; color: var(--c-gold-500); } /* RC2 (2026-06-26): pill arrotondata come gli altri bottoni (era --r-btn squadrato) */
.product-engraving-card-icon, .product-engraving-card-arrow { color: var(--c-gold-500); flex: 0 0 auto; }
.product-engraving-card-arrow { margin-left: auto; }
.product-engraving-card-eyebrow, .product-engraving-card-desc { display: none; }
.product-engraving-card .product-engraving-card-title { font-family: var(--font-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-body); color: var(--c-gold-500); margin: 0; }
.product-engraving-card-cta { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; background: transparent; }
/* Riga acquisto: stepper quantita + add-to-cart + badge */
.product-buy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.product-qty-stepper { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; background: var(--c-white); } /* RC2 (2026-06-18): stepper a pill */
.product-qty-stepper .qty-btn { width: 40px; height: 44px; border: none; background: transparent; font-size: 1.1rem; line-height: 1; color: var(--c-forest-700); cursor: pointer; }
.product-qty-stepper .qty-btn:hover { background: var(--c-cream-100); }
.product-qty-stepper .qty-input { width: 44px; min-width: 44px; flex: 0 0 44px; height: 44px; border: none; text-align: center; font-family: var(--font-base); font-weight: 600; font-size: var(--fs-body); color: var(--c-ink); background: transparent; padding: 0; }
.product-qty-stepper .qty-input:focus { outline: none; }
.product-info .btn-add-cart-lg { border-radius: 999px; padding: 0.7rem 1.8rem; font-size: var(--fs-body); min-height: 44px; } /* RC2 (2026-06-18): pill arrotondata come gli altri bottoni */
/* Badge Punti Gibe accanto al carrello */
.product-points-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--grad-forest-light); color: var(--c-gold-500); font-family: var(--font-base); font-weight: 500; font-size: var(--fs-body-sm); letter-spacing: 0.02em; padding: 0 1.5rem; min-height: 44px; border-radius: 999px; white-space: nowrap; } /* RC2 (2026-06-18): pill standard (999px, peso 500) come gli altri bottoni */
.product-points-badge i { font-size: 0.9em; }
/* Pill outline azioni (Lista desideri / Confronta / Condividi) */
.product-wishlist-btn, .btn-compare-product, .product-share-btn { border: 1px solid var(--secondary-color); color: var(--c-forest-700); background: transparent; border-radius: 999px; font-family: var(--font-base); font-weight: 500; font-size: var(--fs-body-sm); padding: 0.5rem 1.1rem; } /* RC2 (2026-06-18): bordo oro + peso 500 */
.product-wishlist-btn:hover, .btn-compare-product:hover, .product-share-btn:hover { background: var(--c-forest-700); border-color: var(--c-forest-700); color: var(--c-white); }
.product-wishlist-btn.in-wishlist, .btn-compare-product.active { color: var(--c-forest-700); border-color: var(--c-forest-700); background: var(--c-cream-100); }
/* Caratteristiche full-width verde 2 colonne (SP2) — markup verra' aggiunto col giro Playwright */
.product-specs { background: var(--grad-forest-light); padding: var(--sp-section) 0; } /* RC2 (2026-06-18): gradiente come le altre bande verdi + niente margin-top */
.product-specs .product-specs-title { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--fs-display-lg); line-height: 1; color: var(--c-gold-500); text-align: center; margin: 0 0 0.5rem; }
.product-specs-title::after { content: ""; display: block; width: 56px; height: 3px; background: var(--c-gold-500); margin: 1rem auto 0; border-radius: 2px; }
.product-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; max-width: 980px; margin: 2.5rem auto 0; }
.product-specs-table { width: 100%; border-collapse: collapse; }
.product-specs-table tr { border-bottom: 1px solid rgba(247, 183, 29, 0.6); } /* RC2 (2026-06-18): linee orizzontali dorate più visibili */
.product-specs-table th, .product-specs-table td { padding: 0.9rem 0; vertical-align: middle; font-family: var(--font-base); font-size: var(--fs-body); }
.product-specs-table th { text-align: left; font-weight: 600; color: var(--c-gold-200); } /* RC2 (2026-06-18): nomi caratteristiche oro più chiaro */
.product-specs-table td { text-align: right; color: var(--c-cream-100); font-weight: 400; }
.product-specs-table .spec-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(255,255,255,0.35); }
.related-products h3 { font-family: var(--font-condensed); font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--fs-h1); text-align: center; color: var(--c-forest-700); }
/* RC2 (2026-06-18): dash sotto il titolo, come gli altri titoli di sezione */
.related-products h3::after { content: ''; display: block; width: 64px; height: 3px; background: var(--c-forest-700); margin: 1.1rem auto 0; border-radius: 2px; }
@media (max-width: 991.98px) { .product-specs-grid { gap: 0 2.5rem; } }
@media (max-width: 767.98px) { .product-detail { align-items: stretch; } .product-specs { padding: 3rem 0; } /* RC2 (2026-06-26): rimosso margin-top anche su mobile */ .product-specs .product-specs-title { font-size: var(--fs-h1); } .product-specs-grid { grid-template-columns: 1fr; gap: 0; } .related-products h3 { font-size: var(--fs-h2); } }
@media (max-width: 575px) { .product-buy-row { gap: 0.6rem; } .product-qty-stepper { order: 1; } .product-points-badge { order: 2; flex: 1 1 auto; width: auto; justify-content: center; } /* RC2 (2026-06-26): Punti Gibe accanto allo stepper, riempie lo spazio rimanente */ .product-info .btn-add-cart-lg { order: 3; flex: 1 1 100%; } /* Aggiungi al carrello su riga propria sotto */ .product-wishlist-btn, .btn-compare-product, .product-share-btn { width: 100%; justify-content: center; } }


/* RC2 review-fix (16/06): focus-visible accessibile, pillole, ecc. */
.lift:focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 2px; }
.subcat-pill.is-active:focus .subcat-pill-name { color: var(--c-white, #fff); }
.subcat-pill.lift:hover, .subcat-pill.lift:focus-visible { transform: translateY(-3px); }

/* =========================================================================
   RC2 — Medaglioni categoria "pieni": i medaglioni forniti (file rc2-*.png)
   SONO già il disco (cerchio crema + anello oro + icona). Vanno resi a tutto
   disco (cover), senza il backing crema/bordo del .cat-medallion-disc.
   Le icone categoria (categories.icon_path) sono state sovrascritte coi
   medaglioni forniti: si rendono a tutto disco; il fallback FA (nessuna img) tiene il disco crema.
   ========================================================================= */
.cat-medallion-img { width: 100%; height: 100%; object-fit: cover; }
/* 04/08/2026: le icone delle categorie sono disegni quadrati e il cerchio ne
   tagliava gli angoli. Dove c'e' un'immagine caricata il disco smette di essere
   un disco: niente sfondo, niente bordo, niente arrotondamento, e l'immagine si
   vede intera (contain) invece di essere ritagliata (cover). */
.cat-medallion-disc:has(.cat-medallion-img) {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}
.cat-medallion-disc:has(.cat-medallion-img) .cat-medallion-img { object-fit: contain; }

/* =========================================================================
   RC2 — Pagina Risultati ricerca (REQ.H2, PDF pag.5)
   Titolo display Anton + tab categorie a pillole + griglia 4 colonne.
   ========================================================================= */
.search-results-page { padding-bottom: var(--gap-section, 64px); }

/* --- Hero titolo ricerca --- */
.search-hero { text-align: center; margin: 1.5rem 0 2rem; }
/* RC2 (29/06): CTA "sfoglia il catalogo" in fondo ai risultati ricerca */
.search-browse-cta { text-align: center; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid #eee; }
.search-browse-cta p { margin: 0 0 0.9rem; color: var(--c-neutral-500, #7A7160); font-size: 0.95rem; }
.search-hero .search-hero-title {
  font-family: var(--font-condensed, "Anton", Impact, sans-serif);
  font-weight: 400;
  font-size: var(--fs-display-lg, 56px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-forest-700, #1B4630);
  margin: 0;
  word-break: break-word;
}
.search-hero-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 1rem auto 0.85rem;
  background: var(--c-gold-500, #F7B71D);
  border-radius: 2px;
}
.search-hero-sub {
  font-family: var(--font-base);
  font-size: var(--fs-body, 16px);
  color: var(--c-neutral-500, #7A7160);
  margin: 0;
}

/* --- Tab categorie a pillole --- */
.search-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.25rem 0;
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--c-border, rgba(229,224,214,.7));
  border-bottom: 1px solid var(--c-border, rgba(229,224,214,.7));
}
.search-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--c-border, rgba(229,224,214,.9));
  border-radius: 999px;
  background: var(--c-white, #fff);
  color: var(--c-ink, #15130F);
  font-family: var(--font-base);
  font-size: var(--fs-body-sm, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.search-cat-tab:hover {
  border-color: var(--primary-color, #1B4630);
  color: var(--primary-color, #1B4630);
}
.search-cat-tab.active {
  background: var(--primary-color, #1B4630);
  border-color: var(--primary-color, #1B4630);
  color: var(--c-cream-100, #F4ECDC);
}
.search-cat-tab-disc {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-cream-100, #F4ECDC);
  border: 1px solid var(--c-border, rgba(229,224,214,.7));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.search-cat-tab-disc img { width: 100%; height: 100%; object-fit: cover; }
.search-cat-tab.active .search-cat-tab-disc {
  background: var(--c-cream-100, #F4ECDC);
  border-color: transparent;
}

/* --- Sotto-header conteggio + ordina (pillola) --- */
.search-grid-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.25rem;
}
.search-grid-header .product-grid-count {
  font-family: var(--font-base);
  font-size: var(--fs-body-sm, 14px);
  color: var(--c-neutral-500, #7A7160);
}
.search-grid-header .product-grid-sort select {
  border-radius: 999px;
  border: 1px solid var(--c-border, rgba(229,224,214,.9));
  padding: 0.4rem 2rem 0.4rem 1rem;
  font-family: var(--font-base);
}

/* --- Griglia 4 colonne RC2 (override del default 3 col SOLO in questa pagina) --- */
.store-body .search-results-page .product-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.search-results-page .product-card .product-name {
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
}

/* --- Form ricerca vuota --- */
.search-empty-form { max-width: 520px; margin: 0 auto; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .store-body .search-results-page .product-grid { grid-template-columns: repeat(3, 1fr); }
  .search-hero .search-hero-title { font-size: 44px; }
}
@media (max-width: 767.98px) {
  .store-body .search-results-page .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .search-hero .search-hero-title { font-size: 34px; }
  .search-cat-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .search-cat-tabs::-webkit-scrollbar { display: none; }
  .search-cat-tab { flex: 0 0 auto; }
}
@media (max-width: 575.98px) {
  .store-body .search-results-page .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   POPUP PUNTI GIBE (RC2 REQ.B1/B2)
   Overlay scuro + card due-meta' (verde/bianco) o immagine/GIF admin.
   Mostrato via .is-open (JS, footer). Titoli scoped a 2 classi per battere
   l'override globale .store-body h2,h3 (EB Garamond).
   ========================================================================= */
.pg-popup-overlay {
  position: fixed; inset: 0; z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(14, 42, 27, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.pg-popup-overlay.is-open { opacity: 1; visibility: visible; }
body.pg-popup-lock { overflow: hidden; }

.pg-popup {
  position: relative;
  width: 100%; max-width: 720px;
  display: flex;
  background: var(--c-white);
  border-radius: var(--r-banner);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.pg-popup-overlay.is-open .pg-popup { transform: translateY(0) scale(1); }

.pg-popup-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  border: 0; background: transparent;
  color: var(--c-gold-500); font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 50%;
  transition: color .15s ease, transform .15s ease;
}
.pg-popup-close:hover { color: var(--c-gold-600); transform: scale(1.1); }

/* META' SINISTRA (verde) */
.pg-popup-left {
  flex: 0 0 42%;
  background: var(--grad-forest);
  color: var(--c-cream-100);
  padding: 40px 34px;
  display: flex; flex-direction: column;
}
.pg-popup-spark { color: var(--c-gold-500); font-size: 30px; margin-bottom: 18px; }
.pg-popup-rule { display: block; width: 46px; height: 3px; background: var(--c-gold-500); border-radius: 2px; margin-bottom: 18px; }
.pg-popup .pg-popup-statement {
  font-family: var(--font-condensed);
  text-transform: uppercase; letter-spacing: .5px;
  font-size: var(--fs-display-lg); line-height: .92;
  color: var(--c-gold-200); margin: 0 0 auto;
}
.pg-popup-brand {
  font-family: var(--font-base); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; font-size: var(--fs-body-sm); color: var(--c-gold-500);
  margin-top: 28px; display: inline-flex; align-items: center; gap: 8px;
}

/* META' DESTRA (bianco) */
.pg-popup-right { flex: 1 1 58%; padding: 40px 36px; display: flex; flex-direction: column; }
.pg-popup-eyebrow { margin-bottom: 2px; }
.pg-popup .pg-popup-title {
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .5px;
  font-size: var(--fs-h1); line-height: 1; color: var(--c-gold-500); margin: 0 0 22px;
}
.pg-popup-list { list-style: none; padding: 0; margin: 0 0 26px; }
.pg-popup-list li {
  position: relative; padding-left: 30px; margin-bottom: 14px;
  font-family: var(--font-base); font-size: var(--fs-body); line-height: 1.4; color: var(--c-ink);
}
.pg-popup-list li .fa-check { position: absolute; left: 0; top: 2px; color: var(--c-gold-500); font-size: 14px; }
.pg-popup-cta { align-self: stretch; text-align: center; }
.pg-popup-note { margin: 16px 0 0; font-family: var(--font-base); font-size: var(--fs-body-sm); color: var(--c-neutral-500); }

/* VARIANTE IMMAGINE/GIF (admin) */
.pg-popup-imglink { display: block; line-height: 0; }
.pg-popup-img { display: block; width: 100%; height: auto; }

/* Popup SOLO-immagine (collaudo 85): il contenitore si adatta all'immagine,
   niente più layout a 2 colonne (nessuna striscia bianca). */
.pg-popup--img {
  display: block;
  width: auto;
  max-width: 720px;
  background: transparent;
}
.pg-popup--img .pg-popup-img {
  width: auto;
  max-width: 100%;
  max-height: 82vh;
}

/* MOBILE: meta' impilate */
@media (max-width: 575.98px) {
  .pg-popup-overlay { padding: 18px; }
  .pg-popup { max-width: 327px; flex-direction: column; border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
  .pg-popup-left { flex: none; padding: 26px 24px 22px; }
  .pg-popup .pg-popup-statement { font-size: var(--fs-h1); }
  .pg-popup-right { padding: 24px 24px 26px; }
  .pg-popup .pg-popup-title { font-size: var(--fs-h2); margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-popup-overlay, .pg-popup { transition: none; }
  .pg-popup { transform: none; }
}

/* =========================================================================
   RC2 (2026-06-17) — Home: banda categorie VERDE + titolo oro (Figma Home 1440)
   La sezione "Cosa stai cercando?" e' una banda forest-gradient con card
   categoria bordate oro; titolo oro pallido a lettere spaziate + filetto oro.
   ========================================================================= */
.home-categories-medallions {
	background: var(--grad-forest-light);
	padding: 80px 0 100px;
}
.home-categories-medallions .container { max-width: 1320px; }
.home-categories-medallions .home-cat-head { margin-bottom: 48px; }
.store-body .home-categories-medallions .store-section-title,
.site-body .home-categories-medallions .store-section-title {
	font-family: var(--font-base);
	font-weight: 700; /* 30/07/2026: Outfit Bold sui titoli di sezione (era 300) */
	font-size: 28px;
	letter-spacing: 0.2em; /* 30/07/2026: era 0.18em, allineata agli altri titoli di sezione */
	text-transform: uppercase;
	color: var(--c-gold-200, #F4D799);
}
.store-body .home-categories-medallions .store-section-title::after,
.site-body .home-categories-medallions .store-section-title::after {
	/* RC2 (2026-06-18): trattino stesso colore del titolo (Figma), non oro acceso. */
	background: var(--c-gold-200, #F4D799);
	width: 64px;
	height: 3px;
}
@media (max-width: 767.98px) {
	.home-categories-medallions { padding: 48px 0 56px; }
	/* la misura del titolo su schermo stretto la decide il blocco unico piu' sotto */
}

/* =========================================================================
   RC2 (2026-06-17) — Titolo di sezione standard (Figma style_5SGQPJ):
   Outfit 28px BOLD, lettere spaziate, MAIUSCOLO, + filetto 64x3 sotto.
   Default verde su fondo chiaro (In Evidenza / Concessionario / Recensioni).
   30/07/2026: peso da 300 a 700 (scelta del cliente), su tutti i titoli di sezione.
   ========================================================================= */
.store-body .rc-sec-title,
.site-body .rc-sec-title {
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-forest-700, #1B4630);
	position: relative;
}
.store-body .rc-sec-title::after,
.site-body .rc-sec-title::after {
	content: '';
	display: block;
	width: 64px;
	height: 3px;
	background: var(--c-forest-700, #1B4630);
	margin: 0.95rem auto 0;
	border-radius: 2px;
}
/* =========================================================================
   30/07/2026 — TITOLI DI SEZIONE: UNA SOLA MISURA PER TUTTI
   I titoli di sezione sono di tre famiglie di selettori diversi ("Cosa stai
   cercando?" sui medaglioni, .rc-sec-title per In Evidenza / Concessionario /
   Le vostre opinioni / Volti dietro al banco / Il Negozio, e .why-title per
   "Perche' sceglierci"), scritte in punti diversi del file. Prima ognuna
   andava per conto suo: due si rimpicciolivano a 768px con spaziature
   diverse (0,12 e 0,14em) e "Perche' sceglierci" non si rimpiccioliva
   affatto, restando a 28px anche sui telefoni, dove andava a capo.
   Da qui in giu' la misura la decide questo blocco, per tutti e tre.
   28px sopra i 768, 22px sotto, 21px sotto i 576.
   ========================================================================= */
@media (max-width: 767.98px) {
	.store-body .rc-sec-title,
	.site-body .rc-sec-title,
	.store-body .home-categories-medallions .store-section-title,
	.site-body .home-categories-medallions .store-section-title,
	.store-body .home-why .why-title,
	.site-body .home-why .why-title { font-size: 22px; letter-spacing: 0.14em; }
}
@media (max-width: 575.98px) {
	.store-body .rc-sec-title,
	.site-body .rc-sec-title,
	.store-body .home-categories-medallions .store-section-title,
	.site-body .home-categories-medallions .store-section-title,
	.store-body .home-why .why-title,
	.site-body .home-why .why-title { font-size: 21px; letter-spacing: 0.12em; }
}

/* In Evidenza — card allineate al Figma (bordo oro pallido, area immagine crema) */
.home-evidenza { background: #fff; } /* RC2 (2026-06-18): sfondo bianco (Figma) */
.home-evidenza .product-card { border: 1px solid var(--c-gold-200, #F4D799); }
.home-evidenza .product-card .card-img-wrapper { background: #fff; }
.home-evidenza .product-card .product-brand { color: #7A7160; letter-spacing: 0.08em; }
.home-evidenza .product-card .product-price { color: var(--c-forest-700, #1B4630); }

/* Recensioni — CTA "Lasciaci una recensione": fondo verde + testo oro (Figma) */
.review-cta-forest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--grad-forest-light);
	color: var(--c-gold-500, #F7B71D);
	border: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: 999px;
	font-family: var(--font-base);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.85rem 2.2rem;
	transition: filter .2s ease, color .2s ease;
}
.review-cta-forest:hover,
.review-cta-forest:focus-visible { color: #fff; filter: brightness(1.12); }

/* =========================================================================
   RC2 (2026-06-17) — Chi Siamo: hero titolo grande + "Il Negozio" galleria
   placeholder + "Volti dietro al banco" team (card scure, avatar oro iniziali).
   ========================================================================= */
.rc-storia-hero .rc-storia-hero-title { font-size: clamp(3rem, 9vw, 6.5rem); }

.rc-negozio { background: #fff; padding: 60px 0 64px; }
.rc-negozio .rc-negozio-title { text-align: center; margin: 0 auto 2.5rem; }
.rc-gallery { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; margin: 0 auto; }
.rc-gallery-row { display: flex; gap: 20px; }
.rc-gallery-item {
	flex: 1;
	min-height: var(--rh, 260px);
	background: #E9E4DA;
	border: 1px solid #D9D4C9;
	border-radius: 32px;
	display: flex; align-items: center; justify-content: center;
}
.rc-gallery-ph { color: #C2B189; font-size: 2rem; opacity: .55; }
@media (max-width: 767.98px) {
	.rc-gallery-row { flex-wrap: wrap; }
	.rc-gallery-item { flex: 1 1 45% !important; min-height: 150px; border-radius: 20px; }
}

.rc-team { background: #fff; padding: 56px 0 76px; }
.rc-team .rc-team-title { text-align: center; margin: 0 auto 2.75rem; }
.rc-team-row { display: flex; gap: 20px; max-width: 1120px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.rc-team-card {
	flex: 1 1 0; min-width: 210px; max-width: 280px;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	padding: 38px 24px 30px;
	background: linear-gradient(180deg, #1C3B2A 0%, #14271A 100%);
	border: 1px solid rgba(247, 183, 29, 0.45);
	border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
.rc-team-avatar {
	width: 96px; height: 96px; border-radius: 50%;
	background: radial-gradient(circle at 65% 70%, #F4D799 0%, #D89A2C 100%);
	border: 2px solid rgba(244, 215, 153, 0.55);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--font-condensed); font-size: 1.9rem; letter-spacing: 0.03em;
	color: #1B4630;
}
.rc-team-name { font-family: var(--font-base); font-weight: 700; font-size: 1.25rem; color: #FDFAF2; letter-spacing: 0.01em; }

/* === STAFF (chi-siamo) — foto reali: griglia desktop + coverflow mobile (RC2 13/07) === */
.staff-grid { display: flex; gap: 1.5rem; max-width: 1120px; margin: 0 auto; justify-content: center; align-items: flex-start; }
.staff-card { position: relative; flex: 1 1 0; margin-bottom: 1.9rem; }
/* height:auto → foto INTERA col rapporto originale (nessun crop) */
.staff-photo { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 38px -14px rgba(27,70,48,0.45); }
/* nome flottante: pill che galleggia sovrapposta al bordo inferiore della foto */
.staff-name {
	position: absolute; left: 50%; bottom: -1.25rem; transform: translateX(-50%);
	display: inline-block; white-space: nowrap;
	padding: 0.44rem 1.2rem;
	background: var(--primary-color); color: var(--secondary-color);
	font-family: var(--font-base); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
	border-radius: 999px; box-shadow: 0 10px 24px -6px rgba(27,70,48,0.5);
	z-index: 2;
}

/* coverflow: presente solo su mobile */
.staff-coverflow { display: none; }
/* border-radius allineato a quello della foto (18px) — evita il bordo bianco negli angoli */
.cf.cf-on .staff-cf-item { background: transparent; box-shadow: none; border-radius: 18px; }
/* velo bianco di profondità più tenue + esteso in basso per coprire ANCHE la pill del nome (non a metà) */
.cf.cf-on .staff-cf-item::after { opacity: calc(var(--abs, 0) * 0.12); border-radius: 18px; inset: 0 0 -2rem 0; }
/* card centrale/attiva: nessun velo bianco davanti alla foto */
.cf.cf-on .staff-cf-item.is-active::after { opacity: 0; }
/* bordo dorato attorno alla foto */
.staff-cf-item .staff-photo { box-shadow: 0 16px 34px rgba(27,70,48,0.18); border: 2px solid var(--c-gold-500); }
/* nome coverflow: eredita la pill del desktop (absolute, sovrapposta al bordo inferiore della foto) → nessuno spazio bianco tra foto e pill */
.staff-cf-name { white-space: nowrap; }

/* === GALLERIA NEGOZIO (chi-siamo): mosaico bento asimmetrico + hover card prodotto + lightbox === */
.negozio-gallery {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: clamp(88px, 12vw, 150px);
	gap: 14px;
	max-width: 1120px;
	margin: 0 auto;
	grid-template-areas:
		"t0 t0 t0 t1 t1 t1"
		"t0 t0 t0 t1 t1 t1"
		"t2 t2 t3 t3 t3 t3"
		"t2 t2 t3 t3 t3 t3"
		"t4 t4 t5 t5 t6 t6"
		"t7 t7 t5 t5 t6 t6";
}
.negozio-tile-0 { grid-area: t0; }
.negozio-tile-1 { grid-area: t1; }
.negozio-tile-2 { grid-area: t2; }
.negozio-tile-3 { grid-area: t3; }
.negozio-tile-4 { grid-area: t4; }
.negozio-tile-5 { grid-area: t5; }
.negozio-tile-6 { grid-area: t6; }
.negozio-tile-7 { grid-area: t7; }

.negozio-tile {
	position: relative; padding: 0; border: none; margin: 0;
	border-radius: 16px; overflow: hidden; cursor: pointer;
	background: var(--c-forest-700, #1B4630);
	box-shadow: 0 12px 26px -14px rgba(27, 70, 48, 0.4);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.negozio-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.negozio-tile:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -18px rgba(27, 70, 48, 0.4); z-index: 2; }
.negozio-tile:hover img { transform: scale(1.06); }
.negozio-tile:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 2px; }

/* Mobile: mosaico semplificato a 2 colonne, con due tile larghe per rompere la griglia */
@media (max-width: 767.98px) {
	.negozio-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 40vw; grid-template-areas: none; gap: 10px; }
	.negozio-tile { grid-area: auto !important; }
	.negozio-tile-0, .negozio-tile-3 { grid-column: span 2; }
}

/* Lightbox negozio */
.neg-lightbox {
	position: fixed; inset: 0; z-index: 3000;
	background: rgba(12, 28, 18, 0.95);
	display: none; align-items: center; justify-content: center;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.neg-lightbox.is-open { display: flex; }
.neg-lb-figure { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; }
.neg-lb-img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.neg-lb-btn {
	position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 999px; border: none;
	background: rgba(255,255,255,0.12); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 1.25rem; cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}
.neg-lb-btn:hover { background: var(--secondary-color); color: var(--primary-color); }
.neg-lb-close { top: 20px; right: 20px; }
.neg-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.neg-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.neg-lb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--secondary-color); font-family: var(--font-base); font-weight: 700; letter-spacing: 0.08em; font-size: 0.95rem; }
@media (max-width: 767.98px) {
	.neg-lb-btn { width: 44px; height: 44px; font-size: 1.05rem; }
	.neg-lb-prev { left: 8px; } .neg-lb-next { right: 8px; } .neg-lb-close { top: 12px; right: 12px; }
}

@media (min-width: 768px) {
	.staff-coverflow { display: none !important; }
}
@media (max-width: 767.98px) {
	.staff-grid { display: none; }
	.staff-coverflow { display: block; }
	.cf.cf-on .staff-cf-item { width: 210px; min-width: 210px; max-width: 210px; }
}

/* =========================================================================
   RC2 fix (2026-06-17) — Coverflow "In evidenza": la card eredita
   .product-card{height:100%} (per le griglie) e si stirava all'altezza dello
   stage (460px) -> .card-body flex-grow + prezzo mt-auto creavano un grande
   vuoto fra nome e prezzo. Nel carosello la card deve essere alta quanto il
   contenuto, cosi' il prezzo sta subito sotto il nome.
   ========================================================================= */
.store-body .home-evidenza .cf-item { height: auto; }

/* RC2 (2026-06-17) — Timeline Chi Siamo: serpentina dorata ONDULATA (SVG),
   come da Figma/PDF (prima era una linea dritta). Desktop = curva SVG dietro
   le tappe; mobile = binario dritto a sinistra (.rc-tl::before). */
.rc-tl-wrap { position: relative; }
.rc-tl-spine { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.rc-tl-spine path { fill: none; stroke: var(--c-gold-500); stroke-width: 3; stroke-dasharray: 7 9; opacity: .85; vector-effect: non-scaling-stroke; }


/* --- Link "Buono Regalo" nei menu categorie (header dropdown + catnav mobile) ---
   Divisore dorato elegante che separa le 8 categorie dal link al Buono Regalo. */
.header-categories-divider,
.catnav-dropdown-divider {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--secondary-color) 22%, var(--secondary-color) 78%, transparent);
}
.header-categories-divider {
	margin: 8px 16px;
	opacity: 0.75;
}
.catnav-dropdown-divider {
	margin: 8px 12px;
	opacity: 0.85;
}
.header-categories-dropdown-gift {
	color: var(--secondary-color);
	font-weight: 600;
}
.header-categories-dropdown-gift:hover {
	background-color: #153820;
	color: var(--secondary-color);
}
.header-categories-dropdown-gift i {
	margin-right: 8px;
}
.catnav-dropdown-gift {
	color: var(--secondary-color);
	font-weight: 600;
}
.catnav-dropdown-gift:hover {
	color: var(--secondary-color);
}
.catnav-dropdown-gift i {
	color: var(--secondary-color);
}

/* =========================================================================
   PREZZI RISERVATI AGLI ISCRITTI (ospiti non loggati)
   Il prezzo pieno resta pubblico; lo sconto sul catalogo si "sblocca" con
   l'accesso (vincolo fornitori orologi). Tre elementi, mostrati solo a chi
   NON è loggato: barra sotto l'header, frase nella scheda prodotto, lucchetto
   accanto al prezzo nelle card.
   ========================================================================= */

/* Barra sotto l'header (idea 3) — linea dorata in cima per staccarla dall'header (stesso verde) */
.reserved-bar { background: var(--primary-color, #1e4d2b); color: #fff; border-top: 1px solid #d9b45a; }
.reserved-bar-inner {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	gap: 14px; flex-wrap: wrap; padding: 9px 44px; font-size: 0.9rem;
}
.reserved-bar-text { display: inline-flex; align-items: center; gap: 8px; }
.reserved-bar-text .fa-lock { color: #d9b45a; }
.reserved-bar-cta {
	background: #d9b45a; color: #1e4d2b; font-weight: 600;
	padding: 4px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.reserved-bar-cta:hover { background: #e6c877; color: #1e4d2b; }
.reserved-bar-close {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1;
	cursor: pointer; opacity: .7;
}
.reserved-bar-close:hover { opacity: 1; }
/* 30/07/2026 — telefoni: padding laterale al minimo indispensabile, cosi' la
   frase e il bottone stanno su una riga sola. A destra si tiene solo lo spazio
   della × di chiusura (che e' in posizione assoluta); a sinistra bastano 10px.
   Prima erano 40px per lato, ed erano loro a mandare il testo a capo.
   La frase, sotto i 576px, e' anche piu' corta: vedi store/layout/header.php. */
@media (max-width: 575px) {
	.reserved-bar-inner { font-size: 0.82rem; padding: 8px 26px 8px 10px; gap: 8px; }
	.reserved-bar-text { gap: 6px; }
	.reserved-bar-cta { padding: 3px 12px; }
	.reserved-bar-close { right: 7px; font-size: 1.25rem; }
}

/* Frase sotto il prezzo nella scheda prodotto (idea 1) */
.reserved-price-hint {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 15px; border: 1px solid #e5d9c0; background: #faf7f0;
	border-radius: 999px; color: #8a6a23; font-size: 0.92rem; font-weight: 500;
	text-decoration: none; transition: background .15s, border-color .15s;
}
.reserved-price-hint:hover { background: #f3ecdc; border-color: #d9c98a; color: #6f5417; }
.reserved-price-hint .fa-lock { color: #c09e56; }

/* Lucchetto accanto al prezzo nelle card, solo ospiti (idea 2 — anteprima) */
/* Tooltip flottante del lucchetto "prezzo riservato" (agganciato al body) */
.reserved-tip-float {
	position: absolute; z-index: 3000; transform: translateY(-100%);
	background: var(--primary-color, #1e4d2b); color: #fff;
	font-size: 0.72rem; line-height: 1.3; font-weight: 400;
	padding: 6px 10px; border-radius: 6px; white-space: nowrap; text-align: center;
	pointer-events: none; opacity: 0; transition: opacity .12s;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.reserved-tip-float.is-visible { opacity: 1; }

body.store-guest .product-card .product-price::after {
	content: ""; display: inline-block; width: .62em; height: .62em;
	margin-left: 5px; vertical-align: -0.02em; opacity: .9;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23c09e56'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM96 192V144C96 73.3 153.3 16 224 16s128 57.3 128 128v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H96z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Il link del nome prodotto riserva 2 righe (min-height) e la sua area copre la
   fascia del prezzo sottostante: il puntatore finiva sull'<a> del nome e il
   mouseenter sul prezzo non partiva mai (niente tooltip del lucchetto). Alzando
   lo stacking del prezzo, il lucchetto torna a essere il bersaglio del mouse. */
body.store-guest .product-card .product-price { position: relative; z-index: 2; }

/* =========================================================================
   SELECT2 — tema verde, stesso schema collaudato nel gestionale
   ========================================================================= */
/* Prima di questa regola l'elenco aperto di una tendina lo disegnava il
   sistema operativo, con l'aspetto tipico di quel dispositivo (un blocco
   grigio scuro su macOS, una rotellina su iOS): niente a che vedere con lo
   stile bianco del sito. Select2 lo ridisegna lui, uguale ovunque. */

/* ALTEZZA: deve essere la STESSA dei campi che le stanno accanto, altrimenti la
   tendina spicca in mezzo al form (visto nella modale Indirizzi: campi 38px,
   tendine 46px). Non un numero fisso, ma la formula di Bootstrap per
   .form-control -> 1.5em di riga + il padding verticale + i due bordi. Cosi se
   cambia il font o il padding, la tendina segue.

   Attenzione: il negozio ha DUE misure di campo. Il modulo del checkout
   (.checkout-form) ha padding 10px, quindi 46px; tutto il resto usa il padding
   di Bootstrap (6px), quindi 38px. Percio' qui c'e' la misura base e piu sotto
   la variante del checkout. */
.select2-container--bootstrap-5 .select2-selection {
	min-height: calc(1.5em + 0.75rem + 2px);
	display: flex;
	align-items: center;
	border-radius: 6px;
}

.select2-container--bootstrap-5 .select2-selection--single {
	height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	line-height: calc(1.5em + 0.75rem);
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
	height: calc(1.5em + 0.75rem);
}

/* Variante checkout: la' i campi sono piu' alti (padding 10px anziche' 6px),
   quindi le tendine devono crescere con loro. La classe .select2-checkout la
   mette il JS del checkout sul <select> quando inizializza Select2, perche' il
   contenitore di Select2 viene creato FUORI dal form (dropdownParent) e non
   eredita il contesto. */
.select2-checkout .select2-selection,
.select2-checkout.select2-container .select2-selection {
	min-height: calc(1.5em + 1.25rem + 2px);
	height: calc(1.5em + 1.25rem + 2px);
}
.select2-checkout .select2-selection--single .select2-selection__rendered {
	line-height: calc(1.5em + 1.25rem);
}
.select2-checkout .select2-selection--single .select2-selection__arrow {
	height: calc(1.5em + 1.25rem);
}

/* Compatta: per le tendine piccole (ordinamento del catalogo). Applicare la
   classe .select2-sm al <select> originale. */
.select2-sm .select2-selection,
.select2-sm.select2-container .select2-selection {
	min-height: 31px !important;
	height: 31px !important;
	font-size: .875rem;
}
.select2-sm .select2-selection--single .select2-selection__rendered {
	line-height: 29px !important;
	padding-left: 12px;
}
.select2-sm .select2-selection--single .select2-selection__arrow {
	height: 29px !important;
}

/* Focus/apertura con l'accento forest green del brand. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.2) !important;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
	background-color: rgba(var(--primary-color-rgb), 0.1) !important;
	color: var(--primary-color) !important;
}

.select2-container--bootstrap-5 .select2-results__options {
	max-height: 280px !important;
	overflow-y: auto !important;
}

/* Il campo di ricerca, dove c'e' (Provincia): stesso font del sito. */
.select2-container--bootstrap-5 .select2-search__field {
	font-family: var(--font-base);
}

/* «Paga in 3 rate» di PayPal: il contenuto lo disegna l'SDK, qui solo lo spazio.
   Vuoto finché PayPal non risponde, o se l'importo è fuori fascia. */
.pp-rate-message { display: block; margin-top: 10px; min-height: 0; }
.pp-rate-message:empty { margin-top: 0; }
/* Nella scheda il blocco prezzo è una riga flessibile: il messaggio va a capo, sotto il prezzo */
.product-info .product-price-left .pp-rate-message { flex-basis: 100%; margin-top: 2px; }