/*
 * NO·RU velvety skin — Landing
 * Tutto è sotto #nr-site: il tema intorno non viene toccato.
 *
 * Indice
 *  1. Proprietà registrate e Lenis
 *  2. Pagina a tutto schermo
 *  3. Variabili
 *  4. Base
 *  5. Elementi comuni
 *  6. Barra in alto, lingue, menu e carrello
 *  7. Apertura e velluto
 *  8. Badge
 *  9. Barattolo
 * 10. Nastro
 * 11. La crema
 * 12. Prima e dopo
 * 13. Come si usa
 * 14. Salento e fico d'india
 * 15. Acquista
 * 16. Domande
 * 17. Contatti
 * 18. Piede
 * 19. Comparsa
 * 20. Schermi stretti
 * 21. Movimento ridotto
 */

/* ==========================================================================
   1. PROPRIETÀ REGISTRATE E LENIS
   ========================================================================== */

/* ---- 1.1 Colori e luce animabili ----
   Registrate per poter sfumare lo sfondo da una sezione all'altra
   e far scorrere il riflesso del rame. */

@property --nr-bg { syntax: '<color>'; inherits: true; initial-value: #CFE2B0; }
@property --nr-fg { syntax: '<color>'; inherits: true; initial-value: #1E3A24; }
@property --nr-luce { syntax: '<number>'; inherits: true; initial-value: .5; }

/* ---- 1.2 Lenis ---- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   2. PAGINA A TUTTO SCHERMO
   ========================================================================== */

body.nr-canvas {
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: #CFE2B0;
}

/* ---- 2.1 Pulsanti "torna su" dei temi più diffusi ---- */

body.nr-canvas :is(#scroll-to-top, #ast-scroll-top, .generate-back-to-top, .ct-back-to-top),
body:has(#nr-site) :is(#scroll-to-top, #ast-scroll-top, .generate-back-to-top, .ct-back-to-top) { display: none !important; }

/* ==========================================================================
   3. VARIABILI
   ========================================================================== */

/* ---- 3.1 Unità e colori ----
   Palette "Fico d'india", provvisoria finché il cliente non sceglie. */

#nr-site {
	--nr-u: max(16px, 1rem);

	--nr-fondo: #CFE2B0;
	--nr-fondo-2: #BFD69C;
	--nr-verde: #4F7F45;
	--nr-scuro: #1E3A24;
	--nr-chiaro: #E9F2DA;
	--nr-accento: #D3236C;
	--nr-accento-fondo: #C81E64;
	--nr-rame: #DB7342;
	--nr-rame-scuro: #8C3A1A;
	--nr-rame-chiaro: #F6B48E;
	--nr-crema: #F7EFE6;
	--nr-patina: #6E9A78;

	--nr-rame-g: linear-gradient(100deg, #7A2E14 0%, #C7653A 22%, #F6B48E 42%, #D9763F 60%, #8C3A1A 100%);
	--nr-linea: color-mix(in srgb, var(--nr-fg) 22%, transparent);
}

/* ---- 3.2 Caratteri ---- */

#nr-site {
	--nr-font: "Bricolage Grotesque", system-ui, sans-serif;
	--nr-serif: "Instrument Serif", Georgia, serif;
	--nr-mono: "Martian Mono", ui-monospace, monospace;

	--nr-fs-h1: clamp(calc(var(--nr-u) * 2.6), calc(var(--nr-u) * .4 + 8.4vw), calc(var(--nr-u) * 7.2));
	--nr-fs-h2: clamp(calc(var(--nr-u) * 2), calc(var(--nr-u) * .6 + 3.6vw), calc(var(--nr-u) * 4));
	--nr-fs-h3: clamp(calc(var(--nr-u) * 1.6), calc(var(--nr-u) * .8 + 2.2vw), calc(var(--nr-u) * 3));
	--nr-fs-mini: calc(var(--nr-u) * .72);
}

/* ---- 3.3 Movimento ---- */

#nr-site {
	--nr-ease: cubic-bezier(.22, 1, .36, 1);
	--nr-ease-io: cubic-bezier(.76, 0, .24, 1);
	--nr-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- 3.4 Spazi ---- */

#nr-site {
	--nr-pad: clamp(20px, 5vw, 72px);
	--nr-sec: clamp(96px, 14vh, 160px);
	--nr-top-h: 72px;
	--nr-max: 1320px;
	--nr-r: clamp(18px, 2vw, 28px);
}

/* ---- 3.5 Grana ---- */

#nr-site {
	--nr-grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

/* ---- 3.6 Contenitore ---- */

#nr-site {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
	background-color: var(--nr-bg);
	background-image: var(--nr-grana);
	color: var(--nr-fg);
	font-family: var(--nr-font);
	font-size: calc(var(--nr-u) * 1.0625);
	font-weight: 400;
	font-synthesis: none;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	interpolate-size: allow-keywords;
	transition: --nr-bg .8s var(--nr-ease), --nr-fg .8s var(--nr-ease);
}

/* ==========================================================================
   4. BASE
   ========================================================================== */

/* ---- 4.1 Reset leggero ----
   Solo quello che i temi più diffusi tendono a sporcare. */

#nr-site, #nr-site *, #nr-site ::before, #nr-site ::after { box-sizing: border-box; }

#nr-site :where(h1, h2, h3, p, ol, ul, li, figure, button, dl, dt, dd) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	list-style: none;
}

#nr-site a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	background-image: none;
	border: 0;
}

#nr-site img { max-width: 100%; border: 0; box-shadow: none; }
#nr-site b { font-weight: 750; }

#nr-site :focus-visible { outline: 3px solid var(--nr-fg); outline-offset: 3px; }
#nr-site [tabindex="-1"]:focus { outline: none; }

/* ---- 4.2 Contenitore a pagina intera o dentro il contenuto ---- */

#nr-site.nr--canvas { min-height: 100vh; }

#nr-site.nr--embed {
	width: var(--nr-vw, 100vw);
	max-width: none;
	margin: 0 0 0 calc(50% - var(--nr-vw, 100vw) / 2);
}

#nr-site .nr-main { display: block; outline: none; }

/* ---- 4.3 Accessibilità ---- */

#nr-site .nr-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

#nr-site .nr-skip {
	position: fixed;
	left: 16px;
	top: -120px;
	z-index: 10000;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--nr-scuro);
	color: var(--nr-crema);
	font-weight: 650;
	transition: top .3s var(--nr-ease);
}

#nr-site .nr-skip:focus { top: 16px; }

/* ---- 4.4 Temi delle sezioni ----
   Senza JS ogni sezione si colora da sola; con il JS il colore lo sfuma il contenitore. */

#nr-site [data-nr-theme] { position: relative; }

#nr-site [data-nr-theme="chiaro"] {
	--nr-sbg: #CFE2B0;
	--nr-sfg: #1E3A24;
	--nr-rame-g: linear-gradient(100deg, #6E260F 0%, #A9512A 26%, #DB7342 44%, #A9512A 62%, #6E260F 100%);
}

#nr-site [data-nr-theme="scuro"] {
	--nr-sbg: #1E3A24;
	--nr-sfg: #E9F2DA;
	--nr-rame-g: linear-gradient(100deg, #C7653A 0%, #F6B48E 28%, #FFE2CF 44%, #E8925F 64%, #C7653A 100%);
}

#nr-site [data-nr-theme="accento"] {
	--nr-sbg: #C81E64;
	--nr-sfg: #F7EFE6;
	--nr-rame-g: linear-gradient(100deg, #F6B48E 0%, #FFE6D6 34%, #F7EFE6 50%, #F6B48E 70%, #EFA57C 100%);
}

