/* DJAHARA — componenti.
   Un pattern diventa classe quando ricorre almeno tre volte nel design.
   Sotto le tre occorrenze resta inline: nessuna astrazione monouso.

   Valori da DJAHARA-Design-System.dc.html §05. Non inventati. */

/* =========================================
   Tipografia display
   ========================================= */
.dj-display-xl {
	font-family: var(--dj-display);
	font-size: clamp(38px, 5.2vw, 72px);
	line-height: 1.05;
	letter-spacing: -.008em;
	font-weight: 400;
	margin: 0;
}

.dj-display-lg {
	font-family: var(--dj-display);
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.1;
	font-weight: 400;
	margin: 0;
}

.dj-display-md {
	font-family: var(--dj-display);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.2;
	font-weight: 400;
	margin: 0;
}

.dj-label {
	display: inline-block;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	line-height: 1.6;
}

.dj-label--gold {
	color: var(--dj-gold-soft);
}

/* =========================================
   Bottoni — altezza 48px, target ≥44px
   ========================================= */
.dj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 30px;
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: 11px;
	letter-spacing: .20em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dj-motion), border-color var(--dj-motion), color var(--dj-motion);
}

.dj-btn:hover {
	background: #2C2C28;
	border-color: #2C2C28;
	color: var(--dj-white);
	text-decoration: none;
}

.dj-btn:disabled,
.dj-btn[aria-disabled="true"] {
	background: var(--dj-hairline-soft);
	border-color: var(--dj-hairline);
	color: #8B877F;
	cursor: not-allowed;
}

.dj-btn--ghost {
	background: transparent;
	color: var(--dj-ink);
}

.dj-btn--ghost:hover {
	background: var(--dj-ivory);
	border-color: var(--dj-ink);
	color: var(--dj-ink);
}

.dj-btn--ghost:disabled {
	background: transparent;
	border-color: var(--dj-hairline);
	color: #8B877F;
}

.dj-link {
	text-decoration: underline;
	text-decoration-color: var(--dj-gold);
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* =========================================
   Campi — il form variazioni WooCommerce eredita da qui
   ========================================= */
.dj-field,
.dj-field select,
.dj-field input,
.dj-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	background: var(--dj-white);
	color: var(--dj-ink);
	font-family: inherit;
	font-size: 14px;
	transition: border-color var(--dj-motion);
}

.dj-field textarea {
	min-height: 120px;
	padding: 14px;
	line-height: 1.6;
}

/* `:where()` azzera la specificità del selettore interno: senza,
   `.dj-field:not(:placeholder-shown)` vale 0,2,0 e batte `.dj-field--error`,
   che vale 0,1,0 — un campo in errore con testo dentro perderebbe il bordo
   rosso. Su uno stato di errore non è un dettaglio estetico. */
.dj-field--filled,
.dj-field:where(:not(:placeholder-shown)) {
	border-color: var(--dj-ink);
}

.dj-field:focus-visible {
	border-color: var(--dj-ink);
	outline: 2px solid var(--dj-gold);
	outline-offset: 2px;
}

.dj-field--error {
	border-color: var(--dj-error);
	color: var(--dj-error);
}

.dj-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-field__error {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--dj-error);
}

/* =========================================
   Chip e badge
   ========================================= */
.dj-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	text-decoration: none;
	transition: border-color var(--dj-motion), background var(--dj-motion), color var(--dj-motion);
}

.dj-chip:hover {
	border-color: var(--dj-ink);
	color: var(--dj-ink);
	text-decoration: none;
}

.dj-chip--active,
.dj-chip[aria-pressed="true"] {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
}

.dj-badge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border: 1px solid var(--dj-hairline);
	background: var(--dj-ivory);
	font-size: 9.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-badge--gold {
	border-color: var(--dj-gold);
	background: transparent;
	color: var(--dj-ink);
}

/* =========================================
   Filetto — mai unico indicatore di stato
   ========================================= */
.dj-rule {
	height: 1px;
	background: var(--dj-hairline);
	border: 0;
	margin: 0;
}

.dj-rule--ink {
	background: var(--dj-ink);
}

/* =========================================
   Bande
   ========================================= */
.dj-band {
	background: var(--dj-white);
}

.dj-band--ivory {
	background: var(--dj-ivory);
}

.dj-band--ink {
	background: var(--dj-ink);
	color: var(--dj-white);
}

.dj-band--ink a {
	color: var(--dj-white);
}

.dj-band--ink .dj-label {
	color: var(--dj-gold-soft);
}

/* =========================================
   Card prodotto — regola vincolante del Design System:
   filetto 1px, nessuna ombra, nessun raggio, immagine 4:5.
   Hover: solo bordo e didascalia. Nessuna scala, nessun movimento.
   ========================================= */
.dj-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	background: var(--dj-white);
	text-decoration: none;
	transition: border-color var(--dj-motion);
}

.dj-card:hover {
	border-color: var(--dj-ink);
	text-decoration: none;
}

.dj-card:hover .dj-card__title {
	text-decoration: underline;
	text-decoration-color: var(--dj-gold);
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.dj-card__media {
	aspect-ratio: 4 / 5;
	border-bottom: 1px solid var(--dj-hairline);
	overflow: hidden;
}

.dj-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity var(--dj-fade);
}

.dj-card__media img[data-dj-loaded] {
	opacity: 1;
}

.dj-card__media .dj-ph {
	width: 100%;
	height: 100%;
	border: 0;
}

.dj-card__body {
	padding: 16px;
}

.dj-card__collection {
	margin: 0;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

/* Collezione a sinistra, tipologia a destra: le due coordinate con cui si
   cerca un gioiello, sulla stessa riga. */
.dj-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* Tessera di tipologia: solo fotografia quadrata ed etichetta. Nessun titolo in
   display, perché «Anelli» non è il nome di una creazione. */
/* L'aspetto va sul contenitore: l'immagine dentro è width/height 100%, quindi un
   aspect-ratio sull'img non avrebbe effetto. */
.dj-card--type .dj-card__media {
	aspect-ratio: 1 / 1;
	border-bottom: 0;
}

.dj-card--type .dj-card__body {
	padding-top: 16px;
}

.dj-card--type .dj-card__type {
	display: block;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--dj-ink);
}

.dj-card__title {
	margin: 8px 0 0;
	font-family: var(--dj-display);
	font-size: 19px;
	font-weight: 400;
}

/* Nelle griglie a quattro la card è il soggetto della pagina e il titolo scala
   con la colonna. Nel mega menu resta ai 19px fissi: là è una voce di menu. */
.dj-grid-4 .dj-card__title {
	margin: 12px 0 0;
	font-size: clamp(20px, 1.8vw, 25px);
}

.dj-card__rule {
	margin: 12px 0 10px;
}

.dj-card__price {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--dj-graphite);
}

/* =========================================
   Placeholder fotografico
   ========================================= */
.dj-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dj-ph);
	border: 1px solid var(--dj-hairline);
}

.dj-ph__caption {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-ph-ink);
	text-align: center;
	line-height: 1.9;
	padding: 8px;
}

/* =========================================
   Prezzo
   ========================================= */
/* Il prezzo in saldo si legge «nuovo, vecchio, sconto». WooCommerce emette
   `<del>` prima di `<ins>`: l'ordine visivo si corregge con flex order invece
   di ricostruire l'HTML a mano, così i filtri sul prezzo — compreso quello di
   pre-lancio — restano nella catena. */
.dj-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	color: var(--dj-ink);
}

.dj-price del {
	order: 2;
	color: var(--dj-graphite);
	text-decoration-thickness: 1px;
}

.dj-price ins {
	order: 1;
	text-decoration: none;
}

.dj-price__save {
	order: 3;
	font-size: 9px;
	letter-spacing: .16em;
	color: var(--dj-gold);
}

.dj-price__flag {
	order: 4;
	font-size: 9px;
	letter-spacing: .14em;
}

.dj-price--empty {
	color: var(--dj-graphite);
}

/* =========================================
   Griglia catalogo — 4 desktop, 3 tablet, 2 mobile
   ========================================= */
.dj-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.dj-grid-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.dj-grid-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* =========================================
   Tabella a filetti — specifiche, misure, spedizioni
   ========================================= */
.dj-hairline-table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--dj-ink);
	font-size: 13px;
}

