@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:ital,wght@0,400;0,500;1,400&display=swap');

:root {
	--gradient-navbar-border: linear-gradient(90deg, #E8CD72 0%, #BB8732 28.37%, #EACF73 52.88%, #FFFB98 73.56%, #EACF73 85.58%, #BB8732 100%);
	--navbar-height: 90px;
	--font-nav: 'Fraunces', serif;
	--font-body: 'Inter', sans-serif;
	--c-gold: #A29061;
	--c-muted: #AEAEAE;
	--c-benedicto: #E5C76C;
	--c-excelso: #F49254;
	--c-green: #066543;
}

.navbar-custom {
	min-height: var(--navbar-height);
	display: flex;
	align-items: center;
}

.navbar-custom .container-fluid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

/* navbar-brand: Bootstrap (vendor/, non modificabile) impone height:50px + padding:15px,
   troppo piccolo per il logo 64px, che quindi trabocca invece di centrarsi. */
.navbar-custom .navbar-brand {
	height: auto;
	padding: 0;
	display: flex;
	align-items: center;
}

/* Logo: misure da Figma. Annulla il margin-top negativo impostato in grayscale.css
   (riga 901, non modificabile) che sposta il logo fuori dal centro. */
.navbar-custom .img-logo-top {
	width: 114px;
	height: 64px;
	margin-top: 0;
}

/* Hamburger mobile: stesso breakpoint del collapse del menu (max-width:1750px, vedi
   grayscale.css riga 1080 e nota nella project memory sul breakpoint 1750px). Logo centrato
   nella navbar-header, bottone hamburger ancorato a destra e centrato verticalmente, senza
   la scritta "Menu" (restano solo le lineette dell'icona fa-bars). Markup identico su tutte
   le pagine: nessuna modifica ai singoli file .php, solo CSS. */
@media (max-width: 1750px) {
	.navbar-custom .navbar-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		float: none;
	}

	.navbar-custom .navbar-toggle {
		position: absolute;
		top: 50%;
		right: 0;
		float: none;
		margin: 0;
		transform: translateY(-50%);
		font-size: 0;
	}

	/* Dimensione icona: confermata, 18px. */
	.navbar-custom .navbar-toggle .fa-bars {
		font-size: 18px;
	}

	/* Menu a tendina: voci in colonna (una sotto l'altra), centrate, su sfondo nero largo
	   quanto lo schermo. Sovrascrive il flex "in riga" impostato sopra per il desktop
	   (.navbar-custom .nav.navbar-nav, riga 65 circa), che qui altrimenti farebbe wrappare
	   le voci in orizzontale. */
	.navbar-custom .navbar-collapse {
		width: 100%;
		background-color: #121212;
	}

	.navbar-custom .nav.navbar-nav {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* Separatore "|" prima di Benedicto: solo per il menu orizzontale desktop, rimosso qui. */
	.navbar-custom .nav > li > a:has(> .btnBenedictoMenu)::before {
		content: none;
	}

	/* Ultima voce "Ita | Eng": resta su una riga sola (span inline, nessun wrap); annullo il
	   margin-left:30px pensato per il menu orizzontale, che altrimenti la scentrerebbe.
	   Aggiungo lo stesso padding-top/bottom:10px delle altre voci (.navbar-nav>li>a in
	   grayscale.css riga ~1108): questo <li> non ha un <a> diretto (solo <span>), quindi non
	   riceveva quello spazio ed era troppo vicino alla voce sopra. */
	.navbar-custom .navLangSwitch {
		margin-left: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.navbar-custom::before,
.navbar-custom::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-navbar-border);
}

.navbar-custom::before {
	top: 0;
}

.navbar-custom::after {
	bottom: 0;
}

.navbar-custom .nav.navbar-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.navbar-custom .nav > li > a {
	font-family: var(--font-nav);
	font-weight: 300;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: none;
}

/* Voce di menu attiva/selezionata (pagina corrente) e voci in hover: testo con il
   gradiente gold del bordo navbar (var(--gradient-navbar-border)), tramite
   background-clip:text. Escludo i link che contengono un bottone (Benedicto/Excelso), che
   hanno già un colore proprio con !important — vedi eccezione in
   [[project-css-important-conflicts]] nella memoria di progetto. Interpretazione:
   applicato al testo, non come riquadro di sfondo dietro la voce — da confermare se non è
   quello che intendevi. Color di fallback per browser senza supporto a
   background-clip:text. */
.navbar-custom .nav > li.active > a:not(:has(> button)),
.navbar-custom .nav > li > a:not(:has(> button)):hover {
	color: #BB8732;
	background: var(--gradient-navbar-border);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Voce di menu attiva: tipografia da Figma (font-style "SemiBold" del token corrisponde a
   font-weight:600, non è un valore CSS di font-style valido). */
.navbar-custom .nav > li.active > a:not(:has(> button)) {
	font-family: var(--font-nav);
	font-weight: 600;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0;
}

.navbar-custom .btnBenedictoMenu,
.navbar-custom .btnExcelsoMenu,
.navbar-custom .navLangSwitch span {
	font-family: var(--font-nav);
	font-weight: 300;
	font-size: 16px;
}

.navbar-custom .btnBenedictoMenu,
.navbar-custom .btnExcelsoMenu {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	height: auto;
	margin: 0;
	padding: 0;
}

.navbar-custom .btnExcelsoMenu {
	font-weight: 300;
}

/* !important necessario: grayscale.css impone color:...!important su questi due
   selettori (righe 1366-1367) e non va modificato. Eccezione concordata. */
.navbar-custom .btnBenedictoMenu,
.navbar-custom li > button.btnBenedictoMenu:hover {
	color: var(--c-benedicto) !important;
}

.navbar-custom .btnExcelsoMenu,
.navbar-custom li > button.btnExcelsoMenu:hover {
	color: var(--c-excelso) !important;
}

/* Solo desktop (menu orizzontale): sotto i 1750px la regola mobile (riga ~92) lo rimuove. */
@media (min-width: 1751px) {
	.navbar-custom .nav > li > a:has(> .btnBenedictoMenu)::before {
		content: "|";
		display: inline-block;
		margin-right: 15px;
		color: rgba(255, 255, 255, 0.3);
	}
}

/* e-Shop: pillola verde, misure da Figma. */
.navbar-custom .nav > li > a[href="https://shop.simoniniprosciutti.com"] {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 69px;
	height: 28px;
	gap: 4px;
	padding: 4px 8px;
	background-color: var(--c-green);
	color: #FFFFFF;
	border-radius: 2px;
	opacity: 1;
}

/* Selettore lingua Ita | Eng. Margine di distacco dal resto del menu stimato, da confermare.
   Solo desktop (menu orizzontale): sotto i 1750px la regola mobile (riga ~98) lo annulla per
   tenerlo centrato con le altre voci. */
@media (min-width: 1751px) {
	.navbar-custom .navLangSwitch {
		margin-left: 30px;
	}
}

.navbar-custom .navLangSwitch span {
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
}

.navbar-custom .navLangSwitch span.active {
	color: #FFFFFF;
}

/* FOOTER - design system da .claude/text/footer.md */
footer h5 {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: var(--c-muted);
}

footer h2 {
	font-family: var(--font-nav);
	font-weight: 400;
	font-style: normal;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-gold);
}

footer p {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-muted);
}

footer p.copyright {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-muted);
}

/* Loghi 50 anni / Benedicto / Excelso: misure da Figma */
footer .d-flex.flex-row img {
	width: 190px;
	height: 136px;
	object-fit: contain;
}

/* HERO AZIENDA - video di apertura (girato reale: video/azienda-simonini-web.mp4).
   .intro è condivisa da 14 pagine: non si può sovrascrivere il selettore nudo senza
   rompere le altre. .rs-azienda-hero-media è la classe aggiunta solo all'header di
   azienda.php (vedi markup): .intro.rs-azienda-hero-media resta scoped a quella pagina.
   Video nascosto (display:none) di default: appare solo da 768px, sul fotogramma
   statico #headerBgImage (img/azienda-bg.jpg) sotto quella soglia (telefono).
   Richiesta esplicita di Mirco 2026-08-20: il video NON rispetta più
   prefers-reduced-motion, va sempre mostrato da 768px in su indipendentemente da quella
   preferenza di sistema — deroga consapevole al comportamento suggerito da 05-media.md. */
.rs-hero-media-video {
	display: none;
}

@media (min-width: 768px) {
	.intro.rs-azienda-hero-media {
		position: relative;
		background-color: var(--c-panel);
	}

	/* #headerBgImage porta sia lo sfondo (via .intro-azienda/.intro-azienda2, toggle JS)
	   sia il testo: specificità id (1,2,0) per battere quelle due classi (0,1,0) senza
	   !important, e per riportarlo sopra il video via z-index. */
	.intro.rs-azienda-hero-media #headerBgImage {
		background: none;
		position: relative;
		z-index: 1;
	}

	.rs-hero-media-video {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* HERO HOME - testi sopra l'immagine hero. #textHeaderHome è usato solo in index.php.
   Dimensioni confermate a 1440px (64px/68px titolo, 48px/52px sottotitolo); i valori sui
   breakpoint inferiori sono una scala STIMATA (mobile-first, min-width) per evitare che il
   testo sia sproporzionato su mobile. Da confermare.
   Anche l'offset a sinistra (padding-left) è STIMATO, per spostare il blocco leggermente
   verso destra rispetto al filo sinistro del container. Da confermare. */
#textHeaderHome {
	text-align: left;
	padding-left: 16px;
}

#textHeaderHome .brand-heading {
	font-family: var(--font-nav);
	font-weight: 600;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0;
	text-transform: none;
}

#textHeaderHome .intro-text {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
}

@media (min-width: 375px) {
	#textHeaderHome {
		padding-left: 24px;
	}
	#textHeaderHome .brand-heading {
		font-size: 36px;
		line-height: 40px;
	}
	#textHeaderHome .intro-text {
		font-size: 27px;
		line-height: 31px;
	}
}

@media (min-width: 768px) {
	#textHeaderHome {
		padding-left: 40px;
	}
	#textHeaderHome .brand-heading {
		font-size: 46px;
		line-height: 50px;
	}
	#textHeaderHome .intro-text {
		font-size: 35px;
		line-height: 39px;
	}
}

@media (min-width: 1024px) {
	#textHeaderHome {
		padding-left: 56px;
	}
	#textHeaderHome .brand-heading {
		font-size: 56px;
		line-height: 60px;
	}
	#textHeaderHome .intro-text {
		font-size: 42px;
		line-height: 46px;
	}
}

@media (min-width: 1440px) {
	#textHeaderHome {
		padding-left: 72px;
	}
	#textHeaderHome .brand-heading {
		font-size: 64px;
		line-height: 68px;
	}
	#textHeaderHome .intro-text {
		font-size: 48px;
		line-height: 52px;
	}
}

/* Testo "testi delle sezioni": token confermato in CLAUDE.md */
#textHeaderHome .introHeroLead {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
}

/* CTA hero: colore da token --c-green, padding/border-radius STIMATI, da confermare. */
#textHeaderHome .btnHeroCTA {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 28px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	border-radius: 2px;
	text-decoration: none;
}

/* TRE PORTE DI INGRESSO (C7) - .rs-cta-row, solo home (index.php).
   Struttura a griglia Bootstrap (col-xs-12 col-sm-4, come il resto del sito): lo stacking a
   768px coincide con uno dei quattro breakpoint di progetto, quindi non serve un @media
   dedicato solo per l'impilamento. Stile del pulsante STIMATO riprendendo il token già
   confermato di .btnHeroCTA (var(--c-green), Inter 400 16px, border-radius 2px): nessun
   riferimento Figma per questo componente in questo turno, da confermare.
   Destinazione "Scopri i prodotti" (prosciutto-di-parma): SCELTA in autonomia, da rivedere
   quando esiste il blocco "Le nostre linee" (C1) — potrebbe avere più senso puntare lì. */
.rs-cta-row {
	padding: 32px 0;
	background-color: var(--c-dark-bg);
	text-align: center;
}

.rs-cta-row-item {
	display: block;
	margin: 0 0 16px;
	padding: 14px 28px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	text-transform: none;
	text-decoration: none;
	border-radius: 2px;
}

@media (min-width: 768px) {
	.rs-cta-row-item {
		margin: 0 8px;
	}
}

/* LE NOSTRE LINEE (C1) - .rs-lines, in home e in cima a prosciutto-di-parma.php. Ricostruita
   identica al mockup approvato .claude/screenshot/linee-prodotto-varianti.html, variante B
   (Mirco, 2026-08-21) - cancellata e rifatta da zero invece di corretta, su richiesta
   esplicita, perché il primo tentativo "sembrava completamente diverso" pur avendo valori di
   card apparentemente uguali. Causa reale: .rs-lines .row usava ancora la griglia Bootstrap
   (float, gutter 30px), il mockup usa CSS grid con gap 40px - non la stessa cosa. Qui la
   griglia Bootstrap è neutralizzata dentro .rs-lines e sostituita da grid, per far combaciare
   esattamente il mockup invece di solo "assomigliargli". Stile STIMATO: nessun riferimento
   Figma. */
.rs-lines {
	padding: 48px 0 24px;
}

/* Sostituisce il sistema a colonne di Bootstrap (float, gutter 15px+15px) con CSS grid, come
   nel mockup: qui e solo qui, non tocca .row altrove nel sito. */
.rs-lines .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-left: 0;
	margin-right: 0;
}

/* bootstrap.css riga ~6469 mette ".row:before,.row:after{display:table;content:' '}" (il
   clearfix del vecchio sistema a float). Con .row diventato grid, quei due pseudo-elementi
   diventano due elementi fantasma della griglia e occupano posizioni prima delle vere card,
   spostando tutto: causa reale del layout rotto, trovata confrontando con lo screenshot. */
.rs-lines .row::before,
.rs-lines .row::after {
	content: none;
	display: none;
}

