/*!
 * Scheda prodotto a codice.
 *
 * La radice .ds-prodotto porta la specificita' (0,1,0) e tutto cio' che sta
 * dentro viaggia in :where(), che non ne aggiunge. Cosi' le regole battono i
 * selettori di elemento dei fogli di Kadence, che vengono stampati dopo questo
 * file, senza inseguire con !important e senza poter sfuggire sul resto del
 * sito. Per alzare una singola regola basta togliere il suo :where().
 *
 * Convive con il foglio WooCommerce di Kadence e con custom.css, che in questa
 * fase non vengono tolti.
 */

.ds-prodotto {
	font-family: var(--ds-font);
	font-size: var(--ds-corpo);
	line-height: var(--ds-interlinea);
	color: var(--ds-inchiostro);
	background: var(--ds-fondo);
}

.ds-prodotto * {
	box-sizing: border-box;
}

.ds-prodotto :where(.ds-prodotto__contenitore) {
	max-width: var(--ds-larghezza);
	margin-inline: auto;
	padding-inline: var(--ds-margine-laterale);
	padding-block: 12px var(--ds-sp-16);
}

/* ---------- briciole di pane ---------- */

.ds-prodotto :where(.ds-prodotto__briciole) {
	font-size: 12px;
	color: var(--ds-grigio);
	margin: 0;
}

.ds-prodotto :where(.ds-prodotto__briciole) ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Separatore disegnato dal CSS: non finisce nel testo copiato ne' letto a voce. */
.ds-prodotto :where(.ds-prodotto__briciole) li + li::before {
	content: ">";
	margin-inline-end: var(--ds-sp-2);
	color: inherit;
}

.ds-prodotto :where(.ds-prodotto__briciole) a {
	color: inherit;
	text-decoration: none;
}

.ds-prodotto :where(.ds-prodotto__briciole) a:hover {
	text-decoration: underline;
}

/* ---------- impianto a due colonne ---------- */

.ds-prodotto :where(.ds-prodotto__blocco) {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.ds-prodotto :where(.ds-prodotto__griglia) {
	display: grid;
	/*
	 * Stacco diverso fra colonne e righe: i 60 px separano la galleria dalla
	 * colonna d'acquisto, fra le righe ne bastano 16.
	 */
	column-gap: var(--ds-colonne-stacco);
	row-gap: var(--ds-sp-4);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/*
	 * Le aree servono per le briciole: nel codice stanno prima di tutto, cosi'
	 * chi naviga con la tastiera o con lo screen reader incontra il percorso
	 * all'inizio. A schermo largo pero' vanno in testa alla colonna d'acquisto,
	 * come sul sito, e la galleria parte dalla stessa riga.
	 */
	grid-template-areas:
		"media briciole"
		"media acquisto";
	grid-template-rows: auto 1fr;
	align-items: start;
}

.ds-prodotto :where(.ds-prodotto__briciole) {
	grid-area: briciole;
}

.ds-prodotto :where(.ds-prodotto__media) {
	grid-area: media;
}

.ds-prodotto :where(.ds-prodotto__acquisto) {
	grid-area: acquisto;
}

/* Impilate: il percorso sopra alla galleria, come si legge nel codice. */
@media (max-width: 991.98px) {
	.ds-prodotto :where(.ds-prodotto__griglia) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"briciole"
			"media"
			"acquisto";
	}
}

/*
 * Kadence dispone la scheda WooCommerce a due blocchi affiancati con il float,
 * e quelle regole scattano per la classe .product che serve ai plugin. Qui il
 * layout lo fa la griglia, quindi il float va tolto. Selettore esplicito,
 * senza :where(): deve battere .woocommerce div.product div.images.
 */
.ds-prodotto.woocommerce div.images,
.ds-prodotto.woocommerce div.summary,
.ds-prodotto.woocommerce div.product div.images,
.ds-prodotto.woocommerce div.product div.summary {
	float: none;
	width: 100%;
	margin: 0;
	clear: none;
}

.ds-prodotto :where(.ds-prodotto__media) img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ds-raggio);
}

