/* ==========================================================================
   FFJ — Base (dopo ff-root.css)
   Qui metto le regole "di tutti i giorni": testo, link, bottoni, campi,
   prezzi e i pezzi base di WooCommerce. Solo variabili di ff-root, niente
   colori scritti a mano. Mobile first: le regole senza media query sono
   quelle del telefono, poi allargo.
   ========================================================================== */

/* ---------- 1. Pagina ---------- */

/* Stesso respiro sopra e sotto il contenuto in tutte le pagine:
   32px sul telefono, 48px da tablet in su */
:root { --ff-page-y: 32px; }
@media (min-width: 768px) { :root { --ff-page-y: 48px; } }

body {
	background: var(--ff-bg);
	color: var(--ff-text-body);
}

.site-main,
.woocommerce .site-main {
	width: 100%;
	max-width: var(--ff-container);
	margin: 0 auto;
	padding: var(--ff-page-y) var(--ff-page-x);
	box-sizing: border-box;
}

/* L'ultimo elemento non aggiunge spazio suo: sotto conta solo il padding della pagina */
.page-content > :last-child,
.site-main > :last-child { margin-bottom: 0; }

p { margin: 0 0 var(--ff-space-4); }

h4, h5, h6 {
	font-family: var(--ff-font-body);
	font-weight: var(--ff-fw-semibold);
	color: var(--ff-text);
	margin: 0 0 var(--ff-space-2);
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- 2. Bottoni ----------
   Principale = ink. Acquisto (aggiungi alla borsa, checkout, paga) = oro con testo ink. */
/* :where() tiene la specificità a zero: qualsiasi componente (swatch, icone
   dell'header) può ridefinire il suo bottone senza lottare con queste regole */
:where(button, .button, [type="button"], [type="submit"], .wp-element-button):not(.ffj-swatch):not(.ffj-icon-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ff-space-2);
	min-height: 48px;
	padding: 0 var(--ff-space-6);
	border: var(--ff-border-w) solid var(--ff-btn-bg);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-btn-bg);
	color: var(--ff-btn-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ff-dur-fast) var(--ff-ease), border-color var(--ff-dur-fast) var(--ff-ease), color var(--ff-dur-fast) var(--ff-ease);
}

:where(button, .button, [type="button"], [type="submit"], .wp-element-button):not(.ffj-swatch):not(.ffj-icon-btn):hover {
	background: var(--ff-btn-bg-hover);
	border-color: var(--ff-btn-bg-hover);
	color: var(--ff-btn-text);
}

/* Il pulsante d'acquisto: oro pieno, a tutta larghezza sul prodotto */
/* Specificità alta di proposito: WooCommerce colora di viola .button.alt con regole forti */
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce a.button.alt.checkout-button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--ff-cta-bg);
	border-color: var(--ff-cta-bg);
	color: var(--ff-cta-text);
}

.woocommerce button.button.alt.single_add_to_cart_button:hover,
.woocommerce a.button.alt.checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--ff-cta-bg-hover);
	border-color: var(--ff-cta-bg-hover);
	color: var(--ff-cta-text);
}

button:disabled,
.button.disabled,
.button:disabled,
.woocommerce button.button.alt.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* I bottoni di WooCommerce (grigi di default) prendono lo stile principale ink */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 0 var(--ff-space-6);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-btn-bg);
	color: var(--ff-btn-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--ff-btn-bg-hover);
	color: var(--ff-btn-text);
}

/* ---------- 3. Campi: 48px e 16px di testo (niente zoom automatico su iPhone) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-border-strong);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-surface);
	color: var(--ff-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-md);
	box-sizing: border-box;
}

textarea { padding: var(--ff-space-3) var(--ff-space-4); min-height: 120px; }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ff-focus);
	box-shadow: 0 0 0 1px var(--ff-focus);
}

label {
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-semibold);
	color: var(--ff-text);
}

/* ---------- 4. WooCommerce: prezzi, avvisi, breadcrumb ---------- */
.price,
.woocommerce-Price-amount {
	color: var(--ff-price);
	font-family: var(--ff-font-body);
	font-weight: var(--ff-fw-bold);
}

.price del,
.price del .woocommerce-Price-amount {
	color: var(--ff-price-old);
	font-weight: var(--ff-fw-regular);
}

.price ins {
	color: var(--ff-price-sale);
	text-decoration: none;
}

.woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 var(--ff-space-4);
	font-size: var(--ff-fs-xs);
	color: var(--ff-text-muted);
}

.woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a { color: var(--ff-text-muted); }
.woocommerce-breadcrumb a:hover { color: var(--ff-text); }

/* Avvisi di WooCommerce (conferme, informazioni, errori): tutti con lo stesso disegno.
   Una scheda bianca con bordo sottile, un'iconcina tonda a sinistra e il testo accanto,
   come la conferma "aggiunto al carrello" di Veepee. Niente fondi colorati né righe
   laterali, niente pulsanti neri pieni: l'azione è un link sottolineato.
   - conferma (.woocommerce-message): spunta champagne su ink
   - informazione (.woocommerce-info): "i" champagne su ink
   - errore (.woocommerce-error): "!" bianco su rosso scuro, bordo rosso scuro */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: center;
	gap: var(--ff-space-2) var(--ff-space-3);
	margin: 0 0 var(--ff-space-6);
	padding: var(--ff-space-3) var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-white);
	box-shadow: var(--ff-shadow-sm);
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
	list-style: none;
}

.woocommerce-error { border-color: var(--ff-error); }

/* L'iconcina: prima colonna, prima riga; il testo (anche più righe di errore) nella seconda */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	display: block;
	position: static;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	width: 22px;
	height: 22px;
	margin: 0;
	border-radius: 50%;
	background: var(--ff-ink) no-repeat center;
}

.woocommerce-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F4E4A9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.woocommerce-info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F4E4A9' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Cpath d='M12 6.5v.5'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
	background-color: var(--ff-error);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 17.5v.5'/%3E%3C/svg%3E");
}

/* Il testo va sempre nella seconda colonna (anche i pezzi di testo senza tag e le righe <li> degli errori) */
.woocommerce-message > *,
.woocommerce-info > *,
.woocommerce-error > * { grid-column: 2; }

.woocommerce-error li { margin: 0; }

/* WooCommerce sposta il focus sull'avviso (per chi usa lo screen reader), ma non è
   un elemento da cliccare: il contorno del focus non serve */
.woocommerce-notices-wrapper:focus,
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus { outline: none; }

/* Il pulsante dentro l'avviso ("Visualizza carrello", "Conferma l'indirizzo e-mail",
   "Sfoglia i prodotti"…) diventa un link discreto. WooCommerce lo mette prima del
   testo e lo fa galleggiare: lo riporto dopo, sotto il testo sul telefono */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button {
	order: 3;
	grid-column: 2;
	justify-self: start;
	float: none;
	min-height: 0;
	margin: 0;
	padding: var(--ff-space-1) 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-error .button:hover {
	background: transparent;
	color: var(--ff-gold-text);
}

/* Avvisi dei blocchi carrello/checkout (es. codice sconto non valido): stesso disegno */
.wc-block-components-notice-banner {
	gap: var(--ff-space-3);
	padding: var(--ff-space-3) var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-white);
	box-shadow: var(--ff-shadow-sm);
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	background: var(--ff-white);
	color: var(--ff-text);
}

.wc-block-components-notice-banner.is-error { border-color: var(--ff-error); }

.wc-block-components-notice-banner > svg {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: var(--ff-ink);
	fill: var(--ff-champagne);
}

.wc-block-components-notice-banner.is-error > svg {
	background: var(--ff-error);
	fill: var(--ff-white);
}

.wc-block-components-notice-banner .wc-forward,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a {
	color: var(--ff-text);
	font-weight: var(--ff-fw-bold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- 5. Pagina prodotto (stile Veepee, telefono prima di tutto) ----------
   Ordine delle informazioni: collezione → nome → prezzo → descrizione breve →
   opzioni → catena → quantità + pulsante oro → fisarmonica (descrizione, dettagli).
   Sul telefono la foto è a tutta larghezza; sul computer foto 7/12 e info 5/12
   che restano ferme mentre si scorre la galleria. */

.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary.entry-summary {
	float: none;
	width: 100%;
	margin: 0 0 var(--ff-space-6);
}

/* La foto tocca i bordi dello schermo sul telefono, come nelle app di moda */
.woocommerce div.product div.images.woocommerce-product-gallery {
	margin-left: calc(var(--ff-page-x) * -1);
	margin-right: calc(var(--ff-page-x) * -1);
	width: auto;
	background: var(--ff-gray-50);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: var(--ff-space-2);
	margin: var(--ff-space-2) 0 0;
	padding: 0 var(--ff-page-x);
	overflow-x: auto;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 56px;
	width: 56px;
	float: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border: var(--ff-border-w) solid transparent;
	border-radius: var(--ff-radius-sm);
	opacity: 0.6;
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	border-color: var(--ff-selected);
	opacity: 1;
}

/* Collezione sopra il nome: piccola, maiuscola, oro leggibile */
.ffj-collection {
	display: inline-block;
	margin-bottom: var(--ff-space-2);
	color: var(--ff-gold-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-collection:hover { color: var(--ff-text); }

.single-product div.product .product_title {
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
	font-weight: var(--ff-fw-regular);
	color: var(--ff-text);
	margin: 0 0 var(--ff-space-2);
}

/* Prezzo grande: quando si sceglie la variante diventa quello della variante */
.woocommerce div.product .summary > p.price {
	margin: 0 0 var(--ff-space-4);
	color: var(--ff-price);
	font-size: var(--ff-fs-price-lg);
	line-height: var(--ff-lh-price-lg);
}

/* ...quindi il secondo prezzo sotto le opzioni non serve più */
.ffj-price-in-title .woocommerce-variation-price { display: none; }

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--ff-text-body);
	font-size: var(--ff-fs-md);
	line-height: var(--ff-lh-md);
	margin-bottom: var(--ff-space-6);
}

/* Opzione mancante: gruppo evidenziato e frase sotto, niente finestrelle */
.variations_form table.variations tr.ffj-missing th.label label { color: var(--ff-error); }

.ffj-missing .ffj-swatches button.ffj-swatch:not(.is-disabled) { border-color: var(--ff-error); }

.ffj-missing-msg {
	display: flex;
	align-items: center;
	gap: var(--ff-space-2);
	margin: var(--ff-space-2) 0 0;
	padding: var(--ff-space-2) var(--ff-space-3);
	border-radius: var(--ff-radius-sm);
	background: var(--ff-error-bg);
	color: var(--ff-error);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-semibold);
}

.ffj-missing-msg::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ff-error);
	color: var(--ff-white);
	font-size: 12px;
	font-weight: var(--ff-fw-bold);
}