#nr-site:not(.nr-js) [data-nr-theme] {
	--nr-bg: var(--nr-sbg);
	--nr-fg: var(--nr-sfg);
	background: var(--nr-grana) var(--nr-sbg);
	color: var(--nr-sfg);
}

/* ==========================================================================
   5. ELEMENTI COMUNI
   ========================================================================== */

/* ---- 5.1 Titoli ---- */

#nr-site .nr-titolo {
	margin-top: 18px;
	font-size: var(--nr-fs-h2);
	font-weight: 760;
	font-stretch: 82%;
	line-height: 1.04;
	letter-spacing: -.01em;
	text-wrap: balance;
}

#nr-site .nr-titolo em {
	padding-right: .06em;
	font-family: var(--nr-serif);
	font-style: italic;
	font-weight: 400;
	font-stretch: normal;
	letter-spacing: -.005em;
}

#nr-site .nr-line {
	display: block;
	overflow: hidden;
	padding: 0 .08em .08em 0;
	margin-bottom: -.08em;
}

#nr-site .nr-line > span { display: block; }

/* ---- 5.2 Rame ----
   Testo con il riflesso che scorre: lo usano il corsivo dei titoli e il prezzo. */

#nr-site .nr-rame,
#nr-site .nr-titolo em {
	background: var(--nr-rame-g);
	background-size: 250% 100%;
	background-position: calc(var(--nr-luce, .5) * 100%) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: nr-luce 7s var(--nr-ease-io) infinite alternate;
}

@keyframes nr-luce {
	from { --nr-luce: 0; }
	to { --nr-luce: 1; }
}

/* ---- 5.3 Occhiello e testo ---- */

#nr-site .nr-occhiello {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
}

#nr-site .nr-occhiello::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nr-rame);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nr-rame) 30%, transparent);
}

#nr-site .nr-testo {
	margin-top: 22px;
	max-width: 56ch;
	opacity: .88;
	text-wrap: pretty;
}

/* ---- 5.4 Pulsanti ---- */

#nr-site .nr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid var(--nr-fg);
	border-radius: 999px;
	font-family: var(--nr-font);
	font-size: var(--nr-u);
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .4s var(--nr-ease), background-color .3s, border-color .3s, color .3s, box-shadow .4s var(--nr-ease);
}

#nr-site .nr-btn--solid { background: var(--nr-fg); color: var(--nr-bg); }
#nr-site .nr-btn--ghost { background: transparent; color: var(--nr-fg); }

#nr-site .nr-btn--sm {
	min-height: 40px;
	padding: 0 18px;
	font-size: calc(var(--nr-u) * .92);
}

#nr-site .nr-btn__prezzo {
	padding-left: .65em;
	border-left: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
	font-family: var(--nr-mono);
	font-size: .82em;
	font-weight: 600;
}

#nr-site .nr-btn:active { transform: translateY(1px) scale(.98); }

/* Nella sezione rosa il pieno resta verde scuro. */
#nr-site [data-nr-theme="accento"] .nr-btn--solid { background: var(--nr-scuro); border-color: var(--nr-scuro); color: var(--nr-crema); }

@media (hover: hover) {
	#nr-site .nr-btn--solid:hover {
		background: var(--nr-rame);
		border-color: var(--nr-rame);
		color: var(--nr-scuro);
		transform: translateY(-3px);
		box-shadow: 0 10px 0 -4px var(--nr-fg);
	}

	#nr-site .nr-btn--ghost:hover {
		background: var(--nr-fg);
		color: var(--nr-bg);
		transform: translateY(-3px);
	}
}

/* ---- 5.5 Sezioni ---- */

#nr-site .nr-sezione { padding: var(--nr-sec) var(--nr-pad); }
#nr-site .nr-sezione__testa { max-width: 760px; }

/* ==========================================================================
   6. BARRA IN ALTO, LINGUE, MENU E CARRELLO
   ========================================================================== */

/* ---- 6.1 Barra ---- */

#nr-site .nr-topbar {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--nr-top-h);
	margin-bottom: calc(var(--nr-top-h) * -1);
	padding: 0 var(--nr-pad);
	transition: transform .5s var(--nr-ease), background-color .4s, box-shadow .4s, backdrop-filter .4s;
}

#nr-site.nr-js .nr-topbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}

#nr-site .nr-topbar.is-scrolled {
	background-color: rgba(207, 226, 176, .8);
	background-color: color-mix(in srgb, var(--nr-bg) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--nr-fg) 10%, transparent);
}

#nr-site .nr-topbar.is-hidden { transform: translateY(-110%); }

/* Sui telefoni il vetro sfocato costa troppo: fondo pieno. */
@media (hover: none) {
	#nr-site .nr-topbar.is-scrolled { background-color: var(--nr-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

#nr-site.nr-tocco .nr-topbar.is-scrolled { background-color: var(--nr-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- 6.2 Marchio ---- */

#nr-site .nr-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	transition: transform .5s var(--nr-back);
}

#nr-site .nr-brand__mark { display: block; width: 96px; height: auto; overflow: visible; }

#nr-site .nr-logo { overflow: visible; }
#nr-site .nr-logo__spirale { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (hover: hover) {
	#nr-site .nr-brand:hover { transform: rotate(-3deg) scale(1.04); }
	#nr-site .nr-brand:hover .nr-logo__spirale { animation: nr-disegna 1s var(--nr-ease) both; }
}

@keyframes nr-disegna {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

/* ---- 6.3 Navigazione ---- */

#nr-site .nr-topbar__nav ul { display: flex; gap: clamp(18px, 2.4vw, 34px); }

#nr-site .nr-topbar__nav a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: calc(var(--nr-u) * .95);
	font-weight: 520;
	white-space: nowrap;
}

#nr-site .nr-topbar__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--nr-ease);
}

#nr-site .nr-topbar__nav a:hover::after,
#nr-site .nr-topbar__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }

#nr-site .nr-topbar__end {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 14px);
}

/* ---- 6.4 Menu delle lingue ---- */

#nr-site .nr-lang { position: relative; }

#nr-site .nr-lang__btn {
	display: flex;
	align-items: center;
	padding: 0 10px;
	border-radius: 999px;
	font-size: calc(var(--nr-u) * .78);
	font-weight: 620;
	letter-spacing: .08em;
	line-height: 40px;
	list-style: none;
	cursor: pointer;
	transition: background-color .3s;
}

#nr-site .nr-lang__btn::-webkit-details-marker { display: none; }

#nr-site .nr-lang__btn::after {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 0 3px 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform .3s var(--nr-ease);
}

#nr-site .nr-lang[open] > .nr-lang__btn { background: color-mix(in srgb, var(--nr-fg) 10%, transparent); }
#nr-site .nr-lang[open] > .nr-lang__btn::after { transform: translateY(3px) rotate(225deg); }

/* Senza JS un velo trasparente chiude il menu al clic fuori. */
#nr-site:not(.nr-js) .nr-lang[open] > .nr-lang__btn::before {
	content: "";
	position: fixed;
	inset: 0;
	cursor: default;
}

#nr-site .nr-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 2;
	min-width: 168px;
	padding: 6px;
	border: 2px solid var(--nr-fg);
	border-radius: 16px;
	background: var(--nr-bg);
	box-shadow: 0 28px 60px -28px rgb(0 0 0 / .6);
	animation: nr-lang-in .28s var(--nr-ease);
}

#nr-site .nr-lang__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: calc(var(--nr-u) * .92);
	transition: background-color .25s;
}