.rs-lines .row > [class*="col-"] {
	width: auto;
	min-width: 0;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 768px) {
	.rs-lines .row {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rs-lines-card {
	display: block;
	text-align: left;
	text-decoration: none;
}

/* height:auto esplicito: senza, gli attributi width/height dell'<img> (necessari per
   evitare CLS) diventano un height fisso in px più forte di aspect-ratio, che quindi
   viene ignorato e la foto resta tagliata alle proporzioni originali invece che 4:3. */
.rs-lines-card-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	margin-bottom: 16px;
}

/* Unico segno che distingue la linea corrente (04-componenti.md, C1): cornice oro attorno
   alla foto, nessun testo. outline invece di border: non toglie spazio alla foto e non
   sposta nessun altro elemento. */
.rs-lines-card--current .rs-lines-card-photo {
	outline: 2px solid var(--c-gold);
	outline-offset: 4px;
}

.rs-lines-card-copy {
	display: block;
}

.rs-lines-card-title {
	display: block;
	font-family: var(--font-nav);
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 6px;
}

.rs-lines-card-text {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-muted);
	margin: 0;
}

.rs-lines-footnote {
	text-align: center;
	margin: 8px 0 0;
}

.rs-lines-footnote a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-muted);
	text-decoration: underline;
}

/* DAL 1968 PRODUCIAMO UN SOLO PRODOTTO - .rs-solo-prodotto, solo home. Testo esatto da
   FATTI-VERIFICATI.md, non riassunto/riscritto. Stessa scala responsive del titolo di
   sezione già confermata altrove (52/54 a 1440px) e stesso testo di sezione fisso
   (Inter italic 18/28): qui duplicata invece di richiamare #contentAzienda .sectionTitle
   perché è la home, che per convenzione già in uso (vedi #contentHome sopra) non usa le
   classi sectionTitle/sectionText condivise. Tenere allineata a mano se la scala cambia. */
.rs-solo-prodotto {
	padding: 32px 0 48px;
	text-align: center;
}

.rs-solo-prodotto-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--c-gold);
}

@media (min-width: 375px) {
	.rs-solo-prodotto-title {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	.rs-solo-prodotto-title {
		font-size: 40px;
		line-height: 44px;
	}
}

@media (min-width: 1024px) {
	.rs-solo-prodotto-title {
		font-size: 46px;
		line-height: 50px;
	}
}

@media (min-width: 1440px) {
	.rs-solo-prodotto-title {
		font-size: 52px;
		line-height: 54px;
	}
}

.rs-solo-prodotto-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-muted);
	margin: 16px 0 24px;
}

.rs-solo-prodotto-link {
	display: inline-block;
	padding: 14px 28px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
	text-transform: none;
	border-radius: 2px;
}

/* VISITE E DEGUSTAZIONI (teaser) - .rs-visite-teaser, solo home. Immagine e testo affiancati
   da 768px, impilati sotto. Stile STIMATO: nessun riferimento Figma per questo componente
   in questo turno, riprende i token e la scala di sezione già confermati altrove. */
.rs-visite-teaser {
	padding: 32px 0 48px;
}

.rs-visite-teaser-photo {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 24px;
}

.rs-visite-teaser-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 375px) {
	.rs-visite-teaser-title {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	.rs-visite-teaser-title {
		font-size: 40px;
		line-height: 44px;
	}
	.rs-visite-teaser-photo {
		margin-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.rs-visite-teaser-title {
		font-size: 46px;
		line-height: 50px;
	}
}

@media (min-width: 1440px) {
	.rs-visite-teaser-title {
		font-size: 52px;
		line-height: 54px;
	}
}

.rs-visite-teaser-highlight {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	margin: 16px 0 8px;
}

.rs-visite-teaser-price {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	margin: 0 0 24px;
}

.rs-visite-teaser-link {
	display: inline-block;
	padding: 14px 28px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
	text-transform: none;
	border-radius: 2px;
}

/* COME SCEGLIERE LA STAGIONATURA (C2) - .rs-aging-compare, pagina Prosciutto di Parma DOP.
   Tre schede impilate su mobile, affiancate da 768px (mai una tabella orizzontale, per
   04-componenti.md). Stile STIMATO: nessun riferimento Figma per questo componente in
   questo turno, riprende i token già confermati (--c-gold per il nome commerciale). */
.rs-aging-compare {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
}

.rs-aging-compare-card {
	text-align: left;
	padding: 24px;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	margin-bottom: 24px;
	height: 100%;
	box-sizing: border-box;
}

.rs-aging-compare-months {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 4px;
}

.rs-aging-compare-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 12px;
}

.rs-aging-compare-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-muted);
	margin: 0 0 12px;
}

.rs-aging-compare-use {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #FFFFFF;
	margin: 0 0 16px;
}

.rs-aging-compare-link {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-gold);
	text-decoration: underline;
}

/* .rs-showcase-heading — margine sopra il titolo "Vecchia Cantina" (richiesta di Mirco,
   2026-08-24): subito dopo .rs-aging-compare, non si staccava a sufficienza dalle card di
   confronto stagionature appena sopra. Nome diverso da .rs-showcase-title qui sotto (nome
   prodotto dentro ogni card, componente diverso): stesso prefisso rs-showcase- ma
   coincidenza di nome da evitare. STIMA: nessun riferimento Figma. */
#contentAzienda .rs-showcase-heading {
	margin-top: 40px;
}

/* VECCHIA CANTINA - vetrina a tre schede, pagina Prosciutto di Parma DOP. .rs-showcase.
   Stile STIMATO: nessun riferimento Figma per questo componente in questo turno, riprende
   dimensione/proporzioni già usate per le foto di .rs-lines (piccole e quadrate) per
   coerenza visiva sulla stessa pagina. */
.rs-showcase-card {
	text-align: center;
	padding: 16px;
	margin-bottom: 24px;
}

.rs-showcase-photo {
	display: block;
	width: 260px;
	height: 260px;
	object-fit: contain;
	margin: 0 auto 16px;
}

.rs-showcase-months {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 4px;
}

.rs-showcase-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--c-gold);
	margin: 0 0 8px;
}

.rs-showcase-links {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-muted);
}

.rs-showcase-links a {
	color: var(--c-gold);
	text-decoration: underline;
}

/* ALTRE STAGIONATURE E REFERENZE (C5) - .rs-collapse, pagina Prosciutto di Parma DOP.
   Chiuso di default: .rs-collapse-panel nascosto via CSS (display:none), non un
   "display:none" messo dal JS al clic — il contenuto è già nel codice al caricamento
   (04-componenti.md). Il toggle in restyling.js/inline (vedi script in fondo alla pagina)
   si limita a cambiare l'attributo aria-expanded sul bottone: lo stato aperto è pilotato
   qui via il selettore [aria-expanded="true"] + .rs-collapse-panel, niente classi doppie
   da tenere sincronizzate. Stile STIMATO: nessun riferimento Figma per questo componente
   in questo turno. */
.rs-collapse-toggle {
	display: block;
	width: 100%;
	padding: 16px;
	background-color: transparent;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 20px;
	text-align: left;
	text-transform: none;
	color: var(--c-gold);
	cursor: pointer;
}

.rs-collapse-toggle::after {
	content: "+";
	float: right;
}

.rs-collapse-toggle[aria-expanded="true"]::after {
	content: "–";
}

.rs-collapse-panel {
	display: none;
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	text-align: left;
}

.rs-collapse-toggle[aria-expanded="true"] + .rs-collapse-panel {
	display: block;
}

.rs-collapse-panel li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(162, 144, 97, 0.3);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-muted);
}

.rs-collapse-panel a {
	color: var(--c-gold);
	text-decoration: underline;
}

/* TAGLI E FORMATI - .rs-cuts-formats, pagina Prosciutto di Parma DOP. Griglia 2x2 su mobile,
   quattro colonne da 768px. Stile STIMATO: nessun riferimento Figma per questo componente
   in questo turno, titolo con la stessa classe sectionTitle già usata nelle altre sezioni
   della pagina. */
.rs-cuts-formats {
	margin-top: 24px;
}

.rs-cuts-formats-item {
	text-align: center;
	padding: 16px 8px;
	margin-bottom: 16px;
}

.rs-cuts-formats-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--c-gold);
	margin: 0 0 8px;
}

.rs-cuts-formats-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--c-muted);
}

/* TRITTICO "PER CHI" - .rs-per-chi, pagina Prosciutto di Parma DOP (#contentAzienda, id
   condiviso con azienda.php: per questo le classi hanno nome proprio e non riusano
   .rs-quote-aside/.rs-quote-attribution, anche se il filetto oro a sinistra è la stessa
   tecnica). Tre frasi del cliente (2026-08-25) che danno voce al cliente finale, non al
   produttore: nessuna attribuzione/firma, su richiesta esplicita di Mirco. Direzione 1a
   scelta tra le proposte disegnate con l'agente UI/UX (Claude Design, "Trittico Per Chi -
   Direzioni.dc.html"). Dimensioni STIMATE: nessun riferimento Figma per questo componente
   in questo turno. Da 1024px la colonna si stringe (tre affiancate): font-size ridotto
   apposta rispetto a 768px, poi torna a salire da 1440px quando la colonna si riallarga —
   non è un refuso. */
.rs-per-chi {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rs-per-chi-item {
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--c-gold);
	font-family: var(--font-nav);
	font-weight: 300;
	font-style: normal;
	font-size: 19px;
	line-height: 28px;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	.rs-per-chi-item {
		font-size: 21px;
		line-height: 30px;
	}
}

@media (min-width: 1024px) {
	.rs-per-chi {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.rs-per-chi-item {
		flex: 1 1 0;
		font-size: 19px;
		line-height: 28px;
	}
}

@media (min-width: 1440px) {
	.rs-per-chi-item {
		font-size: 21px;
		line-height: 31px;
	}
}

/* VISITE E DEGUSTAZIONI - apertura senza foto (pagine/visite-degustazioni.md: "meglio un
   fondo neutro di una fotografia datata", in attesa del nuovo servizio fotografico). Le
   quattro classi sotto sono usate SOLO in questa pagina (erano cicliche via un timer JS
   ora rimosso): sicuro sovrascriverle senza toccare `.intro` nudo, condiviso con altre 13
   pagine. Colore STIMATO (--c-dark-bg), nessun riferimento Figma per questa pagina in
   questo turno. */
.intro-visite,
.intro-visite1,
.intro-visite2,
.intro-visite3 {
	background-image: none;
	background-color: var(--c-dark-bg);
}

/* .rs-hero-slideshow — carosello in hero con dissolvenza incrociata, N immagini
   (introdotto per benedicto.php 2026-08-24, poi generalizzato lo stesso turno per
   riuso su visite-guidate.php: prima si chiamava .rs-benedicto-hero, rinominato per non
   duplicare l'intera regola su ogni pagina che lo usa). Nasce perché lo swap di classe
   già in uso in lavorazione.php (background-image singolo su #headerBgImage) non può
   dissolvere: la proprietà non è animabile via CSS transition, lo swap è sempre un
   taglio netto. Qui invece N layer impilati (.rs-hero-slideshow-slide, position:
   absolute), ognuno con la propria immagine come style inline (non serve una classe per
   immagine), dissolvenza reale via transition:opacity. Il JS di pagina (locale, non
   condiviso) alterna .rs-hero-slideshow-slide--active tra i layer a intervalli fissi.
   #headerBgImage resta per il testo (.intro-body di grayscale.css, position:relative +
   z-index qui per restare sopra i layer), non porta più lui stesso lo sfondo. */
.rs-hero-slideshow {
	position: relative;
	background-color: #000000;
}

.rs-hero-slideshow-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.rs-hero-slideshow-slide--active {
	opacity: 1;
}

.rs-hero-slideshow .intro-body {
	position: relative;
	z-index: 1;
}

/* VISITE E DEGUSTAZIONI - le due formule (.rs-visite-pricing) e informazioni pratiche +
   racconto uniti da un filetto continuo (.rs-visite-story). Direzione C proposta da
   ui-ux-designer, scelta da Mirco 2026-08-21. Card affiancate da 768px via col-sm-6 di
   Bootstrap (stesso breakpoint del progetto), impilate sotto. Stile STIMATO: nessun
   riferimento Figma per questo componente in questo turno, riprende il linguaggio già
   confermato altrove (bordo oro 1px/radius 2px come .rs-aging-compare-card, filetto
   var(--c-hairline) come nella fascia contenuti home).
   Selettori scoped #container-prenotazione dove l'elemento è <p>: lo <style> inline
   "filippo" in testa a visite-guidate.php impone già #container-prenotazione p
   (specificità 1,0,1, font-size:larger + spaziature) — una classe da sola perde, serve
   #container-prenotazione .classe (1,1,0) per vincere, stesso criterio già in uso per
   sectionTitle/sectionText altrove nel progetto. */
/* .rs-visite-section-title — "Tipologie di visite" promossa da etichetta a titolo vero
   (richiesta di Mirco, 2026-08-24): stessa scala tipografica di .rs-visite-teaser-title
   (font-nav, oro, step responsive), non un valore nuovo. text-transform/text-align
   espliciti: grayscale.css forza l'uppercase su h1-h6 e Bootstrap .text-center il
   centrato, stesso criterio già in uso altrove nel progetto per le sezioni nuove. */
.rs-visite-section-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 8px;
}

@media (min-width: 375px) {
	.rs-visite-section-title {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	.rs-visite-section-title {
		font-size: 40px;
		line-height: 44px;
	}
}

@media (min-width: 1024px) {
	.rs-visite-section-title {
		font-size: 46px;
		line-height: 50px;
	}
}

@media (min-width: 1440px) {
	.rs-visite-section-title {
		font-size: 52px;
		line-height: 54px;
	}
}

.rs-visite-pricing {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
}

.rs-visite-pricing > [class*="col-"] {
	display: flex;
}

.rs-visite-pricing-card {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
}

#container-prenotazione .rs-visite-pricing-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	margin: 0 0 16px;
	padding: 0;
}

