/*
 * GS Configuratore Adesivi — stile.
 * Ripreso dal prototipo approvato (versione 12), scoperto sotto .gs-ade-root per non
 * toccare il tema del sito. Niente font esterni: solo pila di sistema, per non aggiungere
 * un'altra risorsa che blocca il rendering (vedi todo-render-blocking).
 */
.gs-ade-root {
	--gsade-ground: #F7F5F3;
	--gsade-surface: #FFFFFF;
	--gsade-ink: #1A1613;
	--gsade-ink-soft: #4A423D;
	--gsade-rule: #CFC7BF;
	--gsade-rule-soft: #EDEDED;
	/* Arancione del brand (--e-global-color-primary sul tema): su bianco fa 3,16:1, sotto la
	   soglia AA per il testo (4,5:1). Va bene per bordi, sfondi tenui e stati selezionati
	   (soglia non-text, 3:1), MAI per lettere: dove l'accento diventa scrittura leggibile
	   (es. lo sfondo del bottone, sotto il bianco) si usa --gsade-accent-t, che sul bianco
	   fa 5,18:1. Stessa coppia già in uso negli altri configuratori gs e nel tema. */
	--gsade-accent: #F0662B;
	--gsade-accent-t: #C2410C;
	--gsade-accent-soft: #FFF2EA;
	--gsade-ambra: #9A6200;
	--gsade-ambra-soft: #FBF1DF;
	--gsade-shadow: 0 1px 2px rgba(22,28,26,.05), 0 10px 30px -18px rgba(22,28,26,.30);

	color: var(--gsade-ink);
	font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: 15.5px;
	line-height: 1.55;
	display: block;
	max-width: 100%;
}
@media (prefers-color-scheme: dark) {
	.gs-ade-root:not([data-theme="light"]) {
		--gsade-ground: #0D1211; --gsade-surface: #161D1B; --gsade-ink: #E6ECEA; --gsade-ink-soft: #96A3A0;
		--gsade-rule: #28322F; --gsade-rule-soft: #1E2624;
		/* Non è lo stesso arancione del chiaro portato pari pari: su fondo quasi nero un
		   arancione più chiaro e vivo resta leggibile (7,7:1 su --gsade-surface), mentre
		   --gsade-accent-t resta scuro apposta perché ci sta sopra testo bianco (bottone). */
		--gsade-accent: #FF9159; --gsade-accent-t: #C2410C; --gsade-accent-soft: #2E1C12;
		--gsade-ambra: #D9A441; --gsade-ambra-soft: #2B2113;
		--gsade-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
	}
}
.gs-ade-root[data-theme="dark"] {
	--gsade-ground: #0D1211; --gsade-surface: #161D1B; --gsade-ink: #E6ECEA; --gsade-ink-soft: #96A3A0;
	--gsade-rule: #28322F; --gsade-rule-soft: #1E2624;
	--gsade-accent: #FF9159; --gsade-accent-t: #C2410C; --gsade-accent-soft: #2E1C12;
	--gsade-ambra: #D9A441; --gsade-ambra-soft: #2B2113;
	--gsade-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
}

.gs-ade-root *, .gs-ade-root *::before, .gs-ade-root *::after { box-sizing: border-box; }
/* Alcune classi qui sotto impostano "display" (griglie flex): senza questa regola
   vincono sulla regola predefinita del browser per l'attributo hidden, e un blocco
   nascosto dal JS resterebbe visibile lo stesso. */
.gs-ade-root [hidden] { display: none !important; }
.gs-ade-root .gs-ade-loading { color: var(--gsade-ink-soft); padding: 1.5rem 0; }
.gs-ade-root .mono { font-variant-numeric: tabular-nums; }

.gs-ade-root .gs-ade-cols { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 53rem) { .gs-ade-root .gs-ade-cols { grid-template-columns: 1fr 19rem; align-items: start; } }

.gs-ade-root .gs-ade-card {
	background: var(--gsade-surface); border: 1px solid var(--gsade-rule); border-radius: 11px;
	box-shadow: var(--gsade-shadow);
}
.gs-ade-root .gs-ade-conf { padding: 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 1.5rem; }

.gs-ade-root fieldset { border: 0; margin: 0; padding: 0; }
.gs-ade-root legend { font-size: .95rem; font-weight: 600; padding: 0; margin-bottom: .15rem; }
.gs-ade-root .gs-ade-aiuto { color: var(--gsade-ink-soft); font-size: .83rem; margin: .1rem 0 .6rem; }