.dj-hairline-table th,
.dj-hairline-table td {
	padding: 13px 0;
	border-bottom: 1px solid var(--dj-hairline);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.dj-hairline-table th {
	font-size: 9.5px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

/* =========================================
   Intestazione di sezione, stato vuoto, articolo
   ========================================= */
.dj-section-heading {
	margin-bottom: 28px;
}

.dj-section-heading .dj-label {
	margin: 0 0 8px;
	display: block;
	font-weight: 400;
}

.dj-section-heading__intro {
	margin: 0;
	max-width: 70ch;
	font-size: 14px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

.dj-empty {
	text-align: center;
}

.dj-empty__text {
	margin: 16px auto 24px;
	max-width: 60ch;
	color: var(--dj-graphite);
}

/* La tessera articolo del Journal: fotografia, riga di meta, titolo, sommario.
   Nessun filetto in alto — nella griglia del prototipo le tessere sono separate
   dallo spazio, non da una riga, e un filetto per tessera in una griglia da tre
   disegna una scacchiera. */
.dj-entry {
	display: flex;
	flex-direction: column;
}

.dj-entry__link {
	display: block;
	text-decoration: none;
}

.dj-entry__link img {
	width: 100%;
	height: clamp(240px, 26vw, 320px);
	object-fit: cover;
	background: var(--dj-ivory);
}

.dj-entry__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-entry__titolo {
	margin: 12px 0 0;
	font-family: var(--dj-display);
	font-size: clamp(21px, 1.9vw, 27px);
	font-weight: 400;
	line-height: 1.2;
}

.dj-entry__excerpt {
	margin: 10px 0 0;
	max-width: 44ch;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

/* =========================================
   Articolo in evidenza del Journal
   ========================================= */
.dj-evidenza {
	border-bottom: 1px solid var(--dj-hairline);
	padding-block: clamp(40px, 4.8vw, 72px);
}

.dj-evidenza__inner {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

.dj-evidenza__media {
	display: block;
	overflow: hidden;
}

.dj-evidenza__media img {
	width: 100%;
	height: clamp(340px, 44vw, 540px);
	object-fit: cover;
	object-position: 50% 40%;
	background: var(--dj-ivory);
}

.dj-evidenza__titolo {
	margin: 0;
	font-family: var(--dj-display);
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.01em;
}

.dj-evidenza__testo {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	max-width: 44ch;
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--dj-graphite);
}

.dj-evidenza__cta {
	margin-top: clamp(24px, 2.8vw, 36px);
}

@media (max-width: 1024px) {
	.dj-evidenza__inner {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Header — il CSS reagisce agli attributi scritti da djahara-ui.js.
   Il JS non scrive stili: se questa sezione manca, l'header resta statico
   ma navigabile, non rotto.
   ========================================= */
[data-dj-header] {
	position: relative;
	z-index: 20;
	background: var(--dj-ink);
	color: var(--dj-white);
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}

.dj-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--dj-ink);
	border-top: 1px solid rgba(255, 255, 255, .22);
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}

[data-dj-open="coll"] .dj-mega[data-dj-mega-panel="coll"],
[data-dj-open="gio"] .dj-mega[data-dj-mega-panel="gio"],
[data-dj-open="mai"] .dj-mega[data-dj-mega-panel="mai"] {
	display: block;
}

.dj-scrim {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(14, 14, 12, .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

[data-dj-menu="1"] .dj-scrim--menu,
[data-dj-cart="1"] .dj-scrim--cart {
	opacity: 1;
	pointer-events: auto;
}

.dj-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.dj-drawer--menu {
	left: 0;
	right: 0;
	background: var(--dj-ink);
	color: var(--dj-white);
	transform: translateX(-100%);
}

/* Unica ombra di tutto il design: è nel sorgente di DJ-Header, per staccare
   il drawer dal contenuto sotto. Non replicarla altrove. */
.dj-drawer--cart {
	right: 0;
	width: min(430px, 100%);
	background: var(--dj-white);
	color: var(--dj-ink);
	transform: translateX(100%);
	box-shadow: -24px 0 60px rgba(14, 14, 12, .18);
}

[data-dj-menu="1"] .dj-drawer--menu,
[data-dj-cart="1"] .dj-drawer--cart {
	transform: translateX(0);
}

/* --- Barra dell'header. Valori da DJ-Header.dc.html: 78px, tre colonne,
       etichette 10.5px / .22em, wordmark .30em. --- */
.dj-header__bar {
	min-height: 78px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.dj-header__nav {
	display: flex;
	gap: 24px;
	align-items: center;
}

.dj-header__navlink,
.dj-header__utillink {
	color: var(--dj-white);
	text-decoration: none;
	line-height: 44px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.dj-header__wordmark {
	justify-self: center;
	color: var(--dj-white);
	text-decoration: none;
	font-family: var(--dj-display);
	font-size: clamp(18px, 3vw, 23px);
	letter-spacing: .30em;
	text-indent: .30em;
	text-transform: none;
}

.dj-header__util {
	display: flex;
	gap: 24px;
	justify-content: flex-end;
	align-items: center;
}

.dj-cart-count,
.dj-fav-count {
	color: var(--dj-gold-soft);
}

.dj-cart-count:empty,
.dj-fav-count:empty {
	display: none;
}

.dj-header__burger,
.dj-header__mobile {
	display: none;
}

.dj-header__burger {
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 48px;
	height: 48px;
	padding: 0 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.dj-header__burger span {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--dj-white);
}

.dj-header__iconlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 48px;
	color: var(--dj-white);
	background: none;
	border: 0;
	padding: 0 6px;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

/* --- Pannelli mega --- */
.dj-mega__inner {
	padding-block: clamp(28px, 3.2vw, 48px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
	text-transform: none;
	letter-spacing: normal;
}

.dj-mega__link {
	display: block;
	font-size: 13.5px;
	line-height: 32px;
	color: #E4E1DB;
	text-decoration: none;
}

.dj-mega__index {
	display: block;
	margin-top: 18px;
	text-decoration: none;
}

.dj-mega__feature .dj-card {
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
	color: var(--dj-white);
}

.dj-mega__feature .dj-card__media {
	aspect-ratio: 16 / 9;
	border-bottom-color: rgba(255, 255, 255, .22);
}

.dj-mega__feature .dj-card__price {
	color: #8E8A80;
}

/* --- Drawer: testa, corpo, piede --- */
.dj-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 22px var(--dj-gutter) 20px;
}

.dj-drawer__wordmark,
.dj-drawer__title {
	font-family: var(--dj-display);
	font-size: 22px;
	letter-spacing: .10em;
}

.dj-drawer__close,
.dj-drawer__continue {
	border: 0;
	background: transparent;
	padding: 8px 0;
	font: inherit;
	font-size: 10px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--dj-gold-soft);
	cursor: pointer;
}

.dj-drawer--cart .dj-drawer__close,
.dj-drawer--cart .dj-drawer__continue {
	color: var(--dj-graphite);
}

.dj-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 var(--dj-gutter);
}

.dj-drawer__big {
	display: block;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	color: var(--dj-white);
	text-decoration: none;
}

.dj-drawer__biglabel {
	display: block;
	font-family: var(--dj-display);
	font-size: 34px;
	line-height: 1.05;
}

.dj-drawer__bigmeta {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8E8A80;
}

.dj-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	padding: 20px var(--dj-gutter) 28px;
}

.dj-drawer__foot--cart {
	display: block;
	border-top: 1px solid var(--dj-ink);
}

.dj-drawer__note {
	margin: 0 0 18px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--dj-graphite);
}

.dj-drawer__cta {
	width: 100%;
	min-height: 54px;
}

.dj-drawer__continue {
	width: 100%;
	margin-top: 10px;
}

.dj-drawer__service {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-drawer__service a {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #E4E1DB;
	text-decoration: none;
	line-height: 40px;
}

/* --- Sotto i 1024px: nav desktop via, hamburger e icone dentro --- */
@media (max-width: 1024px) {
	.dj-header__bar {
		grid-template-columns: 48px 1fr auto;
		min-height: 74px;
		gap: 12px;
	}

	.dj-header__nav,
	.dj-header__util {
		display: none;
	}

	.dj-header__burger {
		display: inline-flex;
	}

	.dj-header__mobile {
		display: flex;
		justify-self: end;
		align-items: center;
		gap: 4px;
	}

	.dj-mega {
		display: none !important;
	}
}

/* =========================================
   Pagine interne — banda hero, prosa, legale, 404, ricerca
   ========================================= */
.dj-pagehero {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: end;
}

.dj-pagehero--media {
	min-height: min(62vh, 620px);
}

.dj-pagehero--type {
	padding-block: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 48px);
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-pagehero--compact.dj-pagehero--media {
	min-height: min(46vh, 440px);
}

.dj-pagehero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.dj-pagehero--media .dj-pagehero__body {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(32px, 4vw, 56px);
}

.dj-pagehero__rule {
	width: 110px;
	margin: 24px 0 20px;
}

.dj-pagehero__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	max-width: 52ch;
}

.dj-pagehero__search {
	margin-top: 28px;
	max-width: 520px;
}

/* --- Prosa: l'unico posto dove il tema stila contenuto dell'editor --- */
.dj-prose {
	font-size: 15.5px;
	line-height: 1.9;
}

.dj-prose > * + * {
	margin-top: 24px;
}

.dj-prose h2 {
	font-size: clamp(24px, 2.4vw, 34px);
	margin-top: 48px;
}

.dj-prose h3 {
	font-size: 20px;
	margin-top: 36px;
}

.dj-prose a {
	text-decoration: underline;
	text-decoration-color: var(--dj-gold);
	text-underline-offset: 5px;
}

.dj-prose ul,
.dj-prose ol {
	padding-left: 20px;
}

.dj-prose li + li {
	margin-top: 8px;
}

.dj-prose blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 1px solid var(--dj-gold);
	font-family: var(--dj-display);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.35;
}

.dj-prose img {
	display: block;
	height: auto;
}

/* --- Legale --- */
.dj-legal__head .dj-label {
	margin-bottom: 12px;
}

.dj-legal__date {
	margin-top: 16px;
	color: var(--dj-graphite);
}

.dj-legal__body {
	margin-top: 40px;
}

/* --- 404 --- */
.dj-404 {
	text-align: center;
}

.dj-404__rule {
	width: 110px;
	margin: 28px auto;
}

.dj-404__text {
	max-width: 52ch;
	margin: 0 auto 32px;
	color: var(--dj-graphite);
}

.dj-404__actions {
	justify-content: center;
}

.dj-404__search {
	max-width: 520px;
	margin: 40px auto 0;
}

/* --- Form di ricerca --- */
.dj-searchform {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.dj-searchform__input {
	flex: 1;
	min-width: 0;
	border-right: 0;
}

.dj-searchform__submit {
	flex: none;
}

/* --- Articolo del Journal --- */
.dj-article__media {
	margin: 0;
	padding-top: clamp(32px, 4vw, 48px);
}

.dj-article__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================
   Catalogo e scheda prodotto
   ========================================= */
.dj-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.dj-catalogo__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 14px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--dj-ink);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-catalogo__head .woocommerce-result-count {
	margin: 0;
}

.dj-catalogo__head select {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	background: var(--dj-white);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* --- Banda hero di collezione --- */
.dj-collhero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
	padding-block: clamp(48px, 6vw, 88px);
}

.dj-collhero__copy .dj-label {
	margin-bottom: 16px;
}

.dj-collhero__rule {
	width: 110px;
	margin: 28px 0 22px;
}

.dj-collhero__tagline {
	margin: 0 0 18px;
	font-family: var(--dj-display);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.35;
}

.dj-collhero__testo {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.9;
	max-width: 46ch;
}

.dj-collhero__pietra {
	margin-top: 24px;
}

.dj-collhero__media img,
.dj-collhero__media .dj-ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* --- Percorso --- */
.dj-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 28px;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-breadcrumb a {
	color: var(--dj-graphite);
}

.dj-breadcrumb [aria-current="page"] {
	color: var(--dj-ink);
}

/* --- Scheda prodotto --- */
.dj-pdp__top {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
	padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 88px);
}

.dj-pdp__gallery img {
	display: block;
	width: 100%;
	height: auto;
}

.dj-pdp__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dj-pdp__summary > .dj-label {
	margin-bottom: 14px;
}

.dj-pdp__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin: 24px 0;
	font-size: 20px;
}

.dj-pdp__price .dj-price {
	font-size: 20px;
}

.dj-pdp__sale {
	font-size: 9px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-gold);
}