/* Quantità + pulsante sulla stessa riga; tutto il resto (es. scelta catena) sopra, a tutta larghezza */
.single-product div.product form.cart .woocommerce-variation-add-to-cart,
.single-product div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ff-space-2);
}

.single-product div.product form.cart .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button),
.single-product div.product form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button) {
	flex: 1 1 100%;
}

.single-product div.product form.cart .quantity { margin: 0; }

.single-product div.product form.cart .quantity .qty {
	width: 64px;
	height: 100%;
	text-align: center;
	padding: 0;
}

.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }

/* Fisarmonica: descrizione, dettagli, recensioni */
.ffj-accordion {
	margin-top: var(--ff-space-8);
	border-top: var(--ff-border-w) solid var(--ff-border);
}

.ffj-accordion__item { border-bottom: var(--ff-border-w) solid var(--ff-border); }

.ffj-accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	cursor: pointer;
	list-style: none;
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-accordion__item summary::-webkit-details-marker { display: none; }

/* Il più diventa meno quando la voce è aperta */
.ffj-accordion__item summary::after {
	content: "+";
	font-family: var(--ff-font-body);
	font-size: 20px;
	font-weight: var(--ff-fw-regular);
	transition: transform var(--ff-dur) var(--ff-ease);
}

.ffj-accordion__item[open] summary::after { transform: rotate(45deg); }

.ffj-accordion__body {
	padding: 0 0 var(--ff-space-6);
	color: var(--ff-text-body);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

/* Il titolo dentro la voce ripete quello della voce: lo nascondo */
.ffj-accordion__body > h2:first-child { display: none; }

/* Tabella "Informazioni aggiuntive": righe semplici, niente griglia grigia */
.ffj-accordion__body table.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.ffj-accordion__body table.shop_attributes th,
.ffj-accordion__body table.shop_attributes td {
	padding: var(--ff-space-2) 0;
	border: 0;
	border-bottom: var(--ff-border-w) solid var(--ff-border);
	background: transparent;
	font-style: normal;
	text-align: left;
	vertical-align: top;
}

.ffj-accordion__body table.shop_attributes th {
	width: 40%;
	padding-right: var(--ff-space-3);
	color: var(--ff-text);
	font-weight: var(--ff-fw-semibold);
}

.ffj-accordion__body table.shop_attributes td p { margin: 0; }

/* Barra d'acquisto fissa in basso (telefono e tablet) */
.ffj-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--ff-z-sticky);
	display: flex;
	align-items: center;
	gap: var(--ff-space-3);
	min-height: var(--ff-sticky-bar-h);
	padding: var(--ff-space-2) var(--ff-page-x) calc(var(--ff-space-2) + env(safe-area-inset-bottom));
	background: var(--ff-white);
	box-shadow: var(--ff-shadow-lg);
	box-sizing: border-box;
}

.ffj-buybar[hidden] { display: none; }

.ffj-buybar__price {
	flex: 0 1 auto;
	color: var(--ff-price);
	font-size: var(--ff-fs-price);
	font-weight: var(--ff-fw-bold);
	white-space: nowrap;
}

.ffj-buybar__price del { display: none; }
/* "da" prima del prezzo minimo: piccolo e grigio, il numero resta protagonista */
.price .ffj-from,
.ffj-buybar__price .ffj-from { font-size: var(--ff-fs-xs); font-weight: var(--ff-fw-regular); color: var(--ff-text-muted); }

.ffj-buybar .ffj-buybar__btn {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: var(--ff-space-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--ff-cta-bg);
	border-color: var(--ff-cta-bg);
	color: var(--ff-cta-text);
}

.ffj-buybar .ffj-buybar__btn:hover {
	background: var(--ff-cta-bg-hover);
	border-color: var(--ff-cta-bg-hover);
	color: var(--ff-cta-text);
}

/* Spazio in fondo così la barra non copre il footer */
.single-product .ffj-footer { padding-bottom: var(--ff-sticky-bar-h); }

/* Titolo dei correlati */
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	margin: var(--ff-section-y) 0 var(--ff-space-4);
	font-size: var(--ff-fs-h2);
	line-height: var(--ff-lh-h2);
}

/* ---------- 5b. Collezioni e schede prodotto (stile Veepee) ----------
 * Una scheda = foto, nome, prezzo. Niente pulsante: si tocca la scheda
 * e si sceglie tutto nella pagina del gioiello. 2 per riga sul telefono.
 * ---------------------------------------------------------------------- */

/* Titolo della collezione e descrizione (se c'è) */
.woocommerce-products-header { margin: 0 0 var(--ff-space-4); }
.woocommerce-products-header__title.page-title {
	margin: 0;
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}
/* Descrizione in una colonna stretta, come sul sito attuale: si legge in poche righe */
.woocommerce-products-header .term-description {
	max-width: 480px;
	margin-top: var(--ff-space-2);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}
.woocommerce-products-header .term-description p { margin: 0; }

/* Barra sottile sopra la griglia: "N gioielli" a sinistra, "Filtra" a destra */
.ffj-shop-toolbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-space-3);
	min-height: 48px;
	margin: var(--ff-space-6) 0;
	border-top: var(--ff-border-w) solid var(--ff-border);
	border-bottom: var(--ff-border-w) solid var(--ff-border);
}

.ffj-shop-count {
	margin: 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

/* "Filtra ▾": sembra un link, come prima l'ordinamento; si apre un pannellino */
.ffj-filterbox { position: static; }

.ffj-filterbox__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	min-height: 44px;
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.ffj-filterbox__toggle::-webkit-details-marker { display: none; }

.ffj-filterbox__toggle::after {
	content: "";
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
	transition: transform var(--ff-dur-fast) var(--ff-ease);
}

.ffj-filterbox[open] .ffj-filterbox__toggle::after { transform: rotate(180deg); }

.ffj-filterbox__count { color: var(--ff-gold-text); }

/* Il pannello: sotto la barra, a tutta larghezza sul telefono, a destra sul computer */
.ffj-filterbox__panel {
	position: absolute;
	top: calc(100% + var(--ff-space-2));
	right: 0;
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-4);
	padding: var(--ff-space-5);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-white);
	box-shadow: var(--ff-shadow-md);
}

.ffj-filter__label {
	margin: 0 0 var(--ff-space-2);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ff-space-2);
}

.ffj-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-pill);
	background: var(--ff-white);
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	white-space: nowrap;
	transition: border-color var(--ff-dur-fast) var(--ff-ease), background-color var(--ff-dur-fast) var(--ff-ease);
}

.ffj-chip:hover { border-color: var(--ff-ink); color: var(--ff-text); }

.ffj-chip.is-active {
	border-color: var(--ff-ink);
	background: var(--ff-ink);
	color: var(--ff-white);
}

.ffj-shop-reset {
	align-self: flex-start;
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

.ffj-shop-reset:hover { color: var(--ff-gold-text); }

@media (min-width: 768px) {
	.ffj-filterbox__panel {
		left: auto;
		width: 420px;
	}
}

/* Griglia: 2 per riga sul telefono, 3 sul tablet, 4 sul computer */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ff-space-8) var(--ff-gutter);
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

/* WooCommerce dà il 48% di larghezza alle schede con una regola forte: qui comanda la griglia */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* Foto in verticale, con la stessa forma delle foto Corinthia (900x1102 ≈ 9:11): le collane
   si vedono intere. La foto non viene mai tagliata (contain): quelle quadrate delle collezioni
   Color stanno al centro della scheda, sul bianco come il loro sfondo. */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 9 / 11;
	object-fit: contain;
	margin: 0 0 var(--ff-space-3);
	border-radius: var(--ff-radius-xs);
	background: var(--ff-white);
	transition: opacity var(--ff-dur) var(--ff-ease);
}

.woocommerce ul.products li.product a:hover img { opacity: 0.88; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 var(--ff-space-1);
	padding: 0;
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-md);
	font-weight: var(--ff-fw-regular);
	line-height: var(--ff-lh-md);
}

.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--ff-price);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

/* Etichetta "In offerta" piccola, in alto a sinistra sulla foto */
.woocommerce ul.products li.product .onsale {
	top: var(--ff-space-2);
	left: var(--ff-space-2);
	right: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: var(--ff-space-1) var(--ff-space-2);
	border-radius: var(--ff-radius-xs);
	background: var(--ff-badge-bg);
	color: var(--ff-badge-text);
	font-size: var(--ff-fs-xs);
	line-height: var(--ff-lh-xs);
	font-weight: var(--ff-fw-semibold);
}

