/* =========================================================================
   Attributi, varianti e quantità.
   -------------------------------------------------------------------------
   Si carica su ogni scheda prodotto, anche quando la disegna il plugin.

   QUI C'È L'UNICA ECCEZIONE DEL TEMA OLTRE ALLA LARGHEZZA, e vale la pena
   spiegarla bene.

   I pulsanti che il tema costruisce — varianti e quantità — vivono **dentro**
   `.pdg-isolate`, e lì il plugin azzera ogni elemento con
   `all: revert !important`, con tre classi ripetute: (0,3,1). Un `button`
   nostro con una classe sola perde e torna a essere un pulsante di sistema.
   Non è il plugin che ci contrasta: è la sua corazza che fa il proprio lavoro
   su elementi che, quando è stata scritta, non esistevano.

   Quindi i **nostri** componenti si difendono ripetendo la **nostra** classe
   quattro volte — (0,4,0), che supera (0,3,1) — e mai ripetendo una classe del
   plugin. La differenza conta: non stiamo scavalcando una sua scelta di stile,
   stiamo rivendicando elementi che sono nostri. Nessuna regola qui dentro
   tocca `.pdg-chip`, `.pdg-btn` o altri suoi componenti.

   Un solo punto fa eccezione all'eccezione: la larghezza del campo quantità,
   che il plugin dichiara davvero — `.pdg-single__cart .quantity input`,
   (0,7,0) — e che va stretta. Otto ripetizioni, poche proprietà, e basta.
   ========================================================================= */

/* ------------------------------------------- Struttura delle varianti --- */

/* Etichetta sopra, pulsanti sotto, tutto a sinistra.
   La tabella di WooCommerce metteva l'etichetta in una colonna e i pulsanti
   nell'altra: due blocchi che non si parlavano, ed è quello che si vedeva.
   `display` è una delle poche proprietà che il plugin non dichiara su `th` e
   `td`, quindi qui basta una classe sola. */
.pdgt-variations,
.pdgt-variations tbody,
.pdgt-variations tr,
.pdgt-variations th,
.pdgt-variations td {
	display: block;
	width: auto;
}
.pdgt-variations tr + tr { margin-top: .9rem; }
.pdgt-variations td { margin-top: .35rem; }

/* Anche il contenitore va difeso, non solo i pulsanti.
   `.pdgt-swatches` è un `div`, e `all: revert !important` gli toglie `display`
   e `gap`: i pulsanti tornavano elementi in fila, attaccati. Difendere i figli
   e lasciare scoperto il padre è esattamente l'errore che si vedeva. */
.pdgt-swatches.pdgt-swatches.pdgt-swatches.pdgt-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .5rem !important;
	align-items: center !important;
}

/* -------------------------------------------- Pulsanti delle varianti -- */