.dj-pdp__short {
	color: var(--dj-graphite);
	max-width: 46ch;
}

.dj-pdp__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.dj-pdp__accordion {
	margin-top: 40px;
	border-top: 1px solid var(--dj-ink);
}

/* --- Form variazioni nativo di WooCommerce, vestito coi token --- */
.dj-pdp .variations {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
}

.dj-pdp .variations th,
.dj-pdp .variations td {
	display: block;
	text-align: left;
	padding: 0;
}

.dj-pdp .variations th label {
	display: block;
	margin: 18px 0 8px;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-pdp .variations select {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	background: var(--dj-white);
	font: inherit;
	font-size: 14px;
}

.dj-pdp .variations select:focus-visible {
	border-color: var(--dj-ink);
	outline: 2px solid var(--dj-gold);
	outline-offset: 2px;
}

.dj-pdp .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-pdp .woocommerce-variation-price {
	margin: 20px 0;
	font-size: 18px;
}

.dj-pdp form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 24px 0 0;
}

.dj-pdp form.cart .quantity {
	display: flex;
}

.dj-pdp form.cart .quantity input {
	width: 84px;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	font: inherit;
	text-align: center;
}

/* Il bottone nativo di Woo prende l'aspetto del bottone del design. */
.dj-pdp .single_add_to_cart_button,
.dj-pdp .button.alt {
	flex: 1 1 240px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 30px;
	border: 1px solid var(--dj-ink);
	border-radius: var(--dj-radius);
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: 11px;
	letter-spacing: .20em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--dj-motion), border-color var(--dj-motion);
}

.dj-pdp .single_add_to_cart_button:hover {
	background: #2C2C28;
	border-color: #2C2C28;
}

.dj-pdp .single_add_to_cart_button.disabled {
	background: var(--dj-hairline-soft);
	border-color: var(--dj-hairline);
	color: #8B877F;
	cursor: not-allowed;
}

.dj-pdp .stock {
	margin: 16px 0 0;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-pdp .stock.out-of-stock {
	color: var(--dj-error);
}

@media (max-width: 1024px) {
	.dj-pdp__top,
	.dj-collhero__inner {
		grid-template-columns: 1fr;
	}
}

/* --- Lookbook: griglia editoriale a due colonne, didascalia sotto --- */
.dj-lookbook {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 3vw, 48px);
}

.dj-lookbook__item {
	margin: 0;
}

.dj-lookbook__item img,
.dj-lookbook__item .dj-ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.dj-lookbook__caption {
	padding-top: 18px;
}

.dj-lookbook__text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--dj-graphite);
	max-width: 52ch;
}

.dj-lookbook__products {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
}

@media (max-width: 600px) {
	.dj-lookbook {
		grid-template-columns: 1fr;
	}
}

/* --- Paginazione --- */
.wp-block-query-pagination,
.navigation.pagination {
	margin-top: clamp(32px, 4vw, 56px);
	display: flex;
	justify-content: center;
	gap: 16px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.navigation.pagination .page-numbers {
	padding: 10px 14px;
	border: 1px solid var(--dj-hairline);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
	color: var(--dj-white);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================
   Pagina Design System — solo classi di servizio, non componenti del sito
   ========================================= */
.dj-ds-intro .dj-label {
	margin-bottom: 20px;
}

.dj-ds-intro .dj-display-lg {
	margin-bottom: 24px;
}

.dj-swatch {
	display: block;
	width: 48px;
	height: 40px;
	border: 1px solid var(--dj-hairline);
}

.dj-ds-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-bottom: 24px;
}

.dj-ds-row--fields {
	align-items: flex-start;
}

.dj-ds-field {
	flex: 1 1 200px;
}

.dj-ds-field__err {
	color: var(--dj-error);
}

/* Le tabelle larghe scorrono dentro il proprio contenitore: la pagina non
   deve mai scorrere in orizzontale. */
.dj-scroll-x {
	overflow-x: auto;
}

.dj-scroll-x > table {
	min-width: 760px;
}

.dj-ds-type__row,
.dj-ds-space__row {
	display: grid;
	gap: 24px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-ds-type__row {
	grid-template-columns: 1fr 300px;
}

.dj-ds-type,
.dj-ds-space {
	border-top: 1px solid var(--dj-ink);
}

.dj-ds-space__row {
	grid-template-columns: 160px 60px 1fr;
	align-items: center;
}

.dj-ds-space__bar {
	display: block;
	height: 8px;
	background: var(--dj-ink);
}

.dj-ds-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.dj-ds-panel {
	border: 1px solid var(--dj-hairline);
	padding: 24px 26px;
}

.dj-ds-panel ul {
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--dj-graphite);
}

@media (max-width: 1024px) {
	.dj-ds-type__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.dj-ds-cols {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Home — hero, selezione, collezioni in evidenza, famiglie, citazione.
   Valori da DJAHARA-Home.dc.html, meno il movimento vietato dal §06.
   ========================================= */
.dj-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: min(88vh, 880px);
}

.dj-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 22%;
	z-index: 0;
}

.dj-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
}

.dj-hero__copy {
	max-width: min(46%, 620px);
}

.dj-hero__eyebrow {
	letter-spacing: .34em;
	margin: 0 0 26px;
}

.dj-hero .dj-display-xl {
	font-size: clamp(38px, 5.4vw, 86px);
	line-height: .98;
	letter-spacing: -.018em;
}

.dj-rule--gold {
	background: var(--dj-gold);
}

.dj-hero__rule {
	width: 150px;
	margin: 32px 0 26px;
}

.dj-hero__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	max-width: 40ch;
}

.dj-hero__cta {
	margin-top: 36px;
	min-height: 54px;
	padding: 0 34px;
	letter-spacing: .22em;
}

/* Con più di una slide: la prima si mostra, le altre attendono lo slider di F4.
   Uno slider a metà è peggio di nessuno slider. */
.dj-hero-slider > .dj-hero ~ .dj-hero {
	display: none;
}

/* --- Testa di riga: etichetta a sinistra, link a destra, filetto sotto --- */
.dj-rowhead {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	border-bottom: 1px solid var(--dj-ink);
	padding-bottom: 14px;
	margin-bottom: 36px;
}

.dj-rowhead__title {
	letter-spacing: .30em;
	color: var(--dj-ink);
	margin: 0;
	font-weight: 400;
}

/* «I gioielli — selezione»: la qualifica è più tenue del titolo. */
.dj-rowhead__qualifier {
	color: var(--dj-graphite);
}

.dj-band--ink .dj-rowhead {
	border-bottom-color: rgba(200, 176, 138, .45);
}

.dj-center {
	display: flex;
	justify-content: center;
	margin: clamp(32px, 4vw, 52px) 0 0;
}

/* --- Collezione in evidenza: due colonne, numero grande, filetto oro --- */
.dj-spot__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
	min-height: min(86vh, 860px);
}