/* Paginazione: numeri semplici, quello attivo in ink */
.woocommerce nav.woocommerce-pagination { margin-top: var(--ff-section-y); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	padding: var(--ff-space-3);
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--ff-ink);
	color: var(--ff-white);
}

/* ---------- 8. Carrello e checkout (blocchi WooCommerce, stile Veepee) ----------
 * Righe pulite: foto, nome, opzioni una sotto l'altra, prezzo a destra.
 * Un solo pulsante oro per andare avanti. Il checkout è a passi numerati,
 * così si capisce sempre a che punto si è.
 * ---------------------------------------------------------------------- */

/* Titolo della pagina */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart h1,
.woocommerce-checkout h1 {
	margin: 0 0 var(--ff-space-6);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}

/* --- Righe del carrello --- */
.wc-block-cart .wc-block-cart-items { border-bottom: var(--ff-border-w) solid var(--ff-border); }

.wc-block-cart .wc-block-cart-items__row { border-top: var(--ff-border-w) solid var(--ff-border); }

.wc-block-cart .wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--ff-radius-xs);
	background: var(--ff-gray-50);
}

/* Nome del gioiello: Prata, come nelle schede */
.wc-block-cart .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-name {
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-md);
	line-height: var(--ff-lh-md);
	text-decoration: none;
}

/* Il prezzo unitario sotto il nome ripete quello a destra: lo tengo solo se la quantità è più di 1 (lo dice WooCommerce con il prezzo barrato/scontato) */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-cart-item__prices { display: none; }

.wc-block-cart .wc-block-cart-item__total,
.wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--ff-price);
	font-weight: var(--ff-fw-bold);
}

/* Opzioni scelte: una per riga, niente barre "/" */
.wc-block-components-product-metadata {
	margin-top: var(--ff-space-2);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.wc-block-components-product-details { margin: 0; }

.wc-block-components-product-details > span,
.wc-block-components-product-details > li {
	display: block;
	margin: 0;
}

.wc-block-components-product-details > span > span:not([class]),
.wc-block-components-product-details > li > span:not([class]) { display: none; }

.wc-block-components-product-details__name { color: var(--ff-text-muted); font-weight: var(--ff-fw-regular); }
.wc-block-components-product-details__value { color: var(--ff-text); }

/* Quantità: piccola e discreta, i gioielli si comprano quasi sempre uno per volta */
.wc-block-cart .wc-block-components-quantity-selector {
	width: 104px;
	min-height: 36px;
	margin-top: var(--ff-space-3);
	border: var(--ff-border-w) solid var(--ff-border-strong);
	border-radius: var(--ff-radius-sm);
}

.wc-block-cart .wc-block-components-quantity-selector::after { display: none; }

.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-height: 34px;
	padding: 0;
	border: 0;
	box-shadow: none;
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-semibold);
}

.wc-block-cart .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	min-width: 34px;
	min-height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ff-text);
	opacity: 1;
}

.wc-block-cart .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:disabled { opacity: 0.3; }

/* Cestino e link "Rimuovi" in grigio, diventano ink al passaggio */
.wc-block-cart .wc-block-cart-item__remove-link {
	color: var(--ff-text-muted);
	text-decoration: none;
}
.wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--ff-text); }

/* --- Riepilogo e totali --- */
.wc-block-cart__totals-title {
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	color: var(--ff-text);
}

.wc-block-components-totals-item { font-size: var(--ff-fs-sm); }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ff-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-lg);
	font-weight: var(--ff-fw-bold);
}

.wc-block-components-panel__button {
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-semibold);
}

/* --- Pulsante per andare avanti: oro pieno, come "Aggiungi al carrello" --- */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained.wc-block-cart__submit-button {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: var(--ff-radius-sm);
	background: var(--ff-cta-bg);
	color: var(--ff-cta-text);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
}

.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--ff-cta-bg-hover);
	color: var(--ff-cta-text);
}

/* Sul telefono il pulsante resta attaccato in basso: bianco pulito e ombra leggera */
.wc-block-cart__submit-container--sticky {
	padding: var(--ff-space-3) var(--ff-page-x) calc(var(--ff-space-3) + env(safe-area-inset-bottom));
	background: var(--ff-white);
	box-shadow: var(--ff-shadow-lg);
}
.wc-block-cart__submit-container--sticky::before { display: none; }

/* --- Checkout a passi numerati --- */
.wc-block-checkout__main { counter-reset: ffj-step; }

.wc-block-checkout .wc-block-components-checkout-step { counter-increment: ffj-step; }

.wc-block-checkout .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: var(--ff-space-3);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	font-weight: var(--ff-fw-regular);
	line-height: var(--ff-lh-h3);
	color: var(--ff-text);
}

.wc-block-checkout .wc-block-components-checkout-step__title::before {
	content: counter(ffj-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ff-ink);
	color: var(--ff-white);
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
}

/* La linea verticale e i pallini di WooCommerce non servono: ci sono già i numeri */
.wc-block-checkout .wc-block-components-checkout-step::after,
.wc-block-checkout .wc-block-components-checkout-step__container::after { display: none; }

.wc-block-checkout .wc-block-components-checkout-step,
.wc-block-checkout .wc-block-components-checkout-step__container,
.wc-block-checkout .wc-block-components-checkout-step__heading-container {
	padding-left: 0;
	margin-left: 0;
}

.wc-block-checkout .wc-block-components-checkout-step__description {
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

/* Campi del checkout: stessi bordi e altezza degli altri campi del sito */
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	min-height: 52px;
	border: var(--ff-border-w) solid var(--ff-border-strong);
	border-radius: var(--ff-radius-sm);
	color: var(--ff-text);
	font-family: var(--ff-font-body);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--ff-focus);
	box-shadow: 0 0 0 1px var(--ff-focus);
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--ff-text-muted);
	font-weight: var(--ff-fw-regular);
}

.wc-block-components-validation-error { color: var(--ff-error); }

/* Checkbox e radio in ink (non il viola di WordPress) */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked {
	border-color: var(--ff-ink);
	background: var(--ff-ink);
}

.wc-block-components-radio-control__input:checked::before { background: var(--ff-white); }

/* "Modifica" dell'indirizzo: di serie è un bottone nero pieno come "Continua",
 * qui lo alleggerisco a contorno perché non compete con l'azione principale. */
.wc-block-components-address-card__edit {
	border-color: var(--ff-border-strong);
	background: transparent;
	color: var(--ff-text);
}

.wc-block-components-address-card__edit:hover {
	border-color: var(--ff-ink);
	background: transparent;
	color: var(--ff-ink);
}

/* Riepilogo ordine sul telefono (apri/chiudi in alto): una riga semplice col totale */
.wc-block-components-checkout-order-summary__title {
	padding: var(--ff-space-4) 0;
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--ff-font-body);
	font-size: var(--ff-fs-md);
	font-weight: var(--ff-fw-semibold);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ff-text);
}

/* "Torna al carrello" discreto */
.wc-block-components-checkout-return-to-cart-button {
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	text-decoration: none;
}

/* Carrello vuoto */
.wc-block-cart__empty-cart__title {
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h2);
}
.wc-block-cart__empty-cart__title::before { opacity: 0.4; }

/* ---------- 9. Ordine ricevuto e dettagli dell'ordine ----------
 * Pagina "grazie" e dettaglio ordine (anche nell'area cliente): un grazie
 * chiaro, una scheda con numero/data/totale, i gioielli in righe pulite.
 * ---------------------------------------------------------------------- */

/* Sulla pagina "grazie" il titolo "Checkout" non serve: il titolo è il grazie */
.woocommerce-order-received .entry-title,
.woocommerce-order-received .page-header { display: none; }

.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 var(--ff-space-6);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}

/* Scheda riepilogo: due colonne sul telefono, niente linee tratteggiate */
.woocommerce ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ff-space-4) var(--ff-space-6);
	margin: 0 0 var(--ff-section-y);
	padding: var(--ff-panel-pad);
	border-radius: var(--ff-radius-md);
	background: var(--ff-bg-alt);
	list-style: none;
}

.woocommerce ul.woocommerce-order-overview::before,
.woocommerce ul.woocommerce-order-overview::after { display: none; }

.woocommerce ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.woocommerce ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--ff-space-1);
	color: var(--ff-text);
	font-size: var(--ff-fs-md);
	font-weight: var(--ff-fw-semibold);
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* L'email è lunga: prende tutta la riga */
.woocommerce ul.woocommerce-order-overview li.email { grid-column: 1 / -1; }

.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
	margin: 0 0 var(--ff-space-4);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