/* Altezza riservata al testo da 768px in su (richiesta di Mirco, 2026-08-24): le due card
   sono affiancate solo da quel breakpoint (col-sm-6), ed è lì che il disallineamento delle
   foto sotto era visibile — il testo della card "Esperienza di Gusto" va su 3 righe contro
   le 2 dell'altra, quindi la foto sotto partiva più in basso. 3 righe × line-height 24px:
   min-height invece di height, il testo non viene tagliato se in futuro si allunga ancora.
   Non scoped sotto i 768px: le card sono impilate a piena larghezza, l'allineamento tra
   loro non serve e imporre l'altezza aggiungerebbe solo spazio vuoto inutile. */
@media (min-width: 768px) {
	#container-prenotazione .rs-visite-pricing-text {
		min-height: 72px;
	}
}

/* Foto tra testo e prezzo (richiesta di Mirco, 2026-08-24): stesso criterio di
   .rs-product-card-photo (riquadro ad aspect-ratio fisso, object-fit per riempirlo senza
   deformare), qui 3/2 perché è il rapporto nativo delle due foto fornite (1748x1240px). */
.rs-visite-pricing-photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
	margin: 0 0 16px;
}

#container-prenotazione .rs-visite-pricing-price {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-gold);
	margin: 0;
	margin-top: auto;
	padding: 0;
	padding-top: 16px;
}

.rs-visite-pricing-price-unit {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-muted);
	margin-left: 4px;
}

.rs-visite-story {
	margin-top: 24px;
	padding: 24px;
	border-left: 1px solid var(--c-hairline);
}

.rs-visite-story-block + .rs-visite-story-block {
	margin-top: 32px;
}

#container-prenotazione .rs-visite-story-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	margin: 0;
	padding: 0;
}

/* Nota/link secondario dentro un blocco .rs-visite-story-block (oggi solo il rimando a News):
   stesso trattamento di .rs-lines-footnote, piccolo e non in corsivo, per non confondersi
   con .rs-visite-story-text sopra. */
#container-prenotazione .rs-visite-story-footnote {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--c-muted);
	margin: 8px 0 0;
	padding: 0;
}

.rs-visite-story-footnote a {
	color: var(--c-muted);
	text-decoration: underline;
}

/* Come raggiungerci (C4): mappa con coordinate dell'ingresso (Mirco, 2026-08-21) + pulsante
   verso Google Maps directions, non verso la scheda del locale (imprecisa, vedi nota nel
   markup). Altezza fissa più bassa della mappa di contatti.php: qui è un dettaglio dentro un
   blocco già affollato di testo, non l'elemento principale della pagina. */
.rs-visite-map {
	margin: 16px 0;
}

.rs-visite-map-link {
	display: inline-block;
	padding: 10px 20px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	text-decoration: none;
	text-transform: none;
	border-radius: 2px;
}

.rs-visite-map-link:hover,
.rs-visite-map-link:focus {
	color: #FFFFFF;
	opacity: 0.9;
}

/* CTA differenziate (direzione 3, ui-ux-designer, scelta da Mirco 2026-08-21): "Prenota la
   tua visita" resta piena/verde (azione primaria), "Regala un'esperienza" diventa a contorno
   oro, con un occhiello sopra ciascun bottone ("Per te"/"Per regalare") per non farle leggere
   come due varianti dello stesso bottone abbinate 1:1 alle card sopra.
   Le regole vivono qui e non nello <style> inline "filippo" in testa alla pagina: quello si
   carica nell'<head>, restyling.css qui si carica in fondo al <body> (ordine non uniforme fra
   pagine, vedi CLAUDE.md) — a parità di specificità (una classe) l'ordine di sorgente basta a
   vincere, nessun !important necessario. */
.rs-visite-cta-eyebrow {
	display: block;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--c-eyebrow);
	margin: 0 0 8px;
}

.btnCustomVisite2 {
	background-color: transparent;
	border: 1px solid var(--c-gold);
	color: var(--c-gold);
}

.btnCustomVisite2:hover {
	background-color: var(--c-gold);
	color: #FFFFFF;
	opacity: 1;
}

/* DAL 1968 - .rs-history-facts, pagina Azienda. Elenco di fatti verificati (non paragrafo),
   sopra il segnaposto del racconto. Stile STIMATO: nessun riferimento Figma per questo
   componente in questo turno, riprende --c-muted/--c-gold già confermati altrove. */
.rs-history-facts {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.rs-history-facts li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(162, 144, 97, 0.3);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-muted);
}

.rs-history-facts strong {
	color: var(--c-gold);
}

/* LA MATERIA PRIMA - .rs-raw-material, pagina Azienda. Griglia di sei dati (una colonna su
   mobile, due da 768px, tre da 992px/col-md-4 di Bootstrap), non un paragrafo. Stile
   STIMATO: nessun riferimento Figma per questo componente in questo turno, dato il peso
   editoriale del blocco un trattamento leggermente più marcato (bordo, contrasto) delle
   altre liste di fatti della pagina. */
#contentAzienda .rs-raw-material > .row {
	display: flex;
	flex-wrap: wrap;
}

#contentAzienda .rs-raw-material > .row > [class*="col-"] {
	display: flex;
	margin-bottom: 24px;
}

.rs-raw-material-item {
	width: 100%;
	text-align: left;
	padding: 20px;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	box-sizing: border-box;
}

.rs-raw-material-label {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 8px;
}

/* Iconcina a fianco del titolo (richiesta di Mirco, 2026-08-24), solo per i sei box della
   materia prima: classe propria invece di estendere .rs-raw-material-label, che è riusata
   anche per "Valori"/"Energia" in Territorio e ambiente (riga ~2580), dove l'icona non è
   voluta. */
.rs-raw-material-icon {
	margin-right: 8px;
	color: var(--c-gold);
	font-size: 15px;
}

.rs-raw-material-value {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	margin: 0;
}

/* LA SCELTA DELLA QUALITÀ SUI VOLUMI - .rs-quality-focus, pagina Azienda. Citazione singola,
   grande, come frase-manifesto. Stile STIMATO: nessun riferimento Figma per questo
   componente in questo turno. */
.rs-quality-focus {
	padding: 16px 0;
}

.rs-quality-focus-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-nav);
	font-weight: 400;
	font-style: italic;
	font-size: 28px;
	line-height: 36px;
	text-align: center;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	.rs-quality-focus-quote {
		font-size: 34px;
		line-height: 42px;
		max-width: 720px;
		margin: 0 auto;
	}
}

/* LA FAMIGLIA (C3) - .rs-family, pagina Azienda. Tre livelli con dimensioni deliberatamente
   diverse (04-componenti.md): livello 1 grande, livello 2 minore, livello 3 piccolo e in
   riga. Stile STIMATO: nessun riferimento Figma per questo componente in questo turno. */
.rs-family {
	margin-top: 32px;
}

.rs-family-level1,
.rs-family-level2 {
	margin-top: 24px;
}

.rs-family-portrait {
	text-align: center;
	padding: 0 16px;
	margin-bottom: 24px;
}

.rs-family-portrait-photo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 320px;
	aspect-ratio: 6 / 5;
	object-fit: cover;
	margin: 0 auto 16px;
}

.rs-family-portrait-photo--sm {
	max-width: 220px;
}

.rs-family-portrait-name {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--c-gold);
	margin: 0 0 4px;
}

.rs-family-portrait--sm .rs-family-portrait-name {
	font-size: 18px;
	line-height: 22px;
}

/* Ruolo sotto il nome: prima perdeva contro #contentAzienda p di grayscale.css
   (specificità id+elemento vs sola classe, stesso motivo di sectionTitle/Text
   in CLAUDE.md) e usciva bianco, allineato a sinistra, con letter-spacing 1px
   non voluto. Scoped #contentAzienda per vincere, e ridisegnato come
   etichetta discreta: maiuscolo, spaziato, filetto oro sottile sopra invece
   del margine secco. STIMA: nessun riferimento Figma per questo turno. */
#contentAzienda .rs-family-portrait-role {
	position: relative;
	margin: 10px 0 0;
	padding-top: 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--c-muted);
}

#contentAzienda .rs-family-portrait-role::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 1px;
	transform: translateX(-50%);
	background-color: var(--c-gold);
}

/* Bio famiglia (.rs-family-bio) - differenziazione tipografica dal resto del corpo testo
   (richiesta di Mirco, 2026-08-25: il riuso di .sectionText si confondeva col resto della
   pagina). Direzione "Voce narrante" scelta tra le proposte disegnate con l'agente UI/UX
   (Claude Design, "Bio Famiglia - Direzioni.dc.html"): stesso font dei nomi/titoli
   (--font-nav, Fraunces) ma peso tondo invece di uppercase/oro, per leggersi come voce di
   famiglia e non come titolo né come citazione diretta — quel linguaggio resta assegnato a
   .rs-quote-aside/.rs-quote-attribution, non riusato qui. Livello 1 (paragrafo condiviso
   sotto la riga larga): centrato, max-width per non stendersi su tutta la larghezza.
   Livello 2 (--sm, dentro la colonna stretta col-sm-6): centrato diventa illeggibile su
   più righe in una colonna stretta, quindi sinistra; margine ravvicinato al filetto del
   ruolo sopra. STIMA dichiarata: nessun riferimento Figma per questo componente. */
#contentAzienda .rs-family-bio {
	margin: 24px auto 0;
	max-width: 560px;
	font-family: var(--font-nav);
	font-weight: 300;
	font-style: normal;
	font-size: 19px;
	line-height: 29px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-muted);
}

#contentAzienda .rs-family-bio--sm {
	margin: 8px 0 0;
	max-width: none;
	font-size: 16px;
	line-height: 24px;
	text-align: left;
}

/* Nota segnaposto generica: stesso trattamento in ogni pagina che riusa #contentAzienda
   (l'id è copiaincollato identico su tutte, vedi CLAUDE.md) per testo ancora da scrivere.
   Font-size ridotto rispetto a .sectionText apposta, per non essere scambiata per contenuto
   reale. Usata oggi in azienda.php (nipoti) e salumi-simonini.php (riga di apertura). */
#contentAzienda .rs-placeholder-note {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: var(--c-muted);
	opacity: 0.8;
	margin: 0 0 16px;
}

#contentAzienda .rs-family-placeholder-note {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	color: var(--c-muted);
	opacity: 0.8;
	margin: 0 0 16px;
}

/* Livello 3: riga di piccoli ritratti, scorrevole in orizzontale su mobile se gli elementi
   non ci stanno (04-componenti.md); regge un numero variabile di elementi grazie a flex-wrap
   sopra i 768px e a overflow-x sotto. Oggi mostra i due nipoti confermati da Mirco
   (2026-08-20, non tre). */
.rs-family-level3 {
	display: flex;
	gap: 24px;
	margin-top: 16px;
	padding-bottom: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
	.rs-family-level3 {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
	}
}

/* Wrapper del ritratto unico Mattia+Lucrezia (foto di gruppo, non foto singole):
   stesso margin-top del vecchio .rs-family-level3 che sostituisce, nessun'altra
   regola nuova, il ritratto in sé riusa .rs-family-portrait/--sm sopra. */
.rs-family-level3-photo {
	margin-top: 16px;
}

.rs-family-grandchild {
	flex: 0 0 auto;
	width: 96px;
	text-align: center;
}

.rs-family-grandchild-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 8px;
	border-radius: 50%;
	border: 1px dashed var(--c-gold);
	background-color: var(--c-panel);
	color: var(--c-muted);
	font-size: 24px;
}

.rs-family-grandchild-name,
.rs-family-grandchild-role {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 16px;
	color: var(--c-muted);
}

.rs-family-grandchild-name {
	font-weight: 700;
	color: var(--c-gold);
}

/* Nome/ruolo dei due nipoti sono ancora testo segnaposto (non i nomi reali degli altri
   livelli): corsivo per leggerli come "in arrivo", non come un dato mancante per errore. */
.rs-family-grandchild--placeholder .rs-family-grandchild-name,
.rs-family-grandchild--placeholder .rs-family-grandchild-role {
	font-style: italic;
	opacity: 0.85;
}

/* CONTENT HOME - titolo e testo sotto la hero. #contentHome è usato solo in index.php.
   Sostituisce le regole uppercase/Noto Serif di grayscale.css (righe 915-949) con i token
   "titoli di sezione" e "testi delle sezioni" di CLAUDE.md. Il valore 52px/54px del titolo
   è confermato come valore a 1440px (stesso pattern della hero); gli step sui breakpoint
   inferiori sono STIMATI, da confermare. text-align:left aggiunto perché la sezione ha la
   classe Bootstrap "text-center" che altrimenti centrerebbe titolo e testo, mentre nello
   screenshot sono allineati a sinistra. */
#contentHome h2 {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 375px) {
	#contentHome h2 {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	#contentHome h2 {
		font-size: 40px;
		line-height: 44px;
	}
}

@media (min-width: 1024px) {
	#contentHome h2 {
		font-size: 46px;
		line-height: 50px;
	}
}

@media (min-width: 1440px) {
	#contentHome h2 {
		font-size: 52px;
		line-height: 54px;
	}
}

/* Testo "testi delle sezioni": token confermato in CLAUDE.md, fisso su tutti i breakpoint
   (stesso trattamento del testo lead della hero). Colore: STIMA (--c-muted), da confermare. */
#contentHome p.introHomeText {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
}

/* Firma "Vittorio Simonini" in chiusura del testo: bianca e leggermente più grande del
   resto del paragrafo. Dimensione STIMATA (20px vs 18px del paragrafo), da confermare. */
#contentHome .firmaVittorioSimonini {
	color: #FFFFFF;
	font-size: 20px;
}

/* SEZIONI SITE-WIDE (azienda, famiglia, lavorazione, excelso, news, prosciutto-di-parma,
   visite-guidate, salumi-simonini, vaschetta-*): stessi font/dimensioni/colori del titolo e
   testo home (#contentHome sopra), tramite le classi .sectionTitle/.sectionText aggiunte nel
   markup di ogni pagina. Selettore prefissato con #contentAzienda (l'id, copiaincollato
   identico su tutte queste pagine, vedi CLAUDE.md) invece della sola classe: serve a pareggiare
   la specificità di #contentAzienda h2 / #contentAzienda p già presenti in grayscale.css
   (righe 1009-1037, non modificabili) — una classe da sola (0,1,0) perderebbe contro un
   selettore con id+elemento (1,0,1); id+classe (1,1,0) vince. #contentHome non è incluso qui:
   la home usa già le sue regole dedicate sopra, non è stata toccata per non introdurre rischi. */