.gs-ade-root .gs-ade-opts { display: flex; flex-direction: column; gap: .4rem; }
.gs-ade-root .gs-ade-opts.gs-ade-riga { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.gs-ade-root label.gs-ade-opt {
	display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--gsade-rule);
	border-radius: 8px; cursor: pointer; background: var(--gsade-surface); transition: border-color .12s, background .12s;
}
.gs-ade-root label.gs-ade-opt:hover { border-color: var(--gsade-accent); }
.gs-ade-root label.gs-ade-opt:has(input:checked) { border-color: var(--gsade-accent); background: var(--gsade-accent-soft); }
.gs-ade-root label.gs-ade-opt:has(input:focus-visible) { outline: 2px solid var(--gsade-accent); outline-offset: 2px; }
.gs-ade-root label.gs-ade-opt:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.gs-ade-root .gs-ade-opts.gs-ade-riga label.gs-ade-opt { flex: 1 1 7rem; justify-content: center; text-align: center; }
.gs-ade-root input[type="radio"] { accent-color: var(--gsade-accent); margin: .2rem 0 0; flex: none; }
.gs-ade-root .gs-ade-opts.gs-ade-riga input[type="radio"] { display: none; }
.gs-ade-root .gs-ade-ttl { font-weight: 500; }
.gs-ade-root .gs-ade-sub { display: block; color: var(--gsade-ink-soft); font-size: .8rem; line-height: 1.35; margin-top: .1rem; }