.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 42px !important;
	padding: 0 1.15rem !important;
	border: 1px solid var(--pdgt-line, rgba(120, 100, 89, .12)) !important;
	border-radius: 10px !important;
	background: var(--pdgt-warm-white, #FFFDFC) !important;
	font-family: var(--pdgt-sans, system-ui, sans-serif) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	color: var(--pdgt-ink, #786459) !important;
	cursor: pointer !important;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch:hover {
	border-color: var(--pdgt-taupe, #B8A79C) !important;
}
.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch.is-on {
	background: var(--pdgt-ink, #786459) !important;
	border-color: var(--pdgt-ink, #786459) !important;
	color: var(--pdgt-warm-white, #FFFDFC) !important;
}
.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch[disabled] {
	opacity: .3 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	text-decoration: line-through !important;
}
.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch:focus-visible {
	outline: 2px solid var(--pdgt-taupe, #B8A79C) !important;
	outline-offset: 2px !important;
}

/* Il collegamento «cancella» di WooCommerce: sotto i pulsanti, piccolo e a
   sinistra, non centrato come se fosse un titolo. */
.pdgt-variations.pdgt-variations.pdgt-variations.pdgt-variations .reset_variations {
	display: inline-block !important;
	margin-top: .5rem !important;
	font-size: 9.5px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	opacity: .65 !important;
}

/* -------------------------------------------------------- La quantità -- */

/* `align-self: stretch` invece di un'altezza scritta a mano.
   Il pulsante «aggiungi al carrello» lo veste il plugin, con la sua
   spaziatura: qualunque numero mettessimo qui sarebbe giusto oggi e sbagliato
   al primo aggiornamento. Stirando la scatola sulla riga, le due altezze
   coincidono da sole — e restano uguali anche se cambia il pulsante. */
.pdgt-qty.pdgt-qty.pdgt-qty.pdgt-qty {
	display: inline-flex !important;
	align-items: stretch !important;
	align-self: stretch !important;
	min-height: 48px !important;
	border: 1px solid var(--pdgt-line, rgba(120, 100, 89, .12)) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: var(--pdgt-warm-white, #FFFDFC) !important;
}

.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: auto !important;
	align-self: stretch !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-family: var(--pdgt-sans, system-ui, sans-serif) !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--pdgt-ink, #786459) !important;
	cursor: pointer !important;
	transition: background-color .3s ease !important;
}
.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn:hover {
	background: var(--pdgt-ivory, #F8F3F0) !important;
}

/* Otto ripetizioni: qui il plugin dichiara davvero larghezza, spaziatura e
   raggio del campo, e un campo da 78 px con 999 px di raggio in mezzo a due
   pulsanti squadrati non sta insieme. */
.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input.pdgt-qty__input {
	width: 42px !important;
	height: auto !important;
	align-self: stretch !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center !important;
	background: none !important;
	font-size: 13px !important;
	-moz-appearance: textfield !important;
}
.pdgt-qty__input::-webkit-outer-spin-button,
.pdgt-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------- Gli attributi -- */

.pdgt-attrs.pdgt-attrs.pdgt-attrs.pdgt-attrs { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .9rem !important; }
.pdgt-attrs--inline.pdgt-attrs--inline.pdgt-attrs--inline.pdgt-attrs--inline { margin-top: 1.1rem !important; }

.pdgt-attr.pdgt-attr.pdgt-attr.pdgt-attr { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .4rem !important; }
.pdgt-attr__label.pdgt-attr__label.pdgt-attr__label.pdgt-attr__label {
	font-size: var(--pdgt-t-micro, .625rem) !important;
	font-weight: 700 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--pdgt-ink-faint, rgba(120, 100, 89, .62)) !important;
}
.pdgt-attr__values.pdgt-attr__values.pdgt-attr__values.pdgt-attr__values {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .35rem !important;
}

.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: .35rem !important;
	min-height: 34px !important;
	padding: 0 .8rem !important;
	border: 1px solid var(--pdgt-line, rgba(120, 100, 89, .12)) !important;
	border-radius: 10px !important;
	background: none !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--pdgt-ink, #786459) !important;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip[href]:hover {
	background: var(--pdgt-ink, #786459) !important;
	border-color: var(--pdgt-ink, #786459) !important;
	color: var(--pdgt-warm-white, #FFFDFC) !important;
}

/* La freccia dice che si va da qualche parte: senza, una pastiglia cliccabile
   e una decorativa sono identiche. */
.pdgt-attr__chip[href]::after {
	content: "→";
	font-size: 1.05em;
	opacity: .45;
}

/* Quelle non collegate — peso, dimensioni, attributi liberi — restano
   tratteggiate, e si vede che non portano da nessuna parte. */
.pdgt-attr__chip--flat.pdgt-attr__chip--flat.pdgt-attr__chip--flat.pdgt-attr__chip--flat {
	border-style: dashed !important;
	color: var(--pdgt-ink-faint, rgba(120, 100, 89, .62)) !important;
	cursor: default !important;
}

@media (prefers-reduced-motion: reduce) {
	.pdgt-swatch.pdgt-swatch.pdgt-swatch.pdgt-swatch,
	.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn.pdgt-qty__btn,
	.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip.pdgt-attr__chip { transition-duration: .001ms !important; }
}


/* =========================================================================
   La riga d'acquisto e il riquadro della variante scelta
   ========================================================================= */

/* Quantità e pulsante sulla stessa riga, alti uguali.
   Di serie stanno in un `div` che il plugin azzera: senza questa regola il
   pulsante finisce più alto della quantità, e si vede. */
.pdgt-buy.pdgt-buy.pdgt-buy.pdgt-buy {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: .6rem !important;
	margin-top: .9rem !important;
}

/* Finché WooCommerce non ha una variante da mostrare, il riquadro resta
   chiuso.

   Serve una regola apposta perché qui si incrociano due cose: WooCommerce
   nasconde e mostra il riquadro con uno stile **in linea**, e un `!important`
   d'autore — il nostro `display: grid`, ma anche l'`all: revert` del plugin —
   passa sopra a uno stile in linea senza `!important`. Senza questa riga il
   riquadro resterebbe aperto e vuoto prima di ogni scelta. Lo stato lo scrive
   `attributes.js`, che guarda insieme l'attributo `style` e il contenuto. */
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation.is-empty {
	display: none !important;
}

/* Il riquadro che compare quando una variante è scelta.
   Prima erano tre righe di testo sciolte — descrizione, prezzo,
   disponibilità — indistinguibili dal resto della colonna. Ora sono un
   riquadro che si accende: è la conferma che la scelta ha avuto effetto, ed è
   il momento in cui si guarda il prezzo. */
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation {
	position: relative !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: .5rem !important;
	margin-top: .9rem !important;
	padding: 1rem 1.15rem !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--pdgt-ivory, #F8F3F0) !important;
	overflow: hidden !important;
	animation: pdgt-variation-in .45s cubic-bezier(.22, 1, .36, 1) !important;
}

/* Il filo verticale a sinistra: dice «questo riquadro riguarda la scelta che
   hai appena fatto» senza aggiungere una parola. */
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 auto 0 0 !important;
	width: 3px !important;
	background: var(--pdgt-nude, #D9B6A5) !important;
}

@keyframes pdgt-variation-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-description,
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-description p {
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.55 !important;
	color: var(--pdgt-ink-soft, rgba(120, 100, 89, .82)) !important;
}

.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-price {
	display: flex !important;
	align-items: baseline !important;
	gap: .6rem !important;
	flex-wrap: wrap !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-price .price,
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-price .amount {
	font-family: var(--pdgt-display, Georgia, serif) !important;
	font-size: 1.65rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--pdgt-ink, #786459) !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-price del,
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-price del .amount {
	font-size: .95rem !important;
	font-weight: 400 !important;
	color: var(--pdgt-ink-faint, rgba(120, 100, 89, .62)) !important;
	text-decoration: line-through !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-Price-currencySymbol {
	font-size: .72em !important;
}

/* La disponibilità diventa una pastiglia con il pallino: verde se c'è, taupe
   se è in arrivo. Una riga di testo grigio non la guarda nessuno. */
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .woocommerce-variation-availability p,
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .stock {
	display: inline-flex !important;
	align-items: center !important;
	gap: .45rem !important;
	margin: 0 !important;
	padding: .3rem .7rem !important;
	border-radius: 999px !important;
	background: var(--pdgt-warm-white, #FFFDFC) !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--pdgt-ink-soft, rgba(120, 100, 89, .82)) !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .stock::before {
	content: "" !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--pdgt-taupe, #B8A79C) !important;
	flex: none !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .stock.in-stock::before {
	background: #5F7A62 !important;
}
.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation .stock.out-of-stock::before {
	background: #B0554D !important;
}

@media (prefers-reduced-motion: reduce) {
	.pdgt-variation.pdgt-variation.pdgt-variation.pdgt-variation { animation: none !important; }
}