#contentAzienda .sectionTitle {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 375px) {
	#contentAzienda .sectionTitle {
		font-size: 32px;
		line-height: 36px;
	}
}

@media (min-width: 768px) {
	#contentAzienda .sectionTitle {
		font-size: 40px;
		line-height: 44px;
	}
}

@media (min-width: 1024px) {
	#contentAzienda .sectionTitle {
		font-size: 46px;
		line-height: 50px;
	}
}

@media (min-width: 1440px) {
	#contentAzienda .sectionTitle {
		font-size: 52px;
		line-height: 54px;
	}
}

#contentAzienda .sectionText {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
}

/* Scritta "Partner" */
footer .footerPartnersTitle {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: center;
	color: var(--c-muted);
}

/* ============================================================================
   HOME — FASCIA CONTENUTI (restyling)
   Da appendere alla FINE di css/restyling.css (l'ordine di sorgente serve:
   queste regole devono vincere su quelle omonime già presenti sopra, a pari
   specificità).

   Ambito: solo .rs-cta-row, .rs-lines, #contentHome, .rs-solo-prodotto,
   .rs-visite-teaser + le utility .rs-section-eyebrow / .rs-section-rule.
   Navbar e footer non toccati.

   Va insieme al nuovo index.php (occhielli di sezione, "EST. 1968", prezzo
   diviso in etichetta+valore): le due cose si applicano assieme.

   Token usati: --c-gold, --c-muted, --c-green, --font-nav (Fraunces),
   --font-body (Inter), già definiti in :root a inizio file.

   Nota: --c-dark-bg è usata in più punti di restyling.css ma NON è definita
   in :root — quelle dichiarazioni cadono sul fallback (nessuno sfondo). Qui
   uso valori espliciti (#0a0a0a / #121212 / #171512, già in uso nel tema).

   Mobile-first, stessi breakpoint del progetto (375 / 768 / 1024 / 1440).
   ========================================================================== */

:root {
	--c-hairline: rgba(162, 144, 97, 0.28);
	--c-eyebrow: #7d7565;
	--c-panel: #121212;
	--c-photo-bg: #171512;
}

/* ---------------------------------------------------------------------------
   1. TRE PORTE DI INGRESSO — .rs-cta-row
   Prima: tre pillole verdi identiche, centrate → tre azioni di pari peso.
   Ora: fascia unica con filetti oro e divisori. Il verde resta solo sull'ultima
   voce (Acquista online), così esiste una gerarchia.
   ------------------------------------------------------------------------- */
/* Direzione 2c "Moduli sospesi" (ui-ux-designer, Claude Design "CTA Row - Direzioni.dc.html"
   turno 2, scelta da Mirco 2026-08-21 al posto di 1a "Superfici a gradiente" — vista dal vivo,
   1a non convinceva appieno). Sostituisce per intero il CSS di 1a: stesso markup HTML in
   index.php (icona + etichetta + freccia via ::after), nessuna riga PHP toccata. Cambio
   concettuale: niente più fascia continua a bordo-a-bordo con badge circolare — tre card
   separate da un gap reale, su una fascia di fondo --c-photo-bg (il pannello --c-panel
   diventa il colore delle card, non della fascia). Icona singola sopra il testo, non più in
   badge. "Acquista online" resta la voce più prioritaria: sollevata (translateY) con ombra
   verde più profonda da 768px, bordo sinistro bianco sotto (dove il sollevamento non regge
   in una colonna impilata). */
.rs-cta-row {
	padding: 20px 0;
	background-color: var(--c-photo-bg);
	text-align: left;
}

.rs-cta-row .container {
	padding-left: 20px;
	padding-right: 20px;
}

.rs-cta-row .row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-left: 0;
	margin-right: 0;
}

.rs-cta-row .row > [class*="col-"] {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.rs-cta-row-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 22px 20px;
	background-color: var(--c-panel);
	border: 1px solid rgba(162, 144, 97, 0.35);
	border-radius: 2px;
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* width:auto esplicito: senza, grayscale.css riga ~1173 (".form-group label, span") mette
   width:100% su OGNI <span> nudo del sito. Nella card a badge circolare di prima passava
   inosservato perché il badge aveva una width esplicita (34/40px) che vinceva a parità di
   proprietà dichiarata; qui l'icona non ha più una width propria e senza questa riga
   diventa larga quanto tutta la card, spingendo l'etichetta fuori e forzandola a capo. */
.rs-cta-row-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	color: var(--c-gold);
	font-size: 18px;
}

/* grayscale.css riga ~1173 (".form-group label, span") mette anche font-family:'Noto
   Serif' su ogni span, non solo text-transform: qui l'etichetta usciva in serif invece
   che in Inter. Stesso bug già trovato altrove in questo turno, qui dimenticato perché
   scoperto solo confrontando #contentHome col mockup. */
.rs-cta-row-item-label {
	flex: 1 1 auto;
	font-family: var(--font-body);
}

.rs-cta-row-item::after {
	content: "\2192";
	color: var(--c-gold);
	font-size: 14px;
	letter-spacing: 0;
	margin-left: auto;
	padding-left: 12px;
}

.rs-cta-row-item:hover,
.rs-cta-row-item:focus {
	border-color: var(--c-gold);
	color: #FFFFFF;
	text-decoration: none;
}

/* Anello di focus da tastiera: non inset (a differenza di 1a) per non sommarsi in modo
   confuso all'ombra della card — sostituisce l'ombra ambiente invece di aggiungersi. */
.rs-cta-row-item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--c-gold);
}

/* Ultima voce (e-shop): unica card piena in verde. Su mobile (colonna impilata, nessun
   sollevamento) la priorità si legge dal bordo sinistro bianco; da 768px il bordo sparisce
   a favore del sollevamento verticale (vedi media query). */
.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item {
	background-color: var(--c-green);
	border: 0;
	border-left: 4px solid #FFFFFF;
}

.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item-icon {
	color: #FFFFFF;
}

.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item::after {
	color: #FFFFFF;
}

.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item:hover {
	background-color: var(--c-green);
	filter: brightness(1.1);
}

/* Corretto su richiesta di Mirco 2026-08-21, vista la prima resa di 2c: card troppo alte
   (icona+etichetta+freccia impilate verticalmente, ~166px), hover con sollevamento
   (translateY) letto come movimento non voluto, altezza delle tre card non garantita
   uguale (align-items:flex-start lasciava crescere ciascuna in base al proprio contenuto).
   Da 768px l'icona torna in linea con etichetta e freccia (stesso layout orizzontale della
   base mobile, solo dentro la cornice a card), dimezzando abbondantemente l'altezza. Nessun
   transform in nessuno stato: la selezione si vede solo da bordo/ombra che cambiano,
   ferme. align-items:stretch sul .row rende le tre colonne alte uguali, height:100% sulla
   card riempie la colonna stirata: le tre card sono sempre alla stessa altezza per
   costruzione, non per coincidenza di contenuto. */
@media (min-width: 768px) {
	.rs-cta-row {
		padding: 28px 0;
	}

	.rs-cta-row .container {
		padding-left: 28px;
		padding-right: 28px;
	}

	.rs-cta-row .row {
		flex-direction: row;
		gap: 24px;
		align-items: stretch;
	}

	.rs-cta-row .row > [class*="col-"] {
		flex: 1 1 0;
		width: auto;
		float: none;
	}

	.rs-cta-row-item {
		height: 100%;
		padding: 20px 24px;
		box-shadow: 0 4px 14px rgba(162, 144, 97, 0.08);
		box-sizing: border-box;
		font-size: 15px;
	}

	.rs-cta-row-item-icon {
		font-size: 18px;
	}

	.rs-cta-row-item::after {
		font-size: 16px;
	}

	.rs-cta-row-item:hover {
		box-shadow: 0 4px 16px rgba(162, 144, 97, 0.18);
	}

	.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item {
		box-shadow: 0 4px 16px rgba(6, 101, 67, 0.28);
	}

	.rs-cta-row .row > [class*="col-"]:last-child .rs-cta-row-item:hover {
		box-shadow: 0 4px 20px rgba(6, 101, 67, 0.4);
	}
}

/* .rs-cta-row--pair — variante per coppie di 2 CTA di pari peso (azienda.php,
   richiesta di Mirco 2026-08-24). La base di .rs-cta-row sopra è pensata per
   3 card con l'ultima come e-shop prioritario (sfondo verde --c-green): qui
   le due card sono equivalenti, nessuna gerarchia, quindi la card "ultima"
   torna allo stile neutro delle altre invece che verde.
   Sfondo nero puro (non --c-photo-bg): richiesta di Mirco 2026-08-24, che ha
   verificato via browser il salto di colore tra il nero puro di body
   (#000000, css/grayscale.css) fuori da #contentAzienda e --c-photo-bg
   (#171512) dentro. Prima avevo provato a mettere il nero sul div
   contenitore (.rs-cta-row-wrap): inutile, perché .rs-cta-row è un
   Bootstrap .row e i suoi margini negativi coprono per intero lo sfondo
   del contenitore — il colore che si vede è sempre e solo quello di
   .rs-cta-row stesso.
   STIMA non richiesta da Figma per questo componente in questa pagina:
   bordo oro pieno di default (non solo in hover) perché --c-panel (card,
   #121212) è comunque molto vicino al nuovo nero puro della banda, e senza
   un bordo marcato la card si perderebbe nella banda invece di leggersi
   come elemento cliccabile distinto.
   display:flex aggiunto (richiesta di Mirco, 2026-08-24) per pareggiare
   l'altezza delle 2 card quando un'etichetta va a capo su due righe
   (visto su prosciutto-di-parma.php, "Richiedi informazioni per
   operatori"): .rs-cta-row--pair è essa stessa il .row Bootstrap (non un
   contenitore con un .row annidato, a differenza di .rs-cta-row in home),
   quindi i selettori vanno sui figli diretti [class*="col-"], non su
   ".row > [class*='col-']" come nelle regole :last-child qui sotto — per
   lo stesso motivo quei selettori :last-child non hanno mai avuto un
   .row da abbinare e di fatto non sono mai scattati: lo sfondo verde da
   "ultima card" non ha mai raggiunto queste pagine indipendentemente da
   quelle regole, ma le lascio per sicurezza se la struttura cambiasse. */
.rs-cta-row--pair {
	background-color: #000000;
	display: flex;
	flex-wrap: wrap;
}

.rs-cta-row--pair > [class*="col-"] {
	display: flex;
}

.rs-cta-row--pair .rs-cta-row-item {
	border-color: var(--c-gold);
	width: 100%;
}

.rs-cta-row--pair .row > [class*="col-"]:last-child .rs-cta-row-item {
	background-color: var(--c-panel);
	border: 1px solid var(--c-gold);
}

.rs-cta-row--pair .row > [class*="col-"]:last-child .rs-cta-row-item::after {
	color: var(--c-gold);
}

.rs-cta-row--pair .row > [class*="col-"]:last-child .rs-cta-row-item:hover {
	background-color: var(--c-panel);
	filter: none;
}

@media (min-width: 768px) {
	.rs-cta-row--pair .row > [class*="col-"]:last-child .rs-cta-row-item,
	.rs-cta-row--pair .row > [class*="col-"]:last-child .rs-cta-row-item:hover {
		box-shadow: 0 4px 16px rgba(162, 144, 97, 0.18);
	}
}

/* ---------------------------------------------------------------------------
   2. LE NOSTRE LINEE — .rs-lines
   Il disegno vero delle card (foto grande 4:3, cornice oro sulla corrente) sta nel blocco più
   in alto in questo file, insieme alla dichiarazione base della classe: qui restano solo il
   padding di sezione più ampio da desktop e l'occhiello/filetto oro sopra il titolo (usati
   anche da altri componenti della fascia contenuti, non solo da .rs-lines).
   ------------------------------------------------------------------------- */
.rs-lines {
	padding: 64px 0 56px;
}

/* Occhiello di sezione + filetto oro sfumato. Elementi reali nel markup (non
   pseudo-elementi) perché il testo va tradotto ITA/ENG. */
.rs-section-eyebrow {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: center;
	color: var(--c-eyebrow);
}

.rs-section-eyebrow--left {
	text-align: left;
	margin-bottom: 18px;
	font-size: 11px;
}

.rs-section-rule {
	display: block;
	width: 56px;
	height: 1px;
	margin: 0 auto 40px;
	background: linear-gradient(90deg, rgba(162, 144, 97, 0), var(--c-gold), rgba(162, 144, 97, 0));
}

.rs-lines-footnote {
	margin: 32px 0 0;
}

.rs-lines-footnote a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(162, 144, 97, 0.4);
	text-decoration: none;
}

.rs-lines-footnote a:hover {
	color: var(--c-gold);
	text-decoration: none;
}

@media (min-width: 768px) {
	.rs-lines {
		padding: 96px 0 88px;
	}

	.rs-lines .rs-section-rule {
		margin-bottom: 64px;
	}
}

/* ---------------------------------------------------------------------------
   3. LE PAROLE DI VITTORIO — #contentHome
   Prima: titolo grande e poi un blocco di testo italic lungo tutta la larghezza
   del container (righe da ~140 caratteri, illeggibili).
   Ora: da 1024px titolo in colonna laterale (sticky) e testo su misura ~64
   caratteri. La sezione ha .text-center nel markup: neutralizzato qui.
   ------------------------------------------------------------------------- */
/* Full-bleed su richiesta di Mirco 2026-08-20: la classe Bootstrap "container" è stata
   tolta dalla section in index.php e spostata su un div interno (stessa tecnica di
   .rs-azienda-band in azienda.php). #contentHome è un id, usato una sola volta in
   pagina: la specificità alta basta a battere .container senza bisogno di combinatori. */
