/*
 * GOYN — Catalogo
 *
 * Fonte: src/components/Catalogue.jsx e le classi .catalogue / .cat-* /
 * .filter-* di src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-catalogue`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-photo` (ritaglio), `.goyn-zoom`
 * (ingrandimento in hover), `.goyn-link-sweep` (l'azzera filtri), `.goyn-line`,
 * `.goyn-eyebrow`, `.goyn-display`, `.goyn-label`, `.goyn-accent`, `.goyn-wrap`.
 *
 * DA reveal.css: `.is-armed` / `.is-in`, `data-goyn-rise`, `data-goyn-rise-line`.
 *
 * ⚠️ I filtri sono collegamenti, non pulsanti — il perché è in testa a
 *    class-catalogue.php. Qui la conseguenza di stile: `.goyn-catalogue__row` e
 *    `__tag` vestono un `<a>`, quindi serve `text-decoration: none` e non serve
 *    azzerare `background`/`border` come farebbe un `<button>`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Le due colonne
 *   3. La colonna dei filtri
 *   4. Gruppi: elenco e pastiglie
 *   5. Intestazione e comandi
 *   6. La griglia e la scheda
 *   7. Paginazione e vuoto
 *   8. Entrate: le misure di questa sezione
 *   9. Responsive
 *  10. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ============================================================ */