#nr-site .nr-lang__list a:hover { background: color-mix(in srgb, var(--nr-fg) 10%, transparent); }
#nr-site .nr-lang__list a[aria-current] { font-weight: 700; }

#nr-site .nr-lang__list a[aria-current]::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nr-rame);
}

@keyframes nr-lang-in {
	from { opacity: 0; transform: translateY(-6px); }
}

/* ---- 6.5 Pulsante del menu ---- */

#nr-site .nr-topbar__menu {
	position: relative;
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

#nr-site .nr-topbar__menu i {
	position: absolute;
	left: 11px;
	right: 11px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
	transition: translate .4s var(--nr-ease), rotate .5s var(--nr-back);
}

#nr-site .nr-topbar__menu i:first-of-type { translate: 0 -4px; }
#nr-site .nr-topbar__menu i:last-of-type { translate: 0 4px; }
#nr-site .nr-topbar__menu[aria-expanded="true"] i:first-of-type { translate: 0 0; rotate: 45deg; }
#nr-site .nr-topbar__menu[aria-expanded="true"] i:last-of-type { translate: 0 0; rotate: -45deg; }

/* ---- 6.6 Menu a tutto schermo ----
   Si apre come un cerchio che parte dal pulsante. */

#nr-site .nr-menu {
	position: fixed;
	inset: 0;
	z-index: 49;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: calc(var(--nr-top-h) + 28px + var(--wp-admin--admin-bar--height, 0px)) var(--nr-pad) 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--nr-grana) var(--nr-bg);
	color: var(--nr-fg);
	clip-path: circle(0 at calc(100% - var(--nr-pad) - 22px) calc(var(--nr-top-h) / 2));
	transition: clip-path .7s var(--nr-ease-io);
}

#nr-site .nr-menu[hidden] { display: none; }
#nr-site .nr-menu.is-open { clip-path: circle(150% at calc(100% - var(--nr-pad) - 22px) calc(var(--nr-top-h) / 2)); }

#nr-site .nr-menu__lista { display: grid; gap: 2px; }

#nr-site .nr-menu__lista li {
	opacity: 0;
	translate: 0 28px;
	transition: opacity .5s var(--nr-ease), translate .7s var(--nr-ease);
	transition-delay: calc(var(--i, 0) * 60ms + 160ms);
}

#nr-site .nr-menu.is-open .nr-menu__lista li { opacity: 1; translate: 0 0; }

#nr-site .nr-menu__lista a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 6px 0;
	font-size: clamp(34px, 9.5vw, 64px);
	font-weight: 720;
	font-stretch: 80%;
	line-height: 1.04;
	letter-spacing: -.02em;
}

#nr-site .nr-menu__n {
	flex: none;
	min-width: 2.4em;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--nr-rame-scuro);
}

#nr-site .nr-menu__piede {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

#nr-site .nr-menu__social { display: flex; gap: 8px; }

#nr-site .nr-menu__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

#nr-site .nr-menu__social svg { width: 22px; height: 22px; }

/* ---- 6.7 Carrello ----
   Solo con WooCommerce. Il numero sta in un tondo rosa sul bordo; quando cambia
   il JS del negozio aggiunge is-cambiato per farlo sobbalzare. */

#nr-site .nr-carrello {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 2px solid currentColor;
	border-radius: 50%;
	color: inherit;
	transition: background-color .3s var(--nr-ease), color .3s var(--nr-ease), transform .4s var(--nr-back);
}

#nr-site .nr-carrello[hidden] { display: none; }
#nr-site .nr-carrello svg { width: 22px; height: 22px; }

#nr-site .nr-carrello__n {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--nr-accento);
	color: var(--nr-crema);
	box-shadow: 0 0 0 2px var(--nr-bg);
	font-family: var(--nr-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
}

#nr-site .nr-carrello.is-cambiato .nr-carrello__n { animation: nr-carrello-n .6s var(--nr-back); }

@keyframes nr-carrello-n {
	40% { transform: scale(1.35); }
}

@media (hover: hover) {
	#nr-site .nr-carrello:hover {
		background: var(--nr-fg);
		color: var(--nr-bg);
		transform: translateY(-3px);
	}
}

/* ==========================================================================
   7. APERTURA E VELLUTO
   ========================================================================== */

/* ---- 7.1 Palco ----
   Su desktop con il movimento la sezione è alta il doppio e il palco resta
   fermo: lo scorrimento apre il barattolo. */

#nr-site .nr-hero { min-height: 100svh; }

#nr-site .nr-hero__palco {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	min-height: 100svh;
	padding: calc(var(--nr-top-h) + 32px) var(--nr-pad) 88px;
	overflow: clip;
}

@media (min-width: 900px) {
	#nr-site.nr-js.nr-motion .nr-hero { height: 200vh; }
	#nr-site.nr-js.nr-motion .nr-hero__palco { position: sticky; top: 0; height: 100svh; min-height: 0; }
}

/* ---- 7.2 Velluto ----
   Il canvas disegna il pelo che si piega sotto il puntatore. */

#nr-site .nr-velluto {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---- 7.3 Testo ---- */

#nr-site .nr-hero__testo {
	position: relative;
	z-index: 2;
	max-width: 680px;
	translate: 0 calc(var(--nr-apri, 0) * -48px);
}

#nr-site .nr-hero__titolo {
	font-size: var(--nr-fs-h1);
	font-weight: 780;
	font-stretch: 78%;
	line-height: .94;
	letter-spacing: -.03em;
}

#nr-site .nr-hero__lead {
	margin-top: 26px;
	max-width: 44ch;
	font-size: calc(var(--nr-u) * 1.12);
	opacity: .9;
	text-wrap: pretty;
}

#nr-site .nr-hero__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

/* ---- 7.4 Barattolo in scena ----
   Tre movimenti sovrapposti: entrata (transform), galleggiamento
   (translate e rotate) e parallasse del puntatore sul contenitore. */

#nr-site .nr-hero__arte {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}

#nr-site .nr-hero__prof {
	position: relative;
	width: min(100%, 520px, 60svh);
	will-change: transform;
}

#nr-site .nr-hero__jar { position: relative; }

#nr-site .nr-hero__jar .nr-jar {
	rotate: calc(var(--nr-apri, 0) * -5deg);
	scale: calc(1 + var(--nr-apri, 0) * .05);
}

#nr-site.nr-motion .nr-hero__jar {
	animation:
		nr-entra 1.6s var(--nr-back) .15s both,
		nr-galleggia 7s ease-in-out 1.8s infinite alternate;
}

#nr-site.nr-motion .nr-hero__jar .nr-jar__ombra { animation: nr-ombra 7s ease-in-out 1.8s infinite alternate; }

@keyframes nr-entra {
	from { opacity: 0; transform: translateY(18%) rotate(14deg) scale(.82); }
	40% { opacity: 1; }
}

@keyframes nr-galleggia {
	from { translate: 0 0; rotate: -1.6deg; }
	to { translate: 0 -18px; rotate: 1.6deg; }
}

@keyframes nr-ombra {
	from { translate: 0 0; scale: 1; opacity: 1; }
	to { translate: 0 14px; scale: .86; opacity: .7; }
}

/* ---- 7.5 Indicazioni in basso ---- */

#nr-site .nr-hero__scroll,
#nr-site .nr-hero__velluto {
	position: absolute;
	bottom: 28px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .66);
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .75;
}

#nr-site .nr-hero__scroll { left: var(--nr-pad); }

#nr-site .nr-hero__scroll i {
	position: relative;
	width: 2px;
	height: 40px;
	overflow: hidden;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 25%, transparent);
}