#contentHome {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #0a0a0a;
	border-top: 1px solid rgba(162, 144, 97, 0.2);
	border-bottom: 1px solid rgba(162, 144, 97, 0.2);
	padding-top: 64px;
	padding-bottom: 72px;
	text-align: left;
}

/* Trovato confrontando col mockup "Home Contenuti.dc.html": grayscale.css ha
   "#contentHome p {font-family:'Work Sans';font-size:26px;color:#FFFFFF}" (id+elemento,
   specificità 1,0,1) che batteva .rs-section-eyebrow--left (due classi, 0,2,0) sul <p>
   dell'occhiello — usciva bianco, 26px, font sbagliato invece di 11px/oro/Inter. Scoped
   qui con l'id #contentHome (id+classe, 1,1,0) per vincere senza !important. */
#contentHome .rs-section-eyebrow--left {
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.24em;
	color: var(--c-eyebrow);
}

/* h2 usava la scala generale dei "titoli di sezione" (46/50 a 1024px, 52/54 a 1440px):
   nel mockup questo titolo, stretto nella colonna sticky da 320-340px, ha una misura
   dedicata più piccola (44/50, fissa, non in scala) invece di crescere fino a 52/54. */
@media (min-width: 1024px) {
	#contentHome h2 {
		font-size: 44px;
		line-height: 50px;
	}
}

#contentHome h2 {
	margin-top: 0;
	margin-bottom: 24px;
}

#contentHome h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin-top: 28px;
	background-color: var(--c-gold);
}

#contentHome p.introHomeText {
	max-width: 64ch;
	margin: 0;
}

/* Riga di apertura della lettera, distinta dal resto del corpo (18px italic muted):
   nel mockup è una frase a sé, più grande e bianca, non testo qualunque. Testo
   invariato, solo avvolto in questo span (index.php), come richiesto da Mirco. */
#contentHome .rs-lettera-lead {
	display: block;
	margin-bottom: 28px;
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	line-height: 34px;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
}

/* Corsivo e dimensione appena ridotta (richiesta di Mirco, 2026-08-24): la firma resta
   distinguibile dal testo della lettera sopra (quello è già italic/muted a 18px, qui
   22px→19px non-corsivo diventava italic) senza pesare quanto un font-size pieno. */
#contentHome .firmaVittorioSimonini {
	display: inline-block;
	margin-top: 16px;
	padding-left: 58px;
	position: relative;
	font-family: var(--font-nav);
	font-weight: 400;
	font-style: italic;
	font-size: 19px;
	color: #FFFFFF;
}

#contentHome .firmaVittorioSimonini::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 40px;
	height: 1px;
	background-color: rgba(162, 144, 97, 0.6);
}

/* Frase in evidenza dentro la lettera (span .rs-lettera-quote, già nel markup in
   entrambe le lingue). I <br /> che la circondavano sono stati rimossi da
   index.php: con display:block darebbero spazi doppi. */
#contentHome .rs-lettera-quote {
	display: block;
	margin: 40px 0;
	padding-left: 28px;
	border-left: 1px solid var(--c-gold);
	font-family: var(--font-nav);
	font-weight: 300;
	font-style: normal;
	font-size: 24px;
	line-height: 34px;
	color: var(--c-gold);
}

/* color esplicito aggiunto (2026-08-24): la nuova regola site-wide "grassetto bianco su
   testo grigio" (in fondo al file) colpisce anche i <b> dentro .rs-lettera-quote, che è
   annidata dentro p.introHomeText — qui il grassetto va lasciato oro uniforme alla
   citazione (già voluto: il font-weight sotto lo riporta a 400 apposta), non bianco.
   Specificità alzata con p.introHomeText davanti per vincere sulla regola site-wide. */
#contentHome p.introHomeText .rs-lettera-quote b {
	font-weight: 400;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	#contentHome {
		padding-top: 96px;
		padding-bottom: 104px;
	}

	#contentHome .rs-lettera-quote {
		font-size: 28px;
		line-height: 38px;
	}
}

@media (min-width: 1024px) {
	/* Due colonne: .col-lg-12 ha esattamente due figli diretti, .rs-lettera-heading
	   (occhiello+titolo) e il <p class="introHomeText">, che la griglia piazza uno per
	   colonna. align-items:start serve al position:sticky del wrapper del titolo. */
	#contentHome .row {
		margin-left: 0;
		margin-right: 0;
	}

	#contentHome .row > .col-lg-12 {
		display: grid;
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: 64px;
		align-items: start;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		float: none;
	}

	/* position:sticky sul wrapper (non più solo su h2, corretto 2026-08-20): occhiello
	   e titolo restano insieme mentre si scrolla, come nel mockup "Home Contenuti.dc.html". */
	#contentHome .rs-lettera-heading {
		position: sticky;
		top: calc(var(--navbar-height) + 30px);
	}

	#contentHome h2 {
		margin-bottom: 0;
	}
}

@media (min-width: 1440px) {
	#contentHome .row > .col-lg-12 {
		grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
		gap: 88px;
	}
}

/* ---------------------------------------------------------------------------
   4. DAL 1968 — .rs-solo-prodotto
   Aggiunti occhiello "EST. 1968" e filetto verticale sopra il titolo (via
   pseudo-elementi: nessuna modifica al markup). Testo su misura contenuta.
   CTA in oro outline invece che verde: nella stessa schermata il verde
   competeva con "Acquista online" della fascia in alto.
   ------------------------------------------------------------------------- */
.rs-solo-prodotto {
	padding: 64px 0 72px;
}

.rs-solo-prodotto-eyebrow {
	margin: 0;
	font-family: var(--font-nav);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3em;
	text-align: center;
	color: var(--c-eyebrow);
}

.rs-solo-prodotto-title {
	margin-top: 0;
}

.rs-solo-prodotto-title::before {
	content: "";
	display: block;
	width: 1px;
	height: 44px;
	margin: 22px auto 26px;
	background: linear-gradient(180deg, var(--c-gold), rgba(162, 144, 97, 0));
}

.rs-solo-prodotto-text {
	max-width: 62ch;
	margin: 24px auto 36px;
}

.rs-solo-prodotto-text strong {
	color: #FFFFFF;
	font-style: normal;
	font-weight: 400;
}

.rs-solo-prodotto-link {
	padding: 13px 30px;
	background-color: transparent;
	border: 1px solid var(--c-gold);
	color: var(--c-gold);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.rs-solo-prodotto-link:hover,
.rs-solo-prodotto-link:focus {
	background-color: var(--c-gold);
	color: #000000;
	text-decoration: none;
}

@media (min-width: 768px) {
	.rs-solo-prodotto {
		padding: 104px 0;
	}
}

/* ---------------------------------------------------------------------------
   5. VISITE E DEGUSTAZIONI — .rs-visite-teaser
   Da 992px la scheda testo diventa un pannello #121212 con bordo oro,
   sovrapposto alla foto. Prezzo separato da un filetto e trattato come dato.
   ------------------------------------------------------------------------- */
.rs-visite-teaser {
	padding: 0 0 64px;
}

.rs-visite-teaser-photo {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background-color: var(--c-photo-bg);
	margin-bottom: 0;
}

.rs-visite-teaser .row > [class*="col-"]:last-child {
	background-color: var(--c-panel);
	border: 1px solid var(--c-hairline);
	padding: 32px 24px;
}

.rs-visite-teaser-title {
	margin-top: 0;
	margin-bottom: 16px;
}

.rs-visite-teaser-highlight {
	margin: 0 0 28px;
}

.rs-visite-teaser-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(162, 144, 97, 0.25);
	color: #FFFFFF;
}

.rs-visite-teaser-price-label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-eyebrow);
}

.rs-visite-teaser-price-value {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: #FFFFFF;
}

.rs-visite-teaser-link {
	transition: filter 0.25s ease;
}

.rs-visite-teaser-link:hover,
.rs-visite-teaser-link:focus {
	filter: brightness(1.15);
	color: #FFFFFF;
	text-decoration: none;
}

@media (min-width: 768px) {
	.rs-visite-teaser .row > [class*="col-"]:last-child {
		padding: 40px 32px;
	}
}

@media (min-width: 992px) {
	.rs-visite-teaser {
		padding-bottom: 104px;
	}

	.rs-visite-teaser .row {
		display: flex;
		align-items: center;
		margin-left: 0;
		margin-right: 0;
	}

	.rs-visite-teaser .row > [class*="col-"] {
		float: none;
		width: auto;
		box-sizing: border-box;
	}

	.rs-visite-teaser .row > [class*="col-"]:first-child {
		flex: 1.1 1 0;
		padding-left: 0;
		padding-right: 0;
	}

	.rs-visite-teaser .row > [class*="col-"]:last-child {
		flex: 0.9 1 0;
		margin-left: -64px;
		padding: 52px 46px;
		position: relative;
		z-index: 1;
	}

	.rs-visite-teaser-price-value {
		font-size: 28px;
	}
}

/* ============================================================================
   AZIENDA — FASCE ALTERNATE (Direzione A, scelta da Mirco)
   Ambito: solo azienda.php, sezione #contentAzienda. Tutte le regole sotto
   sono scoped a #contentAzienda o a classi rs-azienda-..., rs-territory-...,
   rs-quote-aside usate solo in questa pagina. Non tocca .rs-raw-material,
   .rs-family, .rs-cta-row (contenuto/stile, fuori mandato) — solo la loro
   riga contenitore esterna è stata sdoppiata dall'unica .row originale per
   permettere le fasce a sfondo alternato.

   Nota: --c-dark-bg citato in design-tokens.md non esiste in :root (vedi
   commento più sopra in questo file): qui uso solo --c-panel e --c-photo-bg,
   già definiti, mai un valore nuovo hardcoded.

   Tecnica full-bleed: width:100vw + margin-left/right:calc(50% - 50vw) sul
   wrapper .rs-azienda-band, con un .container interno per riallineare il
   contenuto alla larghezza dei blocchi non in fascia. Funziona a qualunque
   profondità di nidificazione (calcolato sul viewport, non sul genitore).
   STIMA non richiesta da Figma per questa pagina in questo turno: nessun
   riferimento diretto, i pattern riusano solo token già confermati altrove.
   ========================================================================== */

.rs-azienda-band {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.rs-azienda-band--panel {
	background-color: var(--c-panel);
}

.rs-azienda-band--photo {
	background-color: var(--c-photo-bg);
}

/* Padding verticale della fascia colorata: STIMA, nessun valore Figma per
   questo turno. */
.rs-azienda-band > .container {
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (min-width: 768px) {
	.rs-azienda-band > .container {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* ---------------------------------------------------------------------------
   Apertura + "Dal 1968" fuse in un'unica unità (punto 2). Testo invariato
   (stesso campo DB di $testo, vedi nota nel markup): qui solo la struttura
   di wrapping cambia. Spaziatura ridotta STIMATA (default p:margin 0 0 25px
   da grayscale.css, qui compressa) per leggere le due parti come un blocco
   solo, non due sezioni separate.
   ------------------------------------------------------------------------- */
#contentAzienda .rs-azienda-opening .sectionText {
	margin-bottom: 8px;
}

#contentAzienda .rs-azienda-history {
	margin-top: 8px;
}

#contentAzienda .rs-azienda-history .sectionTitle {
	margin-top: 0;
}

/* Da 1024px: .rs-history-facts affianca il testo invece di stare sotto.
   SCELTA dichiarata (non misura Figma): testo+citazione a sinistra (colonna
   più larga, è la parte narrativa), elenco fatti a destra (colonna fissa,
   si legge come una scheda dati a fianco del racconto). Ordine nel markup
   resta facts-poi-testo (come nell'originale, invariato sotto i 1024px):
   qui uso row-reverse per invertire solo la resa visiva da 1024px in su. */
#contentAzienda .rs-azienda-history-grid .rs-history-facts {
	margin-bottom: 16px;
}

@media (min-width: 1024px) {
	#contentAzienda .rs-azienda-history-grid {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 48px;
	}

	#contentAzienda .rs-azienda-history-grid .rs-azienda-history-copy {
		flex: 1 1 0;
		min-width: 0;
	}

	#contentAzienda .rs-azienda-history-grid .rs-history-facts {
		flex: 0 0 280px;
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
   Citazione-aside (punto 3): stessa idea di #contentHome .rs-lettera-quote
   (bordo sinistro oro, piccola), qui scoped ad #contentAzienda con nome
   proprio perché il testo/contesto è diverso. La citazione-manifesto
   (.rs-quality-focus-quote) resta INVARIATA, non toccata da questa regola.
   ------------------------------------------------------------------------- */
#contentAzienda .rs-quote-aside {
	display: block;
	margin: 20px 0 0;
	padding: 0 0 0 20px;
	border: 0;
	border-left: 1px solid var(--c-gold);
	font-family: var(--font-nav);
	font-weight: 300;
	font-style: normal;
	font-size: 18px;
	line-height: 26px;
	text-align: left;
	color: var(--c-gold);
}

/* .rs-quote-attribution — firma "Vittorio Simonini" sotto le citazioni dirette
   (richiesta di Mirco 2026-08-24): resa esplicita l'idea che è il fondatore a
   parlare. Stessa tecnica di #contentHome .firmaVittorioSimonini più sopra in
   questo file (filetto oro + display:inline-block, a capo con un <br/> nel
   markup, non con display:block: un block erediterebbe text-align:center nei
   contesti centrati — es. .rs-quality-focus-quote — ma il filetto ::before
   resterebbe ancorato al bordo sinistro del blocco invece che al testo).
   Condivisa da .rs-quote-aside/.rs-quality-focus-quote (azienda.php) e
   .rs-process-closing (lavorazione.php): stesso id #contentAzienda su
   entrambe le pagine. width:auto e font-family espliciti: grayscale.css riga
   ~1173 (".form-group label, span") forza width:100% e Noto Serif su ogni
   <span> nudo, stesso bug già risolto per .rs-cta-row-item-label. */