.goyn-catalogue {
	--goyn-cat-bg: var(--goyn-cream-2, #efebe0);
	--goyn-cat-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-cat-title: var(--goyn-petrol, #1f535d);
	--goyn-cat-text: var(--goyn-muted, #5e6e6e);
	--goyn-cat-name: var(--goyn-ink, #1a2c30);
	--goyn-cat-badge: var(--goyn-rust, #c0603c);
	--goyn-cat-price: var(--goyn-ink, #1a2c30);
	--goyn-cat-filter: var(--goyn-muted, #5e6e6e);
	--goyn-cat-filter-on: var(--goyn-petrol, #1f535d);
	--goyn-cat-filter-mark: var(--goyn-rust, #c0603c);
	/* Tre gradazioni distinte nell'originale: 0,16 il filetto della colonna, 0,22
	   il bordo delle pastiglie, 0,24 quello dei comandi. */
	--goyn-cat-rule: var(--goyn-petrol-16, rgba(31, 83, 93, 0.16));
	--goyn-cat-rule-tag: rgba(31, 83, 93, 0.22);
	--goyn-cat-rule-field: rgba(31, 83, 93, 0.24);
	--goyn-cat-thumb-bg: var(--goyn-cream, #e9e5d9);

	--goyn-cat-pad-top: 90px;
	--goyn-cat-pad-bottom: 110px;
	--goyn-cat-sidebar-w: 240px;
	--goyn-cat-sidebar-top: 110px;
	--goyn-cat-text-max: 560px;
	--goyn-cat-card-min: 260px;

	/* Variabile di `.goyn-zoom` del tema: 1.05 è il valore dell'originale. */
	--goyn-zoom-scale: 1.05;

	/* I due `clamp` dell'originale: lo spazio non scende sotto 56/70px. */
	padding: clamp(56px, 6vw, var(--goyn-cat-pad-top)) var(--goyn-pad, clamp(22px, 5vw, 80px))
		clamp(70px, 7vw, var(--goyn-cat-pad-bottom));
	background-color: var(--goyn-cat-bg);
}

/* ============================================================
   2. Le due colonne
   ------------------------------------------------------------
   Colonna dei filtri a larghezza fissa, contenuto elastico. `align-items:
   start` è ciò che permette alla colonna di restare appiccicata scorrendo:
   con `stretch` sarebbe alta quanto la griglia e non avrebbe spazio per
   muoversi.
   ============================================================ */

.goyn-catalogue__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-cat-sidebar-w)) minmax(0, 1fr);
	gap: clamp(28px, 3.5vw, 60px);
	align-items: start;
}

.goyn-catalogue--plain .goyn-catalogue__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* ============================================================
   3. La colonna dei filtri
   ============================================================ */

.goyn-catalogue__sidebar {
	position: sticky;
	top: var(--goyn-cat-sidebar-top);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.6vw, 34px);
	padding-right: clamp(12px, 1.6vw, 24px);
	border-right: 1px solid var(--goyn-cat-rule);
}

.goyn-catalogue__group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.goyn-catalogue__group-title {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 2.4px;
	color: var(--goyn-cat-filter-on);
}

/*
 * L'azzera filtri usa `.goyn-link-sweep` del tema. Qui solo il colore e il
 * fatto che non si allarghi: in una colonna in `flex-direction: column` un
 * `inline-flex` diventerebbe largo quanto la colonna.
 */
.goyn-catalogue__reset {
	align-self: flex-start;
	font-size: 12px;
	letter-spacing: 1.6px;
	color: var(--goyn-cat-filter-mark);
	text-decoration: none;
}

/* ============================================================
   4. Gruppi: elenco e pastiglie
   ------------------------------------------------------------
   Due aspetti per la stessa cosa. L'elenco ha un filetto a sinistra che si
   accende sul valore scelto; le pastiglie si riempiono.
   ============================================================ */

.goyn-catalogue__rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.goyn-catalogue__row {
	padding: 7px 0 7px 12px;
	font-size: 13.5px;
	/* `.goyn-label` porta 2px: l'originale la riduce a 0,6 per l'elenco. */
	letter-spacing: 0.6px;
	color: var(--goyn-cat-filter);
	text-decoration: none;
	border-left: 1.5px solid transparent;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-catalogue__row:hover,
.goyn-catalogue__row:focus-visible {
	color: var(--goyn-cat-filter-on);
}

.goyn-catalogue__row.is-on {
	font-weight: 600;
	color: var(--goyn-cat-filter-on);
	border-left-color: var(--goyn-cat-filter-mark);
}

/*
 * Il campo di ricerca fra i filtri. Non c'è nell'app — là si cerca solo
 * dall'overlay — e serve perché l'overlay senza JavaScript non si apre: questo è
 * l'unico posto del sito dove si digita una parola senza script.
 *
 * Vestito come il resto della colonna: un filetto sotto, niente cornice.
 */
.goyn-catalogue__find {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--goyn-cat-rule, rgba(31, 83, 93, 0.16));
	color: var(--goyn-cat-filter-on);
}

/*
 * ⚠️ Discendenti e con `background`/`font` espliciti: `input` e `button` sono
 *    selettori di elemento, e i reset del tema e di Elementor li colpiscono a
 *    (0,1,1) — una classe sola perderebbe. È il solito inciampo, già pagato su
 *    `select` in questo stesso foglio.
 */
.goyn-catalogue .goyn-catalogue__find-field {
	flex: 1 1 0;
	min-width: 0;
	appearance: none;
	border: 0;
	background: none;
	outline: none;
	font-family: var(--goyn-font-body);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--goyn-cat-filter-on);
}

.goyn-catalogue .goyn-catalogue__find-field::placeholder {
	color: var(--goyn-cat-filter);
}

.goyn-catalogue .goyn-catalogue__find-field::-webkit-search-cancel-button {
	appearance: none;
}

.goyn-catalogue__find:focus-within {
	border-bottom-color: var(--goyn-cat-filter-mark);
}

.goyn-catalogue .goyn-catalogue__find-go {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--goyn-cat-filter);
	cursor: pointer;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-catalogue .goyn-catalogue__find-go:hover,
.goyn-catalogue .goyn-catalogue__find-go:focus-visible {
	color: var(--goyn-cat-filter-mark);
}

/*
 * La riga della parola cercata. È una `__row` come le altre — stesso filetto a
 * sinistra, stesso peso quando è attiva — con in più la crocetta che dice che si
 * può togliere. `display: flex` perché la crocetta va a fondo riga: la parola può
 * essere lunga, e allineata al testo sembrerebbe parte della parola.
 */
.goyn-catalogue__row--term {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.goyn-catalogue__row-x {
	display: grid;
	place-items: center;
	flex: none;
	opacity: 0.7;
	transition: opacity var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-catalogue__row--term:hover .goyn-catalogue__row-x,
.goyn-catalogue__row--term:focus-visible .goyn-catalogue__row-x {
	opacity: 1;
}

/*
 * La riga "risultati per «…»". In Playfair corsivo come le altre righe di
 * accompagnamento del sito, e nel ruggine dell'accento perché è un'informazione
 * di stato e non una parte del testo di presentazione.
 */
.goyn-catalogue__found {
	margin: 14px 0 0;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.4;
	color: var(--goyn-cat-filter-mark);
}

.goyn-catalogue__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.goyn-catalogue__tag {
	padding: 7px 13px;
	font-size: 11px;
	letter-spacing: 1.2px;
	color: var(--goyn-cat-filter);
	text-decoration: none;
	border: 1px solid var(--goyn-cat-rule-tag);
	border-radius: 100px;
	transition:
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-catalogue__tag:hover,
.goyn-catalogue__tag:focus-visible {
	color: var(--goyn-cat-filter-on);
	border-color: var(--goyn-cat-filter-on);
}

.goyn-catalogue__tag.is-on {
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-cat-filter-on);
	border-color: var(--goyn-cat-filter-on);
}

/* ============================================================
   5. Intestazione e comandi
   ============================================================ */

.goyn-catalogue__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
}

.goyn-catalogue__eyebrow {
	margin: 0;
	color: var(--goyn-cat-eyebrow);
}

.goyn-catalogue__title {
	margin: 12px 0 0;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 0.95;
	color: var(--goyn-cat-title);
}

.goyn-catalogue__text {
	max-width: var(--goyn-cat-text-max);
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.62;
	color: var(--goyn-cat-text);
}

.goyn-catalogue__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.goyn-catalogue__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* `nowrap`: nell'originale l'etichetta avvolge la tendina, qui le è accanto —
   e in una riga strinta "Ordina per" si spezzava su due righe. */
.goyn-catalogue__sort-label {
	font-size: 11px;
	letter-spacing: 2px;
	white-space: nowrap;
	color: var(--goyn-cat-text);
}

/*
 * ⚠️ Regola discendente: `.goyn-widget select { font: inherit }` del tema ha
 *    specificità (0,1,1) e la scorciatoia `font` riscrive famiglia, corpo e
 *    peso. Con la sola classe la tendina restava a 16px ereditati invece dei 12
 *    dell'originale — misurato. Terzo inciampo dello stesso tipo, dopo `img` e
 *    l'ombra dei link: il reset del tema usa selettori di elemento.
 */
.goyn-catalogue .goyn-catalogue__select {
	padding: 10px 14px;
	font-family: var(--goyn-font-label);
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var(--goyn-cat-filter-on);
	background-color: var(--goyn-cream, #e9e5d9);
	border: 1px solid var(--goyn-cat-rule-field);
	border-radius: 0;
	cursor: pointer;
}

/*
 * Il pannello dei filtri su mobile. Sul desktop non esiste: i filtri sono nella
 * colonna, e mostrarlo darebbe due copie dello stesso comando.
 */
.goyn-catalogue__panel {
	display: none;
}

.goyn-catalogue__panel-toggle {
	padding: 10px 14px;
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var(--goyn-cat-filter-on);
	background-color: var(--goyn-cream, #e9e5d9);
	border: 1px solid var(--goyn-cat-rule-field);
	cursor: pointer;
	/* Il triangolino predefinito di `<summary>` non c'entra con questa grafica. */
	list-style: none;
}

.goyn-catalogue__panel-toggle::-webkit-details-marker {
	display: none;
}

.goyn-catalogue__panel-body {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.6vw, 34px);
	margin-top: 22px;
	padding: 24px 0;
	border-top: 1px solid var(--goyn-cat-rule);
	border-bottom: 1px solid var(--goyn-cat-rule);
}

/* ============================================================
   6. La griglia e la scheda
   ------------------------------------------------------------
   `auto-fill` con una larghezza minima: quante colonne ci stanno, senza un
   numero da scegliere. È la griglia dell'originale.
   ============================================================ */

.goyn-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--goyn-cat-card-min), 1fr));
	gap: clamp(26px, 2.6vw, 42px) clamp(16px, 1.8vw, 26px);
	margin: clamp(30px, 3.4vw, 46px) 0 0;
	padding: 0;
	list-style: none;
}

/* `position: relative` per lo strato del collegamento, che copre la scheda. */
.goyn-catalogue__card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.goyn-catalogue__link {
	color: inherit;
	text-decoration: none;
}

/*
 * Lo strato che rende cliccabile tutta la scheda. È un `::after` del
 * collegamento del nome, non un secondo `<a>`: un solo collegamento per scheda,
 * con il nome del prodotto come etichetta.
 *
 * `z-index: 1` e non 2: "Aggiungi" sta sopra questo strato, altrimenti il clic
 * sul pulsante finirebbe sulla scheda.
 */
.goyn-catalogue__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.goyn-catalogue__thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-cat-thumb-bg);
}

/*
 * ⚠️ Regola discendente: `.goyn-widget img { height: auto }` del tema e
 *    `.elementor img` hanno specificità (0,1,1) e batterebbero una classe sola.
 *    È l'errore già pagato sull'hero.
 */
.goyn-catalogue .goyn-catalogue__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-catalogue__copy {
	display: flex;
	flex-direction: column;
	padding: 16px 2px 0;
}

.goyn-catalogue__badge {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--goyn-cat-badge);
}