#nr-site .nr-hero__scroll i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	animation: nr-scorri 2.2s var(--nr-ease-io) infinite;
}

@keyframes nr-scorri {
	from { transform: translateY(-100%); }
	to { transform: translateY(100%); }
}

#nr-site .nr-hero__velluto { right: var(--nr-pad); }

#nr-site .nr-hero__velluto::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nr-accento);
	animation: nr-pulsa 2.4s ease-out infinite;
}

@keyframes nr-pulsa {
	from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nr-accento) 60%, transparent); }
	to { box-shadow: 0 0 0 14px transparent; }
}

@media (hover: none) {
	#nr-site .nr-hero__velluto { display: none; }
}

#nr-site.nr-tocco .nr-hero__velluto { display: none; }

/* ==========================================================================
   8. BADGE
   ========================================================================== */

#nr-site .nr-badge {
	position: absolute;
	top: 2%;
	right: -4%;
	z-index: 2;
	width: clamp(92px, 11vw, 148px);
	aspect-ratio: 1;
}

#nr-site .nr-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }

#nr-site.nr-motion .nr-badge {
	animation:
		nr-timbro 1s var(--nr-back) 1.1s both,
		nr-gira 22s linear infinite;
}

@keyframes nr-timbro {
	from { transform: scale(0) rotate(-90deg); }
}

@keyframes nr-gira {
	to { rotate: 360deg; }
}

#nr-site .nr-badge__disco { fill: var(--nr-rame); }

#nr-site .nr-badge__testo {
	fill: var(--nr-crema);
	font-family: var(--nr-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#nr-site .nr-badge__spirale {
	fill: none;
	stroke: var(--nr-scuro);
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

#nr-site.nr-motion .nr-badge__spirale { animation: nr-disegna 2.4s var(--nr-ease) 1.4s both; }

/* ==========================================================================
   9. BARATTOLO
   ========================================================================== */

/* ---- 9.1 Disegno ---- */

#nr-site .nr-jar { display: block; width: 100%; height: auto; overflow: visible; }

#nr-site .nr-jar__info {
	fill: #1E3A24;
	font-family: var(--nr-mono);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#nr-site .nr-jar__info--b { fill: #8C3A1A; }
#nr-site .nr-jar__logo { color: #1E3A24; }

#nr-site .nr-jar__sotto {
	fill: #1E3A24;
	font-family: var(--nr-serif);
	font-size: 12.5px;
	font-style: italic;
}

/* I caratteri sono pezzi singoli: la spaziatura la mette il JS. */
#nr-site .nr-jar__pezzo { letter-spacing: 0; font-variant-ligatures: none; }

#nr-site .nr-jar__riga,
#nr-site .nr-jar__linea,
#nr-site .nr-jar__bordo,
#nr-site .nr-jar__segno path { fill: none; stroke-linecap: round; }

#nr-site .nr-jar__riga { stroke: #DB7342; stroke-width: 2; }
#nr-site .nr-jar__linea { stroke: #1E3A24; stroke-width: 1.25; stroke-linecap: butt; }
#nr-site .nr-jar__bordo { stroke: #DB7342; stroke-width: 1.4; stroke-opacity: .8; }
#nr-site .nr-jar__segno path { stroke: #DB7342; stroke-width: 1.8; }

#nr-site .nr-jar__ombra { transform-box: fill-box; transform-origin: center; }

/* ---- 9.2 Coperchio e vortice ----
   --nr-apri va da 0 a 1 con lo scorrimento: il coperchio si alza
   e la spirale sulla crema si disegna. */

#nr-site .nr-jar__coperchio {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: translateY(calc(var(--nr-apri, 0) * -120px)) rotate(calc(var(--nr-apri, 0) * -8deg));
}

#nr-site .nr-jar__vortice {
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--nr-apri, 0));
}

/* ==========================================================================
   10. NASTRO
   ========================================================================== */

#nr-site .nr-nastro {
	--nr-nastro-h: clamp(150px, 18vw, 260px);
	position: relative;
	z-index: 2;
	height: var(--nr-nastro-h);
	margin: calc(var(--nr-nastro-h) * -.5) 0;
	pointer-events: none;
}

#nr-site .nr-nastro svg { display: block; width: 100%; height: 100%; overflow: visible; }

#nr-site .nr-nastro use { fill: none; stroke-width: 48; stroke-linecap: butt; }
#nr-site .nr-nastro__fascia--b use { stroke: #1E3A24; }
#nr-site .nr-nastro__fascia--a use { stroke: #D3236C; }

#nr-site .nr-nastro text {
	fill: #F7EFE6;
	font-family: var(--nr-mono);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	dominant-baseline: central;
}

/* ==========================================================================
   11. LA CREMA
   ========================================================================== */

/* ---- 11.1 Manifesto ----
   Le parole si accendono una alla volta: il JS scrive l'avanzamento in
   --nr-man e il numero di parole in --n. */

#nr-site .nr-crema__manifesto {
	max-width: 24ch;
	margin-top: 34px;
	font-size: var(--nr-fs-h3);
	font-weight: 560;
	font-stretch: 90%;
	line-height: 1.16;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

#nr-site .nr-parola {
	--w: clamp(0, (var(--nr-man, 1) * (var(--n, 40) + 8) - var(--i, 0)) / 8, 1);
	opacity: calc(.18 + var(--w) * .82);
	transition: opacity .25s linear;
}

#nr-site:not(.nr-js) .nr-parola,
#nr-site.nr-reduce .nr-parola { opacity: 1; }

/* ---- 11.2 Qualità ---- */

#nr-site .nr-crema__qualita {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(64px, 10vh, 112px);
}

#nr-site .nr-crema__qualita li {
	padding-top: 28px;
	border-top: 1px solid var(--nr-linea);
}

#nr-site .nr-crema__qualita h3 {
	margin-top: 22px;
	font-size: calc(var(--nr-u) * 1.4);
	font-weight: 680;
	line-height: 1.15;
}

#nr-site .nr-crema__qualita p {
	margin-top: 10px;
	max-width: 34ch;
	opacity: .8;
}

/* ---- 11.3 Monete di rame ----
   Ognuna parte girata di un terzo diverso e si raddrizza alla comparsa. */

#nr-site .nr-moneta {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #F6B48E 0%, #DB7342 42%, #8C3A1A 100%);
	box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 10px 24px -12px rgb(0 0 0 / .6);
	transition: rotate 1.6s var(--nr-back) calc(var(--nr-d, 0ms) + 200ms);
}

#nr-site .nr-moneta svg { width: 100%; height: 100%; }

#nr-site .nr-moneta path {
	fill: none;
	stroke: var(--nr-scuro);
	stroke-width: 2.6;
	stroke-linecap: round;
}

#nr-site.nr-js.nr-motion .nr-crema__qualita li:not(.is-in) .nr-moneta { rotate: calc(var(--r, 0deg) - 200deg); }

@media (hover: hover) {
	#nr-site .nr-crema__qualita li:hover .nr-moneta { rotate: 360deg; transition-delay: 0s; }
}

/* ==========================================================================
   12. PRIMA E DOPO
   ========================================================================== */

/* ---- 12.1 Scelta del confronto ---- */

#nr-site .nr-pd__scelta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

#nr-site .nr-pd__tab {
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid var(--nr-linea);
	border-radius: 999px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .7);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s;
}

#nr-site .nr-pd__tab[aria-pressed="true"] { background: var(--nr-fg); border-color: var(--nr-fg); color: var(--nr-bg); }

/* ---- 12.2 Confronto ----
   La foto "prima" sta sopra ed è tagliata a --pos; l'input range,
   invisibile, copre tutta la foto e fa da maniglia. */