#contentAzienda .rs-quote-attribution {
	display: inline-block;
	width: auto;
	margin-top: 8px;
	padding-left: 30px;
	position: relative;
	font-family: var(--font-body);
	font-weight: 500;
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-eyebrow);
}

#contentAzienda .rs-quote-attribution::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 1px;
	background-color: var(--c-gold);
}

/* ---------------------------------------------------------------------------
   Territorio e ambiente (punto 4): due gruppi con sotto-occhiello
   (.rs-raw-material-label riusata così com'è, stesso stile Fraunces 18px
   oro già confermato altrove). Da 768px il gruppo "Energia" affianca la
   foto grande (ambiente3.jpg, dettaglio pannelli solari: scelta motivata
   dal soggetto, coerente col gruppo che parla di fotovoltaico). SCELTA:
   niente pattern pannello-su-foto con margin-left negativo qui — coprirebbe
   parte dell'area cliccabile del link lightbox della foto; resta
   affiancamento semplice 50/50, come consentito in alternativa.
   ------------------------------------------------------------------------- */
#contentAzienda .rs-territory-group {
	margin-bottom: 24px;
}

#contentAzienda .rs-territory-group .rs-raw-material-label {
	margin-top: 0;
}

#contentAzienda .rs-territory-photo-col {
	margin-bottom: 24px;
}

#contentAzienda .rs-territory-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--c-panel);
}

#contentAzienda .rs-territory-gallery {
	margin-top: 8px;
}

/* Le due foto della galleria sotto "Energia" (richiesta di Mirco, 2026-08-24):
   usano ancora .img-gallery di grayscale.css (border-radius:15px, riga 1159,
   non modificabile) e .img-responsive di Bootstrap (max-width:100%, non
   width:100%) - stesso trattamento già dato a #contentContatti img.img-gallery
   più sotto in questo file. Risultato senza override: angoli arrotondati e,
   siccome i file sorgente sono 400x333 (più stretti della colonna), una
   larghezza visibilmente minore della foto ambiente3.jpg sopra, che invece è
   forzata a width:100% da .rs-territory-photo. Stesso trattamento qui:
   width:100%, aspect-ratio 4/3, object-fit cover, angoli squadrati. */
#contentAzienda .rs-territory-gallery img.img-gallery {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	background-color: var(--c-panel);
}

@media (min-width: 768px) {
	#contentAzienda .rs-territory-energy,
	#contentAzienda .rs-territory-gallery {
		display: flex;
		align-items: center;
		gap: 32px;
		margin-left: 0;
		margin-right: 0;
	}

	#contentAzienda .rs-territory-energy > [class*="col-"],
	#contentAzienda .rs-territory-gallery > [class*="col-"] {
		float: none;
		width: 50%;
		box-sizing: border-box;
	}

	#contentAzienda .rs-territory-photo-col {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
   Galleria fotografica finale (punto 5): striscia full-bleed, sfondo nero
   di default (body, non serve un modificatore colore). Scroll orizzontale
   sotto i 768px (stesso pattern di .rs-family-level3), griglia a tre da
   768px in su. Dimensioni foto STIMATE, nessun riferimento Figma per questo
   componente in questo turno.
   ------------------------------------------------------------------------- */
#contentAzienda .rs-azienda-gallery-track {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#contentAzienda .rs-azienda-gallery-item {
	display: block;
	flex: 0 0 82%;
}

#contentAzienda .rs-azienda-gallery-photo {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

@media (min-width: 768px) {
	#contentAzienda .rs-azienda-gallery-track {
		gap: 4px;
		overflow-x: visible;
	}

	#contentAzienda .rs-azienda-gallery-item {
		flex: 1 1 0;
	}

	#contentAzienda .rs-azienda-gallery-photo {
		height: 340px;
	}
}

/* ---------------------------------------------------------------------------
   "Scopri di più" (punto 6): bottone outline oro (stesso linguaggio di
   .rs-solo-prodotto-link) e pannello scuro. Nessuna classe/attributo tolto:
   .btnMoreInfo, .collapse, #collapseExample, .card.card-block restano,
   servono al toggle jQuery e al collapse di Bootstrap già in pagina.
   ------------------------------------------------------------------------- */
#contentAzienda .btnMoreInfo {
	display: inline-block;
	padding: 13px 30px;
	background-color: transparent;
	background-image: none;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	color: var(--c-gold);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

#contentAzienda .btnMoreInfo:hover,
#contentAzienda .btnMoreInfo:focus {
	background-color: var(--c-gold);
	color: #000000;
	text-decoration: none;
}

#contentAzienda .card.card-block {
	background-color: var(--c-panel);
	border: 1px solid var(--c-hairline);
	border-radius: 2px;
	padding: 24px;
	margin-top: 24px;
	text-align: left;
}

#contentAzienda .card.card-block p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-muted);
	text-align: left;
	margin: 0;
}

/* ============================================================================
   SCHEDE PRODOTTO CON STAGIONATURA E PESO (C6) - .rs-product-card
   Dove: excelso.php e salumi-simonini.php (04-componenti.md chiede lo stesso componente su
   entrambe, ora allineate). Stile STIMATO: nessun riferimento Figma per questo componente,
   riprende il trattamento a card con bordo oro già usato per .rs-raw-material-item.
   Base: flex-wrap, invariata da sempre — funziona bene quando il numero di card riempie
   l'ultima riga (salumi-simonini.php, 4 card su 4 colonne). ========================== */
#contentAzienda .rs-product-card-row {
	display: flex;
	flex-wrap: wrap;
}

#contentAzienda .rs-product-card-row > [class*="col-"] {
	display: flex;
	margin-bottom: 24px;
}

/* .rs-product-card-row--grid — variante per righe che NON si dividono in modo pulito
   (oggi solo excelso.php, 7 card). Direzione B (ui-ux-designer, Claude Design "Griglia
   Prodotti Excelso - Direzioni.dc.html", scelta da Mirco 2026-08-24) al posto del vecchio
   flex-wrap a 4 colonne: quello aveva due bug, non uno solo. (1) Le 7 card erano divise in
   DUE <div class="row rs-product-card-row"> separati nel markup (col-md-3 il primo,
   col-md-4 il secondo: già larghezze diverse, non solo altezze), e ogni "riga" flex-wrap
   equalizza l'altezza solo al proprio interno, non tra le due — se una card della prima
   riga aveva un nome su due righe, tutta la prima riga diventava più alta della seconda.
   (2) L'equalizzazione dell'altezza da sola non bastava comunque: serviva riservare al
   nome prodotto lo spazio di due righe a prescindere (.rs-product-card-name, sotto),
   altrimenti bastava un nome corto per rompere ancora l'allineamento.
   Non applicata a salumi-simonini.php: le sue 4 card riempiono già la griglia a 4 colonne
   senza resto, non ha lo stesso problema — passare tutta .rs-product-card-row a grid
   avrebbe cambiato la sua griglia da 4 a 3+1 senza che fosse stato chiesto, per questo la
   variante è scoped a un modificatore invece di sostituire la regola base.
   CSS grid invece del sistema a colonne di Bootstrap — stesso criterio già usato per
   .rs-lines più sopra in questo file — 3 colonne da 1024px (soglia di progetto, non quella
   Bootstrap 768/992/1200), 7 card fanno 3+3+1 con l'ultima centrata via grid-column.
   clear:both necessario: un contenitore display:grid affiancato a un float precedente (la
   colonna testo a piena larghezza sopra, floated da Bootstrap) si schiaccia a width:0 —
   trovato in verifica browser, non teorico. */
#contentAzienda .rs-product-card-row.rs-product-card-row--grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-left: 0;
	margin-right: 0;
	clear: both;
}

#contentAzienda .rs-product-card-row.rs-product-card-row--grid::before,
#contentAzienda .rs-product-card-row.rs-product-card-row--grid::after {
	content: none;
	display: none;
}

#contentAzienda .rs-product-card-row.rs-product-card-row--grid > [class*="col-"] {
	display: flex;
	width: auto;
	min-width: 0;
	float: none;
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}

@media (min-width: 768px) {
	#contentAzienda .rs-product-card-row.rs-product-card-row--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	#contentAzienda .rs-product-card-row.rs-product-card-row--grid {
		grid-template-columns: repeat(3, 1fr);
	}

	#contentAzienda .rs-product-card-row.rs-product-card-row--grid > :last-child {
		grid-column: 2;
	}
}

.rs-product-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
	box-sizing: border-box;
	text-align: left;
}

/* Foto intera, non croppata (richiesta di Mirco, 2026-08-20): object-fit:contain invece di
   cover. Il riquadro 4:3 resta fisso per l'altezza uniforme delle card; dove la foto non lo
   riempie tutto, --c-panel colma lo spazio invece di lasciare trasparenza sul nero di
   #contentAzienda, che sembrerebbe un errore. */
.rs-product-card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background-color: var(--c-panel);
	margin-bottom: 12px;
}

/* min-height: 2 righe riservate sempre (2 × line-height 22px), non solo quando il nome
   ci va davvero a capo (richiesta di Mirco 2026-08-24, via Claude Design): è questo il fix
   di fondo dell'allineamento tra le card, non l'equalizzazione flex/grid da sola — vedi
   commento su .rs-product-card-row più sopra. */
.rs-product-card-name {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	min-height: 44px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 12px;
}

/* .rs-product-card-cta — sostituisce il blocco stagionatura/peso (richiesta di Mirco,
   2026-08-24, su excelso.php e salumi-simonini.php): quei dati non sono mai stati forniti,
   restavano "da definire" a tempo indeterminato — contenuto vuoto che dava l'impressione di
   un sito incompleto, mentre stagionatura e peso sono comunque già nella scheda prodotto
   linkata. margin-top:auto invariato dal vecchio .rs-product-card-specs, per restare
   ancorata al fondo della card a prescindere dalla lunghezza del nome sopra. */
.rs-product-card-cta {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--c-hairline);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-gold);
	text-decoration: none;
}

.rs-product-card-cta:hover,
.rs-product-card-cta:focus {
	color: #FFFFFF;
	text-decoration: none;
}

/* grayscale.css riga ~1173 (".form-group label, span") forza width:100% e Noto Serif su
   ogni <span> nudo: senza questa riga la freccia si allarga a tutta la card e va a capo,
   stesso bug già risolto per .rs-cta-row-item-icon. */
.rs-product-card-cta span {
	width: auto;
	font-family: var(--font-body);
}

/* ============================================================================
   SETTE FASI DI LAVORAZIONE - .rs-process, pagina lavorazione.php
   Oggi: solo fotogramma statico (foto esistenti riassegnate, mai ingrandite). Pronta a
   ricevere i video (05-media.md) quando saranno confermati i diritti d'uso: a quel punto
   .rs-process-phase-media conterrà un <video> al posto di <img>, stesso contenitore/
   proporzioni, più lo script IntersectionObserver per play/pausa allo scorrimento
   (specifica in 05-media.md, non ancora implementata perché non c'è nulla da avviare).
   Stile STIMATO: nessun riferimento Figma per questo componente in questo turno.
   ========================================================================== */
.rs-process {
	margin-top: 32px;
	text-align: left;
}

.rs-process-phase {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 0;
	border-top: 1px solid var(--c-hairline);
}

.rs-process-phase:first-child {
	border-top: none;
	padding-top: 0;
}

.rs-process-phase-media {
	width: 100%;
}

.rs-process-phase-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rs-process-phase-number {
	display: block;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--c-eyebrow);
	margin: 0 0 8px;
}

.rs-process-phase-title {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 8px;
}

/* .rs-process-phase-text/-duration/-closing sono <p>: scoped #contentAzienda per battere
   #contentAzienda p di grayscale.css (colore #FFFFFF, letter-spacing 1px, text-align:left),
   stesso motivo già documentato per sectionTitle/sectionText in CLAUDE.md — qui dimenticato
   al primo giro e trovato verificando a schermo. */
#contentAzienda .rs-process-phase-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	margin: 0 0 8px;
}

#contentAzienda .rs-process-phase-duration {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	opacity: 0.85;
	margin: 0;
}

@media (min-width: 768px) {
	.rs-process-phase {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.rs-process-phase-media,
	.rs-process-phase-content {
		flex: 1 1 0;
		min-width: 0;
	}

	.rs-process-phase--reverse {
		flex-direction: row-reverse;
	}
}

#contentAzienda .rs-process-closing {
	margin-top: 32px;
	font-family: var(--font-nav);
	font-weight: 400;
	font-style: italic;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--c-gold);
}

/* ============================================================================
   GALLERY FOTOGRAFICA — .rs-gallery, lavorazione.php (subito dopo .rs-process-closing).
   9 foto della vecchia cantina, ordine fisso 1→9 in sorgente (D8, prefisso rs-gallery).
   Le tile hero/wide/small NON hanno riga/colonna scritte a mano: da 768px in su
   l'incastro nasce dall'auto-placement nativo di CSS grid (grid-auto-flow: row, il
   default) applicato agli span dichiarati sotto sull'ordine di sorgente — verificato a
   schermo, nessun buco né sovrapposizione a 768/1024/1440px.
   Da 768px in su l'altezza la decide la griglia (grid-auto-rows), non più aspect-ratio:
   sotto i 768px le tile sono impilate una alla volta e l'aspect-ratio la controlla
   direttamente; da 768px in su più tile condividono la stessa riga (small accanto a
   hero), quindi l'altezza deve venire dalla riga di griglia, altrimenti l'hero (più
   alto) e le small (più basse) non si allineerebbero: aspect-ratio viene quindi
   azzerata (auto) e l'immagine riempie la cella con object-fit:cover.
   Token riusati: --c-gold, --c-muted, --c-eyebrow (via .rs-section-eyebrow, già
   esistente), --c-scrim, --font-body. Nessun token nuovo.
   ========================================================================== */
.rs-gallery {
	margin-top: 48px; /* STIMA: nessun riferimento Figma per lo spazio sopra la galleria. */
	margin-bottom: 48px;
}

.rs-gallery-intro {
	font-family: var(--font-body);
	font-weight: 400;
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
	margin: 0 0 24px;
}

.rs-gallery-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rs-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 3;
}