/* Tabella dei gioielli: solo linee orizzontali sottili */
.woocommerce table.shop_table.order_details {
	margin: 0 0 var(--ff-section-y);
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce table.shop_table.order_details th,
.woocommerce table.shop_table.order_details td {
	padding: var(--ff-space-4) 0;
	border: 0;
	border-top: var(--ff-border-w) solid var(--ff-border);
	background: none;
	vertical-align: top;
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.woocommerce table.shop_table.order_details thead th {
	padding-top: 0;
	border-top: 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.woocommerce table.shop_table.order_details td:last-child,
.woocommerce table.shop_table.order_details th:last-child { text-align: right; }

.woocommerce table.shop_table.order_details tbody tr:nth-child(odd) td { background: none; }

.woocommerce table.shop_table.order_details .product-name a {
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-md);
	text-decoration: none;
}

.woocommerce table.shop_table.order_details .product-quantity {
	color: var(--ff-text-muted);
	font-weight: var(--ff-fw-regular);
}

/* Opzioni del gioiello (colore, catena, misura…): una per riga, grigie */
.woocommerce ul.wc-item-meta {
	margin: var(--ff-space-2) 0 0;
	padding: 0;
	list-style: none;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

.woocommerce ul.wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--ff-space-1);
	margin: 0;
}

.woocommerce ul.wc-item-meta .wc-item-meta-label {
	float: none;
	font-weight: var(--ff-fw-regular);
}

.woocommerce ul.wc-item-meta p {
	display: inline;
	margin: 0;
	color: var(--ff-text);
}

/* Totali: il totale finale più grande */
.woocommerce table.shop_table.order_details tfoot th {
	color: var(--ff-text-muted);
	font-weight: var(--ff-fw-regular);
	text-align: left;
}

.woocommerce table.shop_table.order_details tfoot tr:last-child th,
.woocommerce table.shop_table.order_details tfoot tr:last-child td {
	color: var(--ff-text);
	font-size: var(--ff-fs-lg);
	font-weight: var(--ff-fw-bold);
}

/* Indirizzi in una scheda chiara */
.woocommerce .woocommerce-customer-details address {
	padding: var(--ff-panel-pad);
	border: 0;
	border-radius: var(--ff-radius-md);
	background: var(--ff-bg-alt);
	color: var(--ff-text);
	font-style: normal;
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-md);
}

.woocommerce .woocommerce-customer-details address p { margin: var(--ff-space-2) 0 0; }
.woocommerce .woocommerce-customer-details--email::before,
.woocommerce .woocommerce-customer-details--phone::before { display: none; }
.woocommerce .woocommerce-customer-details address p.woocommerce-customer-details--email,
.woocommerce .woocommerce-customer-details address p.woocommerce-customer-details--phone { padding-left: 0; }

/* ---------- 10. Pagine di testo (guida misure, FAQ, termini, privacy…) ----------
 * Colonna di lettura stretta e comoda, titoli Prata, tabelle leggibili
 * anche sul telefono (la tabella scorre di lato, la prima colonna resta ferma).
 * ---------------------------------------------------------------------- */

.page .page-header,
.page .page-content {
	max-width: var(--ff-container-text);
	margin-inline: auto;
}

/* Pagina Catalogo Digitale: usa la stessa larghezza della riga del menu, non la colonna di lettura stretta (e' un visualizzatore di documento, non un testo). */
.page-id-1386 .page-header,
.page-id-1386 .page-content {
	max-width: var(--ff-container);
}

.page .page-header .entry-title {
	margin: 0 0 var(--ff-space-6);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}

.page-content {
	color: var(--ff-text-body);
	font-size: var(--ff-fs-md);
	line-height: var(--ff-lh-md);
}

.page-content h2 {
	margin: var(--ff-space-10) 0 var(--ff-space-3);
	font-size: var(--ff-fs-h2);
	line-height: var(--ff-lh-h2);
}

.page-content h3 {
	margin: var(--ff-space-8) 0 var(--ff-space-2);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	font-weight: var(--ff-fw-regular);
	line-height: var(--ff-lh-h3);
	color: var(--ff-text);
}

.page-content h2:first-child,
.page-content h3:first-child { margin-top: 0; }

.page-content ul,
.page-content ol {
	margin: 0 0 var(--ff-space-4);
	padding-left: var(--ff-space-5);
}

.page-content li { margin-bottom: var(--ff-space-2); }
.page-content li::marker { color: var(--ff-gold); }

.page-content a {
	color: var(--ff-text);
	text-decoration: underline;
	text-decoration-color: var(--ff-gold);
	text-underline-offset: 3px;
}

.page-content a:hover { color: var(--ff-gold-text); }

.page-content .ffj-page-image { margin: var(--ff-space-6) 0; }

.page-content .ffj-page-image img {
	width: 100%;
	height: auto;
	border-radius: var(--ff-radius-sm);
}

/* Tabelle: scorrono di lato sul telefono */
.page-content .wp-block-table,
.page-content figure:has(> table) {
	margin: var(--ff-space-6) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.page-content th,
.page-content td {
	padding: var(--ff-space-2) var(--ff-space-3);
	border: 0;
	border-bottom: var(--ff-border-w) solid var(--ff-border);
	text-align: left;
	white-space: nowrap;
}

.page-content thead th {
	background: var(--ff-ink);
	color: var(--ff-white);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.page-content tbody tr:nth-child(even) td { background: var(--ff-bg-alt); }

/* Guida misure: la misura italiana resta visibile mentre la tabella scorre */
.ffj-size-table th:first-child,
.ffj-size-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.ffj-size-table td:first-child {
	background: var(--ff-champagne-50);
	color: var(--ff-text);
}

.ffj-size-table tbody tr:nth-child(even) td:first-child { background: var(--ff-champagne); }

/* Pagina Catalogo Digitale */
.ffj-catalog-intro {
	margin: 0 0 var(--ff-space-8);
}

.ffj-catalog-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ff-space-5);
	margin-bottom: var(--ff-space-8);
	padding: var(--ff-space-6);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-champagne-50);
}

.ffj-catalog-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--ff-radius-sm);
	background: var(--ff-gold);
	color: var(--ff-ink);
}

.ffj-catalog-card__icon svg { width: 26px; height: 26px; }

.ffj-catalog-card__body { flex: 1 1 180px; }

.ffj-catalog-card__title {
	margin: 0 0 2px;
	color: var(--ff-ink);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-lg);
	line-height: var(--ff-lh-lg);
}

.ffj-catalog-card__meta {
	margin: 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.ffj-catalog-card__actions {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-3);
	width: 100%;
}

@media (min-width: 560px) {
	.ffj-catalog-card__actions {
		flex-direction: row;
		width: auto;
		margin-left: auto;
	}
}

.page-content a.ffj-hero__cta.ffj-hero__cta--solid {
	background: var(--ff-gold);
	color: var(--ff-ink);
}

.page-content a.ffj-hero__cta.ffj-hero__cta--solid:hover {
	background: transparent;
	color: var(--ff-gold-text);
}

.ffj-catalog-embed {
	overflow: hidden;
	border-radius: var(--ff-radius-md);
	border: var(--ff-border-w) solid var(--ff-border);
	box-shadow: var(--ff-shadow-md);
}

.ffj-catalog-embed iframe {
	display: block;
	width: 100%;
	height: 75vh;
	min-height: 420px;
	border: 0;
}

/* ---------- 11. Home: banner delle collezioni e novità ----------
 * Come le vendite di Veepee: un banner grande per collezione, foto a tutta
 * larghezza e nome in basso su una sfumatura scura. Sotto, le novità.
 * ---------------------------------------------------------------------- */

.home .page .page-header { display: none; }
.home .page .page-content { max-width: none; }

.ffj-collections {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-gutter);
	margin: 0 0 var(--ff-section-y);
}

.ffj-collection-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ff-radius-md);
	background: var(--ff-gray-50);
	aspect-ratio: 4 / 3;
	color: var(--ff-white);
	text-decoration: none;
}

.page-content a.ffj-collection-card { color: var(--ff-white); text-decoration: none; }

.ffj-collection-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ff-dur-slow) var(--ff-ease);
}

.ffj-collection-card:hover .ffj-collection-card__img { transform: scale(1.03); }

/* Sfumatura in basso: il nome si legge su qualsiasi foto */
.ffj-collection-card::after {
	content: "";
	position: absolute;
	inset: 30% 0 0;
	background: linear-gradient(to top, rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0));
	pointer-events: none;
}

.ffj-collection-card__text {
	position: absolute;
	left: var(--ff-space-5);
	right: var(--ff-space-5);
	bottom: var(--ff-space-5);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ff-space-1);
}

.ffj-collection-card__desc {
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.ffj-collection-card__name {
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h2);
	line-height: var(--ff-lh-h2);
}

.ffj-collection-card__count {
	margin-top: var(--ff-space-2);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--ff-champagne);
	color: var(--ff-champagne);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	white-space: nowrap;
}

.home .page-content > h2 {
	margin: 0 0 var(--ff-space-4);
	font-size: var(--ff-fs-h2);
}

@media (min-width: 768px) {
	.ffj-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 12. Home: apertura, frase del brand, processo, Instagram ----------
 * Ritmo da gioielleria: tanto spazio, titoli Prata grandi, una sola riga oro
 * come segno. Le fasce ink e champagne escono a tutta larghezza.
 * ---------------------------------------------------------------------- */

/* Fasce a tutta larghezza anche dentro il contenitore della pagina */
.ffj-hero,
.ffj-statement,
.ffj-social {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	box-sizing: border-box;
}

.home .site-main { padding-top: 0; }

/* 100vw comprende la barra di scorrimento sul computer: taglio quel poco che sborda */
body.home { overflow-x: clip; }

.ffj-eyebrow {
	margin: 0 0 var(--ff-space-3);
	color: var(--ff-gold-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* Apertura: fascia ink, titolo champagne, foto del gioiello su fondo chiaro */
.ffj-hero {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: var(--ff-section-y);
	background: var(--ff-champagne-50);
	color: var(--ff-text);
}

.ffj-hero__text {
	padding: var(--ff-space-12) var(--ff-page-x) var(--ff-space-10);
}

.ffj-hero .ffj-eyebrow { color: var(--ff-gold-text); }

.ffj-hero__title {
	margin: 0 0 var(--ff-space-4);
	color: var(--ff-ink);
	font-family: var(--ff-font-display);
	font-size: clamp(34px, 8vw, 56px);
	font-weight: var(--ff-fw-regular);
	line-height: 1.12;
}

.ffj-hero__lead {
	max-width: 34ch;
	margin: 0 0 var(--ff-space-8);
	color: rgba(26, 26, 26, 0.75);
	font-size: var(--ff-fs-lg);
	line-height: var(--ff-lh-lg);
}

.page-content a.ffj-hero__cta,
.ffj-hero__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	box-sizing: border-box;
	padding: 0 var(--ff-space-8);
	border-radius: var(--ff-radius-sm);
	background: transparent;
	border: 1.5px solid var(--ff-gold-text);
	color: var(--ff-gold-text);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
}

.page-content a.ffj-hero__cta:hover { background: var(--ff-gold); color: var(--ff-ink); border-color: var(--ff-gold); }

.ffj-hero__media { background: var(--ff-white); }

.ffj-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 520px;
	object-fit: contain;
}

.ffj-hero__media--video { background: var(--ff-ink); }

.ffj-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	max-height: 600px;
	object-fit: cover;
	filter: grayscale(75%) contrast(1.3) brightness(0.82) saturate(0.9);
}