.dj-spot__inner--reverse .dj-spot__media {
	order: 2;
}

.dj-spot__media {
	overflow: hidden;
}

.dj-spot__media img,
.dj-spot__media .dj-ph {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.dj-spot__copy {
	padding-block: clamp(32px, 4vw, 56px);
}

.dj-spot__num {
	margin: 0 0 10px;
	font-family: var(--dj-display);
	font-size: clamp(48px, 7vw, 120px);
	line-height: .9;
	color: var(--dj-hairline);
}

.dj-band--ink .dj-spot__num,
.dj-spot[style*="color--ink)"] .dj-spot__num {
	color: #33322D;
}

.dj-spot__rule {
	width: 110px;
	margin: 26px 0 22px;
}

.dj-spot__tagline {
	margin: 0 0 20px;
	font-family: var(--dj-display);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.35;
}

.dj-spot__testo {
	margin: 0 0 32px;
	font-size: 15.5px;
	line-height: 1.9;
	max-width: 44ch;
}

/* Su fondo scuro il bottone fantasma prende il bordo champagne. */
.dj-spot[style*="color--ink);color"] .dj-btn--ghost {
	border-color: var(--dj-gold-soft);
	color: var(--dj-white);
}

/* --- Blocco a due colonne 5fr/7fr: famiglie, arrivo --- */
.dj-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.dj-split__claim {
	margin: 22px 0 30px;
	font-family: var(--dj-display);
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.2;
}

.dj-famiglie {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dj-ink);
}

.dj-famiglie__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-famiglie__row:last-child {
	border-bottom-color: var(--dj-ink);
}

.dj-famiglie__nome {
	font-family: var(--dj-display);
	font-size: clamp(21px, 1.9vw, 26px);
}

.dj-famiglie__lista {
	font-size: 12.5px;
	color: var(--dj-graphite);
}

/* --- Citazione di chiusura --- */
.dj-quote {
	text-align: center;
}

.dj-quote .dj-label {
	color: var(--dj-gold-soft);
	margin-bottom: 30px;
}

.dj-quote__text {
	margin: 0 auto;
	max-width: 1040px;
	font-family: var(--dj-display);
	font-size: clamp(26px, 3.6vw, 52px);
	line-height: 1.24;
	letter-spacing: -.008em;
}

@media (max-width: 1024px) {
	.dj-hero {
		min-height: min(72vh, 620px);
	}

	.dj-hero__copy {
		max-width: none;
	}

	.dj-spot__inner,
	.dj-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dj-spot__inner--reverse .dj-spot__media {
		order: 0;
	}

	.dj-spot__copy {
		padding-bottom: clamp(32px, 6vw, 56px);
	}
}

@media (max-width: 600px) {
	.dj-hero__img {
		object-position: 22% 24%;
	}

	.dj-famiglie__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* =========================================
   Sezioni del repeater — otto tipi, un file di render
   ========================================= */
.dj-sez__img {
	display: block;
	width: 100%;
	height: auto;
}

.dj-sez__titolo {
	margin-bottom: 28px;
}

.dj-sez__overlay {
	padding-top: 32px;
}

.dj-sez__testo {
	max-width: 66ch;
	line-height: 1.75;
	margin: 16px 0 0;
}

.dj-sez__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.dj-sez__duo--reverse .dj-sez__col:first-child {
	order: 2;
}

.dj-sez__quote {
	margin: 0;
	text-align: center;
}

.dj-sez__quote cite {
	display: block;
	margin-top: 16px;
	font-style: normal;
}

.dj-accordion__item {
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-accordion__q {
	padding: 18px 0;
	cursor: pointer;
	font-size: 15px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.dj-accordion__q::-webkit-details-marker {
	display: none;
}

.dj-accordion__q::after {
	content: '+';
	flex: none;
}

.dj-accordion__item[open] .dj-accordion__q::after {
	content: '–';
}

.dj-accordion__a {
	padding-bottom: 18px;
	color: var(--dj-graphite);
}

/* --- Colonne a filetti: «La materia». Il filetto è ricavato dal colore del
   testo, così la stessa regola funziona sulla banda nera e su quella avorio
   senza una variante per banda. --- */
.dj-colonne {
	display: grid;
	grid-template-columns: repeat(var(--dj-cols, 5), 1fr);
}

.dj-colonne[data-dj-cols="1"] { --dj-cols: 1; }
.dj-colonne[data-dj-cols="2"] { --dj-cols: 2; }
.dj-colonne[data-dj-cols="3"] { --dj-cols: 3; }
.dj-colonne[data-dj-cols="4"] { --dj-cols: 4; }

.dj-colonne__cell {
	padding: 0 26px;
	border-right: 1px solid var(--dj-hairline);
	border-right-color: color-mix(in srgb, currentColor 18%, transparent);
}

.dj-colonne__cell:first-child {
	padding-left: 0;
}

.dj-colonne__cell:last-child {
	padding-right: 0;
	border-right: 0;
}

.dj-colonne__key {
	margin: 0 0 12px;
	font-family: var(--dj-display);
	font-size: clamp(22px, 2vw, 30px);
	font-weight: 400;
	line-height: 1.1;
}

.dj-colonne__val {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--dj-graphite);
	color: color-mix(in srgb, currentColor 72%, transparent);
}

/* --- Sequenza unboxing: la lista è testo, le fotografie stanno sotto. --- */
.dj-passi {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid currentColor;
}

.dj-passi__row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var(--dj-hairline);
	border-bottom-color: color-mix(in srgb, currentColor 22%, transparent);
}

.dj-passi__row:last-child {
	border-bottom-color: currentColor;
}

.dj-passi__num {
	font-size: 10px;
	letter-spacing: .20em;
	color: var(--dj-gold);
}

.dj-passi__nome {
	font-size: 16px;
	line-height: 1.5;
}

.dj-split__rule {
	width: 110px;
	margin: 0 0 24px;
}

.dj-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 28px);
}

.dj-unboxing__gallery {
	margin-top: clamp(32px, 4vw, 56px);
}

.dj-unboxing__gallery img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--dj-ivory);
}

@media (max-width: 1024px) {
	.dj-sez__duo {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.dj-sez__duo--reverse .dj-sez__col:first-child {
		order: 0;
	}

	.dj-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Le colonne diventano righe: il filetto passa da destra a sotto. */
	.dj-colonne {
		grid-template-columns: 1fr;
	}

	.dj-colonne__cell {
		padding: 0 0 16px;
		border-right: 0;
		border-bottom: 1px solid var(--dj-hairline);
		border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
	}

	.dj-colonne__cell:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/* =========================================
   Footer — tre bande: wordmark su avorio, colonne su nero, barra legale.
   Valori da DJ-Footer.dc.html.
   ========================================= */
/* Nessun margine sopra: il prototipo lo azzera con `footer{margin-top:0}` in
   tutte le pagine. Con 96px, fra l'ultima banda e la fascia avorio del wordmark
   si apriva una striscia bianca che non appartiene a nessuna delle due — e sulle
   pagine che chiudono su fondo nero si notava. Lo stacco lo dà il padding delle
   sezioni, che c'è già. */
.dj-footer {
	background: var(--dj-ink);
	color: var(--dj-white);
	margin-top: 0;
	overflow: hidden;
}

.dj-footer__mark {
	background: var(--dj-ivory);
	color: var(--dj-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
	padding: clamp(36px, 4.4vw, 60px) clamp(20px, 3vw, 40px);
}

.dj-footer__wordmark {
	font-family: var(--dj-display);
	font-size: clamp(44px, 10vw, 150px);
	letter-spacing: .16em;
	line-height: .86;
	text-indent: .16em;
	white-space: nowrap;
}

.dj-footer__payoff {
	font-size: 9px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--dj-gold);
}

.dj-footer__body {
	padding-top: clamp(44px, 5.4vw, 72px);
}

.dj-footer__grid {
	display: grid;
	/* Le tracce nav sono tante quante le colonne rese; la newsletter è 1.4fr,
	   come nel design. Il numero arriva da PHP via --dj-footer-cols. */
	grid-template-columns: repeat(var(--dj-footer-cols, 4), 1fr) 1.4fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
	padding-bottom: clamp(40px, 5vw, 72px);
}

.dj-footer__coltitle {
	margin: 0 0 18px;
	font-family: var(--dj-text);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--dj-gold-soft);
}

.dj-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-footer__link {
	display: block;
	font-size: 13.5px;
	line-height: 32px;
	color: #E4E1DB;
	text-decoration: none;
}

.dj-footer__link--accent {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dj-gold-soft);
}

.dj-footer__newsclaim {
	margin: 0 0 24px;
	font-family: var(--dj-display);
	font-size: clamp(21px, 2vw, 28px);
	line-height: 1.25;
	max-width: 20ch;
}

.dj-footer__form {
	display: flex;
	align-items: stretch;
	max-width: 400px;
}

.dj-footer__input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 2px;
	font: inherit;
	font-size: 14.5px;
	color: var(--dj-white);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--dj-radius);
}

.dj-footer__input::placeholder {
	color: #8E8A80;
}

.dj-footer__submit {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 22px;
	color: var(--dj-gold-soft);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--dj-gold-soft);
	font: inherit;
	font-size: 10.5px;
	letter-spacing: .20em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.dj-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.dj-footer__legalinner {
	padding-block: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: space-between;
	align-items: center;
}