.rs-gallery-item--hero {
	aspect-ratio: 4 / 5;
}

.rs-gallery-item--wide {
	aspect-ratio: 16 / 9;
}

.rs-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

/* Scrim (sotto) + icona di zoom (sopra): due pseudo-elementi separati, entrambi
   position:absolute così da dipingere entrambi sopra l'immagine reale (non
   posizionata) nello stesso stacking context; fra loro vince l'ordine di sorgente,
   quindi ::after (icona) sopra ::before (scrim). */
.rs-gallery-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--c-scrim) 0%, rgba(10, 10, 10, 0) 100%);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

.rs-gallery-item::after {
	content: "\f00e"; /* fa-search-plus, vendor/font-awesome */
	font-family: "FontAwesome";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 28px; /* STIMA: nessuna misura Figma per questa icona. */
	color: var(--c-gold);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

.rs-gallery-item:hover img,
.rs-gallery-item:focus-visible img {
	transform: scale(1.04);
}

.rs-gallery-item:hover::before,
.rs-gallery-item:hover::after,
.rs-gallery-item:focus-visible::before,
.rs-gallery-item:focus-visible::after {
	opacity: 1;
}

.rs-gallery-item:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--c-gold);
}

@media (prefers-reduced-motion: reduce) {
	.rs-gallery-item img,
	.rs-gallery-item::before,
	.rs-gallery-item::after {
		transition: none;
	}
}

@media (min-width: 768px) {
	.rs-gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px; /* STIMA: nessun valore Figma per questo breakpoint. */
		grid-auto-flow: dense; /* aggiunto 2026-08-24 (galleria a 14 foto,
			visite-guidate.php): senza "dense" l'auto-placement non torna mai indietro a
			riempire un buco già superato (es. accanto a una tile --wide), anche se un
			elemento successivo ci starebbe. Verificato: non cambia l'ordine visivo delle
			foto quando la griglia è già senza buchi (lavorazione.php, 9 foto), sposta solo
			gli elementi quando c'è un vuoto da riempire. */
		gap: 14px;
	}

	.rs-gallery-item,
	.rs-gallery-item--hero,
	.rs-gallery-item--wide {
		aspect-ratio: auto;
	}

	.rs-gallery-item--hero {
		grid-column: span 2;
		grid-row: span 2;
	}

	.rs-gallery-item--wide {
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media (min-width: 1024px) {
	.rs-gallery-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 150px; /* STIMA dichiarata dal brief. */
		gap: 16px;
	}
}

@media (min-width: 1440px) {
	.rs-gallery-grid {
		grid-auto-rows: 180px; /* STIMA dichiarata dal brief. */
		gap: 20px;
	}
}

/* ============================================================================
   FORM PRENOTAZIONE VISITA - #contenitore-form, pagina visite-guidate-prenotazione.php.
   Primo form del sito toccato dal restyling: tutto scoped a #contenitore-form per non
   ricadere su .form-control di altre pagine (es. contatti.php, non ancora restylata).
   Sovrascrive lo <style> inline "filippo" in testa alla pagina e persino Bootstrap: qui
   restyling.css si carica per ultimo nel body (dopo bootstrap.min.css e grayscale.css),
   quindi basta pari specificità per vincere, senza !important - la deroga precedente su
   .form-control:focus non serve più con questo scoping.
   ========================================================================== */
#contenitore-form .btn-custom-1,
#contenitore-form button:not(.btn-custom-1) {
	background-color: var(--c-green);
}

#contenitore-form .btn-custom-1:hover,
#contenitore-form button:not(.btn-custom-1):hover {
	background-color: var(--c-green);
	opacity: 0.9;
}

#contenitore-form .form-control:focus {
	border-color: var(--c-gold);
}

/* FORM CONTATTI - #contactForm, pagina contatti.php. Stesso trattamento minimale già dato al
   form di visite-guidate-prenotazione.php (solo border-color in focus, niente sul box-shadow
   di Bootstrap). Scoped al form, non a #contentAzienda: quell'id è condiviso da molte pagine
   del restyling, meglio non usarlo come aggancio per un form che esiste solo qui. */
/* PAGINA CONTATTI - #contentContatti, contatti.php. Id dedicato (non #contentAzienda,
   condiviso da altre pagine del restyling con la sua vecchia regola legacy di grayscale.css:
   Noto Serif/Work Sans, colore #b0976d) per non dipendere da uno scoping pensato per altri
   contenuti. Stile applicato a livello di sezione: copre titoli e paragrafi della pagina
   senza dover taggare ogni elemento con una classe.
   Stima: dimensione dei titoli fissa e contenuta, non la scala "hero" di sectionTitle - qui
   sono quattro titoli di sottosezione nella stessa pagina, non un singolo titolo in apertura. */
#contentContatti h2 {
	margin: 0 0 20px;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	#contentContatti h2 {
		font-size: 28px;
		line-height: 32px;
	}
}

#contentContatti p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0;
	color: #FFFFFF;
	text-align: left;
}

/* grayscale.css riga 1300 ha "#contentAzienda img{margin-left:auto;margin-right:auto}" sotto
   919px: con l'id rinominato quella regola non arriva più qui, la ripeto per non perdere il
   centraggio delle immagini su mobile. */
@media (max-width: 919px) {
	#contentContatti img {
		margin-left: auto;
		margin-right: auto;
	}
}

/* .img-gallery ha border-radius:15px in grayscale.css (riga 1159), usata anche da altre
   pagine (azienda, excelso, news, ecc.): non la tocco globalmente, scopo qui solo. */
#contentContatti img.img-gallery {
	border-radius: 2px;
}

#contactForm .form-control {
	margin-bottom: 16px;
}

#contactForm .form-control:focus {
	border-color: var(--c-gold);
}

/* Qui, a differenza di #contenitore-form in visite-guidate-prenotazione.php, non c'è uno
   <style> inline di pagina che dia già sfondo/padding/peso al bottone: li dichiaro per
   intero qui, stesso trattamento (colore, padding, peso) dell'altro form. */
#btn_submit_contattaci {
	padding: 12px 0;
	margin-top: 18px;
	background-color: var(--c-green);
	border: 0;
	color: #FFFFFF;
	font-weight: bold;
}

#btn_submit_contattaci:hover {
	background-color: var(--c-green);
	border-color: var(--c-green);
	opacity: 0.9;
}

/* ============================================================================
   PAGINA BENEDICTO (pagina ponte) - benedicto.php, id="contentAzienda" come le altre
   pagine-linea (excelso.php, prosciutto-di-parma.php). Direzione scelta da Mirco
   2026-08-21: mix A ("cornice dorata", filetti sottili, molto spazio bianco, segnaposto
   foto dichiarato con eleganza) + B (blocco "cosa lo distingue" su pannello scuro pieno,
   come .rs-cta-row in home, per un momento "di soglia" anche senza fotografia reale).
   .rs-lines / .rs-lines-card--current (C1) riusati as-is, non ridichiarati qui.
   Stile STIMATO: nessun riferimento Figma per questa pagina, che non esisteva prima.
   ========================================================================== */

/* Direzione B: pannello scuro per "cosa lo distingue" (oltre 30 mesi e fino a 36,
   selezione materia prima, quantità limitate). Full-bleed come .rs-cta-row: niente
   sfondo/padding sul .container interno, li porta il pannello. */
.rs-benedicto-panel {
	background-color: var(--c-panel);
	padding: 32px 0;
	margin: 24px 0;
}

/* Il pannello (.rs-benedicto-panel) vive fuori da #contentAzienda apposta, per essere
   full-bleed come .rs-cta-row in home: qui non serve lo scoping id+classe usato altrove nel
   file, non c'è nessuna regola #contentAzienda di grayscale.css da battere su questi
   elementi. Bordo oro sottile, leggibile anche sul pannello scuro perché l'item non ha uno
   sfondo proprio. */
.rs-benedicto-facts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rs-benedicto-fact {
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
	padding: 20px;
	border: 1px solid var(--c-gold);
	border-radius: 2px;
}

.rs-benedicto-fact-label {
	display: block;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-gold);
	margin: 0 0 8px;
}

.rs-benedicto-fact-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 22px;
	color: var(--c-muted);
	margin: 0;
}

@media (min-width: 768px) {
	.rs-benedicto-facts {
		flex-direction: row;
	}

	.rs-benedicto-fact {
		flex: 1 1 0;
	}
}

/* Icona affiancata a sinistra del testo, più grande (Mirco, 2026-08-21: "icone più grandi
   e affiancate a sinistra del testo" - prima erano sopra l'etichetta e più piccole).
   flex-shrink:0 perché non si schiacci quando il testo è più lungo di una riga. */
.rs-benedicto-fact-icon {
	flex-shrink: 0;
	font-size: 48px;
	line-height: 1;
	color: var(--c-gold);
}

.rs-benedicto-fact-copy {
	min-width: 0;
}

/* Fotografia grande dei tre formati (richiesta di Mirco 2026-08-24, block 3 di
   pagine/benedicto.md, reintrodotto sopra al video). Le tre foto (con osso, disossato a
   pera, disossato piatto) hanno proporzioni diverse: altezza fissa sull'immagine +
   object-fit:contain per allinearle tutte alla stessa altezza senza ritagliare il cutout
   (PNG con trasparenza reale). Altezza STIMATA (nessun riferimento Figma per questo
   componente): 360px, ridotta ai breakpoint minori. */
.rs-benedicto-formats {
	margin: 24px 0 0;
}

.rs-benedicto-format-item {
	text-align: center;
	margin-bottom: 16px;
}

.rs-benedicto-format-photo {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: contain;
	margin: 0 auto 12px;
}

.rs-benedicto-format-caption {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

@media (min-width: 768px) {
	.rs-benedicto-format-photo {
		height: 360px;
	}
}

/* Video locale al posto del segnaposto foto (richiesta di Mirco 2026-08-21, poi passato da
   embed Vimeo a file locale video/benedicto-video-web.mp4): stesso contenitore 16:9 usato
   prima per il placeholder, "immagini più grandi" resta soddisfatto dal video stesso. */
.rs-benedicto-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 24px 0;
}

.rs-benedicto-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background-color: var(--c-dark-bg);
}

/* Brochure (link reale, brochure-benedicto.pdf) e CTA finale verso benedicto.it: stesso
   linguaggio di .rs-visite-teaser-link, valori duplicati invece di riusare la classe
   cross-pagina (stesso criterio già in uso altrove in questo file). */
.rs-benedicto-link {
	display: inline-block;
	padding: 14px 28px;
	background-color: var(--c-green);
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	text-decoration: none;
	text-transform: none;
	border-radius: 2px;
}

.rs-benedicto-link:hover,
.rs-benedicto-link:focus {
	color: #FFFFFF;
	opacity: 0.9;
}

/* Variante oro per il CTA verso benedicto.it (richiesta di Mirco 2026-08-21: due colori
   diversi, non due bottoni identici). Testo bianco su richiesta esplicita 2026-08-21
   (prima era --c-panel scuro, per un contrasto più alto: qui vince la richiesta diretta). */
.rs-benedicto-link--gold {
	background-color: var(--c-gold);
	color: #FFFFFF;
}

.rs-benedicto-link--gold:hover,
.rs-benedicto-link--gold:focus {
	color: #FFFFFF;
	opacity: 0.9;
}

.rs-benedicto-link-row {
	text-align: center;
	margin: 24px 0;
}

.rs-benedicto-link-note {
	display: block;
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--c-muted);
}

/* ============================================================================
   SCHEDA PRODOTTO IN MODALE (C8) - .rs-pd / .rs-pd-modal-*, prosciutto-di-parma.php.
   Direzione "Modale centrale" scelta da Mirco 2026-08-21 dopo le 4 varianti disegnate
   con l'agente UI/UX (Claude Design, progetto "Miglioramento layout Simonini", file
   "Scheda Prodotto - Direzioni.dc.html", turno 1). .rs-pd-* è il contenuto della scheda
   (identico nella pagina dedicata prodotto.php, se in futuro la si restyla: qui è
   riusato solo dentro la modale). .rs-pd-modal-* è la sola cornice a sovrimpressione.
   Popolato via JS (vedi script in fondo a prosciutto-di-parma.php) leggendo il markup
   già esistente di prodotto.php via fetch, senza toccare la sua logica PHP.
   Token nuovi: --c-scrim, --c-badge-plate (nessun altro colore nuovo: il resto riusa
   --c-gold/--c-muted/--c-panel/--c-hairline/--c-eyebrow/--c-photo-bg già in :root). */
:root {
	--c-scrim: rgba(10, 10, 10, 0.78);
	--c-badge-plate: #F5F3EE;
}

.rs-pd {
	text-align: left;
}

.rs-pd-eyebrow {
	display: block;
	font-family: var(--font-nav);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: left;
	color: var(--c-eyebrow);
	margin: 0 0 18px;
}

.rs-pd-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	background-color: var(--c-photo-bg);
	border-radius: 2px;
	margin: 0 0 24px;
}

.rs-pd-name {
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
	margin: 0 0 14px;
}

.rs-pd-desc {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: var(--c-muted);
	margin: 0 0 20px;
}

.rs-pd-detail {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-muted);
	margin: 0 0 28px;
}

.rs-pd-cert {
	border-top: 1px solid var(--c-hairline);
	padding-top: 24px;
}

.rs-pd-cert-intro {
	font-family: var(--font-body);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--c-muted);
	margin: 0 0 16px;
}

.rs-pd-cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}

/* Plate chiaro dietro ai tre loghi (DOP/senza glutine/no OGM): i file immagine sono a
   colori, pensati per sfondo chiaro, illeggibili sul pannello nero. Nessun file immagine
   toccato: solo lo sfondo dietro. */