#nr-site .nr-pd__palco {
	display: grid;
	justify-items: center;
	margin-top: 44px;
}

#nr-site .nr-pd__confronto { position: relative; width: min(100%, 560px); margin: 0; }
#nr-site .nr-pd__confronto[hidden] { display: none; }

#nr-site .nr-pd__foto {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--nr-r);
	background: var(--nr-fondo-2);
	box-shadow: 0 40px 80px -40px rgb(30 58 36 / .55);
}

#nr-site .nr-pd__foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

#nr-site .nr-pd__prima { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

#nr-site .nr-pd__etichetta {
	position: absolute;
	top: 16px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgb(30 58 36 / .72);
	color: var(--nr-crema);
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .66);
	letter-spacing: .1em;
	text-transform: uppercase;
	pointer-events: none;
}

#nr-site .nr-pd__etichetta--prima { left: 16px; }
#nr-site .nr-pd__etichetta--dopo { right: 16px; }

#nr-site .nr-pd__maniglia {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	z-index: 1;
	width: 0;
	pointer-events: none;
}

#nr-site .nr-pd__maniglia::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--nr-crema);
	box-shadow: 0 0 12px rgb(0 0 0 / .25);
}

#nr-site .nr-pd__maniglia svg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 56px;
	height: 56px;
	padding: 4px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #F6B48E 0%, #DB7342 45%, #8C3A1A 100%);
	box-shadow: 0 0 0 3px var(--nr-crema), 0 12px 24px -8px rgb(0 0 0 / .5);
	translate: -50% -50%;
	rotate: var(--giro, 0deg);
}

#nr-site .nr-pd__maniglia path {
	fill: none;
	stroke: var(--nr-scuro);
	stroke-width: 2.4;
	stroke-linecap: round;
}

#nr-site .nr-pd__range {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}

#nr-site .nr-pd__foto:has(.nr-pd__range:focus-visible) { outline: 3px solid var(--nr-fg); outline-offset: 4px; }

/* ---- 12.3 Senza foto ---- */

#nr-site .nr-pd__vuoto {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(100%, 560px);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 2px dashed color-mix(in srgb, var(--nr-fg) 35%, transparent);
	border-radius: var(--nr-r);
}

#nr-site .nr-pd__vuoto span {
	padding: 18px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .7);
	letter-spacing: .1em;
	text-transform: uppercase;
}

#nr-site .nr-pd__vuoto span:first-child { background: color-mix(in srgb, var(--nr-fg) 8%, transparent); }
#nr-site .nr-pd__vuoto span:nth-child(2) { text-align: right; }

#nr-site .nr-pd__vuoto p {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--nr-fg);
	color: var(--nr-bg);
	font-weight: 650;
	white-space: nowrap;
	translate: -50% -50%;
}

#nr-site .nr-pd__nota {
	margin-top: 22px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .68);
	letter-spacing: .06em;
	text-align: center;
	opacity: .7;
}

/* ---- 12.4 Tutti i confronti ----
   Pulsante verso la pagina della galleria; c'è solo se quella pagina esiste. */

#nr-site .nr-pd__tutti { display: flex; justify-content: center; margin-top: 28px; }

/* ---- 12.5 Due colonne ---- */

@media (min-width: 1000px) {
	#nr-site .nr-pd {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(40px, 6vw, 120px);
		align-items: start;
	}

	#nr-site .nr-pd > .nr-sezione__testa { grid-column: 1; grid-row: 1; padding-top: 6vh; }
	#nr-site .nr-pd__scelta { grid-column: 1; grid-row: 2; }
	#nr-site .nr-pd__palco { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
	#nr-site .nr-pd__nota { grid-column: 2; grid-row: 4; }
	#nr-site .nr-pd__tutti { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 32px; }
}

/* ==========================================================================
   13. COME SI USA
   ========================================================================== */

/* ---- 13.1 Impaginazione di base ---- */

#nr-site .nr-rituale { padding-left: 0; padding-right: 0; }
#nr-site .nr-rituale__testa { padding: 0 var(--nr-pad); }

#nr-site .nr-rituale__binario {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(40px, 7vh, 72px);
	padding: 0 var(--nr-pad);
}

/* ---- 13.2 Binario orizzontale ----
   Da 900px con il movimento la sezione si blocca e i passi scorrono di lato.
   L'altezza e lo spostamento li calcola il JS. */

@media (min-width: 900px) {
	#nr-site.nr-js.nr-motion .nr-rituale { height: var(--nr-rituale-h, 260vh); padding: 0; }

	#nr-site.nr-js.nr-motion .nr-rituale__palco {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100svh;
		padding: var(--nr-top-h) 0 32px;
		overflow: clip;
	}

	#nr-site.nr-js.nr-motion .nr-rituale__binario {
		display: flex;
		width: max-content;
		will-change: transform;
		transform: translate3d(var(--nr-rituale-x, 0px), 0, 0);
	}

	#nr-site.nr-js.nr-motion .nr-passo { flex: 0 0 min(58vw, 620px); }
}

/* ---- 13.3 Passi ---- */

#nr-site .nr-passo {
	position: relative;
	padding: clamp(24px, 3vw, 40px);
	border: 2px solid color-mix(in srgb, var(--nr-fg) 24%, transparent);
	border-radius: var(--nr-r);
	background: color-mix(in srgb, var(--nr-fg) 7%, transparent);
}

#nr-site .nr-passo__disegno {
	width: clamp(120px, 15vw, 200px);
	aspect-ratio: 1;
	margin-bottom: 24px;
}

#nr-site .nr-passo__disegno svg { display: block; width: 100%; height: 100%; overflow: visible; }

#nr-site .nr-traccia {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

#nr-site.nr-js.nr-motion .nr-traccia { transition: stroke-dashoffset 1.6s var(--nr-ease-io) calc(var(--t, 0) * 180ms + 250ms); }
#nr-site.nr-js.nr-motion .nr-passo:not(.is-in) .nr-traccia { stroke-dashoffset: 1; }

#nr-site .nr-passo__n {
	position: absolute;
	top: clamp(14px, 2vw, 26px);
	right: clamp(20px, 2.6vw, 36px);
	font-family: var(--nr-serif);
	font-size: clamp(64px, 8vw, 128px);
	font-style: italic;
	line-height: 1;
	color: var(--nr-rame-chiaro);
}

#nr-site .nr-passo h3 {
	font-size: var(--nr-fs-h3);
	font-weight: 760;
	font-stretch: 82%;
	line-height: 1;
	letter-spacing: -.02em;
}

#nr-site .nr-passo p {
	margin-top: 12px;
	max-width: 36ch;
	opacity: .9;
}

/* ==========================================================================
   14. SALENTO E FICO D'INDIA
   ========================================================================== */

/* ---- 14.1 Testo e dati ---- */

#nr-site .nr-salento {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 6vw, 120px);
}

#nr-site .nr-salento__coord {
	margin-top: 28px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .8);
	letter-spacing: .12em;
	color: var(--nr-rame-scuro);
}

#nr-site .nr-salento__dati {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 16px clamp(24px, 3vw, 48px);
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--nr-linea);
}

#nr-site .nr-salento__dati dt {
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .66);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
}

#nr-site .nr-salento__dati dd {
	margin-top: 4px;
	font-size: calc(var(--nr-u) * 1.25);
	font-weight: 680;
	line-height: 1.2;
}

/* Pulsante verso la pagina della storia; c'è solo se quella pagina esiste. */
#nr-site .nr-salento__storia { margin-top: 36px; }

/* ---- 14.2 Disegno ---- */