/* Titoli delle sezioni: piccoli, centrati, con una riga oro */
.ffj-home-section { margin: 0 0 var(--ff-section-y); scroll-margin-top: 140px; }

.ffj-section-head {
	max-width: 640px;
	margin: 0 auto var(--ff-space-8);
	text-align: center;
}

.ffj-section-head .ffj-eyebrow::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: var(--ff-space-3) auto 0;
	background: var(--ff-gold);
}

.ffj-section-head__lead {
	margin: 0;
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

/* Frase del brand su fondo champagne */
.ffj-statement {
	margin-bottom: var(--ff-section-y);
	padding: var(--ff-space-16) var(--ff-page-x);
	background: var(--ff-champagne-50);
	text-align: center;
}

.page-content .ffj-statement__title,
.ffj-statement__title {
	margin: 0 auto var(--ff-space-4);
	max-width: 18ch;
	font-size: clamp(30px, 6vw, 44px);
	line-height: 1.15;
}

.ffj-statement__text {
	max-width: 44ch;
	margin: 0 auto;
	color: var(--ff-text-body);
	font-size: var(--ff-fs-lg);
	line-height: var(--ff-lh-lg);
}

/* Processo creativo: quattro passaggi numerati */
.page-content ol.ffj-craft__steps,
.ffj-craft__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ffj-craft__step {
	margin: 0;
	padding-top: var(--ff-space-4);
	border-top: 1px solid var(--ff-border);
}

.ffj-craft__num {
	display: block;
	margin-bottom: var(--ff-space-2);
	color: var(--ff-gold);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h2);
	line-height: 1;
}

.page-content .ffj-craft__title,
.ffj-craft__title {
	margin: 0 0 var(--ff-space-2);
	font-size: var(--ff-fs-lg);
}

.ffj-craft__text {
	margin: 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

/* Instagram su fascia ink */
.ffj-social {
	margin-bottom: var(--ff-section-y);
	padding: var(--ff-space-16) var(--ff-page-x);
	background: var(--ff-ink);
	color: var(--ff-white);
	text-align: center;
}

.page-content .ffj-social__title,
.ffj-social__title {
	margin: 0 0 var(--ff-space-3);
	color: var(--ff-champagne);
	font-size: clamp(28px, 6vw, 40px);
	line-height: 1.15;
}

.ffj-social__text {
	max-width: 44ch;
	margin: 0 auto var(--ff-space-6);
	color: rgba(255, 255, 255, 0.82);
}

.page-content a.ffj-social__link {
	color: var(--ff-gold);
	font-weight: var(--ff-fw-bold);
	letter-spacing: 0.08em;
	text-decoration: none;
	border-bottom: 1px solid var(--ff-gold);
}

/* Assistenza e pagamento sicuro */
.ffj-trust {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-6);
	margin: 0 0 var(--ff-space-8);
	text-align: center;
}

.page-content .ffj-trust h3 {
	margin: 0 0 var(--ff-space-2);
	font-size: var(--ff-fs-lg);
}

.ffj-trust p {
	max-width: 40ch;
	margin: 0 auto;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

@media (min-width: 768px) {
	.ffj-craft__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ffj-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
	.ffj-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
	.ffj-hero__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--ff-space-16) var(--ff-space-12) var(--ff-space-16) max(var(--ff-page-x), calc((100vw - var(--ff-container)) / 2));
	}
	.ffj-hero__img { max-height: 600px; }
	.ffj-craft__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 6. Da tablet in su ---------- */
@media (min-width: 768px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Avvisi su una riga sola: icona, testo, link a destra */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error { grid-template-columns: 22px minmax(0, 1fr) auto; }

	.woocommerce .woocommerce-message .button,
	.woocommerce .woocommerce-info .button,
	.woocommerce .woocommerce-error .button {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}

/* ---------- 7. Computer: foto 7/12, informazioni 5/12 ferme mentre si scorre ---------- */
@media (min-width: 1025px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.single-product div.product {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--ff-space-12);
		align-items: start;
	}

	.single-product div.product > * { grid-column: 1 / -1; }

	.woocommerce div.product div.images.woocommerce-product-gallery {
		grid-column: 1;
		margin: 0;
	}

	.woocommerce div.product div.summary.entry-summary {
		grid-column: 2;
		position: sticky;
		top: calc(var(--ff-header-h) + var(--ff-nav-h) + var(--ff-space-6));
	}

	.woocommerce div.product div.images .flex-control-thumbs { padding: 0; }

	/* Riepilogo carrello/checkout in un riquadro chiaro a destra */
	.wc-block-cart .wc-block-cart__sidebar,
	.wc-block-checkout .wc-block-checkout__sidebar {
		padding: var(--ff-panel-pad);
		border-radius: var(--ff-radius-md);
		background: var(--ff-bg-alt);
	}

	/* Sul computer il pulsante vero è sempre a portata: la barra non serve */
	.ffj-buybar { display: none !important; }
	.single-product .ffj-footer { padding-bottom: 0; }
}

/* ---------- 13. Il mio account (stile Veepee) ----------
 * Da non registrato: una scheda "Accedi" stretta e centrata, pulsante a tutta larghezza.
 * Da registrato, sul telefono: la bacheca è un elenco di voci con la freccia, ogni
 * pagina interna ha "‹ Il mio account" in alto e il menu laterale sparisce.
 * Sul computer: menu a sinistra (voce attiva con la riga oro), contenuto a destra.
 * WooCommerce mette menu e contenuto in float 30%/68%: li rimetto in griglia.
 * ---------------------------------------------------------------------- */

/* --- Accesso e password dimenticata --- */
.woocommerce-account:not(.logged-in) .page-header,
.woocommerce-account:not(.logged-in) .page-content {
	max-width: 440px;
}

.woocommerce-account:not(.logged-in) .page-header .entry-title { text-align: center; }

/* "Accedi" sopra il modulo ripete il titolo della pagina: lo tolgo */
.woocommerce-account:not(.logged-in) .page-content .woocommerce > h2 { display: none; }

.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.lost_reset_password {
	margin: 0 0 var(--ff-space-8);
	padding: var(--ff-space-6) var(--ff-space-5);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-surface);
}

.woocommerce form.woocommerce-form-login .form-row,
.woocommerce form.woocommerce-form-register .form-row,
.woocommerce form.lost_reset_password .form-row {
	float: none;
	width: 100%;
	margin: 0 0 var(--ff-space-4);
	padding: 0;
}

.woocommerce form.lost_reset_password > p:first-child {
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

.woocommerce-account form .form-row label {
	display: block;
	margin-bottom: var(--ff-space-1);
	line-height: var(--ff-lh-sm);
}

.woocommerce-account form .form-row .required {
	color: var(--ff-text-muted);
	text-decoration: none;
}

/* Riga "Ricordami" + pulsante: la casella sopra, il pulsante sotto a tutta larghezza */
.woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ff-space-4);
}

.woocommerce form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	margin: 0;
	font-weight: var(--ff-fw-regular);
	cursor: pointer;
}

.woocommerce form .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	accent-color: var(--ff-ink);
}

.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce form.woocommerce-form-register .woocommerce-form-register__submit,
.woocommerce form.lost_reset_password .button {
	float: none;
	width: 100%;
	margin: 0;
}

.woocommerce form.woocommerce-form-login .lost_password {
	margin: 0;
	text-align: center;
	font-size: var(--ff-fs-sm);
}