/* Un disegno solo dove la parola non basta: taglio e forma. Altrove il testo basta. */
.gs-ade-root .gs-ade-dis { flex: none; width: 52px; height: 52px; display: block; margin-top: .1rem; }
.gs-ade-root .gs-ade-dis .supporto { fill: var(--gsade-rule-soft); stroke: var(--gsade-ink-soft); stroke-width: 1.2; }
.gs-ade-root .gs-ade-dis .corpo { fill: var(--gsade-accent); opacity: .28; stroke: var(--gsade-accent); stroke-width: 1.4; }
.gs-ade-root .gs-ade-dis .taglio { fill: none; stroke: var(--gsade-accent); stroke-width: 1.5; stroke-dasharray: 3 2.2; }
.gs-ade-root .gs-ade-dis .sfondo { stroke: var(--gsade-ink-soft); stroke-width: 1.1; opacity: .5; }
.gs-ade-root .gs-ade-dis .pieno { fill: var(--gsade-accent); }
.gs-ade-root .gs-ade-dis .velato { fill: var(--gsade-accent); opacity: .32; }
.gs-ade-root .gs-ade-dis .inchiostro-bianco { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.gs-ade-root .gs-ade-dis .soggetto { fill: var(--gsade-accent); opacity: .30; stroke: var(--gsade-accent); stroke-width: 1.1; }
.gs-ade-root .gs-ade-dis .mezzotaglio { fill: none; stroke: var(--gsade-accent); stroke-width: 1.1; stroke-dasharray: 2.2 1.8; }

.gs-ade-root .gs-ade-liberatoria { align-items: flex-start; }
.gs-ade-root .gs-ade-liberatoria input[type="checkbox"] { accent-color: var(--gsade-accent); margin: .25rem 0 0; flex: none; width: 1rem; height: 1rem; }

.gs-ade-root .gs-ade-dis-f { width: 40px; height: 40px; display: block; margin: 0 auto .15rem; }
.gs-ade-root .gs-ade-dis-f .f-corpo { fill: var(--gsade-accent); opacity: .22; stroke: var(--gsade-accent); stroke-width: 1.6; }
.gs-ade-root label.gs-ade-opt:has(input:checked) .gs-ade-dis-f .f-corpo { opacity: .42; }
.gs-ade-root .gs-ade-opts.gs-ade-forme label.gs-ade-opt { flex-direction: column; align-items: center; gap: .1rem; }

.gs-ade-root .gs-ade-avviso {
	margin: .55rem 0 0; font-size: .82rem; color: var(--gsade-ambra);
	background: var(--gsade-ambra-soft); padding: .5rem .7rem; border-radius: 7px;
}

.gs-ade-root .gs-ade-misura { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .55rem; }
.gs-ade-root .gs-ade-campo { display: flex; flex-direction: column; gap: .25rem; }
.gs-ade-root .gs-ade-campo span { font-size: .78rem; color: var(--gsade-ink-soft); }
.gs-ade-root input[type="number"] {
	font: inherit; width: 8rem; padding: .45rem .55rem;
	border: 1px solid var(--gsade-rule); border-radius: 7px; background: var(--gsade-surface); color: var(--gsade-ink);
}
.gs-ade-root input[type="number"]:focus-visible { outline: 2px solid var(--gsade-accent); outline-offset: 1px; }

/* la griglia degli scaglioni */
.gs-ade-root .gs-ade-griglia { display: flex; flex-direction: column; gap: .3rem; }
.gs-ade-root label.gs-ade-q {
	display: grid; grid-template-columns: 1.2rem 4.6rem 1fr auto; gap: .6rem; align-items: center;
	padding: .5rem .7rem; border: 1px solid var(--gsade-rule); border-radius: 8px; cursor: pointer;
}
.gs-ade-root label.gs-ade-q:hover { border-color: var(--gsade-accent); }
.gs-ade-root label.gs-ade-q:has(input:checked) { border-color: var(--gsade-accent); background: var(--gsade-accent-soft); }
.gs-ade-root label.gs-ade-q:has(input:focus-visible) { outline: 2px solid var(--gsade-accent); outline-offset: 2px; }
.gs-ade-root .gs-ade-q-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.gs-ade-root .gs-ade-q-tot { font-weight: 600; }
.gs-ade-root .gs-ade-q-risp {
	font-size: .76rem; color: var(--gsade-ambra); background: var(--gsade-ambra-soft); padding: .12rem .45rem;
	border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.gs-ade-root .gs-ade-q-cad { font-size: .76rem; color: var(--gsade-ink-soft); }
.gs-ade-root .gs-ade-q-riga { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }

/* riepilogo */
.gs-ade-root .gs-ade-riep {
	padding: 1.2rem 1.3rem; position: sticky;
	/* --gsade-header-h la misura gs-ade.js sull'header REALE del sito (.gs-header, anch'esso
	   sticky, altezza variabile): senza, il riquadro si blocca a un top fisso e finisce
	   sotto la barra, che lo copre. 0px finché il JS non è ancora passato (stesso 1rem di
	   prima, nessuna regressione nel frattempo). */
	top: calc(var(--gsade-header-h, 0px) + 1rem);
	display: flex; flex-direction: column; gap: .15rem;
}
.gs-ade-root .gs-ade-voce {
	display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--gsade-ink-soft);
	padding: .28rem 0; border-bottom: 1px solid var(--gsade-rule-soft);
}
.gs-ade-root .gs-ade-voce span:last-child { color: var(--gsade-ink); white-space: nowrap; }
.gs-ade-root .gs-ade-tot { font-size: 2.15rem; font-weight: 700; letter-spacing: -.02em; margin: .7rem 0 0; line-height: 1; }
.gs-ade-root .gs-ade-cad { color: var(--gsade-ink-soft); font-size: .87rem; }
.gs-ade-root .gs-ade-pronto { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--gsade-rule); font-size: .87rem; display: flex; flex-direction: column; }
.gs-ade-root .gs-ade-pronto-sub { color: var(--gsade-ink-soft); font-size: .8rem; margin-top: .2rem; }
.gs-ade-root .gs-ade-bottone {
	/* sfondo, non bordo: qui l'arancione porta sopra del testo bianco, quindi la variante
	   scura (--gsade-accent-t), non --gsade-accent che sul bianco non basterebbe (3,16:1). */
	margin-top: 1rem; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 8px; background: var(--gsade-accent-t);
	color: #fff; font: 600 .95rem/1 inherit; cursor: pointer;
}
.gs-ade-root .gs-ade-bottone:hover { filter: brightness(.9); }
.gs-ade-root .gs-ade-bottone:disabled { opacity: .6; cursor: wait; }
.gs-ade-root .gs-ade-bottone:focus-visible { outline: 2px solid var(--gsade-ink); outline-offset: 2px; }
.gs-ade-root .gs-ade-dopo { margin: .55rem 0 0; font-size: .78rem; color: var(--gsade-ink-soft); text-align: center; }
.gs-ade-root .gs-ade-errore {
	margin: .55rem 0 0; font-size: .82rem; color: #B3261E; background: #FBEAE9; padding: .5rem .7rem; border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) { .gs-ade-root * { transition: none !important; } }

/*
 * Le schede sotto (Descrizione, Come preparare il file, Consegna e resa, Recensioni) sono
 * i tab NATIVI di WooCommerce (.woocommerce-Tabs-panel), fuori da .gs-ade-root: il tema non
 * gli dà respiro laterale e il testo resta attaccato al bordo. Questo foglio carica SOLO
 * sulle pagine rivendicate dal configuratore adesivi (gs_ade_enqueue, chiamata solo se
 * gs_ade_claims($pid)): la regola qui sotto non può quindi "uscire" e toccare i tab di
 * altri prodotti — è lo stesso scoping-per-caricamento, non per selettore, che tiene
 * separati i due configuratori nella pagina.
 *
 * Il selettore non bastava: WooCommerce ha già una sua regola più specifica,
 * ".woocommerce div.product .woocommerce-tabs .panel" (woocommerce.css), che azzera
 * padding e margine sullo stesso elemento (ha 4 classi + 1 tipo contro le nostre 2 classi:
 * vince per specificità, non per ordine di caricamento). Rispecchiamo la stessa catena di
 * antenati aggiungendo ".type-product" — classe reale che WordPress mette già su ogni
 * pagina prodotto — per superarla di un punto, senza !important e senza toccare l'HTML.
 */
.woocommerce div.product.type-product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: 0 1.25rem;
}
@media (max-width: 480px) {
	.woocommerce div.product.type-product .woocommerce-tabs .woocommerce-Tabs-panel {
		padding: 0 1rem;
	}
}