.dj-footer__copy,
.dj-footer__legalnav a {
	margin: 0;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8E8A80;
	text-decoration: none;
}

.dj-footer__legalnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

/* Collasso: 5 colonne → 2 → 1, come le media query del design. */
@media (max-width: 1024px) {
	.dj-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}

	.dj-footer {
		margin-top: 64px;
	}
}

@media (max-width: 600px) {
	.dj-footer__grid {
		grid-template-columns: 1fr;
	}

	.dj-footer {
		margin-top: 48px;
	}
}

/* --- Cuore preferiti sulla card. Il wrapper esiste solo per posizionarlo:
       un <button> dentro un <a> sarebbe markup non valido. --- */
.dj-card__wrap {
	position: relative;
	display: flex;
}

.dj-card__wrap > .dj-card {
	flex: 1;
}

.dj-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dj-hairline);
	border-radius: var(--dj-radius);
	background: var(--dj-white);
	color: var(--dj-ink);
	cursor: pointer;
	transition: border-color var(--dj-motion), color var(--dj-motion);
}

.dj-fav:hover {
	border-color: var(--dj-ink);
}

.dj-fav[aria-pressed="true"] {
	border-color: var(--dj-gold);
	color: var(--dj-gold);
}

.dj-fav[aria-pressed="true"] svg {
	fill: currentColor;
}

/* =========================================
   Pre-lancio: barra, invito al contatto, prezzo su richiesta
   ========================================= */
.dj-prebar {
	margin: 0;
	padding: 10px var(--dj-gutter);
	background: var(--dj-ivory);
	color: var(--dj-graphite);
	text-align: center;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-prelaunch {
	margin: 28px 0 0;
	padding: 24px;
	background: var(--dj-ivory);
}

.dj-prelaunch__testo {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dj-graphite);
	max-width: 44ch;
}

.dj-price--onrequest {
	color: var(--dj-graphite);
	font-size: 13px;
	letter-spacing: .04em;
}

/* Senza acquisto il cuore dei preferiti resta: salvare si può. */
.dj-prelaunch-on .dj-header__cart {
	display: none;
}

/* =========================================
   Hero diviso — pannello di colore e fotografia affiancati.
   Valori da DJAHARA-Collezioni / Anelli / Collezione-Heritage.
   ========================================= */
.dj-splithero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	min-height: min(80vh, 800px);
}

.dj-splithero__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 88px) clamp(28px, 4vw, 72px);
	background: var(--dj-ink);
	color: var(--dj-white);
}

.dj-splithero__panel .dj-label {
	margin-bottom: clamp(16px, 2vw, 26px);
	letter-spacing: .30em;
}

.dj-splithero__panel .dj-display-xl,
.dj-splithero__panel .dj-display-lg {
	margin: 0;
}

/* Il sommario esiste in due registri: corsivo per la tagline di collezione,
   tondo per il testo lungo. Li distingue il markup, non una variante. */
.dj-splithero__tagline {
	margin: clamp(10px, 1.2vw, 16px) 0 0;
	font-family: var(--dj-display);
	font-size: clamp(18px, 1.7vw, 24px);
	font-style: italic;
	line-height: 1.3;
	color: color-mix(in srgb, currentColor 88%, transparent);
}

.dj-splithero__sub {
	margin: clamp(22px, 2.8vw, 36px) 0 0;
	font-size: 15.5px;
	line-height: 1.9;
	max-width: 46ch;
	color: color-mix(in srgb, currentColor 82%, transparent);
	text-wrap: pretty;
}

.dj-splithero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(28px, 3.4vw, 44px);
}

.dj-splithero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: clamp(30px, 3.6vw, 48px) 0 0;
	padding: clamp(18px, 2.2vw, 26px) 0 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	list-style: none;
	font-size: 10px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 76%, transparent);
}

.dj-splithero__media {
	overflow: hidden;
}

.dj-splithero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bottoni sul fondo scuro: pieno bianco per l'azione primaria, contorno per la
   secondaria. Sul nero il `.dj-btn` normale sarebbe invisibile. */
.dj-btn--light {
	background: var(--dj-white);
	border-color: var(--dj-white);
	color: var(--dj-ink);
}

.dj-btn--light:hover {
	background: var(--dj-gold-soft);
	border-color: var(--dj-gold-soft);
	color: var(--dj-ink);
}

.dj-btn--outline-light {
	background: transparent;
	border-color: color-mix(in srgb, currentColor 50%, transparent);
	color: currentColor;
}

.dj-btn--outline-light:hover {
	background: transparent;
	border-color: currentColor;
	color: currentColor;
}

.dj-btn--outline-gold {
	background: transparent;
	border-color: var(--dj-gold-soft);
	color: var(--dj-white);
}

.dj-btn--outline-gold:hover {
	background: var(--dj-gold-soft);
	border-color: var(--dj-gold-soft);
	color: var(--dj-ink);
}

/* =========================================
   Banda del concetto — una frase al centro, larghezza contenuta
   ========================================= */
.dj-concetto {
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-concetto__inner {
	max-width: 920px;
	text-align: center;
}

.dj-concetto__rule {
	width: 44px;
	margin: 0 auto clamp(24px, 3vw, 36px);
}

.dj-concetto__claim {
	margin: 0;
	font-family: var(--dj-display);
	font-size: clamp(24px, 3.1vw, 42px);
	line-height: 1.3;
	letter-spacing: -.006em;
	text-wrap: pretty;
}

.dj-concetto__testo {
	margin: clamp(22px, 2.6vw, 32px) auto 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dj-graphite);
	text-wrap: pretty;
}

/* =========================================
   Blocco famiglie — elenco con numero romano e nota
   ========================================= */
.dj-famblocco__img {
	width: 100%;
	margin-top: clamp(26px, 3vw, 38px);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dj-famrow {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
}

.dj-famrow:hover {
	background: var(--dj-white);
	text-decoration: none;
}

.dj-famrow__num {
	font-size: 10px;
	letter-spacing: .20em;
	color: var(--dj-gold);
}

.dj-famrow__nome {
	display: block;
	font-family: var(--dj-display);
	font-size: clamp(21px, 1.9vw, 27px);
}

.dj-famrow__nota {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

.dj-famrow__lista {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	text-align: right;
}

/* =========================================
   Chip di filtro — riga sopra una griglia
   ========================================= */
.dj-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 22px 0 0;
}

.dj-chips .dj-chip {
	min-height: 42px;
	padding: 0 18px;
	gap: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: 10px;
}

.dj-chip__n {
	opacity: .55;
}

.dj-rowhead__count {
	font-family: var(--dj-text);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	vertical-align: middle;
	padding-left: 10px;
}

/* =========================================
   Griglia e tessera grande di collezione
   ========================================= */
.dj-collgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 36px);
	padding: clamp(28px, 3.4vw, 44px) 0 0;
}

.dj-collcard__inner {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--dj-hairline);
	align-items: stretch;
}

.dj-collcard__media {
	display: block;
	overflow: hidden;
}

/*
 * Nessuno zoom al passaggio del mouse. I prototipi lo annotano con
 * `style-hover="transform:scale(1.05)"`, ma quell'attributo non esiste nel
 * runtime di Claude Design — `support.js` non lo cita mai — quindi nemmeno
 * nell'anteprima del design quello zoom si vedeva: è un'annotazione, non un
 * comportamento. E il nostro Design System lo vieta esplicitamente: «nessuna
 * traslazione oltre 4px, nessuna scala, nessun parallasse». Il segnale del
 * passaggio è la sottolineatura in oro del titolo, come su ogni altra tessera.
 */
.dj-collcard__media img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	display: block;
}

.dj-collcard__body {
	background: var(--dj-ivory);
	padding: clamp(22px, 2.4vw, 34px);
	display: flex;
	flex-direction: column;
}

.dj-collcard__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-collcard__title {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	font-family: var(--dj-display);
	font-size: clamp(26px, 2.6vw, 38px);
	font-weight: 400;
	line-height: 1.08;
}

.dj-collcard__rule {
	width: 44px;
	margin: clamp(14px, 1.6vw, 20px) 0;
}

.dj-collcard__tagline {
	margin: 0;
	max-width: 32ch;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--dj-graphite);
	text-wrap: pretty;
}

.dj-collcard__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px 16px;
	margin: auto 0 0;
	padding-top: clamp(20px, 2.4vw, 30px);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-collcard__link {
	color: var(--dj-ink);
	border-bottom: 1px solid var(--dj-gold);
	padding-bottom: 3px;
}

/* =========================================
   Da dove iniziare — tre miniature, testo, invito
   ========================================= */
.dj-inizio__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	border: 1px solid var(--dj-ink);
	padding: clamp(24px, 3vw, 40px);
	box-sizing: border-box;
}

.dj-inizio__media {
	width: clamp(180px, 20vw, 280px);
	gap: 10px;
}

.dj-inizio__media img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	background: var(--dj-ivory);
	display: block;
}

.dj-inizio__nomi {
	margin: 10px 0;
	font-family: var(--dj-display);
	font-size: clamp(22px, 2.3vw, 30px);
	line-height: 1.3;
}