/* ---------- colonna acquisto ---------- */

.ds-prodotto :where(.ds-prodotto__titolo) {
	font-size: var(--ds-titolo);
	font-weight: var(--ds-peso-forte);
	line-height: 1.19;
	letter-spacing: 3.2px;
	text-transform: uppercase;
	margin: 0;
}

.ds-prodotto :where(.ds-prodotto__prezzo) {
	display: flex;
	align-items: center;
	gap: var(--ds-sp-4);
	font-size: 1.5rem;
	font-weight: var(--ds-peso-medio);
	margin: var(--ds-sp-6) 0 0;
}

/* La riga che sul sito corre dal prezzo al bordo della colonna. */
.ds-prodotto :where(.ds-prodotto__prezzo)::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ds-inchiostro);
}

.ds-prodotto :where(.ds-prodotto__sommario) {
	color: var(--ds-inchiostro-tenue);
	margin-block-end: var(--ds-sp-6);
}

.ds-prodotto :where(.ds-prodotto__modulo) {
	margin-block-start: var(--ds-sp-6);
}

.ds-prodotto :where(.ds-prodotto__modulo) form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/*
 * WooCommerce mette due pseudo-elementi di clearfix dentro il modulo. In un
 * contenitore flex diventano due caselle larghe zero, e lo stacco finisce per
 * spingere dentro la quantita' e mandare a capo il resto: per questo il modulo
 * era alto 80 px invece di 50 e partiva trenta pixel piu' a destra del testo.
 * Selettore esplicito, deve battere .woocommerce div.product form.cart::before.
 */
.ds-prodotto.woocommerce div.product form.cart::before,
.ds-prodotto.woocommerce div.product form.cart::after {
	content: none;
}

.ds-prodotto :where(.ds-prodotto__modulo) form.variations_form {
	display: block;
}

/* Tabella delle varianti: tolgo l'aspetto da tabella, i riquadri li mette greenshiftwoo. */
.ds-prodotto :where(.ds-prodotto__modulo) table.variations,
.ds-prodotto :where(.ds-prodotto__modulo) table.variations tbody,
.ds-prodotto :where(.ds-prodotto__modulo) table.variations tr,
.ds-prodotto :where(.ds-prodotto__modulo) table.variations th,
.ds-prodotto :where(.ds-prodotto__modulo) table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.ds-prodotto :where(.ds-prodotto__modulo) table.variations th.label {
	font-weight: var(--ds-peso-medio);
	margin-block-end: var(--ds-sp-2);
}

.ds-prodotto :where(.ds-prodotto__modulo) table.variations td.value {
	margin-block-end: var(--ds-sp-6);
}

.ds-prodotto :where(.ds-prodotto__modulo) .selected-color {
	font-weight: var(--ds-peso-normale);
	color: var(--ds-inchiostro-tenue);
}

.ds-prodotto :where(.ds-prodotto__modulo) .quantity {
	flex: 0 0 162px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	margin: 0;
	padding-inline: var(--ds-sp-2);
	border: 1px solid var(--ds-linea-campo);
	border-radius: var(--ds-raggio-pieno);
	background: var(--ds-fondo);
}

.ds-prodotto :where(.ds-prodotto__modulo) .quantity input {
	border: 0;
	background: none;
	text-align: center;
	font-size: 1.125rem;
	color: var(--ds-grigio);
	-moz-appearance: textfield;
}

/*
 * Il bottone va scritto con un selettore forte: le regole di Kadence su
 * .woocommerce div.product form.cart .button valgono (0,3,2) e battevano le
 * nostre, imponendo corpo 20 px, riempimento 12/18 e raggio 50.
 * Altezza pari a quella della casella quantita', non i 43 px del sito.
 */
.ds-prodotto.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	/*
	 * Gli unici due !important di dichiarazione del foglio (a parte quello
	 * d'obbligo su prefers-reduced-motion), e sono una resa a custom.css, che
	 * su .woocommerce button.button impone padding e border-radius con
	 * !important. Si tolgono il giorno in cui quel foglio sparisce.
	 */
	padding: 0 18px !important;
	border: 0;
	border-radius: var(--ds-raggio-pieno) !important;
	background: var(--ds-primario);
	color: var(--ds-fondo);
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.6;
	font-weight: var(--ds-peso-normale);
	text-transform: uppercase;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.ds-prodotto.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--ds-primario-scuro);
}

