/*
 * Tema Agata Store per OpenCart 4.
 *
 * Caricato DOPO Bootstrap, quindi sovrascrive. Non ridefinisce la griglia:
 * quella di Bootstrap va bene e riscriverla sarebbe lavoro buttato.
 */

:root {
	--ag-bg: #F4F5F6;
	/* Il fondo delle pagine, uguale per tutte. E' stato crema (#FDEFDF)
	   dal 24 al 25/09/2026: con le scatole dietro le schede faceva troppo
	   colore, e sul bianco le scatole stanno bene lo stesso. --ag-bg resta
	   grigio per pastiglie e passaggi del mouse. */
	--ag-page: #FFFFFF;
	--ag-surface: #FFFFFF;
	--ag-ink: #0E1317;
	--ag-ink-soft: #5A646C;
	--ag-muted: #8B949B;
	--ag-line: #E2E5E8;
	--ag-dark: #0E1317;
	--ag-dark-line: #2A3238;
	--ag-dark-text: #AEB6BD;
	--ag-accent: #C97A14;
	--ag-accent-ink: #8A5209;
	--ag-stock: #1BA45C;
	--ag-badge-bg: #2A2118;
	--ag-badge-ink: #E8A951;
	--ag-badge-line: #4A3A24;

	--ag-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--ag-sans: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
	background: var(--ag-page);
	color: var(--ag-ink);
	font-family: var(--ag-sans);
	-webkit-font-smoothing: antialiased;
}

/* --- l'impalcatura della pagina ----------------------------------------- */
/*
 * Il foglio di stile del core tiene il piede in fondo con una tecnica di
 * vent'anni fa: #container posizionato in modo assoluto e alto almeno quanto
 * lo schermo, il piede assoluto attaccato al suo fondo, e **400 pixel di
 * vuoto** sotto #content perche' il contenuto non ci finisca sotto.
 *
 * Regge finche' tutto sta dentro #content. La colonna dei filtri non ci sta —
 * e' una colonna sua, accanto — e finiva sotto il piede: l'ultimo gruppo di
 * filtri si vedeva tagliato a meta'.
 *
 * Qui il piede sta in fondo perche' la pagina e' una colonna flessibile e il
 * contenuto si prende lo spazio che avanza. Niente posizionamento assoluto,
 * niente 400 pixel di vuoto da compensare — che e' anche il motivo per cui
 * ogni pagina finiva con mezzo schermo bianco.
 */
html { height: 100%; }
body { min-height: 100%; }

#container {
	position: static;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-bottom: 0;
}

#container main { flex: 1 0 auto; }

#content, #column-left, #column-right { padding-bottom: 0; }

a { color: var(--ag-ink); text-decoration: none; }
a:hover { color: var(--ag-accent); }
::selection { background: #F6DFB8; }

h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 700; }

/* Il titolo di pagina, lo stesso dell'ordine rapido. :where() lo tiene
   leggero: una classe sul titolo (la scheda prodotto, l'accesso, .h3 di
   Bootstrap) vince ancora. Si spezza ovunque perche' certi nomi di
   categoria sono una parola sola di 34 caratteri, e a 32px non ci stanno
   in un telefono. */
:where(#content) h1 {
	color: var(--ag-ink);
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

/* Lo sfondo con le scatole, su tutte le pagine. Fisso rispetto allo
   schermo e non alla pagina: cosi' le scatole restano in basso a sinistra
   mentre si scorre, e passano sotto le schede bianche invece di finire a
   meta' di un elenco lungo. Un ::before e non background-attachment: fixed,
   che Safari su iPhone e iPad ignora.
   Sotto i 768 pixel non c'e': sul telefono le schede coprono tutta la
   larghezza, e resterebbe solo qualche pixel di cartone ai bordi. */
@media (min-width: 768px) {
	body::before {
		content: "";
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: -1;
		/* Non a tutto schermo: a 1366 le scatole diventavano alte mezza
		   pagina e finivano sotto il titolo. Cosi' stanno nell'angolo in
		   basso, dietro le schede, e i bordi sfumano nel colore di fondo.
		   Il 45% e' stato scelto a occhio il 24/09/2026: al 62% a 1366
		   finivano per meta' dietro la tabella dei codici. */
		width: min(45vw, 850px);
		aspect-ratio: 1672 / 941;
		background: url("../image/agata/ordine-rapido-sfondo.jpg") left bottom / contain no-repeat;
		-webkit-mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to top, #000 70%, transparent);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(to top, #000 70%, transparent);
		mask-composite: intersect;
		pointer-events: none;
	}
}

/* --- barra di servizio ------------------------------------------------- */

.ag-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ag-stock);
	display: inline-block;
}

/* Il listino del cliente: in B2B e' l'informazione che si cerca per prima. */
.ag-tier {
	font-family: var(--ag-mono);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--ag-badge-bg);
	color: var(--ag-badge-ink);
	padding: 2px 7px;
	border-radius: 3px;
	border: 1px solid var(--ag-badge-line);
	white-space: nowrap;
}

/* --- testata ------------------------------------------------------------ */

.ag-header {
	background: var(--ag-surface);
	border-bottom: 1px solid var(--ag-line);
}

/* Una riga sola: logo, assistenza, icone. Il marchio e' impilato (simbolo
 * sopra, nome sotto) e sotto i 46 pixel il nome non si legge: 58 lo fa
 * leggere e lascia la riga bassa. */
.ag-header-riga {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 76px;
}

.ag-header #logo img { max-height: 58px; width: auto; display: block; }
.ag-header #logo, .ag-burger { flex-shrink: 0; }

.ag-assistenza {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 20px;
	border-left: 1px solid var(--ag-line);
	color: var(--ag-ink);
	line-height: 1.2;
}