#nr-site .nr-salento__fico { position: relative; width: min(100%, 560px); justify-self: center; }
#nr-site .nr-fico { display: block; width: 100%; height: auto; overflow: visible; }

#nr-site .nr-fico__s1 { stop-color: #6E9F55; }
#nr-site .nr-fico__s2 { stop-color: #4F7F45; }
#nr-site .nr-fico__s3 { stop-color: #2F5A33; }

#nr-site .nr-fico__spine {
	fill: none;
	stroke: #E9F2DA;
	stroke-width: 3.4;
	stroke-linecap: round;
}

#nr-site .nr-fico__frutto--a > path:not(.nr-fico__peli) { fill: #D3236C; }
#nr-site .nr-fico__frutto--b > path:not(.nr-fico__peli) { fill: #DB7342; }
#nr-site .nr-fico__frutto--a .nr-fico__ombelico { fill: #8E1245; }
#nr-site .nr-fico__frutto--b .nr-fico__ombelico { fill: #8C3A1A; }

#nr-site .nr-fico__peli {
	fill: none;
	stroke: #F7EFE6;
	stroke-width: 2.6;
	stroke-linecap: round;
	opacity: .85;
}

#nr-site .nr-fico__pietra--0 { fill: #E9DFCB; }
#nr-site .nr-fico__pietra--1 { fill: #D8CBB2; }
#nr-site .nr-fico__pietra--2 { fill: #C9B99C; }

/* ---- 14.3 Crescita e vento ----
   Le pale crescono dalla base una dopo l'altra (--d), i frutti spuntano
   con il rimbalzo; l'oscillazione la scrive il JS su .nr-fico__ondeggia. */

#nr-site .nr-fico__cresce,
#nr-site .nr-fico__ondeggia,
#nr-site .nr-fico__frutto {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

#nr-site.nr-js.nr-motion .nr-fico__cresce { transition: transform 1.1s var(--nr-back) var(--d, 0ms); }
#nr-site.nr-js.nr-motion .nr-fico__frutto { transition: transform .8s var(--nr-back) var(--d, 0ms); }

#nr-site.nr-js.nr-motion .nr-salento__fico:not(.is-in) .nr-fico__cresce,
#nr-site.nr-js.nr-motion .nr-salento__fico:not(.is-in) .nr-fico__frutto { transform: scale(0); }

#nr-site.nr-motion .nr-fico__sole {
	transform-box: fill-box;
	transform-origin: center;
	animation: nr-sole 6s ease-in-out infinite alternate;
}

@keyframes nr-sole {
	to { transform: scale(1.07); }
}

/* ==========================================================================
   15. ACQUISTA
   ========================================================================== */

/* ---- 15.1 Impaginazione ---- */

#nr-site .nr-acquista {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(40px, 6vw, 120px);
}

/* ---- 15.2 Barattolo da girare ---- */

#nr-site .nr-acquista__jar {
	position: relative;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

#nr-site .nr-acquista__jar.is-preso { cursor: grabbing; }

#nr-site .nr-acquista__giro {
	width: min(100%, 440px);
	margin: 0 auto;
	rotate: calc(var(--nr-incl, 0) * 1deg);
	transition: rotate .2s linear;
}

#nr-site .nr-acquista__gira {
	margin-top: 18px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .66);
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	opacity: .7;
}

/* ---- 15.3 Scheda ---- */

#nr-site .nr-acquista__riga {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: 36px;
	padding: 24px 0;
	border-top: 1px solid var(--nr-linea);
	border-bottom: 1px solid var(--nr-linea);
}

#nr-site .nr-acquista__nome { font-size: calc(var(--nr-u) * 1.35); font-weight: 700; line-height: 1.2; }

#nr-site .nr-acquista__desc {
	margin-top: 6px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .7);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
}

#nr-site .nr-acquista__prezzo {
	flex: none;
	font-family: var(--nr-serif);
	font-size: clamp(56px, 8vw, 112px);
	font-style: italic;
	line-height: .9;
	white-space: nowrap;
}

#nr-site .nr-acquista__ordine {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-top: 28px;
}

#nr-site .nr-acquista__vai { flex: 1 1 220px; }

/* ---- 15.4 Quantità ---- */

#nr-site .nr-qty label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--nr-mono);
	font-size: calc(var(--nr-u) * .66);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
}

#nr-site .nr-qty__campo {
	display: inline-flex;
	align-items: center;
	height: 52px;
	border: 2px solid var(--nr-fg);
	border-radius: 999px;
}

#nr-site .nr-qty__campo button {
	width: 46px;
	height: 100%;
	border-radius: 999px;
	font-size: calc(var(--nr-u) * 1.3);
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s;
}

#nr-site .nr-qty__campo button:hover { background: color-mix(in srgb, var(--nr-fg) 12%, transparent); }

#nr-site .nr-qty__campo input {
	width: 3ch;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: calc(var(--nr-u) * 1.1);
	font-weight: 650;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

#nr-site .nr-qty__campo input::-webkit-inner-spin-button,
#nr-site .nr-qty__campo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- 15.5 Punti di forza ---- */

#nr-site .nr-acquista__punti { display: grid; gap: 10px; margin-top: 28px; }

#nr-site .nr-acquista__punti li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: calc(var(--nr-u) * .92);
	opacity: .9;
}

#nr-site .nr-acquista__punti li::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--nr-rame);
	translate: 0 -1px;
}

/* ==========================================================================
   16. DOMANDE
   ========================================================================== */

#nr-site .nr-faq {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(40px, 6vw, 120px);
}

@media (min-width: 900px) {
	#nr-site .nr-faq > .nr-sezione__testa { position: sticky; top: calc(var(--nr-top-h) + 32px); }
}

#nr-site .nr-faq__elenco { border-top: 2px solid var(--nr-fg); }
#nr-site .nr-faq__voce { border-bottom: 1px solid var(--nr-linea); }

#nr-site .nr-faq__voce summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	font-size: calc(var(--nr-u) * 1.15);
	font-weight: 620;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

#nr-site .nr-faq__voce summary::-webkit-details-marker { display: none; }

#nr-site .nr-faq__segno {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border: 2px solid currentColor;
	border-radius: 50%;
	transition: rotate .5s var(--nr-back), background-color .3s, border-color .3s, color .3s;
}

#nr-site .nr-faq__segno::before,
#nr-site .nr-faq__segno::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	translate: -50% -50%;
}

#nr-site .nr-faq__segno::after { rotate: 90deg; }

#nr-site .nr-faq__voce[open] .nr-faq__segno {
	rotate: 135deg;
	background: var(--nr-rame);
	border-color: var(--nr-rame);
	color: var(--nr-scuro);
}

@media (hover: hover) {
	#nr-site .nr-faq__voce summary:hover .nr-faq__segno { rotate: 90deg; }
	#nr-site .nr-faq__voce[open] summary:hover .nr-faq__segno { rotate: 135deg; }
}

#nr-site .nr-faq__risposta {
	max-width: 60ch;
	padding: 0 52px 26px 0;
	opacity: .85;
}

/* Apertura morbida dove il browser sa animare il contenuto di <details>. */
@supports selector(::details-content) {
	#nr-site .nr-faq__voce::details-content {
		height: 0;
		overflow: clip;
		transition: height .5s var(--nr-ease), content-visibility .5s allow-discrete;
	}

	#nr-site .nr-faq__voce[open]::details-content { height: auto; }
}

/* ==========================================================================
   17. CONTATTI
   ========================================================================== */

/* ---- 17.1 Impaginazione ---- */