.ds-prodotto.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--ds-inchiostro);
	outline-offset: 2px;
}

/* ---------- pannelli a fisarmonica, nativi ---------- */

.ds-prodotto :where(.ds-prodotto__dettagli) {
	margin-block-start: var(--ds-sp-8);
}

.ds-prodotto :where(.ds-dettaglio) {
	border: 0;
}

.ds-prodotto :where(.ds-dettaglio__titolo) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-sp-4);
	padding-block: var(--ds-sp-4);
	border-block-end: 1px solid var(--ds-inchiostro);
	color: var(--ds-primario);
	font-size: var(--ds-corpo);
	font-weight: var(--ds-peso-normale);
	letter-spacing: 1.6px;
	cursor: pointer;
	list-style: none;
}

.ds-prodotto :where(.ds-dettaglio__titolo)::-webkit-details-marker {
	display: none;
}

.ds-prodotto :where(.ds-dettaglio__titolo)::after {
	content: "+";
	font-size: var(--ds-testo-grande);
	line-height: 1;
	letter-spacing: normal;
	color: var(--ds-primario);
}

.ds-prodotto :where(.ds-dettaglio[open]) :where(.ds-dettaglio__titolo)::after {
	content: "\2212";
}

.ds-prodotto :where(.ds-dettaglio__corpo) {
	/* Niente riempimento laterale: il testo parte a filo del titolo. */
	padding: 15px 0;
	line-height: 1.75;
	color: var(--ds-inchiostro);
}

.ds-prodotto :where(.ds-dettaglio__corpo) p {
	margin: var(--ds-sp-4) 0;
}

.ds-prodotto :where(.ds-dettaglio__corpo) ul,
.ds-prodotto :where(.ds-dettaglio__corpo) ol {
	margin: 0 0 var(--ds-sp-6) var(--ds-sp-6);
	padding: 0;
}

.ds-prodotto :where(.ds-dettaglio__corpo) > :last-child {
	margin-block-end: 0;
}

/* ---------- schermi stretti ---------- */

/*
 * Lo stacco della griglia qui non si tocca: lo decidono column-gap e row-gap
 * piu' su. C'era un gap che li sovrascriveva tutti e due, rimasto dalla prima
 * stesura del foglio, e teneva le righe a 32 px qualunque cosa si scrivesse.
 */
@media (max-width: 48rem) {
	.ds-prodotto :where(.ds-prodotto__contenitore) {
		padding-block: 12px var(--ds-sp-12);
	}
}

/* ---------- chi preferisce meno movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	.ds-prodotto * {
		transition-duration: 0.01ms !important;
	}
}

/* ---------- misure e disponibilita' ---------- */

.ds-prodotto :where(.ds-prodotto__misure) {
	margin: var(--ds-sp-4) 0 0;
	font-size: var(--ds-corpo);
	color: var(--ds-inchiostro);
}

.ds-prodotto :where(.ds-prodotto__scorte) {
	margin-block-end: var(--ds-sp-6);
	font-size: var(--ds-testo-piccolo);
}

.ds-prodotto :where(.ds-prodotto__scorte) p {
	margin: 0;
}

.ds-prodotto :where(.ds-prodotto__scorte) .stock.in-stock {
	color: var(--ds-successo);
}

.ds-prodotto :where(.ds-prodotto__scorte) .stock.available-on-backorder {
	color: var(--ds-attenzione);
}

.ds-prodotto :where(.ds-prodotto__scorte) .stock.out-of-stock {
	color: var(--ds-errore);
}

/* ---------- sezioni a tutta larghezza ---------- */

.ds-prodotto :where(.ds-sezione) {
	max-width: var(--ds-contenuto);
	margin-block-start: var(--ds-sp-16);
	margin-inline: auto;
}