.ag-assistenza i { font-size: 1.35rem; color: var(--ag-accent); }
.ag-assistenza small { display: block; font-size: 11px; color: var(--ag-ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.ag-assistenza span { font-family: var(--ag-mono); font-size: 14px; font-weight: 600; }
.ag-assistenza:hover span { color: var(--ag-accent); }

.ag-icone {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ag-icone .ag-tier { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }

/* Quarantadue pixel per icona: un bersaglio da dito anche sul telefono, e
 * lo sfondo al passaggio del mouse dice dove si sta per cliccare. */
.ag-icona {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ag-ink);
	font-size: 1.05rem;
	cursor: pointer;
}

.ag-icona:hover,
.ag-icona[aria-expanded="true"] { background: var(--ag-bg); color: var(--ag-accent); }
.ag-icona.dropdown-toggle::after { display: none; }
.ag-lang-sigla { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }

.ag-account-menu { border: 1px solid var(--ag-line); border-radius: 6px; padding: 6px 0; min-width: 210px; }
.ag-account-menu .dropdown-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 16px; }
.ag-account-menu .dropdown-item i { color: var(--ag-ink-soft); }
.ag-account-menu .dropdown-item:hover { background: var(--ag-bg); color: var(--ag-accent); }

/* La ricerca, sotto la riga: si apre dalla lente e prende tutta la larghezza. */
.ag-cerca { border-top: 1px solid var(--ag-line); background: var(--ag-bg); }
.ag-cerca .container { padding-top: 14px; padding-bottom: 14px; }
.ag-cerca .form-control { background: var(--ag-surface); }

.ag-nav {
	background: var(--ag-surface);
	border-bottom: 1px solid var(--ag-line);
}

/* --- prodotti: scheda o riga a seconda del contesto ---------------------
 *
 * Lo stesso template (product/thumb) serve sia l'elenco della categoria sia
 * i moduli della home, che mettono i prodotti in griglia. Invece di
 * duplicare il template, cambia il contesto: fuori da .ag-list e' una
 * scheda verticale, dentro e' una riga a colonne.
 */

.ag-row {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	padding: 16px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ag-row-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ag-row-main img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.ag-row-name { font-weight: 600; line-height: 1.3; }

.ag-code { font-family: var(--ag-mono); font-size: 12px; color: var(--ag-ink-soft); margin-top: 3px; }
.ag-specs { font-size: 12.5px; color: var(--ag-ink-soft); line-height: 1.4; }

.ag-stock { font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.ag-stock.is-out { color: var(--ag-muted); }
.ag-stock.is-out .ag-dot { background: var(--ag-muted); }

.ag-price { margin-top: auto; }
.ag-price-net { font-family: var(--ag-mono); font-size: 17px; font-weight: 600; white-space: nowrap; }
.ag-price-old { font-family: var(--ag-mono); font-size: 12.5px; color: var(--ag-muted); text-decoration: line-through; }
.ag-price-note { font-size: 11px; color: var(--ag-muted); margin-top: 2px; }


/* --- prodotti: riquadro o riga, stessa struttura -------------------------
 *
 * product/thumb.twig emette un markup solo. Elenco e griglia sono due
 * disposizioni CSS della stessa struttura: cosi' il pulsante che li scambia
 * non ricarica la pagina, e non c'e' un secondo template da tenere allineato.
 */

.ag-card {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	height: 100%;
}

.ag-card-media { position: relative; }
/* Mai piu' larga della scheda. La miniatura e' di 250 pixel
   (config_image_product) e la colonna non sempre li ha: a 1024 la ricerca
   ne da' 230, e la pagina scorreva di lato. La griglia delle categorie e
   l'elenco hanno regole piu' precise, che qui sotto vincono. */
.ag-card-media img { object-fit: contain; max-width: 100%; height: auto; }
.ag-card-name { font-weight: 600; line-height: 1.3; }
.ag-card-buy { margin-top: 10px; }

/* Il marchio, accanto al codice. Monospazio come i codici: su un catalogo
   tecnico marchio e sigla si leggono insieme, ed e' con quei due che un
   pezzo viene cercato e ordinato. */
.ag-brand {
	font-family: var(--ag-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Pastiglia piena invece che contornata: in un elenco di venti righe
	   venti cornicette sottili fanno rumore, un fondo pieno no. */
	color: var(--ag-ink-soft);
	background: var(--ag-bg);
	border: 0;
	border-radius: 4px;
	padding: 3px 8px;
	display: inline-block;
	text-decoration: none;
}

/* Nella scheda prodotto il marchio e' uno solo e regge il contrasto pieno:
   e' anche il primo elemento che si legge del riquadro d'acquisto. */
.ag-scheda-buy .ag-brand {
	background: var(--ag-ink);
	color: #FFF;
}

.ag-stock.is-low { color: var(--ag-accent, #C77700); }
.ag-stock.is-low .ag-dot { background: var(--ag-accent, #C77700); }

/* --- la griglia --------------------------------------------------------- */

.ag-items.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.ag-items.is-grid .ag-card-media {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	border-bottom: 1px solid var(--ag-line);
	padding-bottom: 14px;
	margin-bottom: 2px;
}

.ag-items.is-grid .ag-card-media a {
	align-self: center;
	display: block;
	height: 120px;
}

.ag-items.is-grid .ag-card-media img { width: auto; max-width: 100%; height: 100%; }

/* In griglia la descrizione non entra: il riquadro deve restare leggibile
   a colpo d'occhio, e chi vuole i dettagli apre la scheda. */
.ag-items.is-grid .ag-specs { display: none; }
.ag-items.is-grid .ag-price { margin-top: auto; }
.ag-items.is-grid .ag-btn { width: 100%; }

/* --- l'elenco ----------------------------------------------------------- */

.ag-items.is-list {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 6px;
}

/* La testata sta dentro il contenitore: cosi' compare in elenco e sparisce
   in griglia senza che serva lo script. */
.ag-items-head { display: none; }

.ag-items.is-list .ag-items-head,
.ag-items.is-list .ag-card {
	display: grid;
	/* L'ultima colonna e' larga 220 e non 170 perche' adesso deve reggere
	   quattro righe di prezzo piu' la coppia quantita'-pulsante. */
	grid-template-columns: 72px minmax(0, 1fr) 230px 140px 220px;
	gap: 16px;
}

.ag-items.is-list .ag-items-head {
	padding: 10px 18px;
	border-bottom: 1px solid var(--ag-line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-muted);
}

.ag-items.is-list .ag-card {
	align-items: center;
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--ag-line);
	border-radius: 0;
	background: transparent;
	height: auto;
}

.ag-items.is-list .ag-card:last-child { border-bottom: 0; }
.ag-items.is-list .ag-card:hover { background: #FAFBFB; }
.ag-items.is-list .ag-card-media img { width: 56px; height: 56px; }
.ag-items.is-list .ag-price { text-align: right; margin-top: 0; }
.ag-items.is-list .ag-card-buy { margin-top: 8px; }


/* --- marchio, codice e caratteristiche nella riga di prodotto ------------ */

.ag-card-ident {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

/* Il codice qui dentro non ha il margine che ha da solo: sta gia' su una
   riga sua, allineato al badge. */
.ag-card-ident .ag-code { margin-top: 0; }

/* Le caratteristiche come valori separati da un punto mediano. E' una lista
   vera, non un testo con dei separatori scritti a mano: chi legge con uno
   screen reader sente degli elementi, non una frase con dei puntini. */
.ag-specs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 7px;
}

.ag-specs-list li { display: inline; }

.ag-specs-list li + li::before {
	content: "·";
	margin-right: 7px;
	color: var(--ag-line);
}

/* Quanto si risparmia. Verde perche' e' l'unica cosa buona della colonna
   prezzo, e in un catalogo B2B e' la ragione per cui si e' entrati. */
.ag-price-save {
	font-size: 12px;
	font-weight: 600;
	color: #1B7F4B;
	white-space: nowrap;
	margin-top: 2px;
}

/* La quantita' accanto al pulsante. Stretta apposta: e' un numero di due
   cifre, non un campo di testo. */
.ag-qta {
	width: 58px;
	border: 1px solid var(--ag-line);
	border-radius: 4px;
	padding: 6px 8px;
	font-family: var(--ag-mono);
	font-size: 13px;
	text-align: center;
	background: #FFF;
	color: inherit;
}

.ag-qta:focus { outline: 2px solid var(--ag-ink); outline-offset: 1px; }

.ag-card-buy { display: flex; align-items: center; gap: 6px; container-type: inline-size; }

/* Quantita', «Aggiungi al carrello» e confronto chiedono circa 260 pixel, e
   la riga non sempre li ha: a 768 la home mette tre schede per riga, e in
   elenco la colonna d'acquisto e' di 220. Il confronto sporgeva dalla
   scheda, e a 768 dalla pagina, di 27 pixel. Quando manca lo spazio il
   carrello diventa un'icona; la scritta resta per i lettori di schermo.
   Si guarda la larghezza della riga e non della finestra, perche' e' la
   riga che cambia: la stessa finestra ha schede larghe in un posto e
   strette in un altro. */
.ag-se-stretto { display: none; }

@container (max-width: 269px) {
	.ag-card-buy .ag-se-stretto { display: inline; }
	.ag-card-buy .ag-se-largo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* In griglia il pulsante prende quello che resta; in elenco la coppia sta a
   destra, sotto il prezzo. */
.ag-items.is-grid .ag-card-buy .ag-btn { flex: 1; }
.ag-items.is-list .ag-card-buy { justify-content: flex-end; }

/* Il sottotitolo sotto il titolo di categoria. */
.ag-sottotitolo {
	color: var(--ag-ink-soft);
	font-size: 13.5px;
	margin: 0 0 14px;
}

/* --- i comandi sopra l'elenco ------------------------------------------- */

#input-sort, #input-limit { width: auto; max-width: 200px; }

/* --- il pulsante elenco/griglia ----------------------------------------- */

.ag-vista { display: inline-flex; flex: none; border: 1px solid var(--ag-line); border-radius: 6px; overflow: hidden; }

.ag-vista button {
	background: var(--ag-surface);
	border: 0;
	color: var(--ag-ink-soft);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	cursor: pointer;
}

.ag-vista button + button { border-left: 1px solid var(--ag-line); }
.ag-vista button[aria-pressed="true"] { background: var(--ag-ink); color: #FFFFFF; }

@media (max-width: 860px) {
	/* Sotto gli 860px l'elenco a colonne non ci sta: diventa griglia anche
	   quando e' stato scelto l'elenco. La scelta resta memorizzata, e torna
	   appena lo schermo e' abbastanza largo. */
	.ag-items-head { display: none; }

	.ag-items.is-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 16px;
		background: transparent;
		border: 0;
	}

	.ag-items.is-list .ag-card {
		display: flex;
		border: 1px solid var(--ag-line);
		border-radius: 6px;
		background: var(--ag-surface);
		padding: 16px;
	}

	.ag-items.is-list .ag-specs { display: none; }
	.ag-items.is-list .ag-price { text-align: left; }
}

/* --- elenco della categoria --------------------------------------------- */

.ag-list { background: var(--ag-surface); border: 1px solid var(--ag-line); border-radius: 6px; }

.ag-list-head,
.ag-list .ag-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px 140px 170px;
	gap: 16px;
}

.ag-list-head {
	padding: 10px 18px;
	border-bottom: 1px solid var(--ag-line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-muted);
}

.ag-list .ag-row {
	align-items: center;
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid var(--ag-line);
	border-radius: 0;
	background: transparent;
	height: auto;
}

.ag-list .ag-row:last-child { border-bottom: 0; }
.ag-list .ag-row:hover { background: #FAFBFB; }
.ag-list .ag-price { text-align: right; margin-top: 0; }

/* --- pulsanti ----------------------------------------------------------- */

.ag-btn {
	background: var(--ag-ink);
	border: 1px solid var(--ag-ink);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 4px;
	white-space: nowrap;
}

.ag-btn:hover { background: var(--ag-accent); border-color: var(--ag-accent); color: #FFFFFF; }

.ag-btn-ghost { background: transparent; color: var(--ag-ink); border-color: var(--ag-line); }
.ag-btn-ghost:hover { border-color: var(--ag-ink); background: transparent; color: var(--ag-ink); }

/* --- scheda prodotto ---------------------------------------------------- */

.ag-panel {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	padding: 22px;
}

.ag-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ag-muted);
}

.ag-datasheet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ag-accent-ink);
}

/* --- piede -------------------------------------------------------------- */

.ag-footer { background: var(--ag-dark); color: var(--ag-dark-text); margin-top: 48px; padding: 40px 0 24px; position: static; flex: none; }
.ag-footer a { color: var(--ag-dark-text); }
.ag-footer a:hover { color: #FFFFFF; }
.ag-footer h5 { color: #FFFFFF; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
.ag-footer .ag-legal { border-top: 1px solid var(--ag-dark-line); margin-top: 28px; padding-top: 18px; font-size: 12.5px; }

/* --- adattamento a schermi stretti -------------------------------------- */
/*
 * Il prototipo commutava il layout in JavaScript su una soglia di 1180px.
 * Qui e' CSS: stessa soglia, ma senza dipendere dallo script.
 */

@media (max-width: 1180px) {
	.ag-list-head { display: none; }

	.ag-list .ag-row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 10px;
	}

	.ag-list .ag-specs { grid-column: 1 / -1; }
	.ag-list .ag-price { text-align: left; }
}

/* --- ricerca ------------------------------------------------------------ */

.ag-search { display: flex; gap: 0; margin: 0; }

.ag-search .form-control {
	border: 1px solid var(--ag-line);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	padding: 11px 14px;
	font-size: 14px;
	box-shadow: none;
}

.ag-search .form-control:focus { border-color: var(--ag-ink); }
.ag-search .ag-btn { border-radius: 0 4px 4px 0; }

/* --- menu --------------------------------------------------------------- */
/* Il blu di Bootstrap non c'entra niente col resto: via. */

/* #menu del core vince per specificita' (e' un id): serve #menu.ag-menu.
 * Il bordo va azzerato tutto: il core lo dichiara con la forma breve
 * (border: 1px solid #1f90bb), quindi riscrivere il solo lato inferiore
 * lasciava in piedi i tre lati azzurri. La riga di separazione sta su
 * .ag-nav, non qui, altrimenti se ne vedrebbero due. */
/* Il core mette anche 20 pixel di margine sotto #menu, per staccare la SUA
 * barra blu dalla pagina: qui erano 20 pixel di bianco fra il menu e la
 * riga che lo chiude. */
#menu.ag-menu { background: transparent; padding: 0; border: 0; min-height: 0; margin: 0; }

#menu.ag-menu .nav-link {
	color: var(--ag-ink);
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 14px;
	border-bottom: 2px solid transparent;
}

#menu.ag-menu .nav-link:hover,
#menu.ag-menu .nav-item.show .nav-link {
	color: var(--ag-accent);
	border-bottom-color: var(--ag-accent);
}

#menu.ag-menu .dropdown-menu {
	border: 1px solid var(--ag-line);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 24px rgba(14, 19, 23, .08);
	padding: 8px 0;
	margin-top: 0;
}

#menu.ag-menu .dropdown-item { font-size: 13.5px; padding: 7px 18px; }
#menu.ag-menu .dropdown-item:hover { background: var(--ag-bg); color: var(--ag-accent); }

/* --- il menu a finestra stretta ----------------------------------------
 *
 * Sotto i 992 pixel la barra non c'e': c'e' un pulsante in testata, accanto
 * alle altre icone, che apre un pannello da sinistra. Prima c'era una fascia
 * bianca alta 53 pixel con dentro un quadrato da 48x32 e 452 pixel di vuoto
 * attorno — e il quadrato era pure invisibile, perche' il foglio di stile
 * del core scrive l'icona bianca per la SUA barra blu.
 */
.ag-burger {
	background: none;
	border: 1px solid var(--ag-line);
	border-radius: 8px;
	color: var(--ag-ink);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	padding: 0;
}

.ag-burger:hover,
.ag-burger[aria-expanded="true"] {
	border-color: var(--ag-accent);
	color: var(--ag-accent);
}

.ag-offcanvas { width: 310px; max-width: 86vw; }

.ag-offcanvas .offcanvas-header {
	border-bottom: 1px solid var(--ag-line);
	padding: 14px 18px;
}

.ag-offcanvas .offcanvas-title {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 12px;
	color: var(--ag-ink-soft);
}

/* La riga e' il bersaglio, non il testo: il nome porta alla categoria e
 * occupa tutto lo spazio che avanza, la freccia apre il ramo. Quarantotto
 * pixel di altezza perche' un dito non e' un puntatore. */
.ag-voci .ag-voce {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--ag-line);
}

.ag-voci .ag-voce > a {
	flex: 1;
	padding: 14px 18px;
	color: var(--ag-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.ag-voci .ag-voce > a:hover { color: var(--ag-accent); }

.ag-apri {
	background: none;
	border: 0;
	border-left: 1px solid var(--ag-line);
	color: var(--ag-ink-soft);
	width: 48px;
	flex: 0 0 48px;
}

.ag-apri i { transition: transform .15s ease; }
.ag-apri:not(.collapsed) i { transform: rotate(180deg); }

.ag-rami { background: var(--ag-bg); }

.ag-rami a {
	display: block;
	padding: 11px 18px 11px 32px;
	color: var(--ag-ink-soft);
	text-decoration: none;
	font-size: 13.5px;
	border-bottom: 1px solid var(--ag-line);
}

.ag-rami a:hover { color: var(--ag-accent); }

/* --- testata compatta ---------------------------------------------------
 *
 * A 500 pixel logo, ricerca e icone stavano su tre righe: 248 pixel di sola
 * testata, piu' i 53 della fascia del menu. Logo e icone dividono una riga,
 * la ricerca prende quella sotto.
 */
@media (max-width: 767px) {
	.ag-header-riga { min-height: 62px; gap: 8px; }
	.ag-header #logo img { max-height: 40px; }
	.ag-icone { gap: 0; }
	.ag-icona { min-width: 38px; height: 38px; padding: 0 7px; }
	.ag-burger { width: 40px; height: 40px; }
}

/* A 360 pixel le icone uscivano di 4 pixel dalla riga (misurato). La sigla
 * della lingua basta a dire in quale si sta: la bandierina si toglie. */
@media (max-width: 399px) {
	.ag-header-riga { gap: 6px; }
	.ag-lang img { display: none; }
	.ag-icona { padding: 0 6px; }
}

/* A 320 pixel non bastava ancora: 28 pixel fuori. Su uno schermo cosi'
 * l'ordine rapido — righe di codici e quantita' — non si usa. */
@media (max-width: 359px) {
	.ag-icone .ag-quick { display: none; }
}

/* Fra i 992 e i 1200 pixel la barra resta aperta ma non ci sta piu': con
 * nove voci andava a capo e il menu diventava alto due righe. Si stringe
 * l'imbottitura invece di nascondere le voci — una voce di menu che si
 * raggiunge solo aprendo un pannello vale meno di una che si legge. */
@media (max-width: 1199px) {
	#menu.ag-menu .nav-link {
		font-size: 12.5px;
		padding: 11px 8px;
	}
}

/* --- apertura ----------------------------------------------------------- */

.ag-hero {
	/* Lo sfondo scelto il 24/09/2026 al posto del nero pieno: scuro a
	   sinistra, dove sta il testo, con un bagliore arancione al centro.
	   Centrato e non ancorato a destra: a destra, a 1400 pixel il bagliore
	   cadeva dietro la fine del sottotitolo, bianco su arancio. Cosi' sta
	   fra il testo e la scheda dell'offerta. Il colore resta sotto, per il
	   mezzo secondo prima che l'immagine arrivi. */
	background: var(--ag-dark) url("../image/agata/home-sfondo.jpg") center / cover no-repeat;
	color: #FFFFFF;
	padding: 64px 0 72px;
}

/* Sotto i 992 il testo occupa tutta la larghezza e il bagliore gli finisce
   dietro: un velo scuro lo tiene leggibile. */
@media (max-width: 991.98px) {
	.ag-hero {
		background-image: linear-gradient(rgba(14, 19, 23, 0.72), rgba(14, 19, 23, 0.72)), url("../image/agata/home-sfondo.jpg");
	}
}

.ag-hero-inner { max-width: 62ch; }
.ag-hero .ag-kicker { color: var(--ag-badge-ink); }

.ag-hero-title {
	/* Il foglio di stile del core colora gli h1 di grigio scuro: su fondo
	   nero diventava illeggibile. */
	color: #FFFFFF;
	font-size: clamp(30px, 4.2vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 18px 0 0;
	text-wrap: balance;
}

.ag-hero-sub {
	color: var(--ag-dark-text);
	font-size: 16px;
	line-height: 1.55;
	margin: 16px 0 0;
	max-width: 56ch;
}

.ag-hero .ag-btn { background: var(--ag-accent); border-color: var(--ag-accent); }
.ag-hero .ag-btn:hover { background: #E08D1C; border-color: #E08D1C; }
.ag-hero .ag-btn-ghost { background: transparent; color: #FFFFFF; border-color: var(--ag-dark-line); }
.ag-hero .ag-btn-ghost:hover { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }

/* La seconda riga del titolo, in arancione: e' l'accento a due colori delle
   altre pagine, qui su fondo scuro. */
.ag-hero-title span { display: block; color: var(--ag-badge-ink); }

/* Le quattro voci stanno sotto i pulsanti, dentro la colonna del testo, come
   nell'esempio del 27/09/2026: due per riga, perche' la colonna e' stretta. */
.ag-vantaggi.ag-vantaggi-hero {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
	margin-top: 36px;
	padding-top: 0;
	border-top: 0;
}

/* --- le offerte accanto al titolo ---------------------------------------- */

/* La colonna del testo non e' piu' larga quanto la pagina: il max-width di
   62ch serviva quando l'eroe era una colonna sola, e ora la griglia fa gia'
   il suo mestiere. Lasciarlo stringeva il titolo due volte. */
.ag-hero .row > [class*="col-"] > .ag-hero-inner { max-width: none; }

/*
 * La vetrina: un riquadro grande e chiaro, la scheda a sinistra e la foto del
 * prodotto a destra, staccate. Il fondo e' l'immagine del 28/09/2026.
 *
 * Le foto delle offerte sono piccole: stanno alla misura che reggono, non a
 * tutto riquadro, dove si sgranerebbero.
 */
.ag-vetrina {
	--ag-vetrina-fondo: #FCF4EA url("../image/agata/offerte-sfondo.jpg") center / cover no-repeat;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--ag-vetrina-fondo);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

/* Il fondo si ripete sulla diapositiva: con la dissolvenza, fra una
   diapositiva e l'altra si vedrebbe altrimenti quella sotto.

   L'altezza e' fissa, misurata sulla scheda piu' piena (nome su tre righe,
   prezzo scontato): con l'altezza del contenuto la giostra sobbalzava fra
   480 e 521 pixel a ogni passaggio.

   Scheda e foto stanno in due colonne con uno spazio in mezzo, e non una
   sopra l'altra: sovrapposte, la scheda copriva un pezzo di prodotto. */
.ag-vetrina-slide {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	align-items: center;
	gap: 28px;
	height: 540px;
	padding: 64px 64px 60px;
	background: var(--ag-vetrina-fondo);
}

.ag-offerta-scheda {
	position: relative;
	z-index: 2;
	padding: 26px 24px 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ag-ink);
	box-shadow: 0 22px 48px rgba(122, 64, 10, 0.18);
}

.ag-offerta-codice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ag-accent);
}

.ag-offerta-codice span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ag-offerta-codice::after {
	content: "";
	flex: 0 0 40px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ag-accent), rgba(201, 122, 20, 0));
}

.ag-offerta-nome {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ag-ink);
}

.ag-offerta-nome:hover { color: var(--ag-accent-ink); }

.ag-offerta-prezzi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ag-line); }
.ag-offerta-listino { font-size: 15px; color: var(--ag-muted); text-decoration: line-through; }
.ag-offerta-sconto { padding: 3px 8px; border-radius: 6px; background: #FDE3E1; color: #C5221F; font-size: 14px; font-weight: 800; }
.ag-offerta-prezzo { flex-basis: 100%; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }

.ag-offerta-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 12px 18px;
	border-radius: 10px;
	background: linear-gradient(90deg, #B8630C, #E8962E);
	color: #FFFFFF;
	font-weight: 700;
	box-shadow: 0 10px 22px rgba(184, 99, 12, 0.28);
}

.ag-offerta-cta span { flex: 1; }
.ag-offerta-cta:hover { color: #FFFFFF; filter: brightness(1.06); }

/* Foto e caratteristiche, nella colonna di destra. */
.ag-offerta-lato {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Il bagliore bianco sta sotto la foto, nello stesso livello: il bianco
   della foto si fonde con quello e non con l'arancione, che scurirebbe il
   prodotto. Niente transform qui: farebbe della foto un livello a se'.

   Una foto col fondo grigio resta un rettangolo grigio: delle dodici
   offerte del 28/09/2026 nessuna ha il fondo bianco. Va rifatta la foto,
   non il riquadro. */
.ag-offerta-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.96) 62%, rgba(255, 255, 255, 0));
}