.rs-pd-cert-badge {
	width: 72px;
	height: 72px;
	flex: none;
	background-color: var(--c-badge-plate);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.rs-pd-cert-badge img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.rs-pd-cert-legal {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 19px;
	color: #847f74;
	margin: 0;
}

.rs-pd-cert-legal b {
	color: var(--c-muted);
	font-weight: 600;
}

.rs-pd-slogan {
	border-top: 1px solid var(--c-hairline);
	padding-top: 28px;
	text-align: center;
}

.rs-pd-slogan-rule {
	display: block;
	width: 1px;
	height: 36px;
	margin: 0 auto 18px;
	background: linear-gradient(180deg, var(--c-gold), rgba(162, 144, 97, 0));
}

.rs-pd-slogan-text {
	font-family: var(--font-nav);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 30px;
	text-align: center;
	color: var(--c-gold);
	margin: 0;
}

.rs-pd-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
	text-decoration: none;
	margin: 0 0 20px;
}

.rs-pd-loading {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--c-muted);
}

/* Cornice a sovrimpressione. Mobile-first: base = foglio a schermo pieno, da 768px in
   su diventa un pannello centrato con margine intorno (stessi breakpoint del progetto). */
.rs-pd-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.rs-pd-modal.is-open {
	display: block;
}

.rs-pd-modal-scrim {
	position: absolute;
	inset: 0;
	background-color: var(--c-scrim);
}

.rs-pd-modal-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0;
	overflow: auto;
}

.rs-pd-modal-panel {
	position: relative;
	width: 100%;
	max-width: none;
	min-height: 100%;
	background-color: var(--c-panel);
	border: none;
	border-radius: 0;
	padding: 68px 24px 40px;
}

.rs-pd-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--c-gold);
	background: transparent;
	color: var(--c-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.rs-pd-modal-close:hover {
	background-color: var(--c-gold);
	color: #000000;
}

.rs-pd-modal-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(162, 144, 97, 0.4);
}

body.rs-pd-modal-locked {
	overflow: hidden;
}

@media (min-width: 768px) {
	.rs-pd-modal-wrap {
		padding: 56px 24px;
	}

	.rs-pd-modal-panel {
		max-width: 600px;
		min-height: 0;
		border: 1px solid var(--c-hairline);
		border-radius: 2px;
		padding: 40px;
	}

	.rs-pd-modal-close {
		top: 18px;
		right: 18px;
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* ============================================================================
   NEWS/EVENTI - news.php. Direzione 1a "Registro essenziale" (ui-ux-designer, Claude
   Design "News Eventi - Direzioni.dc.html", scelta da Mirco 2026-08-24). Prima regola di
   restyling per questa pagina (finora solo il blocco intro era trattato, via
   #contentAzienda .sectionTitle/.sectionText condiviso con le altre pagine). Testi ed
   eventi restano dinamici da DB (tabella eventi, eventi_immagini): qui solo lo stile.
   #contentNews ha classe Bootstrap .text-center (dal markup originale): text-align:left
   esplicito su ogni elemento nuovo, stesso criterio già in uso altrove nel progetto.
   Sostituisce la regola "bordo arrotondato tolto" di un turno fa: quella puntava a
   .img-gallery-news, classe non più presente nel markup dopo il passaggio a
   .rs-news-gallery-item (che parte già senza border-radius). ========================== */
#contentNews .rs-news-event {
	text-align: left;
	padding-top: 32px;
	border-top: 1px solid var(--c-hairline);
}

/* Separazione prossimi/archivio (richiesta di Mirco, 2026-08-25): il primo evento di ogni
   gruppo non è più il primo figlio della riga (lo precede il titolo di gruppo), quindi
   :first-child da solo non basta più — si aggancia al fratello immediatamente dopo il
   wrapper del titolo. */
#contentNews .rs-news-group-title-wrap + .rs-news-event {
	padding-top: 0;
	border-top: 0;
}

/* Archivio collassabile (.rs-news-archive-toggle/-panel, richiesta di Mirco, 2026-08-25):
   il primo evento dell'archivio non è più figlio diretto della riga principale (vive dentro
   #rsNewsArchive > .row, per restare un col-12 valido dentro un contenitore nascosto con
   l'attributo hidden), quindi la regola sopra non lo raggiunge più — stesso azzeramento
   bordo/padding riscritto per questo annidamento. */
#contentNews .rs-news-archive-panel > .row > .rs-news-event:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Bottone dentro l'h2 di gruppo (pattern ARIA "heading contiene bottone"): reset dei default
   browser sul <button>, poi eredita tipografia/colore/maiuscolo/spaziatura da
   .rs-news-group-title tramite ereditarietà naturale (non copiati qui). "+"/"–" generato via
   ::after, stessa tecnica di .rs-collapse-toggle (04-componenti.md C5). */
#contentNews .rs-news-archive-toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

#contentNews .rs-news-archive-toggle::after {
	content: "+";
	float: right;
}

#contentNews .rs-news-archive-toggle[aria-expanded="true"]::after {
	content: "–";
}

/* Titolo di gruppo ("Prossimi eventi" / "Archivio"): stesso oro dei titoli di sezione del
   sito (var(--c-gold), come .sectionTitle e .rs-news-event-title), ma maiuscolo e con
   filetto sotto per leggersi come divisore di lista e non come un evento in più. STIMA
   (nessun riferimento Figma: la separazione prossimi/archivio non era nel design originale
   di questa pagina). */
#contentNews .rs-news-group-title-wrap {
	text-align: left;
	margin-top: 48px;
}

#contentNews .rs-news-group-title-wrap:first-child {
	margin-top: 0;
}

#contentNews .rs-news-group-title {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-hairline);
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	#contentNews .rs-news-group-title {
		font-size: 24px;
		line-height: 30px;
	}
}

/* Messaggio placeholder quando non ci sono eventi futuri (richiesta di Mirco,
   2026-08-25). */
#contentNews .rs-news-empty {
	text-align: left;
}

#contentNews .rs-news-empty p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	text-align: left;
	color: var(--c-muted);
}

/* Dimensione FISSA (non la scala responsive di .sectionTitle): un h2 per evento, ripetuto
   decine di volte in una lista lunga fino al 2015, non un titolo di sezione unico per
   pagina. STIMA (nessun riferimento Figma per questa pagina, mai trattata prima). */
#contentNews .rs-news-event-title {
	margin: 0 0 12px;
	font-family: var(--font-nav);
	font-weight: 400;
	font-size: 26px;
	line-height: 30px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: var(--c-gold);
}

@media (min-width: 768px) {
	#contentNews .rs-news-event-title {
		font-size: 32px;
		line-height: 36px;
	}
}

/* Testo descrizione (richiesta di Mirco, 2026-08-24: stesso grigio del resto del sito,
   testo leggermente più piccolo — 16px→15px). Selettore sul CONTENITORE (.rs-news-event
   > p), non sulla classe .rs-news-event-text messa sul mio <p>: il campo descrizione
   arriva da un editor ricco lato admin e può contenere propri <p> annidati, che il
   browser stacca fuori dal wrapper (stesso bug già trovato nel testo da DB su
   prosciutto-di-parma.php) — i frammenti risultanti perdono la classe ma restano comunque
   <p> figli diretti di .rs-news-event, quindi il selettore per figlio diretto li copre
   comunque. Prima (color solo su .rs-news-event-text) il primo paragrafo appariva grigio
   e quelli successivi bianco (colore di default del body), incoerente. */
#contentNews .rs-news-event > p {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-weight: 400;
	font-style: normal;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0;
	text-align: left;
	color: var(--c-muted);
}

#contentNews .rs-news-event > p:last-child {
	margin-bottom: 0;
}

/* Data: stessa specificità della regola sopra (id+classe-genitore+tag vs
   id+classe-propria+tag) — dichiarata dopo, vince per ordine di sorgente, stesso
   criterio già in uso altrove nel progetto (#contentAzienda .sectionTitle vs
   grayscale.css). Trattamento "eyebrow" come .rs-section-eyebrow, qui allineato a
   sinistra: questa è una lista, non un'intestazione di sezione singola. */
#contentNews p.rs-news-event-date {
	margin: 0 0 8px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: left;
	color: var(--c-eyebrow);
}

/* Galleria foto per evento: tile uniformi 4:3, non il mosaico hero/wide di .rs-gallery —
   qui il numero di foto per evento è deciso dal cliente in admin e variabile da 1 a N, un
   ruolo hero/wide assegnato a mano non regge. Stesso trattamento hover/focus/scrim/icona
   di .rs-gallery-item, duplicato invece di riusato: quella classe ha una regola a ≥768px
   che azzera aspect-ratio per la logica hero/wide, inutile qui e da ridichiarare comunque. */
#contentNews .rs-news-gallery {
	margin-top: 20px;
}

#contentNews .rs-news-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 768px) {
	#contentNews .rs-news-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (min-width: 1024px) {
	#contentNews .rs-news-gallery-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}
}

#contentNews .rs-news-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 3;
}

#contentNews .rs-news-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}

#contentNews .rs-news-gallery-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--c-scrim) 0%, rgba(10, 10, 10, 0) 100%);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

#contentNews .rs-news-gallery-item::after {
	content: "\f00e";
	font-family: "FontAwesome";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	color: var(--c-gold);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}

#contentNews .rs-news-gallery-item:hover img,
#contentNews .rs-news-gallery-item:focus-visible img {
	transform: scale(1.04);
}

#contentNews .rs-news-gallery-item:hover::before,
#contentNews .rs-news-gallery-item:hover::after,
#contentNews .rs-news-gallery-item:focus-visible::before,
#contentNews .rs-news-gallery-item:focus-visible::after {
	opacity: 1;
}

#contentNews .rs-news-gallery-item:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--c-gold);
}

@media (prefers-reduced-motion: reduce) {
	#contentNews .rs-news-gallery-item img,
	#contentNews .rs-news-gallery-item::before,
	#contentNews .rs-news-gallery-item::after {
		transition: none;
	}
}

/* ============================================================================
   GRASSETTO BIANCO SU TESTO GRIGIO - regola site-wide (richiesta di Mirco, 2026-08-24,
   nata osservando il testo delle news). Scoped alle classi di testo grigio conosciute
   (--c-muted), non a b/strong nudi: un selettore non scoped avrebbe toccato anche testo
   già bianco di suo o citazioni con trattamento dedicato (es. .rs-quote-aside/
   .rs-quality-focus-quote, già oro — escluse di proposito). Elenco costruito sulle classi
   di testo grigio individuate nel sito: .sectionText (azienda/lavorazione/prosciutto-di-
   parma/benedicto/excelso/salumi-simonini/apertura di news, tutte su #contentAzienda),
   la lettera di Vittorio in home, testo prezzo/racconto di visite-guidate.php, testo
   evento di news.php. Se emergono altri punti con testo grigio + grassetto, estendere
   qui la stessa lista invece di duplicare la regola altrove.
   ========================================================================== */
#contentAzienda .sectionText b,
#contentAzienda .sectionText strong,
#contentHome p.introHomeText b,
#contentHome p.introHomeText strong,
#container-prenotazione .rs-visite-pricing-text b,
#container-prenotazione .rs-visite-pricing-text strong,
#container-prenotazione .rs-visite-story-text b,
#container-prenotazione .rs-visite-story-text strong,
#contentNews .rs-news-event > p b,
#contentNews .rs-news-event > p strong {
	color: #FFFFFF;
}

/* ============================================================================
   MARCHIO "DAL 1968" - footer (richiesta di Mirco, 2026-08-24). Sostituisce
   img/Logo-50mo-Simonini.png. Direzione A "Sigillo" (ui-ux-designer, Claude
   Design "Marchio Dal 1968 - Direzioni.dc.html", scelta da Mirco): medaglione
   a doppio anello oro, "1968" in grande al centro, "Simonini" in basso.
   Non è un <img>, quindi non è raggiunto dalla regola chiusa
   "footer .d-flex.flex-row img{width:190px;height:136px;object-fit:contain}"
   (CLAUDE.md, footer chiuso) - qui dimensionato a parte, stesso ordine di
   grandezza degli altri due loghi accanto.
   Correzione di Mirco dopo la prima resa: "SIMONINI deve essere più
   all'interno del cerchio" - risolta con padding interno maggiorato
   (28px anziché un valore ridotto) cosi il testo resta staccato
   dall'anello, non a ridosso del bordo.
   Misura STIMA (nessuna spec numerica da Figma/Claude Design disponibile
   in questa sessione): diametro 150px. Da confermare/correggere al giro
   successivo con il valore esatto se il grafico ne fornisce uno.
   ========================================================================== */
.rs-mark-1968 {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 150px;
	height: 150px;
	padding: 28px 20px;
	margin-top: 10px;
	border: 1px solid var(--c-gold);
	border-radius: 50%;
	position: relative;
	vertical-align: middle;
}

.rs-mark-1968::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid var(--c-gold);
	border-radius: 50%;
	pointer-events: none;
}

.rs-mark-1968-dal {
	width: auto;
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--c-muted);
	line-height: 1;
}

.rs-mark-1968-year {
	width: auto;
	font-family: var(--font-nav);
	font-style: italic;
	font-size: 30px;
	color: var(--c-gold);
	line-height: 1.2;
	margin-top: 4px;
}

.rs-mark-1968-rule {
	width: 26px;
	height: 1px;
	background: var(--c-gold);
	margin-top: 8px;
	position: relative;
}

.rs-mark-1968-rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	background: var(--c-gold);
	transform: translate(-50%, -50%) rotate(45deg);
}

.rs-mark-1968-name {
	width: auto;
	font-family: var(--font-nav);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--c-eyebrow);
	line-height: 1;
	margin-top: 8px;
}

/* ============================================================================
   VIDEO "IL RACCONTO" - azienda.php (richiesta di Mirco, 2026-08-24). Player
   nativo <video controls>, niente stile custom del pulsante play (i controlli
   del browser bastano, nessun rischio di dover mantenere JS per una feature
   con superficie ridotta). Cornice sottile coerente con le altre fasce della
   pagina invece del bordo arrotondato usato altrove nel sito legacy.
   ========================================================================== */
#contentAzienda .rs-azienda-video {
	margin-top: 56px;
}

#contentAzienda .rs-azienda-video-player {
	display: block;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	margin: 24px auto 32px;
	border: 1px solid var(--c-hairline);
	background: var(--c-photo-bg);
}