.ds-prodotto :where(.ds-sezione__titolo) {
	margin: 0 0 var(--ds-sp-4);
	font-size: var(--ds-sottotitolo);
	font-weight: var(--ds-peso-forte);
	line-height: 1.5;
	letter-spacing: 3.2px;
	text-align: center;
	text-transform: uppercase;
}

/* Il fregio a virgolette fra il titolo e il racconto. */
.ds-prodotto :where(.ds-sezione__fregio) {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto var(--ds-sp-4);
}

/*
 * Il racconto della collezione: colonna stretta, centrato e in Cormorant
 * Garamond, come sul sito. E' l'unico punto della scheda che non usa Spartan.
 */
.ds-prodotto :where(.ds-sezione__corpo) {
	max-width: var(--ds-narrativa-larghezza);
	margin-inline: auto;
	font-family: var(--ds-font-narrativa);
	font-size: 1.25rem;
	line-height: 1.6;
	text-align: center;
}

.ds-prodotto :where(.ds-sezione__corpo) p {
	margin-block: 0;
}

.ds-prodotto :where(.ds-sezione__corpo) > :last-child {
	margin-block-end: 0;
}

/*
 * La vetrina delle altre illustrazioni e' larga quanto la riga del sito, 90vw,
 * non 1290 come le sezioni di testo, e ha piu' aria sotto il titolo.
 */
.ds-prodotto :where(.ds-sezione--vetrina) {
	/*
	 * Sul sito questa riga esce dal contenitore e arriva a 90vw piene. Qui si
	 * recuperano i margini laterali del contenitore invece di annidarsi dentro.
	 */
	max-width: none;
	margin-inline: calc(var(--ds-margine-laterale) * -1);
	padding-block: var(--ds-sp-12);
	padding-inline: 0;
}

.ds-prodotto :where(.ds-sezione--vetrina) :where(.ds-sezione__titolo) {
	margin-block-end: var(--ds-sp-12);
}

/* ---------- carosello, scorrimento nativo ---------- */

/*
 * Cinque schede per volta come lo slider del sito, poi tre e due agli scalini.
 * Scorrimento nativo con scroll-snap invece di Swiper: nessuna libreria.
 */
.ds-prodotto :where(.ds-carosello) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--ds-carosello-visibili) - 1) * var(--ds-carosello-stacco))
		/ var(--ds-carosello-visibili)
	);
	gap: var(--ds-carosello-stacco);
	margin: 0;
	padding: 0 0 var(--ds-sp-4);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.ds-prodotto :where(.ds-carosello):focus-visible {
	outline: 2px solid var(--ds-inchiostro);
	outline-offset: 4px;
}

.ds-prodotto :where(.ds-carosello__voce) {
	scroll-snap-align: start;
}

.ds-prodotto :where(.ds-scheda) {
	display: grid;
	gap: 0;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.ds-prodotto :where(.ds-scheda__media) img {
	display: block;
	width: 100%;
	height: var(--ds-scheda-immagine);
	/* contain e non cover: la foto si vede intera, non tagliata. */
	object-fit: contain;
	border-radius: var(--ds-raggio);
}

.ds-prodotto :where(.ds-scheda__nome) {
	margin-block: var(--ds-sp-3) var(--ds-sp-2);
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 3.2px;
	text-transform: uppercase;
}

.ds-prodotto :where(.ds-scheda:hover) :where(.ds-scheda__nome) {
	text-decoration: underline;
}

.ds-prodotto :where(.ds-scheda__scorte) {
	font-size: var(--ds-testo-minuscolo);
	color: var(--ds-inchiostro-tenue);
}

.ds-prodotto :where(.ds-scheda__prezzo) {
	margin-block-start: var(--ds-sp-1);
}

.ds-prodotto :where(.ds-scheda__prezzo) {
	font-size: 0.9rem;
	font-weight: var(--ds-peso-medio);
	letter-spacing: 1.6px;
}

/* ---------- recensioni ---------- */

.ds-prodotto :where(.ds-sezione--recensioni) #reviews {
	max-width: 48rem;
}