.ag-offerta-foto img {
	width: 86%;
	height: auto;
	mix-blend-mode: multiply;
}

.ag-offerta-punti {
	display: flex;
	width: 100%;
	max-width: 380px;
	margin: 0;
	padding: 10px 4px;
	list-style: none;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 10px 24px rgba(122, 64, 10, 0.10);
}

.ag-offerta-punti li {
	flex: 1 1 0;
	min-width: 0;
	padding: 2px 8px;
	text-align: center;
	line-height: 1.2;
}

.ag-offerta-punti li + li { border-left: 1px solid rgba(122, 64, 10, 0.16); }

.ag-offerta-punti strong,
.ag-offerta-punti span {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ag-offerta-punti strong { font-size: 14px; font-weight: 800; color: var(--ag-ink); }
.ag-offerta-punti span { margin-top: 2px; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #5A5148; }

.ag-vetrina-etichetta {
	position: absolute;
	top: 18px;
	left: 20px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(14, 19, 23, 0.9);
	color: var(--ag-badge-ink);
	font-family: var(--ag-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ag-vetrina-etichetta i { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.3); }

.ag-vetrina-tutte { position: absolute; bottom: 18px; left: 24px; z-index: 3; font-size: 14px; font-weight: 700; color: var(--ag-ink); }
.ag-vetrina-tutte i { color: var(--ag-accent); }
.ag-vetrina-tutte:hover { color: var(--ag-accent-ink); }

.ag-vetrina-contatore {
	position: absolute;
	right: 24px;
	bottom: 18px;
	z-index: 3;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	font-family: var(--ag-mono);
	font-size: 12.5px;
	color: #5A5148;
}

.ag-vetrina-contatore strong { color: var(--ag-accent-ink); }

.ag-vetrina-freccia {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ag-ink);
	box-shadow: 0 6px 18px rgba(14, 19, 23, 0.18);
	transform: translateY(-50%);
}

.ag-vetrina-freccia:hover { color: var(--ag-accent); }
.ag-vetrina-freccia.is-prima { left: 12px; }
.ag-vetrina-freccia.is-dopo { right: 12px; }

/* Sotto i 992 la vetrina finisce sotto il testo, e la scheda si raddrizza:
   la foto sopra, quello che si legge sotto. Due colonne dentro 480 pixel
   darebbero una foto da 200 pixel e un prezzo che va a capo in mezzo. */
@media (max-width: 991.98px) {
	/* Le grondaie larghe della riga dell'eroe sporgono dal contenitore, che
	   di padding ne ha 12 per lato: a 430 pixel la pagina risultava larga
	   512 e scorreva di lato. */
	.ag-hero .row {
		--bs-gutter-x: 1.5rem;
	}

	.ag-vetrina-slide { grid-template-columns: minmax(0, 1fr); height: auto; gap: 18px; padding: 60px 20px 56px; }
	.ag-offerta-lato { order: -1; }
	.ag-offerta-foto { max-width: 240px; }
	.ag-vetrina-freccia { top: 160px; width: 38px; height: 38px; }
}

/* --- carrello nella testata --------------------------------------------- */

/* Nero come prima, ma alto quanto le icone: l'icona, il numero dei pezzi e,
 * dove c'e' posto, il totale. */
.ag-carrello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 14px;
	margin-left: 6px;
	border: 0;
	border-radius: 8px;
	background: var(--ag-ink);
	color: #FFFFFF;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.ag-carrello:hover,
.ag-carrello[aria-expanded="true"] { background: var(--ag-accent); }
.ag-carrello.dropdown-toggle::after { display: none; }

.ag-carrello-n {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--ag-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.ag-carrello-n.is-vuoto { background: rgba(255, 255, 255, .18); }
.ag-carrello:hover .ag-carrello-n { background: var(--ag-ink); }

@media (max-width: 767px) {
	.ag-carrello { height: 38px; padding: 0 10px; margin-left: 4px; }
}

/* --- titoli dei moduli in home ------------------------------------------ */

#common-home h3 {
	font-size: 18px;
	margin: 28px 0 16px;
}

/* --- colonna delle categorie -------------------------------------------- */
/* Ultimo residuo del blu di Bootstrap: la voce attiva dell'elenco. */

.list-group-item { border-color: var(--ag-line); font-size: 13.5px; padding: 11px 16px; }

.list-group-item.active {
	background: var(--ag-ink);
	border-color: var(--ag-ink);
	color: #FFFFFF;
}

.list-group-item:not(.active):hover { color: var(--ag-accent); }

/* --- pulsanti generati dal core ------------------------------------------
 *
 * Il checkout costruisce le finestre di spedizione e pagamento in
 * JavaScript, e le estensioni di pagamento hanno il loro template: in tutti
 * questi casi il pulsante e' un .btn-primary di Bootstrap. Si veste quello,
 * invece di riscrivere codice che non e' nostro.
 */

.btn-primary {
	background: var(--ag-ink);
	border-color: var(--ag-ink);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: var(--ag-accent);
	border-color: var(--ag-accent);
}

.btn-primary:disabled {
	background: var(--ag-muted);
	border-color: var(--ag-muted);
}

.btn-light { border: 1px solid var(--ag-line); font-size: 13px; font-weight: 600; border-radius: 4px; }

.ag-btn-block { display: block; width: 100%; text-align: center; }

/* Pulsante con la sola icona, quadrato: accanto a «Aggiungi al carrello» un
   secondo pulsante con il testo intero («Confronta questo prodotto") non ci
   sta, e nel riquadro spingerebbe il carrello a capo. Il testo resta nel
   `title` e nell'`aria-label`. */
.ag-btn-icona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding-left: 0;
	padding-right: 0;
	/* Scritta e non `aspect-ratio`: dentro una riga flessibile, con
	   l'altezza stirata, Chrome il rapporto 1:1 non lo applica e il
	   pulsante restava largo quanto l'icona. */
	width: 40px;
	min-width: 40px;
}

.ag-btn-sm { padding: 6px 12px; font-size: 13px; }

/* Nella riga d'acquisto il pulsante a icona non deve crescere — in griglia
   ogni .ag-btn prende `flex: 1` — e deve essere alto quanto il carrello
   accanto: la riga e' allineata al centro, e senza `stretch` l'altezza la
   decideva l'icona, cioe' quattordici pixel. Il selettore lungo serve a
   battere quello della griglia, che e' altrettanto specifico. */
.ag-card-buy .ag-btn-icona,
.ag-items.is-grid .ag-card-buy .ag-btn-icona,
.ag-buy-row .ag-btn-icona {
	flex: 0 0 auto;
	align-self: stretch;
	/* Anche qui, e non solo sopra: in griglia `.ag-items.is-grid .ag-btn`
	   da' `width: 100%` a ogni pulsante, e vinceva sui 40 pixel. Il
	   pulsante del confronto diventava largo quanto il riquadro e la pagina
	   categoria sporgeva di 153 pixel a 1400. Nella ricerca non si vedeva:
	   li' i riquadri non stanno dentro `.ag-items`. */
	width: 40px;
}

/* Pulsante di sola icona: il rosso pieno di Bootstrap su una riga di
 * carrello urla piu' del necessario. */
.ag-icon-btn {
	width: 38px;
	border: 1px solid var(--ag-line);
	background: transparent;
	color: var(--ag-ink-soft);
	border-radius: 4px;
}

.ag-icon-btn:hover { background: var(--ag-bg); color: var(--ag-ink); border-color: var(--ag-line); }
.ag-icon-btn.btn-danger:hover { color: #C0392B; border-color: #E8C4BF; background: #FDF5F4; }

/* --- campi dei moduli ---------------------------------------------------- */

.ag-panel legend {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ag-muted);
	border: 0;
	padding: 0;
	margin-bottom: 16px;
	float: none;
	width: auto;
}

.ag-panel .form-label,
.ag-panel .col-form-label { font-size: 12.5px; font-weight: 600; color: var(--ag-ink-soft); margin-bottom: 5px; }

/* Il core mette gia' l'asterisco con un :before: qui si cambia solo il
 * colore, altrimenti se ne vedrebbero due. */
div.required .col-form-label:before,
div.required .form-label:before { color: var(--ag-accent); }

.ag-panel .form-control,
.ag-panel .form-select {
	border: 1px solid var(--ag-line);
	border-radius: 4px;
	font-size: 14px;
	padding: 9px 12px;
	box-shadow: none;
}

.ag-panel .form-control:focus,
.ag-panel .form-select:focus { border-color: var(--ag-ink); box-shadow: none; }
.ag-panel .form-check-label { font-size: 13.5px; }

/* --- passi del checkout -------------------------------------------------- */
/*
 * Il riquadro dell'indirizzo di spedizione e' sempre nella pagina, ma parte
 * con dentro un fieldset che il core nasconde con uno stile in linea: si
 * vedeva un rettangolo bianco senza niente dentro. Si nasconde il riquadro
 * finche' quel fieldset e' nascosto; quando il cliente chiede la consegna a
 * un altro indirizzo, jQuery scrive display: block e la regola smette di
 * valere da sola. Siccome display: none non fa avanzare i contatori CSS,
 * questo sistema anche la numerazione, che saltava da 1 a 3.
 */
.ag-step:has(> div:empty),
.ag-step:has(> div > fieldset[style*="display: none"]),
.ag-step:has(> div > fieldset[style*="display:none"]) { display: none; }

/*
 * La numerazione e' un contatore CSS, non un numero scritto nel template:
 * i riquadri compaiono o spariscono a seconda che il cliente sia gia'
 * registrato, e un numero fisso finirebbe per saltare.
 */

#checkout-checkout #content { counter-reset: ag-step; }
.ag-step { counter-increment: ag-step; }

.ag-step legend::before {
	content: counter(ag-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--ag-ink);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	vertical-align: -4px;
}

/* --- carrello ------------------------------------------------------------ */

.ag-cart .ag-list-head,
.ag-cart .ag-row { grid-template-columns: minmax(0, 1fr) 170px 130px 130px; }

.ag-row-text { min-width: 0; }
.ag-row-text .ag-row-name { display: inline; }

.ag-flag { color: #C0392B; font-weight: 700; margin-left: 4px; }

.ag-qty { display: flex; gap: 6px; }
.ag-qty .form-control { width: 62px; text-align: center; font-family: var(--ag-mono); border: 1px solid var(--ag-line); border-radius: 4px; box-shadow: none; }
.ag-qty .form-control:focus { border-color: var(--ag-ink); box-shadow: none; }

/* --- riepilogo ----------------------------------------------------------- */

.ag-summary { position: sticky; top: 16px; }

.ag-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
	font-size: 13.5px;
	color: var(--ag-ink-soft);
}

.ag-total-row .ag-price-net { font-size: 14px; color: var(--ag-ink); }

.ag-total-row.is-grand {
	border-top: 1px solid var(--ag-line);
	margin-top: 4px;
	padding-top: 12px;
	font-weight: 700;
	color: var(--ag-ink);
}

.ag-total-row.is-grand .ag-price-net { font-size: 19px; }

/* --- conferma dell'ordine ------------------------------------------------ */

.ag-confirm-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ag-line);
}

.ag-confirm-row:first-child { padding-top: 0; }

.ag-qty-badge {
	font-family: var(--ag-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--ag-ink-soft);
	margin-right: 4px;
}

.ag-totals { margin-top: 14px; }

/* --- ordine inviato ------------------------------------------------------ */

.ag-done { text-align: center; padding: 48px 22px; }

.ag-done-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ag-stock);
	color: #FFFFFF;
	font-size: 24px;
}

.ag-done-text { color: var(--ag-ink-soft); max-width: 60ch; margin: 12px auto 0; line-height: 1.6; }
.ag-empty { text-align: center; padding: 48px 22px; }

/* --- carrello nella testata ---------------------------------------------- */

.ag-cart-menu { width: 420px; max-width: 92vw; padding: 14px; border: 1px solid var(--ag-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(14, 19, 23, .12); }

.ag-mini-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--ag-line);
}

.ag-mini-row img { width: 44px; height: 44px; object-fit: contain; }
.ag-mini-price { text-align: right; white-space: nowrap; }
.ag-mini-price .ag-price-net { font-size: 14px; }
.ag-mini-totals { padding-top: 8px; }
.ag-mini-actions { display: flex; gap: 8px; margin-top: 12px; }
.ag-mini-actions .ag-btn { flex: 1; text-align: center; }
.ag-mini-empty { text-align: center; padding: 24px; color: var(--ag-ink-soft); font-size: 13.5px; }

/* --- finestre di spedizione e pagamento ---------------------------------- */

.modal-content { border: 1px solid var(--ag-line); border-radius: 6px; }
.modal-header { border-bottom: 1px solid var(--ag-line); }
.modal-title { font-size: 15px; }
.modal-body .form-check-label { font-size: 13.5px; }
.modal-body p strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ag-muted); }

/* --- adattamento a schermi stretti --------------------------------------- */

@media (max-width: 1180px) {
	.ag-cart .ag-row { grid-template-columns: minmax(0, 1fr) auto; }
	.ag-cart .ag-row > :nth-child(3) { display: none; }
	.ag-summary { position: static; }
}

.ag-footer-address { max-width: 38ch; line-height: 1.55; margin-bottom: 10px; }