/*
 * Nome e prezzo dichiarano il carattere delle etichette (Oswald) ma NON la
 * classe `.goyn-label`: quella porta il maiuscolo e una spaziatura di 2px, e
 * qui il nome è a cassa mista come nell'originale.
 */
.goyn-catalogue__name {
	margin: 0;
	font-family: var(--goyn-font-label);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.3px;
	color: var(--goyn-cat-name);
}

.goyn-catalogue__sub {
	margin: 3px 0 0;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--goyn-cat-text);
}

.goyn-catalogue__price {
	margin: 12px 0 0;
	font-family: var(--goyn-font-label);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--goyn-cat-price);
}

/* Il prezzo di WooCommerce arriva con i suoi tag: si allineano al resto. */
.goyn-catalogue__price .woocommerce-Price-amount {
	color: inherit;
}

.goyn-catalogue__price del {
	margin-right: 6px;
	opacity: 0.6;
}

/*
 * "Aggiungi": compare sulla fotografia al passaggio del mouse. Su un dispositivo
 * a sfioramento resta sempre visibile — vedi la sezione 9 — perché senza
 * puntatore non ci sarebbe modo di farlo apparire.
 */
/*
 * ⚠️ Regola discendente: `.elementor a { box-shadow: none }` di Elementor ha
 *    specificità (0,1,1) e batte una classe sola. Con `.goyn-catalogue__add`
 *    l'ombra veniva calcolata `none` — misurato. Stesso inciampo delle
 *    `<img>`, in un'altra proprietà.
 */