/* ---------- avvisi nella colonna acquisto ---------- */

.ds-prodotto :where(.ds-prodotto__preordine) {
	margin: var(--ds-sp-3) 0 0;
	font-size: var(--ds-testo-piccolo);
	color: var(--ds-inchiostro);
}

.ds-prodotto :where(.ds-prodotto__spedizione) {
	margin: var(--ds-sp-4) 0 var(--ds-sp-8);
	font-size: var(--ds-testo-piccolo);
	line-height: 1.6;
	color: var(--ds-inchiostro);
}

/*
 * La disponibilita' che stampa il modulo di WooCommerce resta nel codice, per
 * chi legge con lo screen reader e per i dati strutturati, ma non si vede: in
 * scheda la racconta gia' la riga del preordine, come sul sito in produzione.
 */
.ds-prodotto :where(.ds-prodotto__modulo) p.stock {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ds-prodotto :where(.ds-prodotto__spedizione) {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-sp-3);
}

.ds-prodotto :where(.ds-icona) {
	flex: 0 0 auto;
	margin-block-start: 1px;
}

/* ---------- galleria ---------- */

.ds-prodotto :where(.ds-prodotto__media) .flex-viewport {
	position: relative;
}

/* Kadence lascia 16 px sotto la galleria, sul sito non ci sono. */
.ds-prodotto.woocommerce div.product div.images.woocommerce-product-gallery {
	padding: 0;
	margin: 0;
}

.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--ds-miniature-visibili) - 1) * var(--ds-miniature-stacco))
		/ var(--ds-miniature-visibili)
	);
	gap: var(--ds-miniature-stacco);
	/*
	 * Kadence centra la striscia. Su una griglia che trabocca il centraggio
	 * spinge le prime miniature fuori a sinistra, dove lo scorrimento non le
	 * raggiunge: la striscia sembrava partire dalla terza.
	 */
	justify-content: start;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* Barra nascosta: sul sito al suo posto ci sono le frecce dello slider. */
	scrollbar-width: none;
	position: static;
	max-width: none;
	margin: 16px 0 0;
	padding: 0;
	float: none;
	transform: none;
	list-style: none;
}

.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs li {
	/*
	 * L'altezza va ridichiarata: Kadence fissa le voci a 65 px, e senza questa
	 * riga le immagini da 100 px sbordavano sotto, finendo sopra al resto.
	 */
	width: auto;
	height: var(--ds-galleria-miniature);
	margin: 0;
	/* WooCommerce da' 5 px di riempimento alla prima voce: la restringeva. */
	padding: 0;
	float: none;
	display: block;
	list-style: none;
}

.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%;
	height: var(--ds-galleria-miniature);
	/* Senza questo la miniatura attiva si restringe di 5 px: ha un bordo suo. */
	border: 0;
	padding: 0;
	object-fit: cover;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.ds-prodotto.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
}