/* I profili social. Il bersaglio e' 40px: sotto i 44 il dito sbaglia, e il
   piede si guarda quasi sempre da telefono. */
.ag-social .list-inline-item { margin-right: 6px; }
.ag-social a { align-items: center; border: 1px solid var(--ag-dark-line); border-radius: 50%; display: inline-flex; height: 40px; justify-content: center; transition: background-color .15s, border-color .15s; width: 40px; }
.ag-social a:hover { background: var(--ag-accent); border-color: transparent; color: var(--ag-dark); }
.ag-social i { font-size: 16px; }

/* --- scelta della lingua ------------------------------------------------- */

.ag-lang .dropdown-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.ag-lang img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
.ag-lang .dropdown-menu { border: 1px solid var(--ag-line); border-radius: 6px; padding: 6px 0; min-width: 160px; }
.ag-lang .dropdown-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 7px 14px; }
.ag-lang .dropdown-item.active { background: var(--ag-bg); color: var(--ag-ink); font-weight: 600; }

/* --- area cliente -------------------------------------------------------- */
/*
 * Il core mette quindici voci in tre elenchi puntati, e in elenco si
 * somigliano tutte. A riquadri si distinguono, e su telefono restano
 * bersagli grandi abbastanza da centrarli col pollice.
 */

.ag-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

.ag-tile {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 13.5px;
	font-weight: 600;
}

.ag-tile i { color: var(--ag-muted); width: 16px; text-align: center; }
.ag-tile:hover { border-color: var(--ag-ink); color: var(--ag-ink); }
.ag-tile:hover i { color: var(--ag-accent); }

/* --- indice dei marchi --------------------------------------------------- */

.ag-alfabeto { display: flex; flex-wrap: wrap; gap: 6px; }

.ag-alfabeto a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--ag-line);
	border-radius: 4px;
	background: var(--ag-surface);
	font-family: var(--ag-mono);
	font-size: 12.5px;
	font-weight: 600;
}

.ag-alfabeto a:hover { border-color: var(--ag-ink); }

.ag-marchi-gruppo {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 18px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--ag-line);
}

.ag-marchi-gruppo:first-child { padding-top: 0; }
.ag-marchi-gruppo:last-child { border-bottom: 0; padding-bottom: 0; }

.ag-lettera {
	font-family: var(--ag-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--ag-accent);
	margin: 0;
}

.ag-marchi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.ag-marchi a { font-size: 13.5px; font-weight: 600; }

/* --- moduli a due colonne del core --------------------------------------- */
/*
 * Registrazione, indirizzi e modifica account mettono l'etichetta in una
 * colonna stretta allineata a destra. Con un consenso GDPR di quaranta
 * parole diventa una colonna alta e sottile, illeggibile. Nel resto del tema
 * l'etichetta sta sopra il campo: qui si fa lo stesso.
 */

.ag-panel .row > .col-sm-2.col-form-label,
.ag-panel .row > .col-sm-2.col-form-label + .col-sm-10 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
}

.ag-panel .row > .col-sm-2.col-form-label {
	text-align: left;
	padding-bottom: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ag-ink-soft);
}

/* L'uscita non e' una voce fra le altre: sta staccata e non ha l'aria di un
 * posto dove andare. */
.ag-tile-esci { border-style: dashed; color: var(--ag-ink-soft); }
.ag-tile-esci:hover { border-style: solid; border-color: #C0392B; color: #C0392B; }
.ag-tile-esci:hover i { color: #C0392B; }

/* --- colonna dei filtri ------------------------------------------------ */

/* La colonna resta in vista mentre si scorrono i prodotti, e non supera mai
   l'altezza dello schermo: con nove gruppi di filtri il fondo della colonna
   sarebbe altrimenti irraggiungibile senza arrivare in fondo alla pagina. */
.ag-facets {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 10px;
	padding: 4px 18px 8px;
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ag-facets-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ag-muted);
	margin: 18px 0 10px;
}

.ag-facet + .ag-facet { border-top: 1px solid var(--ag-line); }

.ag-facet-values { list-style: none; margin: 0 0 16px; padding: 0; }

.ag-facet-values a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 14px;
	color: var(--ag-ink-soft);
}

.ag-facet-values a:hover { color: var(--ag-accent); }

/* La casella e' disegnata, non un <input>: il filtro e' un collegamento, e
   una casella vera prometterebbe un modulo da inviare che non c'e'. */
.ag-facet-box {
	flex: none;
	width: 15px;
	height: 15px;
	border: 1px solid var(--ag-line);
	border-radius: 3px;
	background: var(--ag-surface);
}

.ag-facet-values a:hover .ag-facet-box { border-color: var(--ag-accent); }

.ag-facet-values a.is-selected { color: var(--ag-ink); font-weight: 600; }

.ag-facet-values a.is-selected .ag-facet-box {
	background: var(--ag-ink);
	border-color: var(--ag-ink);
	position: relative;
}

.ag-facet-values a.is-selected .ag-facet-box::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ag-facet-name { flex: 1 1 auto; min-width: 0; }

.ag-facet-count {
	flex: none;
	font-family: var(--ag-mono);
	font-size: 12px;
	color: var(--ag-muted);
}

.ag-facets-active { padding-bottom: 14px; border-bottom: 1px solid var(--ag-line); }

.ag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px 0;
	padding: 3px 9px;
	border: 1px solid var(--ag-line);
	border-radius: 20px;
	background: var(--ag-bg);
	font-size: 13px;
}

.ag-chip:hover { border-color: var(--ag-accent); color: var(--ag-accent); }
.ag-chip span { color: var(--ag-muted); font-size: 15px; line-height: 1; }

.ag-facets-clear {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ag-muted);
	text-decoration: underline;
}

/* Sul telefono la colonna non sta di fianco, va sopra l'elenco. Nove gruppi
   di filtri uno sotto l'altro sono quattro schermate prima del primo
   prodotto: la colonna scorre dentro se stessa, cosi' i filtri restano tutti
   raggiungibili e i prodotti cominciano subito sotto. */
@media (max-width: 991px) {
	.ag-facets {
		position: static;
		margin-bottom: 20px;
		max-height: 55vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* --- ordine rapido ------------------------------------------------------ */

.ag-qo-table { width: 100%; border-collapse: collapse; }

.ag-qo-table th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ag-muted);
	padding-bottom: 6px;
}

.ag-qo-table td { padding: 3px 6px 3px 0; vertical-align: middle; }
.ag-qo-table td:last-child { padding-right: 0; }
.ag-qo-qty { width: 92px; }

.ag-qo-form .form-control { font-family: var(--ag-mono); font-size: 14px; }
.ag-qo-form textarea.form-control { line-height: 1.6; }

.ag-qo-help { margin-top: 8px; font-size: 13px; color: var(--ag-muted); max-width: 60ch; }

.ag-qo-outcome {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 10px;
	padding: 4px 18px 18px;
	margin-bottom: 28px;
}

.ag-qo-summary { font-weight: 600; margin-bottom: 12px; }

/* La riga riuscita e quella no si distinguono dal bordo, non dal colore del
   testo: su una tabella di venti righe il colore del testo si legge male, e
   chi non distingue il rosso dal verde non legge niente. */
.ag-qo-outcome .ag-qo-table tr { border-left: 3px solid transparent; }
.ag-qo-outcome .ag-qo-table tr.is-ok { border-left-color: var(--ag-stock); }
.ag-qo-outcome .ag-qo-table tr.is-ko { border-left-color: var(--ag-accent); }
.ag-qo-outcome .ag-qo-table td { padding: 5px 10px; font-size: 14px; }
.ag-qo-outcome .ag-qo-table tr + tr { border-top: 1px solid var(--ag-line); }

.ag-qo-note { color: var(--ag-ink-soft); }
.ag-qo-ok { font-weight: 600; color: var(--ag-stock); }

/* --- ordine rapido, la pagina (mockup del 24/09/2026) -------------------- */

/* Le scatole della foto stanno nel margine a sinistra del contenuto, come
   nel mockup: l'immagine e' larga quanto basta perche' le scatole — il
   31% della sua larghezza — riempiano quel margine e non di piu'. Prima
   copriva tutta la sezione e le scatole finivano sotto titolo e testo, che
   a 1400 pixel non si leggevano. A destra e in alto sfuma nel color pesca
   su cui la foto finisce, cosi' il bordo non si vede.

   Sotto i 1600 pixel il margine e' troppo stretto per starci: resta il
   colore, e il testo si legge. */