.woocommerce form.woocommerce-form-login .lost_password a {
	color: var(--ff-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Occhio per vedere la password: icona discreta dentro il campo, non un bottone nero */
.woocommerce form .password-input {
	position: relative;
	display: block;
}

.woocommerce form .password-input input { padding-right: 48px; }

.woocommerce form .password-input .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B675F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center;
	color: transparent;
	font-size: 0;
}

.woocommerce form .password-input .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* WooCommerce disegna la sua icona in ::before e la centra con transform: tengo solo la mia */
.woocommerce form .password-input .show-password-input { transform: none; }
.woocommerce form .password-input .show-password-input::before,
.woocommerce form .password-input .show-password-input::after { display: none; }

/* --- Area cliente --- */
/* Stessa larghezza dell'header e del negozio: il titolo e il menu partono in linea col logo */
.woocommerce-account.logged-in .page-header,
.woocommerce-account.logged-in .page-content {
	max-width: var(--ff-container);
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Sul telefono il menu laterale non serve: la bacheca è il menu */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }

/* Nell'account i link sono voci e schede, non link dentro un testo:
   tolgo la sottolineatura oro delle pagine di testo (sezione 10) */
.woocommerce-account .page-content .woocommerce-MyAccount-navigation a,
.woocommerce-account .page-content a.ffj-account-back { text-decoration: none; }

.woocommerce-account .page-content a.ffj-account-card,
.woocommerce-account .page-content a.ffj-account-card:hover {
	color: var(--ff-text);
	text-decoration: none;
}

.woocommerce-account .page-content a.ffj-account-logout {
	color: var(--ff-text-muted);
	text-decoration-color: currentColor;
}

.woocommerce-account .page-content a.ffj-account-logout:hover { color: var(--ff-text); }

.ffj-account-back {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-2);
	margin: 0 0 var(--ff-space-5);
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-account-back::before {
	content: "";
	width: 8px;
	height: 8px;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.ffj-account-back:hover { color: var(--ff-gold-text); }

.ffj-account-hello {
	margin: 0 0 var(--ff-space-6);
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h2);
	line-height: var(--ff-lh-h2);
}

/* Bacheca: elenco di voci con la freccia (telefono), schede in griglia (da tablet) */
.page-content .ffj-account-cards {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 0 var(--ff-space-6);
	padding: 0;
	border-top: var(--ff-border-w) solid var(--ff-border);
	list-style: none;
}

.page-content .ffj-account-cards li { margin: 0; }

.ffj-account-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 64px;
	justify-content: center;
	padding: var(--ff-space-3) var(--ff-space-8) var(--ff-space-3) 0;
	border-bottom: var(--ff-border-w) solid var(--ff-border);
	color: var(--ff-text);
}

.ffj-account-card::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--ff-space-2);
	width: 8px;
	height: 8px;
	border-top: 1.5px solid var(--ff-text-muted);
	border-right: 1.5px solid var(--ff-text-muted);
	transform: translateY(-50%) rotate(45deg);
}

.ffj-account-card:hover { color: var(--ff-text); }
.ffj-account-card:hover::after { border-color: var(--ff-gold); }

.ffj-account-card__title {
	font-size: var(--ff-fs-md);
	font-weight: var(--ff-fw-semibold);
	line-height: var(--ff-lh-md);
}

.ffj-account-card__hint {
	overflow: hidden;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ffj-account-logout {
	display: inline-block;
	padding: var(--ff-space-2) 0;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ffj-account-logout:hover { color: var(--ff-text); }

/* Frase "L'ordine n. … è stato effettuato il … ed è ora …": i <mark> senza evidenziatore giallo */
.woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--ff-text);
	font-weight: var(--ff-fw-semibold);
}

/* --- I miei ordini: una scheda per ordine, niente tabella con intestazioni ---
 * Telefono: in alto le miniature dei gioielli, sotto etichetta a sinistra e valore a destra.
 * Da tablet: una riga-scheda (miniature · numero · data · stato · totale · Visualizza)
 * con l'etichetta piccola sopra ogni valore, così la riga "ORDINE DATA STATO" non serve.
 * Selettori lunghi di proposito: WooCommerce colora a righe alterne e mette bordi
 * alle celle con regole forti (.woocommerce-page table.shop_table_responsive…). */
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table {
	display: block;
	width: 100%;
	margin: 0 0 var(--ff-space-6);
	border: 0;
	border-radius: 0;
	font-size: var(--ff-fs-sm);
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table thead { display: none; }

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody { display: block; }

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr {
	display: block;
	margin: 0 0 var(--ff-space-3);
	padding: var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-surface);
	transition: border-color var(--ff-dur-fast) var(--ff-ease);
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr:hover { border-color: var(--ff-ink); }

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr th,
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr td {
	display: block;
	padding: var(--ff-space-1) 0;
	border: 0;
	background: transparent;
	color: var(--ff-text);
	font-weight: var(--ff-fw-regular);
	text-align: right !important;
}

/* Etichetta dalla colonna (data-title): a sinistra sul telefono */
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr th::before,
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr td::before {
	content: attr(data-title);
	float: left;
	margin-right: var(--ff-space-4);
	color: var(--ff-text-muted);
	font-weight: var(--ff-fw-regular);
	text-align: left;
}

/* Miniature e azioni non hanno bisogno di etichetta */
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-ffj-items::before,
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-order-actions::before { display: none; }

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-ffj-items {
	padding: 0 0 var(--ff-space-3);
	text-align: left !important;
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-order-actions { padding-top: var(--ff-space-3); }

/* Numero d'ordine: in grassetto, senza sottolineatura oro (in Prata l'1 sembrava una I) */
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table .woocommerce-orders-table__cell-order-number a {
	color: var(--ff-text);
	font-size: var(--ff-fs-md);
	font-weight: var(--ff-fw-bold);
	text-decoration: none;
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { color: var(--ff-text); }

/* "Visualizza": bottone contornato piccolo */
.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table .button {
	min-height: 40px;
	margin: 0;
	padding: 0 var(--ff-space-4);
	border: var(--ff-border-w) solid var(--ff-btn-bg);
	background: transparent;
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table .button:hover {
	background: var(--ff-btn-bg);
	color: var(--ff-btn-text);
}

.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table .button + .button { margin-left: var(--ff-space-2); }

/* Mosaico dei gioielli dell'ordine (functions.php: colonna ffj-items): un riquadro fisso
 * 56x56 diviso in base al numero di gioielli, invece di foto in fila. */
.ffj-order-mosaic {
	display: grid;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	gap: 1px;
	overflow: hidden;
	border-radius: var(--ff-radius-sm);
	background: var(--ff-border);
}

.ffj-order-mosaic__cell {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ff-gray-50);
}

.ffj-order-mosaic__cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ffj-order-mosaic--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }

.ffj-order-mosaic--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

.ffj-order-mosaic--3,
.ffj-order-mosaic--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Con 3 gioielli, il primo occupa una casella grande alta quanto le altre due impilate. */
.ffj-order-mosaic--3 .ffj-order-mosaic__cell:first-child { grid-row: 1 / span 2; }

.ffj-order-mosaic__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 26, 26, .55);
	color: #fff;
	font-size: 10px;
	font-weight: var(--ff-fw-bold);
}

/* Stato come etichetta: ambra in attesa, champagne in lavorazione, verde completato, grigio chiuso */
.ffj-order-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--ff-radius-pill);
	background: var(--ff-gray-100);
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-semibold);
	line-height: var(--ff-lh-xs);
	white-space: nowrap;
}

.ffj-order-status--pending,
.ffj-order-status--on-hold { background: #F6ECD9; color: #6E4A0E; }
.ffj-order-status--processing { background: var(--ff-champagne-50); color: var(--ff-gold-text); box-shadow: inset 0 0 0 1px var(--ff-champagne); }
.ffj-order-status--completed { background: #E7F0E6; color: #2F5536; }
.ffj-order-status--cancelled,
.ffj-order-status--refunded,
.ffj-order-status--failed { background: var(--ff-gray-100); color: var(--ff-text-muted); }

@media (min-width: 768px) {
	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr {
		display: grid;
		grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto;
		align-items: center;
		column-gap: var(--ff-space-6);
		padding: var(--ff-space-4) var(--ff-space-5);
	}

	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr th,
	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr td {
		padding: 0;
		text-align: left !important;
	}

	/* Etichetta piccola sopra il valore */
	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr th::before,
	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr td::before {
		display: block;
		float: none;
		margin: 0 0 var(--ff-space-1);
		font-size: var(--ff-fs-xs);
		font-weight: var(--ff-fw-bold);
		letter-spacing: var(--ff-ls-caps);
		line-height: var(--ff-lh-xs);
		text-transform: uppercase;
	}

	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-ffj-items,
	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-order-actions { padding: 0; }

	.woocommerce-account .woocommerce table.woocommerce-orders-table.shop_table tbody tr .woocommerce-orders-table__cell-order-actions { text-align: right !important; }
}

/* --- Indirizzi: due schede, "Modifica" come link --- */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-4);
	margin-top: var(--ff-space-4);
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { display: none; }

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: var(--ff-space-5);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
	background: var(--ff-surface);
}

/* Titolo sopra, "Modifica indirizzo di …" sotto: sul telefono affiancati non ci stanno */
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ff-space-1);
	margin: 0 0 var(--ff-space-4);
}

.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after { display: none; }

.woocommerce-account .page-content .woocommerce-Address-title h2 {
	float: none;
	margin: 0;
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

.woocommerce-account .woocommerce-Address-title .edit {
	float: none;
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--ff-text-body);
	font-size: var(--ff-fs-sm);
	font-style: normal;
	line-height: var(--ff-lh-md);
}

/* --- Moduli dell'account (indirizzo, dati personali, password) --- */
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
	float: none;
	width: 100%;
	margin: 0 0 var(--ff-space-4);
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content form .form-row em {
	display: block;
	margin-top: var(--ff-space-1);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	line-height: var(--ff-lh-xs);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: var(--ff-space-8) 0 var(--ff-space-4);
	padding: 0;
	border: 0;
}