.goyn-catalogue .goyn-catalogue__add {
	position: absolute;
	bottom: 14px;
	left: 50%;
	z-index: 2;
	padding: 11px 22px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.6px;
	color: var(--goyn-cat-filter-on);
	text-decoration: none;
	background-color: var(--goyn-cat-bg);
	border-radius: 100px;
	box-shadow: 0 10px 26px -14px rgba(22, 62, 70, 0.6);
	opacity: 0;
	translate: -50% 12px;
	transition:
		opacity var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		translate var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/*
 * ⚠️ `opacity: 0` qui è un'eccezione consentita alla regola del progetto, e per
 *    una ragione precisa: NON è uno stato iniziale di un'animazione d'entrata
 *    che aspetta JavaScript. È lo stato a riposo di un elemento che compare in
 *    hover, e `:focus-visible` lo rende raggiungibile da tastiera — quindi non
 *    esiste il caso "contenuto invisibile e irraggiungibile".
 */
.goyn-catalogue__card:hover .goyn-catalogue__add,
.goyn-catalogue__card:focus-within .goyn-catalogue__add {
	opacity: 1;
	translate: -50% 0;
}

/* `.goyn-zoom:focus-visible` del tema non scatta più: chi prende il fuoco è il
   collegamento dentro la scheda, non la scheda. */
.goyn-catalogue__card:focus-within .goyn-photo img {
	transform: scale(var(--goyn-zoom-scale, 1.05));
}

.goyn-catalogue__add:hover,
.goyn-catalogue__add:focus-visible {
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-cat-filter-on);
}

/* Woo aggiunge questa classe mentre l'aggiunta è in corso e "added" dopo. */
.goyn-catalogue__add.loading {
	opacity: 0.7;
}

/* ============================================================
   7. Paginazione e vuoto
   ============================================================ */

.goyn-catalogue__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: clamp(30px, 3vw, 44px);
}