.ag-qo-titolo { margin-bottom: 6px; }
:where(#content) h1 .ag-accento, .ag-qo-titolo span { color: var(--ag-accent); }
.ag-titolo-padre { display: block; color: var(--ag-accent); margin-bottom: 4px; }
.ag-qo-intro { max-width: 70ch; color: var(--ag-ink-soft); margin-bottom: 24px; }

.ag-qo-card {
	height: 100%;
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 10px;
	padding: 18px;
	box-shadow: 0 2px 10px rgba(14, 19, 23, 0.05);
}

.ag-qo-righe tbody tr { border-top: 1px solid var(--ag-line); }
.ag-qo-righe td { padding: 6px 8px 6px 0; }
.ag-qo-n { width: 36px; font-family: var(--ag-mono); font-size: 13px; color: var(--ag-muted); text-align: center; }
.ag-qo-azioni { width: 52px; text-align: center; }

.ag-qo-togli {
	border: 0;
	background: transparent;
	color: var(--ag-ink-soft);
	padding: 6px 10px;
	border-radius: 4px;
}

.ag-qo-togli:hover { color: var(--ag-ink); background: var(--ag-bg); }
.ag-qo-aggiungi { margin-top: 12px; }

.ag-qo-carica { display: flex; flex-direction: column; gap: 16px; }

/* Il campo file copre tutto il riquadro, trasparente: cosi' si clicca
   ovunque e il file ci si lascia cadere sopra anche senza script. */
.ag-qo-zona {
	position: relative;
	border: 2px dashed var(--ag-line);
	border-radius: 8px;
	padding: 22px 16px;
	text-align: center;
	transition: border-color 0.15s, background-color 0.15s;
}

.ag-qo-zona:focus-within { outline: 2px solid var(--ag-ink); outline-offset: 2px; }
.ag-qo-zona.is-sopra,
.ag-qo-zona:hover { border-color: var(--ag-accent); background: #FFF8EE; }
.ag-qo-zona.is-pronto { border-color: var(--ag-stock); border-style: solid; }

.ag-qo-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ag-qo-icona { font-size: 34px; color: var(--ag-stock); margin-bottom: 8px; }
.ag-qo-carica-titolo { font-weight: 700; margin-bottom: 4px; }
.ag-qo-carica-aiuto { font-size: 13px; color: var(--ag-ink-soft); margin: 0 auto 14px; max-width: 34ch; }
.ag-qo-scegli { background: var(--ag-accent); border-color: var(--ag-accent); }
.ag-qo-trascina { display: block; margin-top: 8px; font-size: 13px; color: var(--ag-muted); }
.ag-qo-scelto { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ag-stock); }
.ag-qo-scelto:empty { display: none; }

.ag-qo-modello { display: flex; align-items: center; gap: 12px; }
.ag-qo-modello > i { font-size: 20px; color: var(--ag-ink-soft); }
.ag-qo-modello-titolo { font-weight: 600; font-size: 14px; }
.ag-qo-modello-aiuto { font-size: 12px; color: var(--ag-muted); }

.ag-qo-incolla summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.ag-qo-incolla textarea { margin-top: 10px; }

.ag-qo-lato { display: flex; flex-direction: column; gap: 16px; }
.ag-qo-lato-titolo { font-weight: 700; margin-bottom: 10px; }
.ag-qo-lato-titolo i { margin-right: 6px; }

.ag-qo-consigli,
.ag-qo-aiuto { border-radius: 10px; padding: 16px 18px; font-size: 14px; }

.ag-qo-consigli { background: #FFF7E8; border: 1px solid #F3DFB8; }
.ag-qo-consigli .ag-qo-lato-titolo i { color: var(--ag-accent); }
.ag-qo-consigli ul { list-style: none; padding: 0; margin: 0; }
.ag-qo-consigli li { display: flex; gap: 10px; margin-bottom: 8px; }
.ag-qo-consigli li:last-child { margin-bottom: 0; }
.ag-qo-consigli li i { color: var(--ag-accent); margin-top: 4px; }

.ag-qo-aiuto { background: #EEF5FC; border: 1px solid #CFE0F2; }
.ag-qo-aiuto .ag-qo-lato-titolo i { color: #1F6FC5; }
.ag-qo-aiuto p { color: var(--ag-ink-soft); margin-bottom: 8px; }
.ag-qo-aiuto a { font-weight: 600; }

.ag-qo-invia { width: 100%; padding: 16px; font-size: 16px; }

/* Sotto i 1200 la colonna di destra va sotto a tutto: il pulsante sale in
   cima, prima di suggerimenti e aiuto, se no chi ha appena scritto i codici
   deve scorrere fino in fondo per mandarli. */
@media (max-width: 1199.98px) {
	.ag-qo-invia { order: -1; }
}
.ag-qo-invia i { margin-right: 8px; }

.ag-vantaggi {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.ag-vantaggi li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.ag-vantaggi i { font-size: 24px; color: var(--ag-accent); }
.ag-vantaggi strong { display: block; font-size: 14px; }
.ag-vantaggi span { color: var(--ag-ink-soft); }

/* Nell'ordine rapido: un fondo chiaro, velato, perche' sui grandi schermi
   la striscia passa sopra le scatole della foto, e il testo grigio li'
   sopra non si leggeva. */
.ag-qo-vantaggi { padding: 16px 18px; background: rgba(255, 255, 255, 0.82); border-radius: 10px; }
.ag-qo-vantaggi li + li { border-left: 1px solid rgba(14, 19, 23, 0.12); padding-left: 16px; }

/* Nella home, sul fondo scuro dell'eroe. */
.ag-vantaggi-scuro { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ag-vantaggi-scuro i { color: var(--ag-badge-ink); }
.ag-vantaggi-scuro strong { color: #FFFFFF; font-size: 13px; }
.ag-vantaggi-scuro span { color: var(--ag-dark-text); font-size: 12px; }

@media (max-width: 767.98px) {
	.ag-vantaggi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ag-qo-vantaggi li + li { border-left: 0; padding-left: 0; }
}

.ag-qo-file-esito { font-size: 14px; margin-bottom: 8px; }
.ag-qo-file-esito.is-ko { color: var(--ag-accent-ink); font-weight: 600; }

/* --- pagine informative (#35) ------------------------------------------ */
/*
 * Fascia alta con la foto delle scatole a destra, poi colonna con indice e
 * contatti e il testo in schede numerate. Il crema della fascia e' lo stesso
 * dei riquadri dell'ordine rapido: il colore del marchio resta, su una
 * striscia sola.
 */
.ag-info-testata {
	/* La foto e' chiara e sfocata a sinistra: basta velarla dove sta il testo.
	   Il colore sotto regge il mezzo secondo prima che l'immagine arrivi. */
	background:
		linear-gradient(90deg, #FDEFDF 30%, rgba(253, 239, 223, 0.85) 48%, rgba(253, 239, 223, 0) 72%),
		#FDEFDF url("../image/agata/assistenza-sfondo.jpg") right 42% / auto 150% no-repeat;
	border-bottom: 1px solid #F3DDC3;
	padding: 20px 0 48px;
	min-height: 300px;
}

/* Le scatole in basso a sinistra, che stanno dietro le altre pagine, qui
   sarebbero la seconda volta: la fascia ha gia' le sue. */
body:has(.ag-info)::before { display: none; }

.ag-info-testata .breadcrumb { background: rgba(255, 255, 255, 0.7); margin-bottom: 26px; max-width: 900px; }

.ag-info-titolo {
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ag-ink);
	margin: 0;
	overflow-wrap: anywhere;
}

.ag-info-titolo span { color: var(--ag-accent); }

/* Il trattino arancione sotto il titolo, come negli esempi. */
.ag-info-titolo::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--ag-accent);
	margin-top: 14px;
}

.ag-info-intro { max-width: 62ch; margin-top: 16px; font-size: 17px; line-height: 1.55; color: #3B444B; }
.ag-info-intro p:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
	/* Sul telefono la foto finirebbe sotto il testo: resta il crema. */
	.ag-info-testata { background: #FDEFDF; padding-bottom: 28px; }
}

.ag-info-corpo { padding-top: 32px; padding-bottom: 56px; }

.ag-info-box {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 12px rgba(14, 19, 23, 0.04);
}

.ag-info-box + .ag-info-box { margin-top: 16px; }

.ag-info-box-titolo { font-weight: 700; font-size: 16px; }
.ag-info-box-titolo i { color: var(--ag-accent); margin-right: 6px; }

/* L'indice resta sotto gli occhi mentre si scorre una pagina lunga. */
@media (min-width: 992px) {
	.ag-info-lato { align-self: flex-start; position: sticky; top: 16px; }
}

.ag-info-indice ol { list-style: none; margin: 12px 0 0; padding: 0; }
.ag-info-indice li + li { border-top: 1px solid var(--ag-line); }

.ag-info-indice a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	font-size: 14px;
}

.ag-info-indice a i { margin-left: auto; font-size: 11px; color: var(--ag-muted); }

.ag-info-n {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ag-bg);
	font-size: 12px;
	font-weight: 700;
}

.ag-info-indice a:hover .ag-info-n { background: var(--ag-accent); color: #FFFFFF; }

.ag-info-aiuto { background: #FFF8EF; border-color: #F3DDC3; }
.ag-info-aiuto-testa { display: flex; gap: 14px; }
.ag-info-aiuto-testa > i { font-size: 28px; color: var(--ag-accent); }
.ag-info-aiuto-testa p { font-size: 13.5px; color: var(--ag-ink-soft); margin: 4px 0 14px; }

.ag-info-contatta { display: block; text-align: center; background: var(--ag-accent); border-color: var(--ag-accent); padding: 10px 14px; font-size: 14px; }
.ag-info-contatta:hover { background: var(--ag-accent-ink); border-color: var(--ag-accent-ink); }

.ag-info-recapiti { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13.5px; }
.ag-info-recapiti li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ag-info-recapiti i { width: 16px; color: var(--ag-ink-soft); }
.ag-info-recapiti span { font-weight: 600; }
.ag-info-recapiti a { margin-left: auto; color: var(--ag-accent-ink); font-weight: 600; }

.ag-info-orari { margin-top: 8px; padding-top: 10px; border-top: 1px solid #F3DDC3; font-size: 12.5px; color: var(--ag-ink-soft); }

.ag-info-pagine ul { list-style: none; margin: 10px 0 0; padding: 0; }

.ag-info-pagine a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
}

.ag-info-pagine a i { width: 16px; color: var(--ag-muted); }
.ag-info-pagine a:hover { background: var(--ag-bg); color: var(--ag-ink); }
.ag-info-pagine a.is-attiva { background: #FDEFDF; font-weight: 600; }
.ag-info-pagine a.is-attiva i { color: var(--ag-accent); }

.ag-info-scheda {
	display: flex;
	gap: 22px;
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 12px;
	padding: 26px 28px;
	box-shadow: 0 2px 12px rgba(14, 19, 23, 0.04);
	/* L'indice porta qui: senza margine il titolo finirebbe sotto il bordo. */
	scroll-margin-top: 16px;
}

/* Due colonne: le schede brevi ne prendono una, le altre tutte e due. */
.ag-info-schede { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ag-info-schede > .ag-info-scheda { grid-column: 1 / -1; }

@media (min-width: 992px) {
	.ag-info-schede > .ag-info-scheda-nota { grid-column: auto; }
}

.ag-info-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FDEFDF;
	color: var(--ag-accent);
	font-size: 20px;
	font-weight: 800;
}

.ag-info-scheda-corpo { min-width: 0; flex: 1; }
.ag-info-scheda h2 { font-size: 24px; font-weight: 800; margin: 6px 0 12px; color: var(--ag-ink); }

.ag-info-num i { font-size: 18px; }

.ag-info-lead { font-size: 14px; line-height: 1.5; color: var(--ag-ink-soft); margin-bottom: 12px; }
.ag-info-lead p { margin: 0; }

/* Scheda con icona: titolo e riga di presentazione in testa, e sotto il testo
   a tutta larghezza, perche' una tabella di sei colonne non sta nella
   colonna lasciata libera dal numero. */
.ag-info-scheda-larga { display: block; }
.ag-info-scheda-testa { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ag-info-scheda-testa h2 { flex: none; margin: 0; }
.ag-info-scheda-testa .ag-info-lead { flex: 1; min-width: 0; margin: 0; padding-left: 8px; }
.ag-info-scheda-larga .ag-info-num { background: var(--ag-accent); color: #FFFFFF; }

/* Scheda breve: un'informazione a margine, in un colore che non compete con
   l'arancione delle schede principali. */
.ag-info-scheda-nota { background: #F5F8FC; border-color: #DCE6F2; box-shadow: none; }
.ag-info-scheda-nota .ag-info-num { background: #2563A6; color: #FFFFFF; }
.ag-info-scheda-nota h2 { font-size: 19px; margin: 9px 0 6px; }
.ag-info-scheda-nota .ag-info-testo { font-size: 14.5px; }

@media (max-width: 767.98px) {
	.ag-info-scheda-testa { flex-wrap: wrap; row-gap: 10px; }
	.ag-info-scheda-testa .ag-info-lead { flex-basis: 100%; padding-left: 0; }
}

@media (max-width: 575.98px) {
	.ag-info-scheda { padding: 20px 18px; gap: 14px; }
	.ag-info-num { width: 34px; height: 34px; font-size: 16px; }
	.ag-info-scheda h2 { font-size: 20px; margin-top: 3px; }
}

/* Il testo scritto nel pannello. */
.ag-info-testo { font-size: 15px; line-height: 1.65; color: #2C3338; }
.ag-info-testo > :last-child { margin-bottom: 0; }
.ag-info-testo h3 { font-size: 17px; font-weight: 700; margin: 20px 0 8px; }
.ag-info-testo a { color: var(--ag-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ag-info-testo ul, .ag-info-testo ol { padding-left: 1.3em; }
.ag-info-testo li { margin-bottom: 4px; }
.ag-info-testo li::marker { color: var(--ag-accent); }
.ag-info-testo img { max-width: 100%; height: auto; }
.ag-info-testo table { max-width: 100%; }

/* Un riquadro di avviso, scritto nel pannello come <div class="ag-nota">. */
.ag-info-testo .ag-nota {
	background: #FFF8EF;
	border: 1px solid #F3DDC3;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 14px 0;
}

/* Le tabelle della spedizione a peso, generate dalla configurazione. */
.ag-tariffe { border: 1px solid var(--ag-line); border-radius: 8px; overflow-x: auto; margin-bottom: 14px; }
.ag-tariffe .table { margin: 0; font-size: 13.5px; }

.ag-tariffe .table > :not(caption) > * > * {
	padding: 10px 14px;
	background: transparent;
	box-shadow: none;
	border-bottom: 1px solid var(--ag-line);
	vertical-align: middle;
}

.ag-tariffe tbody tr:last-child > * { border-bottom: 0; }
.ag-tariffe td { border-left: 1px solid var(--ag-line); }

.ag-tariffe thead th {
	background: #FDEFDF;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
}

.ag-tariffe thead th:first-child, .ag-tariffe-paesi thead th { text-align: left; }
.ag-tariffe tbody th { font-weight: 700; white-space: nowrap; }
.ag-tariffe-peso { display: block; font-size: 12.5px; color: var(--ag-ink-soft); white-space: nowrap; }
.ag-tariffe-prezzo { display: block; font-family: var(--ag-mono); font-weight: 600; color: var(--ag-accent); white-space: nowrap; }
.ag-tariffe td.is-vuoto { text-align: center; color: var(--ag-muted); }
.ag-tariffe-paesi td { font-size: 14px; }

/* Sul telefono una tabella di sei colonne si legge solo scorrendo di lato:
   ogni zona diventa un blocco, uno scaglione per riga. */
@media (max-width: 767.98px) {
	.ag-tariffe { border: 0; border-radius: 0; overflow: visible; }
	.ag-tariffe thead { display: none; }
	.ag-tariffe table, .ag-tariffe tbody, .ag-tariffe tr, .ag-tariffe th, .ag-tariffe td { display: block; }
	.ag-tariffe tr { border: 1px solid var(--ag-line); border-radius: 8px; overflow: hidden; }
	.ag-tariffe tr + tr { margin-top: 10px; }
	.ag-tariffe tbody th { background: #FDEFDF; }
	.ag-tariffe td { display: flex; justify-content: space-between; gap: 12px; border-left: 0; }
	.ag-tariffe tr > :last-child { border-bottom: 0; }
	.ag-tariffe td.is-vuoto { display: none; }
	.ag-tariffe-paesi td { display: block; }
}

/* I passi di una procedura, scritti nel pannello come
   <ol class="ag-passi"><li><strong>Titolo</strong> testo</li></ol>. */
.ag-info-testo ol.ag-passi {
	list-style: none;
	counter-reset: passo;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	padding: 0;
	margin: 0;
}

.ag-info-testo .ag-passi li {
	position: relative;
	counter-increment: passo;
	margin: 0;
	padding: 16px 16px 16px 60px;
	background: #FFF8EF;
	border: 1px solid #F3DDC3;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ag-ink-soft);
}

.ag-info-testo .ag-passi li::before {
	content: counter(passo);
	position: absolute;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ag-accent);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 800;
}

/* La freccia fra un passo e l'altro, disegnata con due bordi. */
.ag-info-testo .ag-passi li + li::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -19px;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--ag-ink-soft);
	border-right: 2px solid var(--ag-ink-soft);
	transform: translateY(-50%) rotate(45deg);
}

.ag-info-testo .ag-passi strong { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--ag-ink); }

/* Su due righe la freccia punterebbe dal nulla al primo passo della seconda. */
@media (max-width: 1199.98px) {
	.ag-info-testo ol.ag-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ag-info-testo .ag-passi li + li::after { display: none; }
}

@media (max-width: 575.98px) {
	.ag-info-testo ol.ag-passi { grid-template-columns: minmax(0, 1fr); }
}

/* Le domande a scomparsa della FAQ: <details><summary>domanda</summary>...</details>. */
.ag-info-testo details { border-top: 1px solid var(--ag-line); }
.ag-info-testo details:last-child { border-bottom: 1px solid var(--ag-line); }

.ag-info-testo summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	font-weight: 600;
	font-size: 15.5px;
	cursor: pointer;
}

.ag-info-testo summary::-webkit-details-marker { display: none; }

/* Il «+» che diventa «−»: disegnato, non preso dal font delle icone, che
   dentro ::after non sempre arriva. */
.ag-info-testo summary::after {
	content: "+";
	margin-left: auto;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--ag-ink-soft);
}

.ag-info-testo details[open] > summary::after { content: "\2212"; color: var(--ag-accent); }
.ag-info-testo details > :not(summary) { margin: 0 0 14px; }
.ag-info-testo summary:hover { color: var(--ag-accent-ink); }

/* I testi del 2.3 non ancora riscritti: i titoletti erano <pre>, cioe'
   carattere da codice, e le frasi importanti avevano l'evidenziatore giallo
   scritto nel testo. Si leggono come titoletti e come grassetto. */
.ag-info-testo pre {
	font-family: var(--ag-sans);
	font-size: 16px;
	font-weight: 700;
	white-space: normal;
	margin: 20px 0 6px;
	overflow: visible;
}

.ag-info-testo [style*="background-color"] { background-color: transparent !important; font-weight: 600; }

/* --- pagina Contatti (#35) --------------------------------------------- */
/*
 * Stessa fascia e stesse schede delle pagine di assistenza. La sede in tre
 * colonne separate da un filetto, il modulo con le etichette a sinistra e
 * accanto chi contattare.
 */
.ag-contatti-sede address, .ag-contatti-sede p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: #3B444B; }
.ag-contatti-sede strong { display: block; font-size: 15px; }
.ag-contatti-sede a:not(.ag-contatti-mappa) { display: block; margin-top: 4px; color: #3B444B; }
.ag-contatti-negozio { text-transform: uppercase; letter-spacing: 0.01em; }

@media (min-width: 992px) {
	.ag-contatti-sede > div + div { border-left: 1px solid var(--ag-line); }
}

.ag-contatti-voce { display: flex; gap: 14px; }
.ag-contatti-voce + .ag-contatti-voce { margin-top: 22px; }

.ag-contatti-icona {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FDEFDF;
	color: var(--ag-accent);
	font-size: 16px;
}

.ag-contatti-icona.is-piena { width: 30px; height: 30px; background: var(--ag-accent); color: #FFFFFF; font-size: 13px; }
.ag-contatti-presentazione p { font-size: 13.5px; color: var(--ag-ink-soft); }

.ag-contatti-mappa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: 8px;
	background: #FFF8EF;
	border: 1px solid #F3DDC3;
	color: var(--ag-accent-ink);
	font-size: 14px;
	font-weight: 600;
}

.ag-contatti-mappa:hover { background: #FDEFDF; color: var(--ag-accent-ink); }
.ag-contatti-mappa .fa-chevron-right { font-size: 11px; }

.ag-info-scheda-testa > div > h2 { margin: 0; }
.ag-info-scheda-testa > div > .ag-info-lead { margin: 4px 0 0; }

.ag-contatti-modulo .col-form-label { font-size: 14px; font-weight: 600; text-align: left; }
.ag-contatti-modulo .required .col-form-label::before { content: "* "; color: var(--ag-accent); }
.ag-contatti-modulo .form-control { border-color: var(--ag-line); border-radius: 8px; font-size: 14.5px; padding: 10px 14px; }
.ag-contatti-modulo .form-control:focus { border-color: var(--ag-accent); box-shadow: 0 0 0 3px rgba(201, 122, 20, 0.15); }

/* Captcha a sinistra e invio a destra, sulla stessa riga come nell'esempio;
   sul telefono uno sotto l'altro. */
.ag-contatti-invio { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
/* Il captcha porta lo stile delle etichette della registrazione, maiuscole
   e con l'asterisco dopo: qui parla come le altre etichette del modulo. */
.ag-contatti-invio .ag-campo { margin-bottom: 0; }
.ag-contatti-invio .ag-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ag-ink); }
.ag-contatti-invio .ag-campo.required > .ag-label::before { content: "* "; color: var(--ag-accent); }
.ag-contatti-invio .ag-campo.required > .ag-label::after { content: none; }
.ag-contatti-invio .invalid-feedback { display: block; }
.ag-contatti-invia { margin-left: auto; padding: 12px 26px; font-size: 15px; }
.ag-contatti-invia i { margin-left: 8px; }

.ag-contatti-aiuto { height: 100%; padding-left: 8px; }
.ag-contatti-aiuto .ag-info-aiuto-testa p { font-size: 14px; }

@media (min-width: 992px) {
	.ag-contatti-aiuto { border-left: 1px solid var(--ag-line); padding-left: 28px; }
}

.ag-contatti-recapiti { list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; }

.ag-contatti-recapiti li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #FFF8EF;
}

.ag-contatti-recapiti li + li { margin-top: 8px; }
.ag-contatti-recapiti i { width: 18px; color: var(--ag-accent); }
.ag-contatti-recapiti span { font-weight: 600; }
.ag-contatti-recapiti a { margin-left: auto; color: var(--ag-accent-ink); font-weight: 600; overflow-wrap: anywhere; text-align: right; }

/* --- modulo dei resi (#35) --------------------------------------------- */
/*
 * Le schede del modulo sono quelle delle pagine di assistenza, con le
 * etichette sopra i campi. I tre passi in alto segnano la parte del modulo in
 * cui si sta scrivendo: il modulo e' uno solo.
 */
.ag-resi-passi {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 920px;
	margin: 26px 0 0;
	padding: 14px 20px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid #F3DDC3;
	border-radius: 10px;
}

.ag-resi-passi li { display: flex; align-items: center; gap: 12px; flex: 1; font-size: 12.5px; color: var(--ag-ink-soft); }
.ag-resi-passi li + li::before { content: ""; flex: 0 1 60px; height: 1px; background: var(--ag-line); }
.ag-resi-passi strong { display: block; font-size: 13.5px; color: var(--ag-ink); }

.ag-resi-n {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ag-bg);
	color: var(--ag-muted);
	font-weight: 700;
}

.ag-resi-passi li.is-attivo .ag-resi-n { background: var(--ag-accent); color: #FFFFFF; }
.ag-resi-passi li.is-fatto .ag-resi-n { background: #FDEFDF; color: var(--ag-accent); }

@media (max-width: 767.98px) {
	.ag-resi-passi { display: none; }
}

.ag-resi-scheda h2 { font-size: 20px; margin: 4px 0 2px; }
.ag-resi-scheda .ag-info-lead { margin-bottom: 16px; }
.ag-resi-modulo .form-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.ag-resi-modulo .required .form-label::before { content: none; }
.ag-resi-modulo .required .form-label::after { content: " *"; color: var(--ag-accent); }
.ag-resi-modulo .form-control { border-color: var(--ag-line); border-radius: 8px; font-size: 14.5px; padding: 9px 12px; }
.ag-resi-modulo .form-control:focus { border-color: var(--ag-accent); box-shadow: 0 0 0 3px rgba(201, 122, 20, 0.15); }
.ag-resi-modulo .form-check { font-size: 14px; margin-bottom: 4px; }
.ag-resi-modulo .form-check-input:checked { background-color: var(--ag-accent); border-color: var(--ag-accent); }
.ag-resi-modulo .invalid-feedback { display: block; }
.ag-resi-captcha { margin-top: 18px; }
.ag-resi-captcha .ag-campo { margin-bottom: 0; }
.ag-resi-captcha .ag-label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ag-ink); }
.ag-resi-captcha .ag-campo.required > .ag-label::after { content: " *"; color: var(--ag-accent); }

.ag-resi-invio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; }
.ag-resi-conferma { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px; margin-left: auto; }
.ag-resi-conferma .form-check { margin: 0; font-size: 13.5px; }
.ag-resi-conferma .form-check a { color: var(--ag-accent-ink); }
.ag-resi-invio .ag-contatti-invia { margin-left: 0; background: var(--ag-accent); border-color: var(--ag-accent); }
.ag-resi-invio .ag-contatti-invia:hover { background: var(--ag-accent-ink); border-color: var(--ag-accent-ink); }
.ag-resi-invio .ag-contatti-invia i { margin: 0 8px 0 0; }

.ag-resi-prima ul { list-style: none; margin: 12px 0 0; padding: 14px; border-radius: 8px; background: #FFF8EF; font-size: 13.5px; }
.ag-resi-prima li { position: relative; padding-left: 24px; }
.ag-resi-prima li + li { margin-top: 8px; }
.ag-resi-prima li::before { content: "\2713"; position: absolute; left: 2px; color: var(--ag-accent); font-weight: 700; }
.ag-resi-prima a { color: var(--ag-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ag-resi-verde p { margin: 10px 0 0; font-size: 13.5px; color: var(--ag-ink-soft); }

/* --- mappa del sito (#35) ---------------------------------------------- */
.ag-mappa-schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

@media (max-width: 1199.98px) {
	.ag-mappa-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
	.ag-mappa-schede { grid-template-columns: minmax(0, 1fr); }
}

.ag-mappa-scheda {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 2px 12px rgba(14, 19, 23, 0.04);
}

.ag-mappa-scheda h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.ag-mappa-scheda h2 a { display: flex; align-items: center; gap: 12px; color: var(--ag-ink); }
.ag-mappa-scheda h2 a:hover { color: var(--ag-accent-ink); }
.ag-mappa-scheda ul { list-style: none; margin: 0; padding: 0; }
.ag-mappa-scheda li + li { border-top: 1px solid var(--ag-line); }

.ag-mappa-scheda li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 14px;
	color: #3B444B;
}

/* Il «>» arancione davanti e la freccia in fondo, come nell'esempio. */
.ag-mappa-scheda li a::before { content: "\203A"; color: var(--ag-accent); font-size: 18px; line-height: 1; }
.ag-mappa-scheda li a::after { content: "\203A"; margin-left: auto; color: var(--ag-muted); font-size: 16px; line-height: 1; }
.ag-mappa-scheda li a:hover { color: var(--ag-accent-ink); }

.ag-quick i { color: var(--ag-accent); }

/* --- paginazione -------------------------------------------------------- */
/*
 * Bootstrap la colora di azzurro, e l'azzurro non c'e' in nessun'altra parte
 * del tema. Si veste, non si riscrive il template: il markup e' quello del
 * core e sopravvive cosi' a un aggiornamento.
 */
/* A capo quando le pagine sono tante: a 360 la ricerca «knx» ne numera
   abbastanza da far scorrere la pagina di lato di 62 pixel. */
.pagination { gap: 4px; flex-wrap: wrap; }

.pagination .page-link {
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	color: var(--ag-ink-soft);
	background: var(--ag-surface);
	font-family: var(--ag-mono);
	font-size: 13px;
	padding: 6px 12px;
}

.pagination .page-link:hover {
	border-color: var(--ag-ink);
	color: var(--ag-ink);
	background: var(--ag-surface);
}

.pagination .page-item.active .page-link {
	background: var(--ag-ink);
	border-color: var(--ag-ink);
	color: #FFFFFF;
}

.pagination .page-link:focus { box-shadow: none; }

/* === la scheda prodotto ================================================== */

.ag-scheda {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: start;
}

/* La colonna di sinistra: galleria sopra, schede sotto, stessa larghezza.
   Prima le schede stavano fuori, a tutta pagina: il riquadro d'acquisto si
   sganciava a meta' e sotto restava una fascia vuota alta quanto lui. */
.ag-scheda-main { min-width: 0; }

.ag-scheda-media { display: flex; gap: 12px; }

.ag-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: none;
}

.ag-gallery-thumb {
	width: 64px;
	height: 64px;
	border: 1px solid var(--ag-line);
	border-radius: 6px;
	background: var(--ag-bg);
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ag-gallery-thumb.is-on { border-color: var(--ag-ink); }
.ag-gallery-thumb img { max-width: 100%; max-height: 100%; }

.ag-gallery-main {
	flex: 1;
	min-height: 300px;
	border: 1px solid var(--ag-line);
	border-radius: 8px;
	/* Fondo chiaro, non bianco: su una foto di prodotto scontornata — e qui
	   lo sono quasi tutte — il bianco su bianco fa sparire i bordi
	   dell'oggetto, e un modulo DIN grigio chiaro diventa una macchia. */
	background: var(--ag-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

/* L'altezza si limita, o la casella la detta la miniatura: OpenCart la
   genera a 500x500 e la casella diventava alta 565 per una foto di modulo
   DIN larga meno di un terzo. */
.ag-gallery-main img { max-width: 100%; max-height: 400px; height: auto; width: auto; }
.ag-gallery-vuota { color: var(--ag-muted); font-size: 13px; }
#ag-gallery-img { cursor: zoom-in; }
#ag-gallery-img:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 4px; }

/* Lo zoom: l'immagine a tutto schermo, su fondo scuro come l'app. Un clic
   sull'immagine la porta a grandezza vera, e allora si scorre. */
.ag-zoom {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--ag-dark);
}
.ag-zoom[hidden] { display: none; }
.ag-zoom-tela {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 72px;
	overflow: auto;
}
.ag-zoom-tela img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-in;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.ag-zoom.is-reale .ag-zoom-tela { display: block; text-align: center; }
.ag-zoom.is-reale .ag-zoom-tela img { max-width: none; max-height: none; cursor: zoom-out; }
.ag-zoom-btn {
	position: absolute;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ag-dark-line);
	border-radius: 50%;
	background: var(--ag-dark);
	color: #FFFFFF;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ag-zoom-btn:hover, .ag-zoom-btn:focus-visible { border-color: var(--ag-accent); color: var(--ag-badge-ink); outline: none; }
.ag-zoom-chiudi { top: 12px; right: 12px; }
.ag-zoom-prec { left: 12px; top: 50%; transform: translateY(-50%); }
.ag-zoom-succ { right: 12px; top: 50%; transform: translateY(-50%); }
body.ag-zoom-aperto { overflow: hidden; }
@media (max-width: 575px) {
	.ag-zoom-tela { padding: 64px 8px; }
	.ag-zoom-prec, .ag-zoom-succ { top: auto; bottom: 12px; transform: none; }
}

/* Il riquadro d'acquisto resta agganciato: con otto attributi e una
   descrizione lunga, prezzo e pulsante sparivano dopo due rotelle. */
.ag-scheda-buy {
	position: sticky;
	top: 16px;
	min-width: 0;
	border: 1px solid var(--ag-line);
	border-radius: 8px;
	background: var(--ag-surface);
	padding: 22px;
}

.ag-scheda-titolo { font-size: 23px; line-height: 1.22; margin: 0 0 16px; font-weight: 700; }

/* Il codice, prima riga del titolo e in arancione: e' quello che cerca chi
   compra un pezzo tecnico, ed e' l'accento a due colori delle altre pagine. */
.ag-scheda-codice { display: block; color: var(--ag-accent); font-family: var(--ag-mono); font-size: 0.8em; letter-spacing: 0; margin-bottom: 2px; }

.ag-scheda-stock {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1B7F4B;
	border: 1px solid #CFE7DA;
	background: #F3FAF6;
	border-radius: 6px;
	padding: 11px 14px;
	margin-bottom: 4px;
}

.ag-scheda-stock .ag-dot { background: #1B7F4B; }
.ag-scheda-stock.is-low { color: #C77700; border-color: #F0DEBE; background: #FDF8F0; }
.ag-scheda-stock.is-low .ag-dot { background: #C77700; }
.ag-scheda-stock.is-out { color: var(--ag-ink-soft); border-color: var(--ag-line); background: #FAFAFA; }
.ag-scheda-stock.is-out .ag-dot { background: var(--ag-muted); }

/* Il peso, sotto la disponibilita': un dato di servizio, non un richiamo. */
.ag-scheda-peso { font-size: 13px; color: var(--ag-ink-soft); margin: 2px 0 4px; }

.ag-scheda-prezzo {
	border-top: 1px solid var(--ag-line);
	padding-top: 16px;
	margin-top: 16px;
}

.ag-prezzo-riga {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 13px;
	color: var(--ag-ink-soft);
	margin-bottom: 6px;
}

.ag-prezzo-riga.is-sconto { color: #1B7F4B; font-weight: 600; }

/* Niente filetto fra le righe: uno solo, sopra il blocco. Tre righe corte
   separate da tre righine diventano una tabella, e una tabella di tre voci
   si legge peggio di tre voci. */
.ag-prezzo-riga.is-netto {
	margin-top: 12px;
	color: var(--ag-ink);
	font-weight: 700;
	align-items: center;
}

.ag-prezzo-riga.is-netto .ag-price-net {
	font-size: 30px;
	letter-spacing: -0.01em;
}

/* L'IVA sotto il netto, allineata a destra come il numero a cui si
   riferisce: a sinistra sembrava riferirsi all'etichetta. */
.ag-scheda-prezzo .ag-price-note {
	text-align: right;
	margin-top: 2px;
}

.ag-buy-row { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.ag-buy-row .ag-btn { flex: 1; }

.ag-stepper {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--ag-line);
	border-radius: 4px;
	overflow: hidden;
	background: #FFF;
}

.ag-stepper button {
	width: 38px;
	border: 0;
	background: var(--ag-bg);
	color: var(--ag-ink-soft);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ag-stepper button:hover { background: #E9EBEC; color: var(--ag-ink); }

.ag-stepper input {
	width: 48px;
	border: 0;
	border-left: 1px solid var(--ag-line);
	border-right: 1px solid var(--ag-line);
	text-align: center;
	font-family: var(--ag-mono);
	font-size: 13px;
	background: #FFF;
	color: inherit;
}

.ag-stepper input:focus { outline: 2px solid var(--ag-ink); outline-offset: -2px; }

/* --- le schede ---------------------------------------------------------- */

.ag-tabs {
	margin-top: 28px;
	border: 1px solid var(--ag-line);
	border-radius: 8px;
	background: var(--ag-surface);
	overflow: hidden;
}

/* Senza JavaScript la barra non c'e' e i pannelli restano tutti aperti: e'
   la pagina di prima, che funzionava. */
.ag-tabs-nav { display: none; }
.ag-tabs.is-attivo .ag-tabs-nav {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--ag-line);
	flex-wrap: wrap;
	padding: 0 8px;
	background: var(--ag-surface);
}

.ag-tabs-nav button {
	border: 0;
	background: transparent;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ag-ink-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.ag-tabs-nav button[aria-selected="true"] { color: var(--ag-ink); border-bottom-color: var(--ag-ink); }

.ag-tabs-pannello { padding: 20px 24px 24px; }
.ag-tabs.is-attivo .ag-tabs-pannello { display: none; }
.ag-tabs.is-attivo .ag-tabs-pannello.is-on { display: block; }

.ag-specs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
	margin: 0;
}

.ag-spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ag-line);
}

.ag-spec dt { font-weight: 400; color: var(--ag-ink-soft); font-size: 13.5px; }
.ag-spec dd { margin: 0; font-family: var(--ag-mono); font-size: 13px; text-align: right; }

/* Il testo lungo — descrizione del prodotto, descrizione della categoria —
   prende tutta la larghezza del riquadro che lo contiene.

   Prima c'era un max-width di 75ch, che e' la regola tipografica buona per
   un articolo da leggere di fila. Qui non e' quello: sono schede tecniche
   dentro un riquadro che ha gia' una larghezza decisa, e il limite lasciava
   una fascia vuota a destra che sembrava un difetto, non una scelta.

   Giustificato, e con la sillabazione accesa: senza, l'italiano giustificato
   apre quei fiumi bianchi fra le parole che si vedono nei giornali fatti
   male. La pagina dichiara lang="it", quindi il browser sillaba in italiano. */
.ag-testo {
	line-height: 1.6;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Le tabelle e le immagini dentro la descrizione non si giustificano, e non
   devono sbordare: molte descrizioni arrivano dal sito vecchio con larghezze
   scritte a mano nell'HTML. */
.ag-testo table { max-width: 100%; }
.ag-testo img { max-width: 100%; height: auto; }
.ag-testo td, .ag-testo th { text-align: left; }

.ag-sconti { width: 100%; max-width: 420px; border-collapse: collapse; }
.ag-sconti th, .ag-sconti td { padding: 9px 0; border-bottom: 1px solid var(--ag-line); font-size: 13.5px; }
.ag-sconti th { color: var(--ag-ink-soft); font-weight: 400; text-align: left; }

/* Gli allegati del prodotto. Una riga per file: nome a sinistra, peso
   accanto, azione a destra. Il peso sta vicino al nome e non in fondo
   perche' fa parte dell'identita' del file — un manuale da 40 MB si scarica
   con altro animo — mentre a destra ci va sempre e solo la cosa da cliccare. */
.ag-allegati { list-style: none; margin: 0; padding: 0; }

.ag-allegato {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ag-line);
	font-size: 13.5px;
}

.ag-allegato:last-child { border-bottom: 0; }
.ag-allegato-nome { font-weight: 600; word-break: break-word; }
.ag-allegato-peso { color: var(--ag-ink-soft); white-space: nowrap; }

/* Spinge l'azione a destra qualunque sia la lunghezza del nome. */
.ag-allegato .ag-btn,
.ag-allegato-chiuso { margin-left: auto; }

.ag-allegato-chiuso { color: var(--ag-ink-soft); font-style: italic; white-space: nowrap; }

.ag-btn-piccolo { padding: 5px 11px; font-size: 12px; }

.ag-allegati-invito { margin: 14px 0 0; font-size: 13.5px; }

@media (max-width: 991px) {
	.ag-scheda { grid-template-columns: 1fr; gap: 20px; }
	.ag-scheda-buy { position: static; }
	.ag-specs-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 575px) {
	.ag-scheda-media { flex-direction: column-reverse; }
	.ag-gallery-thumbs { flex-direction: row; flex-wrap: wrap; }
}

/* --- la briciola di pane ------------------------------------------------ */
/*
 * L'ultima voce e' il nome del prodotto, e su un catalogo tecnico i nomi sono
 * frasi intere: «iSMA-B-8I-IP Modulo I/O multiprotocollo con 8 ingressi
 * digitali, connettivita' IP e gateway da Modbus TCP/IP a Modbus RTU/ASCII
 * integrato» manda la barra su due righe e la fa sembrare un paragrafo.
 *
 * Si taglia con i puntini invece di accorciare il testo nel template: il
 * nome intero resta nel markup — per chi indicizza, per chi legge con uno
 * screen reader e per chi copia l'indirizzo — e sparisce solo dalla vista.
 * Tagliarlo in Twig vorrebbe dire buttarlo via davvero.
 *
 * Solo l'ultima voce: le altre sono nomi di categoria, corti, e servono per
 * risalire.
 */
.breadcrumb { flex-wrap: nowrap; overflow: hidden; }

.breadcrumb-item:last-child {
	min-width: 0;
	overflow: hidden;
}

.breadcrumb-item:last-child > a {
	display: block;
	max-width: 52ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.breadcrumb-item:last-child > a { max-width: 24ch; }
}

/* --- moduli del conto: accesso e registrazione --------------------------- */
/*
 * Etichetta sopra il campo, maiuscoletto, campo con un fondo appena piu'
 * chiaro del bianco della scheda. E' il disegno del mockup, ed e' anche il
 * motivo per cui questi moduli non usano il .row/.col-sm-2 del core: con
 * l'etichetta di fianco, un consenso GDPR di quaranta parole diventa una
 * colonna alta e sottile.
 */

.ag-modulo { max-width: 900px; }

.ag-sezione {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ag-muted);
	margin: 0 0 18px;
}

.ag-campo { margin-bottom: 16px; }
.ag-campo:last-child { margin-bottom: 0; }

.ag-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-ink-soft);
	margin-bottom: 6px;
}

/* L'asterisco lo mette il tema, non il core: qui le etichette non sono
 * .form-label, quindi la regola del core non le raggiunge. */
.ag-campo.required > .ag-label:after {
	content: ' *';
	color: var(--ag-accent);
	font-weight: 700;
}

.ag-griglia {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

@media (max-width: 640px) {
	.ag-griglia { grid-template-columns: 1fr; }
}

.ag-panel .ag-campo .form-control,
.ag-panel .ag-campo .form-select { background: #FAFBFB; }

.ag-panel .ag-campo .form-control:focus,
.ag-panel .ag-campo .form-select:focus { background: var(--ag-surface); }

/* --- registrazione (esempio del 28/09/2026) ------------------------------ */

.ag-registra-gia { font-size: 14.5px; }

/* Il modulo sale sulla fascia, come nell'esempio: si vede subito che la
   pagina e' quella, senza scorrere. Solo a colonne affiancate: sul telefono
   coprirebbe il testo, e la fascia resta com'e' nelle altre pagine. */
@media (min-width: 992px) {
	.ag-registra .ag-info-testata { min-height: 260px; padding-bottom: 80px; }
	.ag-registra #content { margin-top: -72px; }
}

.ag-registra-modulo .ag-panel {
	margin-bottom: 14px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(14, 19, 23, 0.06);
}

.ag-registra-titolo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	color: var(--ag-ink);
}

.ag-registra-titolo i { color: var(--ag-accent); font-size: 18px; }

.ag-registra-chiudi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
}

.ag-registra-chiudi .ag-btn { margin-left: auto; padding: 12px 28px; }

/* I tre motivi, a sinistra, senza riquadro: stanno sul fondo della pagina. */
.ag-registra-vantaggi ul { list-style: none; margin: 0; padding: 0; }
.ag-registra-vantaggi li { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.ag-registra-vantaggi li + li { margin-top: 32px; }
.ag-registra-vantaggi .ag-contatti-icona { margin-bottom: 8px; width: 48px; height: 48px; font-size: 19px; }
.ag-registra-vantaggi strong { color: var(--ag-ink); line-height: 1.25; }
.ag-registra-vantaggi span:not(.ag-contatti-icona) { color: var(--ag-ink-soft); }

.ag-registra-perche {
	position: sticky;
	top: 16px;
	padding: 26px 24px;
	border-radius: 14px;
	background: #FDF4EA;
	border: 1px solid #F3DDC3;
}

.ag-registra-perche-icona { display: block; margin-bottom: 14px; color: var(--ag-accent); font-size: 34px; }

.ag-registra-perche h2 { margin: 0 0 16px; font-size: 19px; font-weight: 800; }

.ag-registra-perche h2::before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--ag-accent);
}

.ag-registra-perche ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ag-registra-perche li { position: relative; padding-left: 26px; color: #3B444B; }
.ag-registra-perche li + li { margin-top: 12px; }

.ag-registra-perche li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--ag-accent);
	font-weight: 800;
}

.ag-registra-perche p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #F3DDC3; font-size: 13px; color: var(--ag-ink-soft); }

@media (max-width: 991.98px) {
	.ag-registra-vantaggi ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
	.ag-registra-vantaggi li + li { margin-top: 0; }
	.ag-registra-perche { position: static; }
}

/* --- pagina di accesso --------------------------------------------------- */

.ag-accesso {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto;
	align-items: start;
}

@media (max-width: 860px) {
	.ag-accesso { grid-template-columns: 1fr; }
}

.ag-accesso .ag-panel { padding: 34px; }

.ag-accesso-titolo {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.ag-accesso-sotto {
	font-size: 14px;
	color: var(--ag-ink-soft);
	line-height: 1.5;
	margin: 0 0 26px;
}

/* La pastiglia ambrata del mockup. Stesso colore dell'accento, ma tenuto
 * basso: e' un'etichetta, non un pulsante. */
.ag-pastiglia {
	display: inline-block;
	background: #FBF2E3;
	color: var(--ag-accent-ink);
	border: 1px solid #F0DFC0;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 12px;
	margin-bottom: 14px;
}

.ag-link-accento {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--ag-accent-ink);
	margin-top: 8px;
}

.ag-link-accento:hover { color: var(--ag-accent); text-decoration: underline; }

/* Il pulsante ambrato, per il richiamo secondario: l'azione principale della
 * pagina resta l'accesso, che e' quella nera. */
.ag-btn-accento {
	background: var(--ag-accent);
	border-color: var(--ag-accent);
	color: #FFFFFF;
}

.ag-btn-accento:hover { background: var(--ag-accent-ink); border-color: var(--ag-accent-ink); }

.ag-btn-alto { padding: 12px 18px; font-size: 14px; }

/* --- non spedibile all'estero (estensione agata, event/abroad) ---------- */
.ag-no-estero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 10px 0 0;
	padding: 8px 12px;
	border-left: 3px solid #B45309;
	border-radius: 6px;
	background: #FEF3E2;
	color: #7A3E06;
	font-size: 14px;
}

.ag-no-estero span { color: #5A5148; }
.ag-no-estero.is-riga { display: inline-flex; margin-top: 6px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; }

/* --- l'icona dei preventivi ---------------------------------------------
 * Disegnata sull'esempio del 30/09/2026 (foglio, matita e calcolatrice): Font
 * Awesome non ne ha una cosi'. Il file fa da maschera e il colore e' quello
 * del testo, come per le icone di Font Awesome accanto. */
.ag-ico-preventivo {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask: url(preventivo.svg) center / contain no-repeat;
	mask: url(preventivo.svg) center / contain no-repeat;
}

.ag-icona .ag-ico-preventivo { width: 1.3em; height: 1.3em; }

/* --- lista dei desideri ------------------------------------------------- */
/* Il contatore della richiesta di preventivo (30/09/2026) e' uguale, con
   classi sue: quelle dei desideri le leggono lo script del piede e le suite. */
.ag-wishlist,
.ag-preventivo { position: relative; }
.ag-wishlist:hover,
.ag-preventivo:hover { color: var(--ag-accent); }

.ag-wishlist-n,
.ag-preventivo-n {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ag-accent);
	color: #FFFFFF;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.ag-desideri:hover i { font-weight: 900; color: #C5221F; }

/* Il cuore sulla foto, nelle schede in elenco. */
/* Cuore e preventivo, sulla foto in griglia e sotto la foto in elenco. */
.ag-card-azioni {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ag-desideri-foto { margin: 0; }

.ag-items.is-list .ag-card-azioni {
	position: static;
	flex-direction: row;
	justify-content: center;
	margin-top: 6px;
}

.ag-items.is-list .ag-desideri-foto .ag-desideri { width: 28px; height: 28px; font-size: 13px; }
.ag-chiedi-preventivo:hover { color: var(--ag-accent); }

/* Il prodotto e' gia' nella richiesta di preventivo: l'icona resta arancione,
   come il cuore dei desideri resta rosso (30/09/2026). La decide il server
   (in_quote), e dopo un'aggiunta il gestore in footer.twig. */
.ag-chiedi-preventivo.ag-in-preventivo,
.ag-desideri-foto .ag-desideri.ag-in-preventivo { color: var(--ag-accent); border-color: var(--ag-accent); }

.ag-desideri-foto .ag-desideri {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ag-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ag-ink);
}

/* Nella scheda prodotto il cuore e' un collegamento sotto la riga d'acquisto. */
.ag-link-desideri {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ag-ink);
	font-size: 14px;
	font-weight: 600;
}

.ag-link-desideri:hover { color: var(--ag-accent-ink); }
.ag-link-desideri:hover i { font-weight: 900; color: #C5221F; }

/* Il prodotto e' gia' nei desideri: il cuore resta pieno, anche dopo aver
   cambiato pagina. Lo decide il server (in_wishlist), e dopo un'aggiunta il
   gestore in footer.twig, senza ricaricare. Il peso 900 rende pieno anche
   il cuore vuoto: il pulsante, a fine richiesta, rimette l'HTML che aveva
   prima (button('reset') di common.js), e un cambio d'icona andrebbe perso. */
.ag-desiderato i { font-weight: 900; color: #C5221F; }

/* --- area cliente (esempi del 28/09/2026) ----------------------------------
 *
 * Fascia in alto come le pagine di assistenza, menu a sinistra, la pagina al
 * centro, aiuto a destra. Le pagine con le tabelle (ordini, resi, download)
 * hanno il centro largo e l'aiuto sotto il menu. */

.ag-area-lato > * + * { margin-top: 16px; }

.ag-area-menu,
.ag-area-scheda,
.ag-area-aiuto {
	background: var(--ag-surface);
	border: 1px solid var(--ag-line);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(14, 19, 23, 0.06);
}

/* Il menu */
.ag-area-menu { padding: 18px 14px; }

.ag-area-utente {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 8px 16px;
	border-bottom: 1px solid var(--ag-line);
	margin-bottom: 10px;
	min-width: 0;
}

.ag-area-utente > div { min-width: 0; }

.ag-area-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FDEFDF;
	color: var(--ag-accent);
	font-size: 22px;
}

.ag-area-ciao { display: block; font-size: 12.5px; color: var(--ag-ink-soft); }
.ag-area-utente strong { display: block; font-size: 15px; color: var(--ag-ink); overflow-wrap: anywhere; }
.ag-area-email { display: block; font-size: 12.5px; color: var(--ag-ink-soft); overflow-wrap: anywhere; }

.ag-area-menu ul { list-style: none; margin: 0; padding: 0; }

.ag-area-menu li a,
.ag-area-esci {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--ag-ink);
}

.ag-area-menu li a i,
.ag-area-esci i { width: 18px; text-align: center; color: var(--ag-ink-soft); }

.ag-area-menu li a:hover { background: #F6F7F8; }

.ag-area-menu li a.is-attiva {
	background: #FDEFDF;
	box-shadow: inset 3px 0 0 var(--ag-accent);
	color: var(--ag-accent-ink);
	font-weight: 700;
}

.ag-area-menu li a.is-attiva i { color: var(--ag-accent); }

.ag-area-esci { margin-top: 10px; border-top: 1px solid var(--ag-line); border-radius: 0; padding-top: 14px; }

/* L'aiuto */
.ag-area-aiuto { padding: 22px 20px; background: #FDF4EA; border-color: #F3DDC3; }
.ag-area-aiuto-icona { display: block; color: var(--ag-accent); font-size: 30px; margin-bottom: 10px; }
.ag-area-aiuto h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.ag-area-aiuto p { font-size: 13.5px; color: #3B444B; }

.ag-area-recapiti { list-style: none; margin: 16px 0; padding: 0; font-size: 13.5px; }
.ag-area-recapiti li { display: flex; gap: 12px; }
.ag-area-recapiti li + li { margin-top: 14px; }
.ag-area-recapiti i { width: 18px; margin-top: 3px; text-align: center; color: var(--ag-accent); }
.ag-area-recapiti a { font-weight: 700; color: var(--ag-ink); }
.ag-area-recapiti span { display: block; font-size: 12.5px; color: var(--ag-ink-soft); }
.ag-area-aiuto-vai { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-color: var(--ag-accent); color: var(--ag-accent-ink); }

.ag-area-spunte { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; }
.ag-area-spunte li { position: relative; padding-left: 24px; }
.ag-area-spunte li + li { margin-top: 8px; }
.ag-area-spunte li::before { content: "\2713"; position: absolute; left: 0; color: var(--ag-accent); font-weight: 800; }

/* Le schede della pagina */
.ag-area-scheda { padding: 24px; }
.ag-area-scheda + .ag-area-scheda { margin-top: 16px; }

.ag-area-scheda-testa {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ag-line);
}

.ag-area-scheda-testa .ag-contatti-icona { width: 48px; height: 48px; font-size: 19px; }
.ag-area-scheda-testa h2 { margin: 2px 0 4px; font-size: 20px; font-weight: 800; }
.ag-area-scheda-testa p { margin: 0; font-size: 14px; color: var(--ag-ink-soft); }

.ag-area-sottotitolo { margin: 22px 0 12px; font-size: 15px; font-weight: 700; }
.ag-area-scheda > .ag-area-sottotitolo:first-child { margin-top: 0; }

.ag-area-scheda .ag-campo .form-control,
.ag-area-scheda .ag-campo .form-select { background: #FAFBFB; }

.ag-area-azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--ag-line);
}

.ag-area-azioni .ag-btn:not(.ag-btn-ghost) { padding-left: 24px; padding-right: 24px; }

/* L'interruttore della newsletter, e la scelta dell'indirizzo predefinito */
.ag-area-interruttore {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px;
	border-radius: 10px;
	background: #FDF4EA;
	cursor: pointer;
}

.ag-area-interruttore strong { display: block; margin-bottom: 4px; color: var(--ag-ink); }
.ag-area-interruttore > span > span { display: block; font-size: 13px; color: var(--ag-ink-soft); }
.ag-area-interruttore.is-piccolo { margin-top: 8px; padding: 12px 16px; cursor: default; }
.ag-area-interruttore .form-switch .form-check-input { cursor: pointer; }
.ag-area-scelta { display: flex; gap: 18px; }

.ag-area-cosa { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.ag-area-cosa li { display: flex; gap: 10px; font-size: 13px; }
.ag-area-cosa strong { display: block; color: var(--ag-ink); }
.ag-area-cosa span:not(.ag-contatti-icona) { color: var(--ag-ink-soft); }

@media (max-width: 767.98px) {
	.ag-area-cosa { grid-template-columns: 1fr; }
}

/* Un elenco vuoto: i metodi di pagamento, che qui non si salvano */
.ag-area-vuoto { padding: 12px 0 4px; text-align: center; }

.ag-area-vuoto-icona {
	display: inline-grid;
	place-items: center;
	width: 110px;
	height: 110px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #FDEFDF;
	color: var(--ag-accent);
	font-size: 44px;
}

.ag-area-vuoto h2 { font-size: 20px; font-weight: 800; }
.ag-area-vuoto p { max-width: 46ch; margin: 0 auto; color: var(--ag-ink-soft); }
.ag-area-nessuno { color: var(--ag-ink-soft); }

/* La rubrica */
.ag-area-indirizzi { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; }

.ag-area-indirizzi li {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 16px 14px;
	border: 1px solid var(--ag-line);
	border-radius: 10px;
}

.ag-area-indirizzi li.is-predefinito { border-color: var(--ag-accent); background: #FFFBF6; }
.ag-area-indirizzi address { flex: 1; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }

.ag-area-etichetta {
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ag-accent);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ag-area-indirizzo-azioni { display: flex; gap: 8px; }

/* Cancellare e togliere: la classe btn-danger resta perche' ci si aggancia
   lo script del core; il rosso pieno di Bootstrap no. */
.ag-area .btn-danger.ag-area-elimina {
	border: 1px solid #F1C7C4;
	background: #FFFFFF;
	color: #B3261E;
	font-weight: 600;
}

.ag-area .btn-danger.ag-area-elimina:hover { background: #FDECEA; color: #B3261E; }

/* La lista dei desideri */
.ag-area-desideri { list-style: none; margin: 0; padding: 0; }

.ag-area-desideri li {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
}

.ag-area-desideri li + li { border-top: 1px solid var(--ag-line); }
.ag-area-desideri-foto img { width: 72px; height: 72px; object-fit: contain; }
.ag-area-desideri-stock { font-size: 12.5px; color: var(--ag-ink-soft); }
.ag-area-desideri-prezzo { text-align: right; white-space: nowrap; font-family: var(--ag-mono); }
.ag-area-desideri-prezzo s { display: block; font-size: 12.5px; color: var(--ag-muted); }
.ag-area-desideri-azioni { display: flex; gap: 8px; }
.ag-area-desideri-azioni form { margin: 0; }

@media (max-width: 767.98px) {
	.ag-area-desideri li { grid-template-columns: 56px minmax(0, 1fr); }
	.ag-area-desideri-foto img { width: 56px; height: 56px; }
	.ag-area-desideri-prezzo { text-align: left; }
	.ag-area-desideri-prezzo,
	.ag-area-desideri-azioni { grid-column: 2; }
}

/* Le tabelle degli ordini, dei resi, dei download */
.ag-area-tabella { margin-bottom: 12px; font-size: 14px; }
.ag-area-tabella th { border-bottom: 1px solid var(--ag-line); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ag-ink-soft); background: transparent; }
.ag-area-tabella td { vertical-align: middle; border-color: var(--ag-line); }
.ag-area-tabella tbody tr:hover td { background: #FBFBFC; }

/* Il dettaglio dell'ordine e del reso tengono il contenuto del core: qui si
   ammorbidiscono titoli e tabelle che il core scrive per la sua veste. */
.ag-area-scheda h2,
.ag-area-scheda h3:not(.ag-area-sottotitolo) { font-size: 18px; font-weight: 800; margin: 24px 0 12px; }
.ag-area-scheda .table-bordered > :not(caption) > * > * { border-color: var(--ag-line); }
.ag-area-scheda .table-bordered thead td,
.ag-area-scheda .table-bordered thead th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ag-ink-soft); }

/* --- banner dei cookie (28/09/2026) ---------------------------------------
 *
 * In basso, sopra la pagina, finche' non si sceglie. I due pulsanti sono
 * uguali: rifiutare dev'essere facile quanto accettare (Garante, linee guida
 * del 10/06/2021). Il #cookie di stylesheet.css del core lo voleva centrato e
 * trasparente: qui si riscrive. */

#cookie.ag-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
	background: #FFFFFF;
	border-top: 1px solid var(--ag-line);
	box-shadow: 0 -8px 24px rgba(14, 19, 23, 0.08);
	height: auto;
	padding: 14px 0;
	opacity: 1;
	color: var(--ag-ink);
}
#cookie.ag-cookie div { background: none; color: inherit; font-size: inherit; }
.ag-cookie-riga { display: flex; align-items: center; gap: 20px; }
.ag-cookie-riga p { margin: 0; font-size: 13.5px; color: var(--ag-ink); flex: 1; }
.ag-cookie-scelte { display: flex; gap: 10px; flex-shrink: 0; }
.ag-cookie-scelte .ag-btn { min-width: 110px; justify-content: center; }

@media (max-width: 767px) {
	.ag-cookie-riga { flex-direction: column; align-items: stretch; gap: 12px; }
	.ag-cookie-scelte .ag-btn { flex: 1; }
}

/* --- Le app (#44) -------------------------------------------------------
   La descrizione di un'app e' una pagina che spiega, non una scheda
   tecnica: hero, flusso in tre passi, video, tabelle, domande. Le sezioni
   hanno classi loro (ag-sw-*) perche' arrivano dal campo descrizione del
   prodotto, e qui si decide come si vedono senza stili scritti nell'HTML. */
/* La pagina della licenza di un'app (#44) e il riquadro nell'ordine. */
.ag-licenza { max-width: 760px; }
.ag-licenza-stato { font-weight: 600; }
.ag-licenza-stato.is-emessa { color: #1B7F4B; }
.ag-licenza-modulo .form-control { font-family: var(--ag-mono); }
.ag-licenza-testo { font-family: var(--ag-mono); font-size: 12.5px; }
.ag-licenza-pastiglia { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: #FDF8F0; color: #C77700; }
.ag-licenza-pastiglia.is-emessa { background: #F3FAF6; color: #1B7F4B; }

/* Il download dell'app, sotto il carrello: un pulsante secondario, perche'
   quello che si compra e' la licenza, ma il primo passo e' scaricare. */
.ag-sw-scarica { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ag-line); }
.ag-sw-scarica-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--ag-ink); border-radius: 6px; padding: 11px 14px; font-weight: 700; color: var(--ag-ink); text-decoration: none; }
.ag-sw-scarica-btn:hover { background: var(--ag-ink); color: #FFFFFF; }
.ag-sw-scarica-info { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ag-ink-soft); text-align: center; }
.ag-sw-licenza { display: block; margin-top: 10px; font-size: 13px; color: var(--ag-ink-soft); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.ag-sw-licenza:hover { color: var(--ag-ink); }
.ag-sw-hero { margin: 0 0 32px; }
.ag-sw-hero img,
.ag-sw-video { display: block; width: 100%; height: auto; border-radius: 12px; }
.ag-sw-video { background: var(--ag-dark); }
.ag-sw-sezione { margin: 0 0 40px; }
.ag-sw h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; text-align: left; }
.ag-sw h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; text-align: left; }
.ag-sw code { font-family: var(--ag-mono); font-size: .92em; background: var(--ag-bg); padding: 1px 4px; border-radius: 4px; }
/* Il giustificato del testo lungo, negli elenchi, apriva buchi fra le
   parole delle righe corte. E i link dentro le frasi devono vedersi. */
.ag-sw li { text-align: left; }
.ag-sw p a { color: var(--ag-accent-ink); text-decoration: underline; }

/* Calendario -> Logic2Calendar -> KNX: tre riquadri scuri, con la freccia
   nello spazio fra uno e l'altro. */
.ag-sw-flusso { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ag-sw-flusso li { position: relative; background: var(--ag-dark); color: var(--ag-dark-text); border-radius: 10px; padding: 16px; text-align: left; }
.ag-sw-flusso strong { display: block; color: #FFFFFF; font-size: 16px; margin-bottom: 4px; }
.ag-sw-flusso li + li::before { content: '→'; position: absolute; left: -12px; top: 50%; transform: translate(-50%, -50%); color: var(--ag-accent); font-weight: 700; }

.ag-sw-tabella { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ag-sw-tabella th,
.ag-sw-tabella td { padding: 10px 12px; border-bottom: 1px solid var(--ag-line); vertical-align: top; }
.ag-sw-tabella th { font-size: 13px; color: var(--ag-ink-soft); font-weight: 600; }

.ag-sw-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-sw-griglia > div { border: 1px solid var(--ag-line); border-radius: 10px; padding: 16px; }
.ag-sw-nota { border-left: 3px solid var(--ag-accent); background: var(--ag-bg); padding: 12px 16px; border-radius: 0 8px 8px 0; margin-top: 16px; }

.ag-sw-colonne { columns: 2; column-gap: 32px; padding-left: 18px; }
.ag-sw-colonne li { break-inside: avoid; margin-bottom: 6px; text-align: left; }

.ag-sw-passi { counter-reset: passo; list-style: none; padding: 0; }
.ag-sw-passi li { counter-increment: passo; position: relative; padding: 4px 0 14px 44px; min-height: 32px; text-align: left; }
.ag-sw-passi li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ag-accent); color: #FFFFFF; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.ag-sw-due { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

.ag-sw-file { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ag-sw-file a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ag-line); border-radius: 8px; padding: 10px 14px; font-weight: 600; }
.ag-sw-file a::before { content: 'PDF'; font-family: var(--ag-mono); font-size: 11px; color: var(--ag-accent-ink); border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; }

.ag-sw details { border-bottom: 1px solid var(--ag-line); padding: 12px 0; }
.ag-sw summary { cursor: pointer; font-weight: 600; text-align: left; }
.ag-sw details p { margin: 8px 0 0; }

@media (max-width: 767px) {
	.ag-sw-flusso,
	.ag-sw-griglia,
	.ag-sw-due { grid-template-columns: 1fr; }
	.ag-sw-flusso li + li::before { content: '↓'; left: 50%; top: -12px; }
	.ag-sw-colonne { columns: 1; }
}