.woocommerce-account .woocommerce-EditAccountForm legend {
	margin: 0 0 var(--ff-space-4);
	padding: 0;
	color: var(--ff-text);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

.woocommerce-account .woocommerce-MyAccount-content form .clear { display: none; }

.woocommerce-account .woocommerce-MyAccount-content form > p:last-of-type .button,
.woocommerce-account .woocommerce-address-fields .button {
	width: 100%;
}

@media (min-width: 768px) {
	.page-content .ffj-account-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ff-space-4);
		border-top: 0;
	}

	.ffj-account-card {
		height: 100%;
		min-height: 104px;
		box-sizing: border-box;
		padding: var(--ff-space-5) var(--ff-space-10) var(--ff-space-5) var(--ff-space-5);
		border: var(--ff-border-w) solid var(--ff-border);
		border-radius: var(--ff-radius-md);
		background: var(--ff-surface);
		transition: border-color var(--ff-dur-fast) var(--ff-ease);
	}

	.ffj-account-card:hover { border-color: var(--ff-ink); }
	.ffj-account-card::after { right: var(--ff-space-5); }

	.woocommerce-account .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Dati personali e indirizzi in due colonne:
	   nome | cognome, nome visualizzato | email (le password, vedi computer).
	   Prima era inline-block al 50%: con lo spazio tra i due campi andavano a capo. */
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--ff-space-4);
	}

	.woocommerce-account .woocommerce-EditAccountForm > *,
	.woocommerce-account .woocommerce-address-fields__field-wrapper > * { grid-column: 1 / -1; }

	.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-account .woocommerce-EditAccountForm > .form-row-last,
	.woocommerce-account .woocommerce-EditAccountForm > p:has(#account_display_name),
	.woocommerce-account .woocommerce-EditAccountForm > p:has(#account_email),
	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last,
	.woocommerce-account .woocommerce-address-fields__field-wrapper > [id$="_postcode_field"],
	.woocommerce-account .woocommerce-address-fields__field-wrapper > [id$="_city_field"],
	.woocommerce-account .woocommerce-address-fields__field-wrapper > [id$="_state_field"],
	.woocommerce-account .woocommerce-address-fields__field-wrapper > [id$="_phone_field"] { grid-column: auto; }

	.woocommerce-account .woocommerce-MyAccount-content form > p:last-of-type .button,
	.woocommerce-account .woocommerce-address-fields .button { width: auto; min-width: 240px; }
}

@media (min-width: 1025px) {
	.woocommerce-account.logged-in .page-content > .woocommerce {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: var(--ff-space-12);
		align-items: start;
	}

	.woocommerce-account.logged-in .page-content > .woocommerce > * { grid-column: 1 / -1; }
	.woocommerce-account.logged-in .page-content > .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
	.woocommerce-account.logged-in .page-content > .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }

	.woocommerce-account .woocommerce-MyAccount-navigation {
		display: block;
		position: sticky;
		top: calc(var(--ff-header-h) + var(--ff-nav-h) + var(--ff-space-6));
	}

	.woocommerce-account .page-content .woocommerce-MyAccount-navigation ul {
		margin: 0;
		padding: 0;
		border-left: var(--ff-border-w) solid var(--ff-border);
		list-style: none;
	}

	.woocommerce-account .page-content .woocommerce-MyAccount-navigation li { margin: 0; }

	.woocommerce-account .woocommerce-MyAccount-navigation a {
		display: block;
		margin-left: calc(var(--ff-border-w) * -1);
		padding: var(--ff-space-2) var(--ff-space-4);
		border-left: var(--ff-border-w-strong) solid transparent;
		color: var(--ff-text-muted);
		font-size: var(--ff-fs-sm);
		line-height: var(--ff-lh-md);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--ff-text); }

	.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
		border-left-color: var(--ff-gold);
		color: var(--ff-text);
		font-weight: var(--ff-fw-semibold);
	}

	/* Col menu sempre visibile "torna indietro" non serve */
	.ffj-account-back { display: none; }

	/* Le tre password affiancate. Le etichette sono lunghe e vanno a capo in modo
	   diverso: allineo i campi in basso così restano sulla stessa linea */
	.woocommerce-account .woocommerce-EditAccountForm fieldset {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--ff-space-4);
		align-items: end;
	}
}

/* ---------- 14. Ricerca senza risultati e pagina 404 ----------
 * Mai un vicolo cieco: sotto il messaggio metto le collezioni.
 * La 404 è centrata e sobria: titolo Prata, ricerca, link alla home.
 * ---------------------------------------------------------------------- */

.ffj-empty-suggest {
	margin-top: var(--ff-space-10);
	text-align: left;
}

.ffj-empty-suggest .ffj-collections { margin-bottom: 0; }

/* Fuori dalle pagine (ricerca, 404) i banner non ereditano il bianco di .page-content */
a.ffj-collection-card,
a.ffj-collection-card:hover {
	color: var(--ff-white);
	text-decoration: none;
}

.ffj-404 { text-align: center; }

.ffj-404__title {
	margin: 0 0 var(--ff-space-3);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}

.ffj-404__text {
	margin: 0 auto var(--ff-space-6);
	max-width: 440px;
	color: var(--ff-text-muted);
}

/* Campo e pulsante uniti in una sola riga, come la ricerca dell'header */
.ffj-404__search {
	display: flex;
	max-width: 440px;
	margin: 0 auto var(--ff-space-4);
}

.ffj-404__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border-right: 0;
	border-radius: var(--ff-radius-sm) 0 0 var(--ff-radius-sm);
}

.ffj-404__search button {
	flex: 0 0 auto;
	border-radius: 0 var(--ff-radius-sm) var(--ff-radius-sm) 0;
}

.ffj-404__home {
	display: inline-block;
	padding: var(--ff-space-2) 0;
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	text-decoration: underline;
	text-decoration-color: var(--ff-gold);
	text-underline-offset: 4px;
}

.ffj-404__home:hover { color: var(--ff-gold-text); }

/* ---------- 15. Pagina Contatti: due colonne a tutta larghezza ----------
 * Niente titolo di pagina: si apre con "Mettiti in contatto" e il modulo.
 * A destra i recapiti su un pannello chiaro, con icone a linea come
 * nell'header e nel footer. Sul telefono i recapiti scendono sotto il modulo.
 * ---------------------------------------------------------------------- */

.page:has(.ffj-contact-page) .page-header { display: none; }
.page .page-content:has(.ffj-contact-page) { max-width: var(--ff-container); }

.ffj-contact-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-10);
}

.page-content .ffj-contact-page__title {
	margin: 0 0 var(--ff-space-6);
	font-size: var(--ff-fs-h1);
	line-height: var(--ff-lh-h1);
}

/* Qui il modulo non ha bisogno del suo margine sotto: lo spazio lo dà la griglia */
.ffj-contact-page .ffj-contact { margin-bottom: 0; }

.ffj-contact-page__intro {
	margin: 0 0 var(--ff-space-8);
	color: var(--ff-text-muted);
}

/* Il pannello dei recapiti: chiaro, bordo sottile, niente foto, stesso spazio su tutti i lati */
.ffj-contact-page__info {
	padding: var(--ff-space-6);
	background: var(--ff-bg-alt);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
}

.page-content .ffj-contact-page__label {
	margin: 0 0 var(--ff-space-6);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

.page-content ul.ffj-contact-page__list {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-content .ffj-contact-page__list li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: var(--ff-space-4);
	align-items: start;
	margin: 0;
}

/* Icone: stessa linea sottile dell'header, in oro */
.ffj-contact-page__list svg {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	fill: none;
	stroke: var(--ff-gold);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Etichetta piccola maiuscola sopra, valore sotto */
.ffj-contact-page__k {
	display: block;
	margin-bottom: 2px;
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-contact-page__v {
	display: block;
	color: var(--ff-text);
	font-size: var(--ff-fs-md);
	line-height: var(--ff-lh-md);
	overflow-wrap: anywhere;
}

.page-content a.ffj-contact-page__v {
	text-decoration: none;
}

.page-content a.ffj-contact-page__v:hover {
	color: var(--ff-link-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Computer: modulo 7/12 a sinistra, recapiti 5/12 a destra, le due colonne allineate al centro */
@media (min-width: 1025px) {
	.ffj-contact-page {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--ff-space-16);
		align-items: center;
	}

	.ffj-contact-page__info { padding: var(--ff-space-10); }
}

/* ---------- 16. Pagine di assistenza: due colonne da computer ----------
 * FAQ, resi, termini, privacy, guida alle misure, codice gioiello.
 * A sinistra il testo (riga comoda da leggere), a destra un pannello fisso
 * con le altre pagine di assistenza e i recapiti. Sul telefono va tutto in colonna.
 * ---------------------------------------------------------------------- */

.ffj-help-page .page-header,
.ffj-help-page .page-content { max-width: var(--ff-container); }

.ffj-help-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-10);
}

.ffj-help-layout__main { max-width: 760px; }
.ffj-help-layout__main > :first-child { margin-top: 0; }
.ffj-help-layout__main > :last-child { margin-bottom: 0; }

.ffj-help {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-6);
}

/* Elenco delle pagine di assistenza: la pagina aperta ha la riga oro */
.page-content .ffj-help__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--ff-border-w) solid var(--ff-border);
}

.page-content .ffj-help__nav li {
	margin: 0;
	border-bottom: var(--ff-border-w) solid var(--ff-border);
}

.page-content .ffj-help__nav a {
	display: block;
	padding: var(--ff-space-3) 0 var(--ff-space-3) var(--ff-space-4);
	border-left: 2px solid transparent;
	color: var(--ff-text);
	font-size: var(--ff-fs-sm);
	text-decoration: none;
}

.page-content .ffj-help__nav a:hover { color: var(--ff-link-hover); }

.page-content .ffj-help__nav a[aria-current="page"] {
	border-left-color: var(--ff-gold);
	font-weight: var(--ff-fw-bold);
}