.goyn-catalogue__page {
	min-width: 40px;
	padding: 10px 12px;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-align: center;
	color: var(--goyn-cat-filter);
	text-decoration: none;
	border: 1px solid var(--goyn-cat-rule);
	transition:
		color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		background-color var(--goyn-dur-fast, 0.35s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-catalogue__page:hover,
.goyn-catalogue__page:focus-visible {
	color: var(--goyn-cat-filter-on);
	border-color: var(--goyn-cat-filter-on);
}

.goyn-catalogue__page.is-on {
	color: var(--goyn-cream, #e9e5d9);
	background-color: var(--goyn-cat-filter-on);
	border-color: var(--goyn-cat-filter-on);
}

.goyn-catalogue__empty {
	margin: 40px 0 0;
	font-size: 20px;
	color: var(--goyn-cat-eyebrow);
}

.goyn-catalogue__notice {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   8. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Valori dell'originale: intestazione 34px di salita, testo a 100ms, schede a
   60ms l'una dall'altra fino alla settima — il ritardo lo scrive il template,
   perché dipende dall'indice del ciclo.
   ============================================================ */

.goyn-catalogue [data-goyn-rise] {
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.9s;
}

/* Due classi: la regola sopra colpisce `[data-goyn-rise]` con due selettori e
   con una sola classe la durata delle schede veniva ignorata — misurato 0,9s
   dove l'originale ha 0,6s. */
.goyn-catalogue .goyn-catalogue__card {
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.6s;
}

.goyn-catalogue .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-cat-line, 0) * 90ms);
}

/* ============================================================
   9. Responsive
   ============================================================ */

@media (max-width: 860px) {
	/* Una colonna: i filtri passano nel pannello che si apre. */
	.goyn-catalogue__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.goyn-catalogue__sidebar {
		display: none;
	}

	.goyn-catalogue__panel {
		display: block;
	}

	.goyn-catalogue__head {
		align-items: flex-start;
		gap: 18px;
	}

	/* Due colonne fisse invece di `auto-fill`: sotto gli 860px la larghezza
	   minima di 260px ne farebbe stare una sola. */
	.goyn-catalogue__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
	}

	.goyn-catalogue__copy {
		padding: 12px 0 0;
	}

	/*
	 * I due comandi restano affiancati come nell'originale, e il pannello dei
	 * filtri APERTO prende tutta la larghezza — `details[open]` è un selettore,
	 * quindi non serve JavaScript.
	 *
	 * L'ordinamento è messo per primo di proposito: se il pannello lo precedesse,
	 * aprendo i filtri la tendina finirebbe SOTTO l'elenco aperto, cioè fuori
	 * schermo. Nell'originale non capita perché là il pannello è fuori dalla riga
	 * dei comandi.
	 */
	.goyn-catalogue__controls {
		width: 100%;
	}

	.goyn-catalogue__sort {
		order: 1;
	}

	.goyn-catalogue__panel {
		order: 2;
	}

	.goyn-catalogue__panel[open] {
		flex: 1 0 100%;
	}
}

@media (max-width: 560px) {
	/*
	 * Su due colonne strette i nomi hanno lunghezze diverse e i prezzi finivano a
	 * altezze diverse. La scheda cresce, il prezzo si appoggia in fondo: le due
	 * righe di prezzo tornano allineate.
	 */
	.goyn-catalogue__copy {
		flex: 1 1 auto;
	}

	.goyn-catalogue__price {
		margin-top: auto;
	}


	/* Sotto i 16px iOS ingrandisce la pagina da solo quando si apre la tendina. */
	.goyn-catalogue .goyn-catalogue__select,
	.goyn-catalogue .goyn-catalogue__panel-toggle {
		font-size: 16px;
	}
}

/*
 * Senza puntatore "Aggiungi" resta sempre visibile: non c'è un hover che lo
 * faccia comparire, e un pulsante che non si può mostrare è un pulsante che non
 * c'è. Si guarda il puntatore e non la larghezza — un tablet grande ha lo
 * schermo largo e nessun mouse.
 */
@media (hover: none) {
	.goyn-catalogue .goyn-catalogue__add {
		opacity: 1;
		translate: -50% 0;
		bottom: 10px;
		padding: 9px 16px;
		font-size: 10px;
		/* Col dito la superficie comoda è 44px. */
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Col dito e su schermo piccolo il pulsante è più larghetto: è il valore
   dell'originale a ≤560px, e vale solo dove il pulsante si vede. */
@media (hover: none) and (max-width: 560px) {
	.goyn-catalogue .goyn-catalogue__add {
		padding-inline: 20px;
	}
}

/* ============================================================
   10. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate le annulla reveal.css. Qui l'ingrandimento della fotografia, che
   si annulla sulla trasformazione e non azzerando `--goyn-zoom-scale`: quella
   variabile la scrive anche Elementor con la specificità dell'id del documento.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-catalogue .goyn-catalogue__card:hover .goyn-photo img,
	.goyn-catalogue .goyn-catalogue__card:focus-within .goyn-photo img {
		transform: none;
	}
}