#nr-site .nr-contatti__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	align-items: start;
	gap: clamp(48px, 6vw, 110px);
	margin-top: clamp(48px, 6vw, 80px);
}

/* ---- 17.2 Lettera ----
   Crema e testo scuro anche dentro la sezione rosa: le variabili locali
   ricolorano campi, linee e pulsanti della scheda. */

#nr-site .nr-lettera {
	--nr-fg: var(--nr-scuro);
	--nr-bg: var(--nr-crema);
	--nr-linea: color-mix(in srgb, var(--nr-scuro) 20%, transparent);
	position: relative;
	padding: clamp(28px, 4vw, 56px);
	border: 2px solid var(--nr-scuro);
	border-radius: var(--nr-r);
	background: var(--nr-grana) var(--nr-crema);
	color: var(--nr-scuro);
	box-shadow: 12px 12px 0 var(--nr-scuro);
}

#nr-site .nr-lettera [hidden] { display: none !important; }

#nr-site .nr-lettera__titolo {
	max-width: calc(100% - clamp(96px, 10vw, 140px));
	font-family: var(--nr-serif);
	font-size: var(--nr-fs-h3);
	font-style: italic;
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}

/* ---- 17.3 Timbro ----
   A riposo è appena accennato e la scritta gira piano; a invio riuscito
   cade sulla carta e prende il colore della sezione. */

#nr-site .nr-timbro {
	position: absolute;
	top: clamp(16px, 2.4vw, 32px);
	right: clamp(16px, 2.4vw, 32px);
	width: clamp(84px, 9vw, 124px);
	height: auto;
	color: var(--nr-rame);
	opacity: .38;
	rotate: -14deg;
	pointer-events: none;
}

#nr-site .nr-timbro text {
	font-family: var(--nr-mono);
	text-transform: uppercase;
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: nr-timbro-giro 40s linear infinite;
}

#nr-site .nr-lettera.is-inviata .nr-timbro {
	color: var(--nr-accento-fondo);
	opacity: .92;
	animation: nr-timbro .7s var(--nr-back) both;
}

@keyframes nr-timbro-giro {
	to { rotate: 360deg; }
}

@keyframes nr-timbro {
	0% { opacity: 0; scale: 1.9; rotate: 8deg; }
	60% { opacity: .92; scale: .94; }
	100% { opacity: .92; scale: 1; rotate: -14deg; }
}

/* ---- 17.4 Campi ---- */

#nr-site .nr-modulo { display: grid; gap: 28px; margin-top: 32px; }

#nr-site .nr-modulo__riga {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

#nr-site .nr-campo { display: grid; gap: 8px; min-width: 0; }

#nr-site .nr-campo label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: calc(var(--nr-u) * .95);
	font-weight: 650;
}

#nr-site .nr-campo label > span {
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--nr-rame-scuro);
}

#nr-site .nr-campo :is(input[type="text"], input[type="email"], textarea) {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 8px 0 10px;
	border: 0;
	border-bottom: 2px solid var(--nr-scuro);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--nr-scuro);
	font-family: var(--nr-font);
	font-size: calc(var(--nr-u) * 1.125);
	font-weight: 450;
	line-height: 1.5;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .3s, box-shadow .3s var(--nr-ease), background-color .3s;
}

/* Carta a righe: le linee scorrono con il testo. */
#nr-site .nr-campo textarea {
	--nr-riga: 32px;
	min-height: calc(var(--nr-riga) * 4 + 12px);
	padding: 0 0 10px;
	line-height: var(--nr-riga);
	background-image: linear-gradient(transparent calc(100% - 1px), var(--nr-linea) 0);
	background-size: 100% var(--nr-riga);
	background-attachment: local;
	resize: vertical;
}

#nr-site .nr-campo :is(input, textarea):focus {
	border-bottom-color: var(--nr-accento-fondo);
	box-shadow: 0 2px 0 var(--nr-accento-fondo);
	background-color: color-mix(in srgb, var(--nr-rame-chiaro) 16%, transparent);
}

#nr-site .nr-campo input:-webkit-autofill {
	-webkit-text-fill-color: var(--nr-scuro);
	transition: background-color 9999s;
}

#nr-site .nr-campo__nota {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	opacity: .72;
}

#nr-site .nr-campo__nota [data-nr-conta] { flex: none; font-variant-numeric: tabular-nums; }
#nr-site .nr-campo__nota .is-limite { color: var(--nr-accento-fondo); }

/* ---- 17.5 Spunta della privacy ---- */

#nr-site .nr-campo--spunta {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 14px;
}

#nr-site .nr-campo--spunta input {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin: 0;
	border: 2px solid var(--nr-scuro);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .25s, border-color .25s;
}

#nr-site .nr-campo--spunta input::before {
	content: "";
	width: 12px;
	height: 7px;
	border-left: 2.5px solid var(--nr-crema);
	border-bottom: 2.5px solid var(--nr-crema);
	rotate: -45deg;
	translate: 0 -2px;
	scale: 0;
	transition: scale .3s var(--nr-back);
}

#nr-site .nr-campo--spunta input:checked { background: var(--nr-scuro); }
#nr-site .nr-campo--spunta input:checked::before { scale: 1; }
#nr-site .nr-campo--spunta input:focus-visible { outline: 3px solid var(--nr-accento-fondo); outline-offset: 3px; }

#nr-site .nr-campo--spunta label {
	display: block;
	padding-top: 2px;
	font-size: calc(var(--nr-u) * .92);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

#nr-site .nr-campo--spunta label a {
	font-weight: 650;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

#nr-site .nr-campo--spunta .nr-campo__errore { grid-column: 1 / -1; }

/* ---- 17.6 Errori ----
   Il rosa scuro della sezione regge il contrasto sulla crema anche a corpo piccolo. */

#nr-site .nr-campo__errore {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--nr-accento-fondo);
	font-size: calc(var(--nr-u) * .9);
	font-weight: 600;
	line-height: 1.4;
}

#nr-site .nr-campo__errore::before {
	content: "!";
	display: grid;
	flex: none;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--nr-accento-fondo);
	color: var(--nr-crema);
	font-family: var(--nr-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

#nr-site .nr-campo [aria-invalid="true"] { border-color: var(--nr-accento-fondo); }

#nr-site .nr-campo :is(input[type="text"], input[type="email"], textarea)[aria-invalid="true"] {
	background-color: color-mix(in srgb, var(--nr-accento) 7%, transparent);
}

/* Errore dell'intero modulo: fascia in cima. */
#nr-site #nr-err-modulo {
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--nr-accento-fondo);
	color: var(--nr-crema);
}

#nr-site #nr-err-modulo::before { background: var(--nr-crema); color: var(--nr-accento-fondo); }

/* Il campo per i bot resta fuori schermo ma non sparisce. */
#nr-site .nr-esca {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- 17.7 Invio e ringraziamento ---- */

#nr-site .nr-modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
#nr-site .nr-modulo .nr-btn[disabled] { opacity: .7; cursor: progress; transform: none; }

#nr-site .nr-modulo__ok {
	display: grid;
	justify-items: start;
	gap: 16px;
	margin-top: 32px;
}

#nr-site .nr-modulo__ok svg { width: 56px; height: 56px; color: var(--nr-verde); }

#nr-site .nr-modulo__ok svg path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: nr-spunta .6s var(--nr-ease) .35s forwards;
}

#nr-site .nr-modulo__ok h3 {
	font-size: var(--nr-fs-h3);
	font-weight: 760;
	font-stretch: 82%;
	line-height: 1.05;
}

#nr-site .nr-modulo__ok p { max-width: 46ch; opacity: .85; }
#nr-site .nr-modulo__ok .nr-btn { margin-top: 8px; }