.ffj-help__label {
	margin: 0 0 var(--ff-space-3);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

/* Scheda recapiti: stesso pannello chiaro della pagina Contatti */
.ffj-help__card {
	padding: var(--ff-space-6);
	background: var(--ff-bg-alt);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
}

.ffj-help__title {
	margin: 0 0 var(--ff-space-4);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
	color: var(--ff-text);
}

.page-content ul.ffj-help__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-3);
	margin: 0 0 var(--ff-space-6);
	padding: 0;
	list-style: none;
}

.page-content .ffj-help__contacts li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: var(--ff-space-3);
	align-items: center;
	margin: 0;
	font-size: var(--ff-fs-sm);
}

.ffj-help__contacts svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--ff-gold);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.page-content .ffj-help__contacts a {
	color: var(--ff-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.page-content .ffj-help__contacts a:hover { color: var(--ff-link-hover); }

/* Pulsante nero come "Invia" del modulo contatti */
.page-content a.ffj-help__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--ff-space-6);
	background: var(--ff-ink);
	border-radius: var(--ff-radius-sm);
	color: var(--ff-white);
	font-size: var(--ff-fs-sm);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
}

.page-content a.ffj-help__cta:hover { background: var(--ff-gold); color: var(--ff-ink); }

@media (min-width: 1025px) {
	.ffj-help-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--ff-space-16);
		align-items: start;
	}

	.ffj-help {
		position: sticky;
		top: calc(var(--ff-header-h) + var(--ff-nav-h) + var(--ff-space-6));
	}
}

/* ---------- 17. FAQ: domande che si aprono (senza JavaScript) ---------- */

.page-content .ffj-faq__intro {
	margin: 0 0 var(--ff-space-8);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-lg);
	line-height: var(--ff-lh-lg);
}

.page-content .ffj-faq__section { margin: 0 0 var(--ff-space-10); }
.page-content .ffj-faq__section:last-child { margin-bottom: 0; }

.page-content .ffj-faq__section h2 {
	margin: 0 0 var(--ff-space-3);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
}

.ffj-faq__item { border-bottom: var(--ff-border-w) solid var(--ff-border); }

.ffj-faq__item summary {
	position: relative;
	display: block;
	padding: var(--ff-space-4) var(--ff-space-10) var(--ff-space-4) 0;
	color: var(--ff-text);
	font-weight: var(--ff-fw-semibold);
	cursor: pointer;
	list-style: none;
}

.ffj-faq__item summary::-webkit-details-marker { display: none; }

/* Più che diventa meno: due righe oro */
.ffj-faq__item summary::before,
.ffj-faq__item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--ff-space-2);
	width: 14px;
	height: 1.5px;
	background: var(--ff-gold);
	transition: transform 0.25s ease;
}

.ffj-faq__item summary::after { transform: rotate(90deg); }
.ffj-faq__item[open] summary::after { transform: rotate(0deg); }

.ffj-faq__item summary:hover { color: var(--ff-link-hover); }

.ffj-faq__a {
	padding: 0 var(--ff-space-10) var(--ff-space-5) 0;
	color: var(--ff-text-body);
	animation: ffj-faq-open 0.3s ease both;
}

.ffj-faq__a p:last-child { margin-bottom: 0; }

@keyframes ffj-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 18. Guida alle misure: "Trova la tua misura" ---------- */

.ffj-size-finder {
	margin: 0 0 var(--ff-space-8);
	padding: var(--ff-space-6);
	background: var(--ff-bg-alt);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-md);
}

.page-content .ffj-size-finder__title {
	margin: 0 0 var(--ff-space-1);
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
	color: var(--ff-text);
}

.page-content .ffj-size-finder__hint {
	margin: 0 0 var(--ff-space-4);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

.ffj-size-finder__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-3);
}

.ffj-size-finder__row label {
	display: block;
	margin-bottom: var(--ff-space-1);
	color: var(--ff-text);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-size-finder__row select,
.ffj-size-finder__row input { width: 100%; }

@media (min-width: 768px) {
	.ffj-size-finder__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ffj-size-finder__result:empty { display: none; }

.ffj-size-finder__result {
	margin-top: var(--ff-space-5);
	animation: ffj-faq-open 0.3s ease both;
}

.page-content .ffj-size-finder__answer {
	margin: 0 0 var(--ff-space-3);
	color: var(--ff-text);
}

.page-content .ffj-size-finder__answer strong {
	font-family: var(--ff-font-display);
	font-size: var(--ff-fs-h2);
	font-weight: var(--ff-fw-regular);
	color: var(--ff-gold-text);
}

.page-content .ffj-size-finder__note {
	margin: 0 0 var(--ff-space-3);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
}

/* Le equivalenze: piccole schede, 2 per riga sul telefono, 4 da tablet */
.page-content dl.ffj-size-finder__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ff-space-2);
	margin: 0;
}

@media (min-width: 768px) {
	.page-content dl.ffj-size-finder__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ffj-size-finder__grid div {
	padding: var(--ff-space-3);
	background: var(--ff-white);
	border: var(--ff-border-w) solid var(--ff-border);
	border-radius: var(--ff-radius-sm);
}

.ffj-size-finder__grid dt {
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-xs);
	font-weight: var(--ff-fw-bold);
	letter-spacing: var(--ff-ls-caps);
	text-transform: uppercase;
}

.ffj-size-finder__grid dd {
	margin: 2px 0 0;
	color: var(--ff-text);
	font-weight: var(--ff-fw-semibold);
}

/* La riga trovata nella tabella resta evidenziata */
.page-content .ffj-size-table tr.is-match td,
.page-content .ffj-size-table tr.is-match td:first-child {
	background: var(--ff-champagne);
	color: var(--ff-text);
	font-weight: var(--ff-fw-semibold);
}

/* ---------- 19. Il mio account da non connessi: Accedi e Registrati affiancati ----------
 * Con la registrazione attiva WooCommerce mette due colonne: da tablet in su
 * stanno una accanto all'altra, stessa altezza; sul telefono Registrati va sotto.
 * ---------------------------------------------------------------------- */

.woocommerce-account:not(.logged-in) .page-content:has(#customer_login) { max-width: 920px; }

.woocommerce #customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ff-space-8);
}

/* Le colonne di WooCommerce sono float con il clearfix: nella griglia non servono */
.woocommerce #customer_login::before,
.woocommerce #customer_login::after { display: none; }

.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2 {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .page-content #customer_login h2 {
	margin: 0 0 var(--ff-space-4);
	font-size: var(--ff-fs-h3);
	line-height: var(--ff-lh-h3);
	text-align: left;
}

.woocommerce #customer_login form.woocommerce-form-login,
.woocommerce #customer_login form.woocommerce-form-register {
	flex: 1;
	margin: 0;
}

/* Le frasi del modulo Registrati: piccole e grigie, non testo pieno */
.woocommerce form.woocommerce-form-register > p:not(.form-row),
.woocommerce form.woocommerce-form-register .woocommerce-privacy-policy-text p {
	margin: 0 0 var(--ff-space-4);
	color: var(--ff-text-muted);
	font-size: var(--ff-fs-sm);
	line-height: var(--ff-lh-sm);
}

@media (min-width: 768px) {
	.woocommerce #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ff-space-10);
		align-items: stretch;
	}
}

/* ---------- 20. Correzioni dal controllo sul telefono ----------
 * Le tabelle delle pagine di testo non vanno a capo (per la guida misure),
 * ma nel carrello e negli ordini il testo deve andare a capo, altrimenti
 * le opzioni lunghe (es. "Dimensioni dell'elemento") escono dallo schermo.
 * ---------------------------------------------------------------------- */

.page-content .wp-block-woocommerce-cart td,
.page-content .wp-block-woocommerce-checkout td,
.page-content .woocommerce td,
.page-content .woocommerce th {
	white-space: normal;
}

.wc-block-components-product-metadata,
.wc-block-components-product-details {
	overflow-wrap: anywhere;
}

/* Banner delle collezioni sul telefono: il nome si leggeva male sopra le parti
   chiare della foto. Sfumatura più alta e più scura, descrizione su due righe. */
.ffj-collection-card__name { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }

@media (max-width: 767px) {
	.ffj-collection-card::after {
		inset: 10% 0 0;
		background: linear-gradient(to top, rgba(26, 26, 26, 0.9) 0%, rgba(26, 26, 26, 0.6) 55%, rgba(26, 26, 26, 0) 100%);
	}

	.ffj-collection-card__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Il riquadro fisso delle lingue di TranslatePress copriva il pulsante
   "Aggiungi al carrello" sul telefono. Lo nascondo finché non prepariamo
   la versione inglese: allora metteremo la scelta della lingua nell'header. */
#trp-floater-ls { display: none !important; }

/* Carrello e checkout a tutta larghezza (come il negozio): la colonna stretta
   delle pagine di testo li schiacciava sul computer (riepilogo a lettere spezzate). */
.woocommerce-cart .page .page-header,
.woocommerce-cart .page .page-content,
.woocommerce-checkout .page .page-header,
.woocommerce-checkout .page .page-content {
	max-width: var(--ff-container);
}

/* ---------- 21. Tendine: freccia sottile con aria ----------
   La freccia del browser stava attaccata al bordo: la tolgo e metto la nostra,
   sottile, in ink, a 16px dal bordo. Vale per tutte le tendine semplici del sito. */
select:not([multiple]):not([size]) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 48px;
	background-color: var(--ff-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ff-space-4) center;
	background-size: 16px 16px;
	text-overflow: ellipsis;
	cursor: pointer;
}
select:not([multiple]):not([size]):hover { border-color: var(--ff-text); }
select::-ms-expand { display: none; }