/* =========================================
   Banda finale — invito centrato su nero
   ========================================= */
.dj-finale {
	text-align: center;
}

.dj-finale__claim {
	margin: 0 0 clamp(26px, 3vw, 40px);
	font-family: var(--dj-display);
	font-size: clamp(24px, 3vw, 44px);
	line-height: 1.24;
	text-wrap: pretty;
}

@media (max-width: 1024px) {
	.dj-splithero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dj-splithero__media img {
		height: 52vh;
	}

	.dj-collgrid {
		grid-template-columns: 1fr;
	}

	.dj-collcard__inner {
		grid-template-columns: 1fr;
	}

	.dj-collcard__media img {
		min-height: 0;
		height: 260px;
	}

	.dj-famrow {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.dj-famrow__lista {
		text-align: left;
	}

	.dj-inizio__inner {
		grid-template-columns: 1fr;
	}

	.dj-inizio__media {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.dj-collcard__media img {
		height: 300px;
	}
}

/* =========================================
   Archivio — colonna filtri e griglia.
   Valori da DJAHARA-Catalogo / Collezione-Heritage.
   ========================================= */
.dj-archivio {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	padding: clamp(28px, 3.4vw, 44px) 0 0;
}

.dj-facets {
	position: sticky;
	top: 24px;
	align-self: start;
}

.dj-facets__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.dj-facets__attivi {
	color: var(--dj-ink);
	padding-left: 6px;
}

.dj-facets__reset {
	padding: 6px 0;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	text-decoration: underline;
	text-decoration-color: var(--dj-gold);
	text-underline-offset: 4px;
}

.dj-facets__rule {
	width: 64px;
	margin: 16px 0 26px;
}

.dj-facets__body {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.dj-facet {
	border: 0;
	margin: 0;
	padding: 0;
}

.dj-facet__legend {
	padding: 0;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-gold);
}

.dj-facet__voci {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

/* Ogni voce è un link: la casella è decorativa, lo stato lo porta la classe. */
.dj-facet__voce {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	font-size: 14px;
	color: var(--dj-graphite);
}

.dj-facet__voce:hover {
	color: var(--dj-ink);
	text-decoration: none;
}

.dj-facet__voce.is-attiva {
	color: var(--dj-ink);
}

.dj-facet__box {
	width: 12px;
	height: 12px;
	flex: none;
	border: 1px solid var(--dj-hairline);
}

.dj-facet__voce.is-attiva .dj-facet__box {
	border-color: var(--dj-ink);
	background: var(--dj-ink);
}

.dj-facet__n {
	margin-left: auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.dj-facet__gruppo {
	margin: 14px 0 2px;
	font-size: 9.5px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-facet__tutte {
	display: inline-block;
	margin-top: 12px;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-facet__nota {
	background: var(--dj-ivory);
	padding: 18px 20px;
}

.dj-facet__nota p:last-child {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

/* =========================================
   Barra delle tipologie — la corrente sottolineata in oro
   ========================================= */
.dj-typenav {
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-typenav__inner {
	display: flex;
	gap: clamp(20px, 2.6vw, 38px);
	min-height: 60px;
	align-items: center;
	white-space: nowrap;
}

.dj-typenav__link {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 44px;
	color: var(--dj-graphite);
}

.dj-typenav__link.is-corrente {
	color: var(--dj-ink);
	border-bottom: 1px solid var(--dj-gold);
}

.dj-typenav__link--fine {
	margin-left: auto;
}

/* =========================================
   La pietra — banda sul colore della collezione
   ========================================= */
.dj-pietra {
	background: var(--dj-coll, var(--dj-ink));
	color: var(--dj-white);
}

.dj-pietra__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4.4vw, 72px);
	align-items: center;
	padding-block: clamp(52px, 6vw, 96px);
}

.dj-pietra__claim {
	margin: clamp(18px, 2.2vw, 28px) 0 clamp(22px, 2.6vw, 34px);
	font-family: var(--dj-display);
	font-size: clamp(24px, 2.9vw, 40px);
	line-height: 1.26;
	text-wrap: pretty;
}

.dj-pietra__testo {
	margin: 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.9;
	color: color-mix(in srgb, currentColor 84%, transparent);
	text-wrap: pretty;
}

.dj-pietra__schede {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: clamp(26px, 3.2vw, 40px) 0 0;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.dj-pietra__schede dt {
	margin-bottom: 8px;
}

.dj-pietra__schede dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: color-mix(in srgb, currentColor 90%, transparent);
}

.dj-pietra__img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
}

/* L'hero di collezione prende la tinta della collezione al posto del nero. */
.dj-splithero--coll .dj-splithero__panel {
	background: var(--dj-coll, var(--dj-ink));
}

@media (max-width: 1024px) {
	.dj-archivio {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.dj-facets {
		position: static;
	}

	.dj-pietra__inner {
		grid-template-columns: 1fr;
	}

	.dj-pietra__img {
		height: 340px;
	}

	.dj-typenav__inner {
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.dj-pietra__schede {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* =========================================
   Griglie a due e a tre — le griglie d'archivio dei prototipi.
   Quattro colonne restano `.dj-grid-4`, usata da home e tessere.
   ========================================= */
.dj-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.2vw, 32px);
}

/* Il titolo in display non porta la spaziatura da etichetta: `.dj-rowhead__title`
   nasce per le etichette a 10px, e su un titolo Bodoni da 32px una spaziatura di
   .30em spezza le parole. */
.dj-display-md.dj-rowhead__title,
.dj-display-lg.dj-rowhead__title {
	letter-spacing: -.006em;
}

@media (max-width: 1024px) {
	.dj-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dj-grid-2 {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Scheda prodotto — coppie, «Come arriva», schede a linguette
   ========================================= */
.dj-coppie {
	margin: 0;
	border-top: 1px solid var(--dj-hairline);
}

.dj-coppie__riga {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--dj-hairline);
	font-size: 13.5px;
}

.dj-coppie__riga dt {
	font-size: 9.5px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	line-height: 1.7;
}

.dj-coppie__riga dd {
	margin: 0;
	line-height: 1.7;
}

.dj-arrivo__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--dj-ivory);
	display: block;
}

.dj-schede__bar {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 40px);
	border-bottom: 1px solid var(--dj-ink);
	margin-bottom: clamp(28px, 3.4vw, 44px);
}

.dj-schede__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 0 0 14px;
	font: inherit;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-graphite);
	cursor: pointer;
	min-height: 44px;
}

.dj-schede__tab[aria-selected="true"] {
	color: var(--dj-ink);
	border-bottom-color: var(--dj-gold);
}

/*
 * Senza JavaScript la barra è decorativa e i pannelli restano tutti visibili con
 * il proprio titolo: il contenuto si legge comunque. Il JS nasconde i pannelli e
 * mostra i titoli solo agli screen reader, quindi lo stato «tab» esiste soltanto
 * quando c'è qualcosa che lo sa gestire.
 */
.dj-schede__panel + .dj-schede__panel {
	margin-top: clamp(36px, 4vw, 56px);
}

.dj-schede__titolo {
	margin: 0 0 20px;
	font-family: var(--dj-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 400;
}

[data-dj-tabs-ready] .dj-schede__panel + .dj-schede__panel {
	margin-top: 0;
}

[data-dj-tabs-ready] .dj-schede__panel[hidden] {
	display: none;
}

[data-dj-tabs-ready] .dj-schede__titolo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dj-schede__nota {
	margin: 22px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

@media (max-width: 1024px) {
	.dj-coppie__riga {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* In anteprima l'icona carrello torna: chi gestisce il negozio deve poterci
   entrare. Al pubblico resta nascosta. */
.dj-prelaunch-anteprima .dj-header__cart {
	display: inline-flex;
}

.dj-prelaunch--anteprima {
	margin: 24px 0;
	padding: 14px 16px;
	border-left: 2px solid var(--dj-gold);
	background: var(--dj-ivory);
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

/* =========================================
   Barra di navigazione di sezione
   Una riga di voci con la corrente sottolineata in oro. La usano l'area
   account e la sezione La Maison: è lo stesso componente nei prototipi,
   quindi è la stessa classe qui.
   ========================================= */
.dj-secnav {
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-secnav__inner {
	overflow-x: auto;
}

.dj-secnav__lista {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 38px);
	min-height: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

/* «Esci» nell'account: staccata a destra, come nel disegno. */
.dj-secnav__coda {
	margin-left: auto;
}

.dj-secnav__link {
	display: inline-block;
	line-height: 44px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-secnav__link--attivo {
	color: var(--dj-ink);
	border-bottom: 1px solid var(--dj-gold);
}

/* =========================================
   Modulo contatti
   ========================================= */
.dj-contatti {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 4.4vw, 72px);
	align-items: start;
}

.dj-contatti__titolo {
	margin: 0 0 clamp(24px, 3vw, 36px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--dj-ink);
}

.dj-contatti__intro {
	margin: 0 0 clamp(22px, 2.6vw, 30px);
	max-width: 56ch;
	color: var(--dj-graphite);
}

.dj-contatti__esito {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--dj-hairline);
	background: var(--dj-ivory);
	font-size: 14px;
	line-height: 1.7;
}

.dj-contatti__esito--errore {
	border-color: var(--dj-error);
	background: var(--dj-white);
	color: var(--dj-error);
}

.dj-contatti__campi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.dj-contatti__consenso {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	grid-column: 1 / -1;
	font-size: 13px;
	line-height: 1.7;
	cursor: pointer;
}

.dj-contatti__consenso .dj-check {
	margin-top: 4px;
}

/*
 * Il campo trappola: fuori dallo schermo, non `display:none`.
 * I robot compilano anche i campi nascosti con `display:none` e i `hidden`,
 * perché li trovano nel DOM; molti però saltano ciò che non è renderizzato.
 * Portarlo fuori dalla finestra lo tiene renderizzato — quindi visibile al
 * robot — e invisibile alla persona. `aria-hidden` più `tabindex="-1"` lo
 * tengono fuori anche dallo screen reader e dalla tabulazione.
 */
.dj-contatti__trappola {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dj-contatti__invia {
	margin-top: 26px;
}

.dj-diretti {
	background: var(--dj-ivory);
	border: 1px solid var(--dj-hairline);
	padding: clamp(24px, 2.8vw, 34px);
}

.dj-diretti__titolo {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--dj-ink);
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.dj-diretti__lista {
	margin: 0;
}

.dj-diretti__voce + .dj-diretti__voce {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--dj-hairline);
}

.dj-diretti__voce dt {
	margin-bottom: 6px;
	font-size: 9.5px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-diretti__voce dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
}

/* Immagine dentro una sezione a passi: sotto il testo, non a fianco. */
.dj-passi__img {
	width: 100%;
	height: 340px;
	margin-top: clamp(24px, 3vw, 36px);
	object-fit: cover;
}

@media (max-width: 1024px) {
	.dj-contatti {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.dj-contatti__campi {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Due elenchi affiancati
   ========================================= */
.dj-elenchi__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dj-ink);
}

.dj-elenchi__lista li {
	padding: 18px 0;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-elenchi__lista li:last-child {
	border-bottom-color: var(--dj-ink);
}

.dj-elenchi__lista strong {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	font-weight: 400;
}

.dj-elenchi__lista span {
	font-size: 14px;
	line-height: 1.75;
	color: var(--dj-graphite);
}

/* =========================================
   Tessere bordate
   `data-dj-cols` porta il numero di tessere dal PHP: due tessere su tre
   colonne lascerebbero un buco a destra, e `auto-fit` su una griglia con
   due soli elementi le stirerebbe a metà pagina ciascuna.
   ========================================= */
.dj-tessere {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}

.dj-tessere[data-dj-cols="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.dj-tessere[data-dj-cols="4"] {
	grid-template-columns: repeat(4, 1fr);
}

/* Cinque e sei tessere restano su tre colonne: i sei pilastri della Maison
   sono due file da tre, non una fila da sei larga 200px. */
.dj-tessere[data-dj-cols="5"],
.dj-tessere[data-dj-cols="6"] {
	grid-template-columns: repeat(3, 1fr);
}

.dj-tessera {
	border: 1px solid var(--dj-hairline);
	padding: clamp(22px, 2.6vw, 32px);
}

.dj-tessera__label {
	margin: 0 0 12px;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dj-gold);
}

.dj-tessera__testo {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

/* Gli override responsive devono elencare *ogni* variante `data-dj-cols`:
   `.dj-tessere[data-dj-cols="6"]` vale 0,2,0 e batte `.dj-tessere` da sola
   anche dentro una media query, dove la specificità continua a decidere. È il
   motivo per cui i sei pilastri della Maison restavano su tre colonne a 390px
   e la pagina scrollava di 195px. */
@media (max-width: 1024px) {
	.dj-tessere,
	.dj-tessere[data-dj-cols="4"],
	.dj-tessere[data-dj-cols="5"],
	.dj-tessere[data-dj-cols="6"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dj-tessere,
	.dj-tessere[data-dj-cols="2"],
	.dj-tessere[data-dj-cols="4"],
	.dj-tessere[data-dj-cols="5"],
	.dj-tessere[data-dj-cols="6"] {
		grid-template-columns: 1fr;
	}
}

.dj-tessera__claim {
	margin: 0 0 12px;
	font-family: var(--dj-display);
	font-size: 26px;
	line-height: 1.2;
}

.dj-tessera--forte {
	background: var(--dj-ink);
	border-color: var(--dj-ink);
	color: var(--dj-white);
}

.dj-tessera--forte .dj-tessera__label {
	color: var(--dj-gold-soft);
}

.dj-tessera--forte .dj-tessera__testo {
	color: color-mix(in srgb, var(--dj-white) 82%, transparent);
}

/* Griglia di immagini con didascalia. `dj-grid-4` fissa quattro colonne:
   `data-dj-cols` le riporta al numero di fotografie, perché tre immagini su
   quattro colonne lasciano un buco a destra. */
.dj-galleria[data-dj-cols="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.dj-galleria[data-dj-cols="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.dj-galleria__fig {
	margin: 0;
}

.dj-galleria__cap {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

@media (max-width: 1024px) {
	.dj-galleria[data-dj-cols="3"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.dj-galleria[data-dj-cols="2"],
	.dj-galleria[data-dj-cols="3"] {
		grid-template-columns: 1fr;
	}
}

/* Tabella a tre colonne — la guida alle misure. La prima cella è un valore
   («14»), non un'etichetta: perde il maiuscoletto che ha nelle tabelle a due
   colonne, dove invece la prima cella è il nome della voce. */
.dj-hairline-table[data-dj-cols="3"] {
	table-layout: fixed;
	font-size: 14px;
}

.dj-hairline-table[data-dj-cols="3"] tbody th[scope="row"] {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dj-ink);
}

.dj-hairline-table[data-dj-cols="3"] td {
	color: var(--dj-graphite);
}

.dj-hairline-table thead th {
	border-bottom-color: var(--dj-ink);
}

/* =========================================
   Fascia bordata con invito
   ========================================= */
.dj-nota {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	border: 1px solid var(--dj-ink);
	padding: clamp(22px, 2.6vw, 32px);
}

.dj-nota__corpo {
	max-width: 60ch;
}

.dj-nota__claim {
	margin: 0;
	font-family: var(--dj-display);
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.3;
}

.dj-nota__testo {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

.dj-nota__claim:only-child,
.dj-nota__testo:only-child {
	margin: 0;
}

/* =========================================
   Domande frequenti, aperte e raggruppate
   ========================================= */
.dj-faq__gruppo + .dj-faq__gruppo {
	margin-top: clamp(34px, 4vw, 52px);
}

.dj-faq__lista {
	margin-top: clamp(14px, 1.8vw, 20px);
	border-top: 1px solid var(--dj-ink);
}

.dj-faq__voce {
	padding: 22px 0;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-faq__gruppo .dj-faq__voce:last-child {
	border-bottom-color: var(--dj-ink);
}

.dj-faq__q {
	margin: 0 0 10px;
	font-family: var(--dj-display);
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 400;
	line-height: 1.35;
}

.dj-faq__a,
.dj-faq__a p {
	margin: 0;
	max-width: 74ch;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--dj-graphite);
}

.dj-faq__a p + p {
	margin-top: 12px;
}

/* =========================================
   Tessera scorciatoia — 404, stati vuoti
   ========================================= */
.dj-viacard {
	display: block;
	border: 1px solid var(--dj-hairline);
	padding: clamp(20px, 2.4vw, 28px);
	transition: border-color var(--dj-motion);
}

.dj-viacard:hover {
	border-color: var(--dj-ink);
	text-decoration: none;
}

.dj-viacard .dj-label {
	margin-bottom: 12px;
}

.dj-viacard__nome {
	display: block;
	font-family: var(--dj-display);
	font-size: 24px;
	line-height: 1.2;
}

.dj-404__vie {
	padding-block: clamp(40px, 5vw, 72px) clamp(52px, 6vw, 88px);
}

/* =========================================
   Iscrizione alla lettera
   Dentro il pannello nero della banda divisa: campi in negativo, bottone
   bianco. `currentColor` invece di un colore fisso, così lo stesso modulo
   funziona anche su fondo chiaro senza una seconda serie di regole.
   ========================================= */
.dj-lettera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 420px;
	margin-top: clamp(28px, 3.4vw, 42px);
}

.dj-lettera__consenso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 12.5px;
	line-height: 1.7;
	cursor: pointer;
}

.dj-lettera__consenso .dj-check {
	margin-top: 4px;
}

.dj-lettera__esito {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	font-size: 13px;
	line-height: 1.7;
}

.dj-lettera__esito--errore {
	border-color: var(--dj-error);
	color: var(--dj-error);
}

.dj-lettera__nota {
	margin: 8px 0 0;
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: 12px;
	line-height: 1.75;
	opacity: .82;
}

.dj-lettera--scura .dj-field {
	background: transparent;
	border-color: color-mix(in srgb, currentColor 45%, transparent);
	color: inherit;
}

.dj-lettera--scura .dj-field::placeholder {
	color: color-mix(in srgb, currentColor 55%, transparent);
}

.dj-lettera--scura .dj-field__label {
	color: var(--dj-gold-soft);
}

.dj-lettera--scura .dj-check {
	border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.dj-lettera--scura .dj-check:checked {
	background: currentColor;
	border-color: currentColor;
}

/* =========================================
   Ricerca senza risultati
   ========================================= */
.dj-nores {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.dj-nores__claim {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.15;
	max-width: 30ch;
}

.dj-nores__rule {
	width: 96px;
	margin: 28px 0 24px;
}

.dj-nores__testo {
	margin: 0;
	max-width: 46ch;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--dj-graphite);
}

.dj-nores__azioni {
	margin-top: 34px;
}

.dj-nores__vietitolo {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dj-hairline);
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-nores__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-nores__lista li {
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-nores__lista li:last-child {
	border-bottom-color: var(--dj-ink);
}

.dj-nores__lista a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 18px 0;
}

.dj-nores__nome {
	font-family: var(--dj-display);
	font-size: 22px;
}

.dj-nores__nota {
	font-size: 12.5px;
	color: var(--dj-graphite);
	white-space: nowrap;
}

/* =========================================
   Carrello vuoto
   ========================================= */
.dj-carrellovuoto {
	padding-block: clamp(40px, 5vw, 56px) clamp(56px, 7vw, 88px);
}

.dj-carrellovuoto__titolo {
	margin: 0 0 clamp(28px, 3.4vw, 40px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--dj-ink);
}

.dj-carrellovuoto__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

.dj-carrellovuoto__claim {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.2;
	max-width: 28ch;
}

.dj-carrellovuoto__rule {
	width: 96px;
	margin: 26px 0 22px;
}

.dj-carrellovuoto__testo {
	margin: 0;
	max-width: 44ch;
	font-size: 15.5px;
	line-height: 1.85;
	color: var(--dj-graphite);
}

.dj-carrellovuoto__azioni {
	margin-top: 32px;
}

.dj-inclusi {
	border: 1px solid var(--dj-hairline);
	padding: clamp(26px, 3vw, 34px);
}

.dj-inclusi__titolo {
	margin: 0 0 18px;
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-inclusi__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dj-inclusi__lista li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--dj-hairline);
	font-size: 14.5px;
}

.dj-inclusi__lista li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dj-inclusi__lista span {
	color: var(--dj-graphite);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.dj-nores,
	.dj-carrellovuoto__inner {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   Lookbook
   ========================================= */
.dj-lbhero {
	position: relative;
}

.dj-lbhero__img {
	width: 100%;
	height: min(86vh, 860px);
	object-fit: cover;
	object-position: 50% 30%;
}

.dj-lbhero__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(32px, 5vw, 72px) 0;
	/* La sfumatura, non un velo uniforme: il titolo ha bisogno di contrasto in
	   basso, la fotografia di restare fotografia in alto. */
	background: linear-gradient(to top, rgba(14, 14, 12, .78), rgba(14, 14, 12, 0));
	color: var(--dj-white);
}

.dj-lookbook .dj-wrap {
	display: grid;
	gap: clamp(28px, 3.4vw, 56px);
}

.dj-lbriga {
	display: grid;
	gap: clamp(20px, 2.6vw, 40px);
}

.dj-lbriga--larga {
	grid-template-columns: 7fr 5fr;
	align-items: end;
}

.dj-lbriga--tre {
	grid-template-columns: repeat(3, 1fr);
}

.dj-lbriga--larga-rovescia {
	grid-template-columns: 5fr 7fr;
	align-items: start;
}

.dj-lbfig {
	margin: 0;
}

.dj-lbfig img {
	width: 100%;
	height: clamp(240px, 30vw, 520px);
	object-fit: cover;
	background: var(--dj-ivory);
}

/* Nelle righe larghe la prima fotografia è la più alta: è lei a dare il ritmo,
   e a parità di altezza le due colonne perderebbero la gerarchia. */
.dj-lbriga--larga .dj-lbfig:first-child img,
.dj-lbriga--larga-rovescia .dj-lbfig:last-child img {
	height: clamp(320px, 40vw, 620px);
}

.dj-lbfig__cap {
	display: flex;
	gap: 14px;
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

.dj-lbfig__n {
	color: var(--dj-gold);
	letter-spacing: .18em;
}

.dj-lbfig__corpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dj-lbfig__titolo {
	color: var(--dj-ink);
}

.dj-lbfig__pezzi {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.dj-lbriga--larga,
	.dj-lbriga--larga-rovescia {
		grid-template-columns: 1fr;
	}

	.dj-lbriga--larga .dj-lbfig:first-child img,
	.dj-lbriga--larga-rovescia .dj-lbfig:last-child img {
		height: clamp(280px, 52vw, 460px);
	}
}

@media (max-width: 600px) {
	.dj-lbriga--tre {
		grid-template-columns: 1fr;
	}

	.dj-lbhero__img {
		height: 62vh;
	}
}

/* =========================================
   Articolo del Journal
   ========================================= */
.dj-arthead {
	padding-block: clamp(44px, 5.4vw, 88px) clamp(30px, 3.4vw, 44px);
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-arthead__ritorno {
	margin-bottom: 22px;
}

.dj-arthead__meta {
	margin-bottom: clamp(20px, 2.4vw, 30px);
}

.dj-arthead__sub {
	margin: clamp(24px, 2.8vw, 34px) auto 0;
	max-width: 48ch;
	font-size: 17px;
	line-height: 1.85;
	color: var(--dj-graphite);
}

.dj-article__media {
	margin: 0;
	padding-top: clamp(34px, 4vw, 56px);
}

.dj-article__media img {
	width: 100%;
	height: clamp(340px, 52vh, 600px);
	object-fit: cover;
	object-position: 50% 38%;
	background: var(--dj-ivory);
}

.dj-article__cap {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

/* Il corpo dell'articolo è più grande della prosa di servizio: 16,5px su 1.95
   è la misura del prototipo, e un testo lungo si legge con l'interlinea, non
   con la buona volontà. */
.dj-prose--articolo > p {
	font-size: 16.5px;
	line-height: 1.95;
}

.dj-prose--articolo > blockquote {
	margin: clamp(30px, 3.6vw, 48px) 0;
	padding: clamp(24px, 3vw, 38px) 0;
	border-top: 1px solid var(--dj-ink);
	border-bottom: 1px solid var(--dj-ink);
	border-left: 0;
	font-family: var(--dj-display);
	font-size: clamp(23px, 2.6vw, 34px);
	line-height: 1.3;
}

.dj-prose--articolo > figure {
	margin: clamp(30px, 3.6vw, 48px) 0;
}

.dj-prose--articolo > figure img {
	width: 100%;
	height: clamp(260px, 32vw, 420px);
	object-fit: cover;
}

.dj-prose--articolo > figure figcaption {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--dj-graphite);
}

.dj-article__coda {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	margin-top: clamp(34px, 4vw, 56px);
	padding-top: clamp(24px, 2.8vw, 34px);
	border-top: 1px solid var(--dj-hairline);
}

.dj-article__firma {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dj-graphite);
}

.dj-artrelated {
	border-top: 1px solid var(--dj-hairline);
}

/* =========================================
   Clausole di un documento legale
   ========================================= */
.dj-clausole {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 1040px;
	border-top: 1px solid var(--dj-ink);
}

.dj-clausola {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: clamp(18px, 2.2vw, 28px);
	padding: 22px 0;
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-clausole .dj-clausola:last-child {
	border-bottom-color: var(--dj-ink);
}

.dj-clausola__n {
	padding-top: 4px;
	font-size: 10px;
	letter-spacing: .20em;
	color: var(--dj-gold);
}

.dj-clausola__titolo {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.5;
}

.dj-clausola__testo {
	margin: 0;
	max-width: 74ch;
	font-size: 14px;
	line-height: 1.85;
	color: var(--dj-graphite);
}

.dj-clausole__nota {
	margin: clamp(26px, 3vw, 38px) 0 0;
	max-width: 70ch;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

@media (max-width: 600px) {
	.dj-clausola {
		grid-template-columns: 44px 1fr;
		gap: 16px;
	}
}

.dj-legal__sub {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.9;
	color: var(--dj-graphite);
}

/* =========================================
   Pagina di ricerca
   Il campo è tipografico: un input alto 60px in Bodoni sotto un filetto,
   niente cornice. La ricerca è la pagina, non un accessorio dell'header.
   ========================================= */
.dj-cerca {
	padding-block: clamp(60px, 7vw, 110px) clamp(44px, 5vw, 70px);
	border-bottom: 1px solid var(--dj-hairline);
}

.dj-cerca__form {
	display: flex;
	max-width: 720px;
	margin-top: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--dj-ink);
}

.dj-cerca__campo {
	flex: 1;
}

.dj-cerca__campo input {
	width: 100%;
	height: 60px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--dj-ink);
	font-family: var(--dj-display);
	font-size: clamp(22px, 2.4vw, 30px);
}

.dj-cerca__campo input::placeholder {
	color: var(--dj-graphite);
}

.dj-cerca__submit {
	height: 60px;
	padding: 0 8px 0 20px;
	border: 0;
	background: transparent;
	font-size: 10px;
	letter-spacing: .20em;
	text-transform: uppercase;
	cursor: pointer;
}

.dj-cerca__conteggio {
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--dj-graphite);
}

.dj-cerca__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: clamp(20px, 2.4vw, 28px);
}

.dj-cerca__chips .dj-label {
	line-height: 34px;
}