@keyframes nr-spunta {
	to { stroke-dashoffset: 0; }
}

/* ---- 17.8 Indirizzo e social ---- */

#nr-site .nr-contatti__lato { padding-top: 6px; }

#nr-site .nr-contatti__oppure,
#nr-site .nr-social > p {
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .12em;
	text-transform: uppercase;
}

#nr-site .nr-contatti__mail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 14px;
}

#nr-site .nr-contatti__mail > a {
	min-width: 0;
	padding-bottom: .04em;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 3px;
	font-family: var(--nr-serif);
	font-size: clamp(34px, 4.4vw, 64px);
	font-style: italic;
	line-height: 1.05;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	transition: background-size .6s var(--nr-ease);
}

#nr-site .nr-contatti__mail > a:hover { background-size: 100% 3px; }

#nr-site .nr-social { margin-top: 48px; }
#nr-site .nr-social ul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

#nr-site .nr-social a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 22px 0 16px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-weight: 620;
	transition: background-color .3s, color .3s, transform .4s var(--nr-ease);
}

#nr-site .nr-social svg { width: 22px; height: 22px; flex: none; }

@media (hover: hover) {
	#nr-site .nr-social a:hover { background: var(--nr-fg); color: var(--nr-bg); transform: translateY(-3px); }
}

/* ==========================================================================
   18. PIEDE
   ========================================================================== */

#nr-site .nr-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 32px;
	padding: 28px var(--nr-pad);
	background: #1E3A24;
	color: #F7EFE6;
	font-size: calc(var(--nr-u) * .8);
	line-height: 1.5;
}

#nr-site .nr-footer a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	transition: color .25s;
}

#nr-site .nr-footer :focus-visible { outline-color: #F7EFE6; }

@media (hover: hover) {
	#nr-site .nr-footer a:hover { color: #F6B48E; text-decoration-thickness: 2px; }
}

#nr-site .nr-footer__su {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-left: auto;
	font-weight: 650;
	text-decoration: none !important;
}

#nr-site .nr-footer__su svg {
	width: .75em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: translate .4s var(--nr-back);
}

#nr-site .nr-footer__su:hover svg { translate: 0 -3px; }

/* ---- 18.1 Grana ----
   Solo a pagina intera: dentro un tema resterebbe sopra anche i suoi contenuti. */

#nr-site .nr-grain { display: none; }

#nr-site.nr--canvas .nr-grain {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: block;
	background-image: var(--nr-grana);
	opacity: .45;
	pointer-events: none;
}

/* ---- 18.2 Documenti ---- */

#nr-site .nr-footer__doc ul { display: flex; flex-wrap: wrap; gap: 0 18px; }

#nr-site .nr-footer__doc a,
#nr-site .nr-footer .nr-cc-apri {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#nr-site .nr-footer .nr-cc-apri:not(.nr-btn) {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	cursor: pointer;
}

#nr-site .nr-footer [aria-current="page"] { font-weight: 650; }

/* ---- 18.3 Firma ---- */

#nr-site .nr-footer__firma { display: inline-flex; align-items: center; gap: 12px; }
#nr-site .nr-footer__luogo { white-space: nowrap; }
#nr-site .nr-footer__marchio { display: block; flex: none; width: auto; height: 30px; }

/* ---- 18.4 Social ---- */

#nr-site .nr-footer__social { display: flex; gap: 4px; }

#nr-site .nr-footer__social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	text-decoration: none;
}

#nr-site .nr-footer__social svg { width: 20px; height: 20px; }

/* ==========================================================================
   19. COMPARSA
   ========================================================================== */

#nr-site.nr-js.nr-motion [data-nr-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity .9s var(--nr-ease) var(--nr-d, 0ms),
		transform 1s var(--nr-ease) var(--nr-d, 0ms);
}

#nr-site.nr-js.nr-motion [data-nr-reveal].is-in { opacity: 1; transform: none; }

/* I titoli non si muovono in blocco: salgono le singole righe. */
#nr-site.nr-js.nr-motion .nr-titolo[data-nr-reveal] { opacity: 1; transform: none; }

#nr-site.nr-js.nr-motion .nr-titolo .nr-line > span {
	display: inline-block;
	transform: translateY(108%);
	transition: transform 1.1s var(--nr-ease) calc(var(--nr-d, 0ms) + var(--l, 0) * 90ms);
}

#nr-site.nr-js.nr-motion .nr-titolo.is-in .nr-line > span { transform: none; }

/* ==========================================================================
   20. SCHERMI STRETTI
   ========================================================================== */

/* ---- 20.1 Fino a 1099px ---- */

@media (max-width: 1099px) {
	#nr-site .nr-topbar__nav ul { gap: 18px; }
	#nr-site .nr-topbar__nav a { font-size: calc(var(--nr-u) * .88); }
}

/* ---- 20.2 Tablet e telefoni: una colonna e menu a tutto schermo ---- */

@media (max-width: 899px) {
	#nr-site .nr-topbar__nav { display: none; }
	#nr-site .nr-topbar__menu { display: inline-block; }

	#nr-site .nr-hero__palco {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 12px;
		padding-top: calc(var(--nr-top-h) + 28px);
		padding-bottom: 96px;
	}

	#nr-site .nr-hero__prof { width: min(78vw, 400px); }
	#nr-site .nr-badge { right: -6%; }

	#nr-site .nr-crema__qualita,
	#nr-site .nr-rituale__binario,
	#nr-site .nr-salento,
	#nr-site .nr-acquista,
	#nr-site .nr-faq,
	#nr-site .nr-contatti__griglia { grid-template-columns: minmax(0, 1fr); }

	#nr-site .nr-acquista__jar { order: 2; }
	#nr-site .nr-acquista__giro { width: min(72vw, 360px); }
}

@media (min-width: 900px) {
	#nr-site .nr-menu { display: none !important; }
}

/* ---- 20.3 Telefoni ---- */

@media (max-width: 599px) {
	#nr-site .nr-topbar .nr-btn__prezzo { display: none; }

	#nr-site .nr-hero__azioni .nr-btn { flex: 1 1 auto; }

	#nr-site .nr-salento__dati { grid-template-columns: repeat(2, auto); }

	#nr-site .nr-acquista__riga { flex-direction: column; align-items: flex-start; }
	#nr-site .nr-acquista__ordine .nr-qty { flex: 1 1 100%; }
	#nr-site .nr-acquista__vai { flex-basis: 100%; }

	#nr-site .nr-faq__risposta { padding-right: 0; }

	#nr-site .nr-lettera { box-shadow: 7px 7px 0 var(--nr-scuro); }
	#nr-site .nr-lettera__titolo { max-width: calc(100% - 76px); }
	#nr-site .nr-timbro { width: 72px; }
	#nr-site .nr-modulo__riga { grid-template-columns: minmax(0, 1fr); }

	#nr-site .nr-footer__luogo { display: block; }
	#nr-site .nr-footer__punto { display: none; }
}

@media (max-width: 419px) {
	#nr-site .nr-topbar__end > .nr-btn { display: none; }
}

@media (max-width: 389px) {
	#nr-site .nr-topbar { gap: 12px; }
}

@media (max-width: 359px) {
	#nr-site .nr-lang__list { left: 0; right: auto; }
}

/* ==========================================================================
   21. MOVIMENTO RIDOTTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#nr-site *, #nr-site ::before, #nr-site ::after {
		animation-duration: .001ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

#nr-site.nr-reduce *, #nr-site.nr-reduce ::before, #nr-site.nr-reduce ::after {
	animation-duration: .001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}