/* Frecce tonde, come quelle di Swiper in produzione. */
.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav a {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-block-start: -22px;
	border-radius: var(--ds-raggio-pieno);
	color: var(--ds-primario);
	font-size: 0;
	text-decoration: none;
	opacity: 1;
	z-index: 2;
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav a::before {
	font-size: 28px;
	line-height: 1;
	color: var(--ds-primario);
	content: "\2039";
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav .flex-next::before {
	content: "\203A";
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav .flex-prev {
	inset-inline-start: 0;
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav .flex-next {
	inset-inline-end: 0;
}

.ds-prodotto :where(.ds-prodotto__media) .flex-direction-nav .flex-disabled {
	opacity: 0.3;
	cursor: default;
}

.ds-prodotto :where(.ds-prodotto__media) .woocommerce-product-gallery__trigger {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

/*
 * L'immagine grande: altezza fissa con tre scalini, non un rapporto.
 * Lo slider del sito fa esattamente cosi' (570 / 450 / 400 / 350), e il
 * rapporto che avevo scritto prima faceva crescere la foto insieme alla
 * finestra: su schermi larghi diventava molto piu' alta dell'originale.
 *
 * object-fit: scale-down come sul sito: l'immagine non viene mai ingrandita
 * oltre la sua dimensione naturale, e non viene tagliata.
 */
.ds-prodotto.woocommerce div.product div.images .flex-viewport,
.ds-prodotto.woocommerce div.product div.images .woocommerce-product-gallery__image {
	height: var(--ds-galleria-altezza);
}

.ds-prodotto.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	border: 1px solid var(--ds-linea-cornice);
}

/* ---------- apertura delle fisarmoniche ---------- */

/*
 * Lo scorrimento in apertura, come sul sito, ma senza JavaScript: si anima
 * ::details-content, la parte che il browser apre e chiude da sola.
 *
 * interpolate-size serve perche' da 0 si va verso auto, e un'altezza auto non
 * sarebbe interpolabile. Dove non e' supportato (browser piu' vecchi) il
 * pannello si apre di scatto: resta tutto leggibile, cambia solo l'effetto.
 */
.ds-prodotto :where(.ds-prodotto__dettagli) {
	interpolate-size: allow-keywords;
}

.ds-prodotto :where(.ds-dettaglio)::details-content {
	block-size: 0;
	overflow: hidden;
	content-visibility: hidden;
	transition:
		block-size 320ms ease,
		content-visibility 320ms allow-discrete;
}

.ds-prodotto :where(.ds-dettaglio[open])::details-content {
	block-size: auto;
	content-visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.ds-prodotto :where(.ds-dettaglio)::details-content {
		transition-duration: 0.01ms;
	}
}

/* ---------- i video del prodotto ---------- */

.ds-prodotto :where(.ds-sezione--video) {
	padding-block: var(--ds-sp-12);
}

/* Il titolo dei video e' piu' piccolo degli altri: sul sito e' 1,2rem. */
.ds-prodotto :where(.ds-sezione__titolo--minore) {
	margin-block-end: var(--ds-sp-8);
	font-size: 1.2rem;
	line-height: 1.4;
}

.ds-prodotto :where(.ds-video) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: var(--ds-sp-4);
	column-gap: var(--ds-sp-12);
}

/* Verticali, come i video girati con il telefono. */
.ds-prodotto :where(.ds-video__cornice) {
	position: relative;
	flex: 0 0 auto;
	width: 30vw;
	aspect-ratio: 9 / 16;
}

.ds-prodotto :where(.ds-video__cornice) iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 575.98px) {
	.ds-prodotto :where(.ds-video__cornice) {
		width: 100%;
	}
}

/* ---------- frecce e pallini del carosello ---------- */

/*
 * I comandi li costruisce scheda-prodotto.js: senza JavaScript il carosello
 * scorre lo stesso con il dito e con la tastiera, e qui non resta una
 * pulsantiera morta.
 */
.ds-prodotto :where(.ds-carosello__comandi) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-sp-6);
	margin-block-start: var(--ds-sp-6);
}

.ds-prodotto :where(.ds-carosello__comandi)[hidden] {
	display: none;
}

.ds-prodotto :where(.ds-carosello__freccia) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-raggio-pieno);
	background: none;
	color: var(--ds-primario);
	cursor: pointer;
	transition: opacity 150ms ease;
}

.ds-prodotto :where(.ds-carosello__freccia)::before {
	font-size: 28px;
	line-height: 1;
	content: "\2039";
}

.ds-prodotto :where(.ds-carosello__freccia--successivo)::before {
	content: "\203A";
}

.ds-prodotto :where(.ds-carosello__freccia):disabled {
	opacity: 0.3;
	cursor: default;
}

.ds-prodotto :where(.ds-carosello__freccia):focus-visible {
	outline: 2px solid var(--ds-inchiostro);
	outline-offset: 2px;
}

.ds-prodotto :where(.ds-carosello__pallini) {
	display: flex;
	align-items: center;
	gap: var(--ds-sp-2);
}

/* Il pallino attivo si allunga, come sul sito. */
.ds-prodotto :where(.ds-carosello__pallino) {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--ds-raggio-pieno);
	background: var(--ds-primario);
	opacity: 0.35;
	cursor: pointer;
	transition: width 400ms ease-out, opacity 400ms ease-out;
}

.ds-prodotto :where(.ds-carosello__pallino).is-corrente {
	width: 24px;
	opacity: 1;
}

.ds-prodotto :where(.ds-carosello__pallino):focus-visible {
	outline: 2px solid var(--ds-inchiostro);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ds-prodotto :where(.ds-carosello__pallino) {
		transition-duration: 0.01ms;
	}
}

/* ---------- briciole su schermo stretto ---------- */

/*
 * Su una riga sola, scorrevole, con il bordo destro che sfuma per dire che il
 * percorso continua. La barra di scorrimento resta nascosta: il segnale e' la
 * sfumatura. A sinistra non si sfuma, perche' a riposo il percorso parte da li'
 * e un bordo slavato sembrerebbe un difetto.
 */
@media (max-width: 767.98px) {
	.ds-prodotto :where(.ds-prodotto__briciole) ol {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	}

	.ds-prodotto :where(.ds-prodotto__briciole) ol::-webkit-scrollbar {
		display: none;
	}

	.ds-prodotto :where(.ds-prodotto__briciole) li {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* ---------- colonna acquisto quando e' impilata ---------- */

/*
 * Senza la galleria accanto, la colonna e' larga quanto lo schermo: allineare
 * a sinistra lascia il titolo appeso a un lato. Si centra, e il prezzo prende
 * la lineetta anche a sinistra, cosi' resta in mezzo per davvero.
 */
@media (max-width: 991.98px) {
	.ds-prodotto :where(.ds-prodotto__titolo),
	.ds-prodotto :where(.ds-prodotto__misure),
	.ds-prodotto :where(.ds-prodotto__preordine) {
		text-align: center;
	}

	.ds-prodotto :where(.ds-prodotto__prezzo)::before {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--ds-inchiostro);
	}

	/*
	 * Quantita' e bottone su una riga sola: il bottone si restringe quanto
	 * serve. min-width azzerato perche' un elemento flex, di suo, non scende
	 * sotto la larghezza del proprio contenuto e manderebbe tutto a capo.
	 */
	.ds-prodotto :where(.ds-prodotto__modulo) form.cart {
		flex-wrap: nowrap;
	}

	.ds-prodotto.woocommerce div.product form.cart button.single_add_to_cart_button {
		min-width: 0;
	}
}

/* ---------- il secondo acquisto, sotto la vetrina ---------- */

.ds-prodotto :where(.ds-sezione--riacquisto) {
	max-width: var(--ds-narrativa-larghezza);
	margin-inline: auto;
	text-align: center;
}

.ds-prodotto :where(.ds-riacquisto__nome) {
	margin: 0 0 var(--ds-sp-4);
	font-size: 0.8rem;
	letter-spacing: 3.2px;
	text-transform: uppercase;
}

/* Qui il modulo sta in mezzo, non a filo di colonna come sopra. */
.ds-prodotto :where(.ds-sezione--riacquisto) :where(.ds-prodotto__modulo) {
	margin: 0;
}

.ds-prodotto :where(.ds-sezione--riacquisto) :where(.ds-prodotto__modulo) form.cart {
	justify-content: center;
}

/* Sui variabili il riacquisto e' un collegamento, non un secondo modulo. */
.ds-prodotto :where(.ds-riacquisto__collegamento) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding-inline: var(--ds-sp-8);
	border-radius: var(--ds-raggio-pieno);
	background: var(--ds-primario);
	color: var(--ds-fondo);
	font-size: 1.125rem;
	line-height: 1.6;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 150ms ease;
}

.ds-prodotto :where(.ds-riacquisto__collegamento):hover {
	background: var(--ds-primario-scuro);
}

.ds-prodotto :where(.ds-riacquisto__collegamento):focus-visible {
	outline: 2px solid var(--ds-inchiostro);
	outline-offset: 2px;
}

/* Lo scorrimento verso il modulo e' morbido, ma non per chi preferisce di no. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.ds-prodotto) {
		scroll-behavior: smooth;
	}
}