/* ==========================================================================
   SORBOS: stili principali
   1. Font e variabili
   2. Base
   3. Componenti (bottoni, titoli, grana)
   4. Header e menu
   5. Homepage (hero, marquee, rituale, gusti, infografica, HoReCa, FAQ, CTA)
   6. Pagine interne e blog
   7. Footer
   8. Animazioni e accessibilità
   ========================================================================== */

/* 1. Font e variabili ------------------------------------------------------ */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Caveat";
	src: url("../fonts/caveat-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #1b1515;
	--ink-soft: #4a4040;
	--cream: #fff7ef;
	--paper: #ffffff;
	--bg: #ffffff;
	--bg-alt: #f5f5f3;
	--pink: #ff4f9a;
	--pink-soft: #ffd0e3;
	--cyan: #1fc7c1;
	--yellow: #ffe14d;
	--lime: #c6f16b;
	--peach: #ffa774;
	--lilac: #d9b8ff;
	--line: rgba(27, 21, 21, 0.14);

	--f-display: "Fraunces", "Georgia", serif;
	--f-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-script: "Caveat", "Comic Sans MS", cursive;

	--header-h: 96px;
	--radius: 28px;
	--radius-lg: 44px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--container: 1320px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--shadow: 0 30px 60px -30px rgba(27, 21, 21, 0.35);

	--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 2. Base ------------------------------------------------------------------- */

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

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--f-display);
	font-weight: 750;
	font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96;
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

em {
	font-style: italic;
}

h1 em,
h2 em {
	color: var(--pink);
	font-weight: 650;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--pink);
	color: #fff;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: clamp(4.5rem, 11vw, 9rem);
}

.section--tight {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

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

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	background: var(--ink);
	color: var(--cream);
	padding: 0.75rem 1rem;
	border-radius: 999px;
}

/* 3. Componenti ---------------------------------------------------------- */

.btn {
	--btn-bg: transparent;
	--btn-fg: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.85rem 1.6rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--f-body);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.35s var(--ease), background-color 0.25s, color 0.25s, box-shadow 0.35s var(--ease);
}

.btn .icon {
	width: 1.15em;
	height: 1.15em;
	transition: transform 0.35s var(--ease);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 var(--ink);
}

.btn:hover .icon {
	transform: translateX(4px);
}

.btn:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 var(--ink);
}

.btn--primary {
	--btn-bg: var(--ink);
	--btn-fg: var(--cream);
}

.btn--primary:hover {
	--btn-bg: var(--pink);
	--btn-fg: #fff;
}

.btn--ghost:hover {
	--btn-bg: var(--paper);
}

.btn--light {
	--btn-bg: var(--cream);
	--btn-fg: var(--ink);
	border-color: var(--cream);
}

.btn--light:hover {
	--btn-bg: var(--yellow);
	box-shadow: 0 6px 0 var(--cream);
}

.btn--lg {
	min-height: 64px;
	padding: 1.1rem 2.2rem;
	font-size: 1.05rem;
}

.script {
	font-family: var(--f-script);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kicker::before {
	content: "";
	width: 28px;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pink), var(--peach));
}

.kicker--light {
	color: var(--cream);
}

.section-head {
	max-width: 760px;
	margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
}

.section-head--split .section-title {
	margin: 0;
}

.section-title {
	font-size: clamp(2.4rem, 6vw, 4.8rem);
}

/* La parte in corsivo rosa resta unita: se non ci sta, va a capo tutta insieme */
.section-title em {
	display: inline-block;
}

.section-lead {
	max-width: 560px;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: var(--ink-soft);
}

.grain {
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.32;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Cannuccia SVG */
.straw {
	width: 100%;
	overflow: visible;
	filter: drop-shadow(0 24px 22px rgba(27, 21, 21, 0.22));
}

.straw__half {
	transform-box: fill-box;
	transform-origin: center;
}

/* 4. Header e menu --------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	transition: background-color 0.35s, box-shadow 0.35s, transform 0.45s var(--ease);
}

body:not(.has-hero) .site-header,
.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 1px 0 var(--line);
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* Barra annunci sopra il menu: i messaggi scorrono senza fermarsi */
.has-announce {
	--announce-h: 36px;
	--header-h: 132px;
}

.announce {
	height: var(--announce-h);
	overflow: hidden;
	background: var(--ink);
	color: var(--cream);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.announce__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: marquee 40s linear infinite;
}

.announce__list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.announce__list li {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.announce__list li::after {
	content: "";
	width: 0.85em;
	height: 0.85em;
	margin-inline: 1.6rem;
	background: var(--pink);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.6 8.4L24 12l-9.4 3.6L12 24l-2.6-8.4L0 12l9.4-3.6z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.6 8.4L24 12l-9.4 3.6L12 24l-2.6-8.4L0 12l9.4-3.6z'/></svg>") center / contain no-repeat;
}

.announce__list li:nth-child(3n + 2)::after { background: var(--yellow); }
.announce__list li:nth-child(3n)::after { background: var(--cyan); }

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	height: calc(100% - var(--announce-h, 0px));
	padding-inline: clamp(1.2rem, 3.2vw, 3.5rem);
}

.site-header__sep {
	width: 1px;
	height: 28px;
	background: var(--line);
}

.brand {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
}

.logo-svg {
	display: block;
	width: auto;
	max-width: none;
}

.brand__logo {
	height: clamp(30px, 3vw, 42px);
	transition: transform 0.4s var(--ease);
}

.brand:hover .brand__logo {
	transform: rotate(-2deg) scale(1.03);
}

/* Nell'header solo il logo, la dicitura resta nel footer */
.site-header .brand__tag {
	display: none;
}

.brand__tag {
	margin-top: 0.3rem;
	font-family: var(--f-display);
	font-size: 0.8rem;
	font-weight: 700;
}

.custom-logo-link img {
	max-height: 52px;
	width: auto;
}

.site-nav {
	margin-left: auto;
}

.site-nav .menu {
	display: flex;
	gap: clamp(1rem, 2.4vw, 2.2rem);
}

.site-nav a {
	position: relative;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: color 0.2s;
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.5rem;
}

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

.site-nav a:hover::after,
.site-nav .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	color: var(--pink);
}

.site-nav .sub-menu {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	transition: background-color 0.2s;
}

.icon-btn:hover {
	background: rgba(27, 21, 21, 0.07);
}

.icon-btn .icon {
	width: 22px;
	height: 22px;
}

.cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--pink);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

/* Carrello nell'header: totale + icona in un cerchio, come nel sito originale */
.cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.25rem 0.25rem 0.25rem 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.25s;
}

.cart-pill:hover {
	background: rgba(27, 21, 21, 0.06);
}

.cart-pill__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bg-alt);
}

.cart-pill__icon .icon {
	width: 21px;
	height: 21px;
}

.cart-pill .cart-count {
	top: -3px;
	right: -3px;
}

.cart-count[data-count="0"] {
	display: none;
}

.nav-toggle {
	display: none;
}

.nav-toggle .icon--close {
	display: none;
}

@media (max-width: 960px) {
	.nav-toggle {
		display: inline-grid;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: grid;
		align-content: center;
		padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
		background: var(--bg);
		clip-path: circle(0 at calc(100% - 3rem) 2.4rem);
		transition: clip-path 0.7s var(--ease);
	}

	.site-nav .menu {
		flex-direction: column;
		gap: 0.4rem;
	}

	.site-nav a {
		font-family: var(--f-display);
		font-size: clamp(2.2rem, 9vw, 3.4rem);
		font-weight: 750;
		letter-spacing: -0.02em;
		text-transform: none;
	}

	.nav-open .site-nav {
		clip-path: circle(150% at calc(100% - 3rem) 2.4rem);
	}

	.has-announce .site-nav {
		top: var(--announce-h);
	}

	.announce {
		font-size: 0.7rem;
		letter-spacing: 0.02em;
	}

	.nav-open .nav-toggle .icon--menu {
		display: none;
	}

	.nav-open .nav-toggle .icon--close {
		display: block;
	}

	.nav-open {
		overflow: hidden;
	}

	.site-header__actions {
		margin-left: auto;
	}
}

/* 5. Homepage ---------------------------------------------------------------- */

/* --- Macchie di colore animate (usate da "Vantaggi" e dall'invito finale) --- */
.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.9;
	will-change: transform;
}

.blob--1 {
	width: 55vmax;
	height: 55vmax;
	left: 18%;
	top: -22%;
	background: radial-gradient(circle, #ffb27a 0%, rgba(255, 178, 122, 0) 70%);
	animation: drift-a 18s ease-in-out infinite alternate;
}

.blob--2 {
	width: 50vmax;
	height: 50vmax;
	right: -10%;
	top: 10%;
	background: radial-gradient(circle, #ff8fc4 0%, rgba(255, 143, 196, 0) 70%);
	animation: drift-b 22s ease-in-out infinite alternate;
}

.blob--3 {
	width: 45vmax;
	height: 45vmax;
	left: 30%;
	bottom: -30%;
	background: radial-gradient(circle, #e9a6ff 0%, rgba(233, 166, 255, 0) 70%);
	animation: drift-c 20s ease-in-out infinite alternate;
}

.blob--4 {
	width: 36vmax;
	height: 36vmax;
	left: -12%;
	top: 30%;
	background: radial-gradient(circle, #fff1a8 0%, rgba(255, 241, 168, 0) 70%);
	animation: drift-b 26s ease-in-out infinite alternate-reverse;
}

@keyframes drift-a {
	to { transform: translate(-12%, 14%) scale(1.15); }
}
@keyframes drift-b {
	to { transform: translate(10%, -12%) scale(0.9); }
}
@keyframes drift-c {
	to { transform: translate(-16%, -8%) scale(1.2); }
}

/* --- Marquee --- */
.marquee {
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: var(--ink);
	color: var(--cream);
	padding-block: 1.1rem;
	transform: rotate(-1.5deg);
	margin-block: -1.5rem;
	width: 104%;
	margin-left: -2%;
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 32s linear infinite;
}

.marquee__list {
	display: flex;
	flex-shrink: 0;
}

.marquee__list li {
	display: flex;
	align-items: center;
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-style: italic;
	font-weight: 600;
	white-space: nowrap;
}

.marquee__list li::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	margin-inline: 1.4rem;
	background: var(--pink);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.6 8.4L24 12l-9.4 3.6L12 24l-2.6-8.4L0 12l9.4-3.6z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l2.6 8.4L24 12l-9.4 3.6L12 24l-2.6-8.4L0 12l9.4-3.6z'/></svg>") center / contain no-repeat;
}

.marquee__list li:nth-child(3n + 2)::after {
	background: var(--yellow);
}

.marquee__list li:nth-child(3n)::after {
	background: var(--cyan);
}

@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* --- Gusti --- */
.flavors {
	background: var(--bg-alt);
}

.flavor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.flavor-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper);
	text-decoration: none;
	box-shadow: 0 0 0 1px var(--line);
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.flavor-card__link:hover {
	transform: translateY(-8px) rotate(-1deg);
	box-shadow: var(--shadow), 0 0 0 1px var(--line);
}

.flavor-card:nth-child(2n) .flavor-card__link:hover {
	transform: translateY(-8px) rotate(1deg);
}

.flavor-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.7), transparent 45%),
		linear-gradient(145deg, var(--from), var(--to));
}

.flavor-card__media img:not(.flavor-card__photo) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.flavor-card__link:hover .flavor-card__media img:not(.flavor-card__photo) {
	transform: scale(1.06);
}

/* Illustrazione del gusto dietro le cannucce */
.flavor-card__illu {
	position: absolute;
	top: 12%;
	left: 8%;
	width: 48%;
	height: auto;
	transform: rotate(-12deg);
	transition: transform 0.7s var(--ease);
	filter: drop-shadow(0 12px 14px rgba(27, 21, 21, 0.18));
}

.flavor-card__link:hover .flavor-card__illu {
	transform: rotate(-4deg) scale(1.08) translateY(-4%);
}

/* Tre cannucce verticali disegnate in CSS (segnaposto finché non ci sono le foto) */
.tubes {
	position: absolute;
	left: 62%;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: 4%;
	width: 46%;
	height: 82%;
	transform: translateX(-50%);
}

.tubes i {
	position: relative;
	flex: 1;
	border-radius: 0.2rem 0.2rem 0 0;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--straw) 70%, #000 12%) 0%,
		var(--straw) 30%,
		color-mix(in srgb, var(--straw) 60%, #fff) 48%,
		var(--straw) 66%,
		color-mix(in srgb, var(--straw) 70%, #000 22%) 100%);
	box-shadow: 8px 12px 24px -8px rgba(27, 21, 21, 0.35);
	transition: transform 0.7s var(--ease);
}

.tubes i::before {
	content: "";
	position: absolute;
	top: -7%;
	left: 0;
	right: 0;
	aspect-ratio: 2.4;
	transform: translateY(50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--straw) 55%, #000 30%) 35%, color-mix(in srgb, var(--straw) 80%, #fff) 40%);
}

.tubes i:nth-child(1) { height: 72%; transform: translateY(6%); }
.tubes i:nth-child(2) { height: 96%; }
.tubes i:nth-child(3) { height: 60%; transform: translateY(10%); }

.flavor-card__link:hover .tubes i:nth-child(1) { transform: translateY(-4%); transition-delay: 0.05s; }
.flavor-card__link:hover .tubes i:nth-child(2) { transform: translateY(-8%); }
.flavor-card__link:hover .tubes i:nth-child(3) { transform: translateY(0); transition-delay: 0.1s; }

.flavor-card__body {
	padding: 1.2rem 1.4rem 1.5rem;
}

.flavor-card__name {
	font-size: clamp(1.7rem, 2.4vw, 2.1rem);
	margin: 0 0 0.35rem;
}

.flavor-card__pair {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ink-soft);
	line-height: 1.45;
}

.flavor-card__pair span {
	display: block;
	font-family: var(--f-script);
	font-size: 1.2rem;
	color: var(--ink);
}

.flavor-card__plus {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--paper);
	transition: transform 0.5s var(--ease), background-color 0.3s;
}

.flavor-card__plus .icon {
	width: 20px;
	height: 20px;
}

.flavor-card__link:hover .flavor-card__plus {
	transform: rotate(90deg);
	background: var(--yellow);
}

.flavor-card--cta .flavor-card__link {
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	min-height: 320px;
	padding: 2rem;
	background: var(--ink);
	color: var(--cream);
	text-align: center;
}

.flavor-card--cta .script {
	font-size: 1.8rem;
	color: var(--yellow);
	transform: rotate(-4deg);
}

.flavor-card--cta strong {
	font-family: var(--f-display);
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	line-height: 1;
	margin-bottom: 1rem;
}

.flavor-card--cta .btn {
	--btn-bg: var(--cream);
	--btn-fg: var(--ink);
	border-color: var(--cream);
}

@media (max-width: 600px) {
	.flavor-grid {
		grid-template-columns: 1fr 1fr;
	}
	.flavor-card__body {
		padding: 0.8rem 0.9rem 1rem;
	}
	.flavor-card__name {
		font-size: 1.35rem;
	}
	.flavor-card__pair {
		font-size: 0.82rem;
	}
	.flavor-card__pair span {
		font-size: 1.05rem;
	}
	.flavor-card__plus {
		top: 0.6rem;
		right: 0.6rem;
		width: 34px;
		height: 34px;
	}
	.flavor-card--cta .flavor-card__link {
		min-height: 0;
		padding: 1.2rem;
	}
	.flavor-card--cta .btn {
		padding-inline: 1rem;
		font-size: 0.78rem;
	}
}

/* --- Infografica --- */
.features {
	position: relative;
	background: var(--paper);
	overflow: hidden;
}

/* Infografica illustrata (template-parts/straw-infographic.php) */
.straw-info {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: minmax(90px, auto) auto minmax(90px, auto);
	column-gap: 1rem;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.straw-info::before {
	content: "";
	position: absolute;
	inset: 15% 5%;
	background:
		radial-gradient(ellipse at 30% 50%, rgba(255, 110, 190, 0.45), transparent 55%),
		radial-gradient(ellipse at 70% 50%, rgba(255, 160, 100, 0.4), transparent 50%);
	filter: blur(40px);
	pointer-events: none;
}

.straw-info__straw {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: center;
	margin-inline: -2%;
}

.straw--outline .straw__half path:first-child {
	stroke: var(--ink);
	stroke-width: 2.4;
}

.straw--outline {
	filter: drop-shadow(0 14px 14px rgba(27, 21, 21, 0.12));
}

.straw-info__item {
	display: contents;
}

.straw-info__item > * {
	position: relative;
	z-index: 1;
}

.straw-info__item--1 > * { grid-column: 1; }
.straw-info__item--2 > * { grid-column: 2; }
.straw-info__item--3 > * { grid-column: 3; }
.straw-info__item--4 > * { grid-column: 4; }

.straw-info__icon {
	grid-row: 2;
	justify-self: center;
	width: clamp(84px, 9vw, 120px);
	height: auto;
	transition: transform 0.5s var(--ease);
}

.straw-info__icon:hover {
	transform: rotate(-8deg) scale(1.08);
}

.straw-info__note {
	margin: 0;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	line-height: 1.05;
	text-align: center;
}

.straw-info__note--top {
	grid-row: 1;
	align-self: end;
	margin-bottom: 2.6rem;
}

.straw-info__note--bottom {
	grid-row: 3;
	align-self: start;
	margin-top: 2.6rem;
}

.straw-info__arrow {
	width: 46px;
	height: 40px;
	fill: none;
	stroke: var(--ink);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	justify-self: center;
}

.straw-info__arrow--down {
	grid-row: 1;
	align-self: end;
	transform: translateX(-10px);
}

.straw-info__arrow--up {
	grid-row: 3;
	align-self: start;
	transform: translateX(10px);
}

.straw-info__arrow path {
	stroke-dasharray: 120;
	stroke-dashoffset: 0;
}

.js .straw-info__arrow path {
	stroke-dashoffset: 120;
	transition: stroke-dashoffset 1.1s var(--ease) 0.3s;
}

.js .straw-info.is-in .straw-info__arrow path {
	stroke-dashoffset: 0;
}

.straw-info__free {
	display: grid;
	gap: 0.1rem;
	font-family: var(--f-display);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	font-weight: 650;
	line-height: 1.3;
	text-align: left;
	justify-self: center;
}

.straw-info__free span {
	font-weight: 800;
	text-decoration: underline wavy var(--pink) 2px;
	text-underline-offset: 5px;
}

@media (max-width: 760px) {
	.straw-info {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 1.6rem;
	}
	.straw-info__straw,
	.straw-info__arrow {
		display: none;
	}
	.straw-info__item {
		display: grid;
		grid-template-columns: 84px 1fr;
		align-items: center;
		gap: 0.3rem 1rem;
	}
	.straw-info__item > * {
		grid-column: 2 !important;
		grid-row: auto !important;
	}
	.straw-info__item > .straw-info__icon {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: 84px;
	}
	.straw-info__note,
	.straw-info__free {
		margin: 0;
		text-align: left;
		justify-self: start;
	}
}

/* Badge CleanHub */
.cleanhub {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: 760px;
	margin-inline: auto;
	padding: 1.2rem;
	border: 1.5px solid var(--line);
	border-radius: 20px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.cleanhub:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.cleanhub__logo {
	display: grid;
	align-content: space-between;
	width: 124px;
	height: 124px;
	padding: 0.7rem;
	background: #000;
	color: #fff;
	font-family: var(--f-body);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.1;
}

.cleanhub__logo svg {
	width: 100%;
	height: auto;
}

.cleanhub__num {
	display: grid;
	text-align: center;
}

.cleanhub__num strong {
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.cleanhub__num small,
.cleanhub__text small {
	font-size: 0.8rem;
	color: var(--ink-soft);
}

.cleanhub__text {
	display: grid;
	gap: 0.35rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.cleanhub__text strong {
	font-family: var(--f-display);
	font-size: 1.3rem;
	line-height: 1.15;
}

.cleanhub__cta {
	font-weight: 700;
	color: #2f6bff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cleanhub:not(:has(.cleanhub__num)) {
	grid-template-columns: auto 1fr;
}

.features__cleanhub {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (max-width: 600px) {
	.cleanhub,
	.cleanhub:not(:has(.cleanhub__num)) {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
}

/* Fascia vantaggi (scheda prodotto) */
.perks {
	position: relative;
	padding-block: clamp(4rem, 8vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.perks__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #ffb38a;
	overflow: hidden;
}

.perks__bg .blob--1 { background: radial-gradient(circle, #ff7eb6 0%, rgba(255, 126, 182, 0) 70%); }
.perks__bg .blob--2 { background: radial-gradient(circle, #ff9f43 0%, rgba(255, 159, 67, 0) 70%); }
.perks__bg .blob--3 { background: radial-gradient(circle, #c88bff 0%, rgba(200, 139, 255, 0) 70%); }

.perks__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.8rem, 2vw, 1.5rem);
	max-width: 1000px;
	margin: 0 auto 2.5rem;
}

.perk {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.1rem;
	padding: 1.8rem 1.2rem;
	border: 2px solid var(--ink);
	border-radius: 20px;
	background: var(--paper);
	text-align: center;
	box-shadow: 0 6px 0 var(--ink);
	transition: transform 0.4s var(--ease);
}

.perk:hover {
	transform: translateY(-4px) rotate(-1deg);
}

.perk__illu {
	width: 72px;
	height: 72px;
	margin-bottom: 0.4rem;
}

.perk__title {
	font-family: var(--f-display);
	font-size: 1.35rem;
	font-weight: 750;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

.perk__big {
	font-family: var(--f-display);
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	color: var(--pink);
	text-transform: uppercase;
	font-variation-settings: "SOFT" 100, "WONK" 1;
}

.perk__text {
	font-weight: 600;
}

@media (max-width: 760px) {
	.perks__list {
		grid-template-columns: 1fr;
	}
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	border-top: 1px solid var(--line);
}

.stat {
	display: grid;
	gap: 0.3rem;
	padding: 2rem 1rem 0 0;
}

.stat__num {
	font-family: var(--f-display);
	font-size: clamp(3.2rem, 7vw, 6rem);
	font-weight: 800;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.stat__num small {
	font-size: 0.42em;
	letter-spacing: 0;
	color: var(--pink);
}

.stat__label {
	color: var(--ink-soft);
	max-width: 16ch;
}

@media (max-width: 760px) {
	.stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Prodotti in homepage --- */
.home-products {
	background: var(--bg);
}

/* Scheda grande quando in negozio c'è un solo prodotto */
.spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.spotlight__media {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.7), transparent 45%),
		linear-gradient(145deg, #ff9ec4, #ffd6ae 55%, #e3c2ff);
}

.spotlight__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spotlight__straws {
	position: absolute;
	inset: 12% 8%;
	display: grid;
	align-content: center;
	gap: 4%;
	transform: rotate(-18deg);
}

.spotlight__straws .straw:nth-child(2n) {
	transform: translateX(8%);
}

.spotlight__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 750;
}

.spotlight__price span {
	font-family: var(--f-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.spotlight__flavors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 0.4rem;
	margin-bottom: 2rem;
}

.spotlight__flavors a {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.2rem;
	border-radius: 16px;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: transform 0.35s var(--ease), background-color 0.25s;
}

.spotlight__flavors a:hover {
	transform: translateY(-4px) rotate(-3deg);
	background: var(--bg-alt);
}

.spotlight__flavors .illu {
	width: 48px;
	height: 48px;
}

@media (max-width: 860px) {
	.spotlight {
		grid-template-columns: 1fr;
	}
}

/* --- HoReCa: sezione a tutto schermo, sfondo notte, un box per ogni tipo di cliente --- */
.horeca {
	position: relative;
	padding-block: clamp(5rem, 10vw, 8.5rem) clamp(4rem, 8vw, 6rem);
	color: var(--cream);
	overflow: hidden;
	isolation: isolate;
}

.horeca__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, #0f2e2d 0%, #1b1515 45%, #3a1230 100%);
	overflow: hidden;
}

.horeca__glow {
	position: absolute;
	width: 46vw;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
}

.horeca__glow--1 { top: -18%; left: -10%; background: radial-gradient(circle, #1fc7c1 0%, transparent 65%); animation: drift-a 18s ease-in-out infinite alternate; }
.horeca__glow--2 { top: 20%; right: -16%; background: radial-gradient(circle, #ff4f9a 0%, transparent 65%); animation: drift-b 22s ease-in-out infinite alternate; }
.horeca__glow--3 { bottom: -25%; left: 30%; background: radial-gradient(circle, #ffb36b 0%, transparent 65%); opacity: 0.3; animation: drift-c 26s ease-in-out infinite alternate; }

.horeca .grain {
	mix-blend-mode: overlay;
	opacity: 0.25;
}

/* Scritta gigante in trasparenza dietro al titolo */
.horeca__words {
	position: absolute;
	top: clamp(2.5rem, 5vw, 4rem);
	left: 0;
	right: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.horeca__words-track {
	display: flex;
	width: max-content;
	animation: marquee 60s linear infinite;
}

.horeca__words span {
	font-family: var(--f-display);
	font-size: clamp(5rem, 13vw, 12rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 247, 239, 0.12);
}

.horeca__head {
	display: grid;
	justify-items: center;
	max-width: 860px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.horeca__title {
	margin: 0.4rem 0 1rem;
	font-size: clamp(2.8rem, 6.4vw, 5.6rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.horeca__title span {
	display: block;
}

.horeca__title em {
	color: var(--yellow);
}

.horeca__lead {
	max-width: 52ch;
	margin: 0;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: rgba(255, 247, 239, 0.75);
}

.horeca__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.9rem, 1.6vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card sfalsate su desktop */
@media (min-width: 1101px) {
	.horeca-card:nth-child(even) {
		margin-top: 3rem;
	}
}

.horeca-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 247, 239, 0.14);
	border-radius: 26px;
	background: rgba(27, 21, 21, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	transition: transform 0.5s var(--ease), border-color 0.4s, background 0.4s;
}

.horeca-card:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 247, 239, 0.3);
	background: rgba(255, 247, 239, 0.09);
}

.horeca-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 4.6;
	overflow: hidden;
}

.horeca-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.horeca-card:hover .horeca-card__media img {
	transform: scale(1.07);
}

/* Sfumatura per leggere il titolo sopra la foto */
.horeca-card__media::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(transparent, rgba(27, 21, 21, 0.85));
	pointer-events: none;
}

.horeca-card__num {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 1;
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 1.9rem;
	padding-inline: 0.6rem;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.horeca-card:nth-child(2) .horeca-card__num { background: var(--lime); }
.horeca-card:nth-child(3) .horeca-card__num { background: var(--peach); }
.horeca-card:nth-child(4) .horeca-card__num { background: var(--pink-soft); }

.horeca-card__title {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 0.9rem;
	z-index: 1;
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}

.horeca-card__body {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 1.1rem 1.2rem 1.4rem;
}

.horeca-card__claim {
	margin: 0;
	font-family: var(--f-script);
	font-size: 1.45rem;
	line-height: 1.1;
	color: var(--yellow);
}

.horeca-card__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 247, 239, 0.75);
}

.horeca-card__points {
	display: grid;
	gap: 0.45rem;
	margin: 0.3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
	font-weight: 600;
}

.horeca-card__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.horeca-card__points li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: var(--cyan) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1515' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 11px no-repeat;
}

/* Nastro giallo inclinato con le caratteristiche */
.horeca__ribbon {
	margin: clamp(3.5rem, 7vw, 5.5rem) -2vw 0;
	padding-block: 1rem;
	border-block: 2px solid var(--ink);
	background: var(--yellow);
	color: var(--ink);
	overflow: hidden;
	transform: rotate(-1.5deg);
}

.horeca__ribbon-track {
	display: flex;
	width: max-content;
	animation: marquee 40s linear infinite;
}

.horeca__specs {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.horeca__specs li {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding-right: 1.4rem;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 1.8vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.horeca__specs li::after {
	content: "✦";
	font-size: 0.8em;
	color: var(--pink);
}

.horeca__foot {
	display: grid;
	justify-items: center;
	gap: 1.4rem;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	text-align: center;
}

.horeca__foot-text {
	max-width: 46ch;
	margin: 0;
	color: rgba(255, 247, 239, 0.8);
}

.horeca__foot-text .script {
	display: block;
	font-size: 2rem;
	line-height: 1;
	color: var(--pink);
	transform: rotate(-3deg);
}

.horeca .horeca__cta {
	--btn-bg: var(--yellow);
	--btn-fg: var(--ink);
}

.horeca .horeca__cta:hover {
	--btn-bg: var(--pink);
	--btn-fg: #fff;
}

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

@media (max-width: 760px) {
	/* Su mobile i box stanno uno sotto l'altro: niente scorrimento orizzontale,
	   che "catturava" il dito e bloccava lo scroll della pagina. */
	.horeca__cards {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.horeca-card {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(27, 21, 21, 0.72);
	}
	.horeca-card:hover {
		transform: none;
	}
	.horeca-card__media {
		aspect-ratio: 16 / 11;
	}
	.horeca-card__media img {
		object-position: 50% 35%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.horeca__words-track,
	.horeca__ribbon-track {
		animation: none;
	}
}

/* --- FAQ --- */
.faq__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.faq .section-head {
	position: sticky;
	top: calc(var(--header-h) + 2rem);
}

.faq__item {
	border-bottom: 1px solid var(--line);
}

.faq__item:first-child {
	border-top: 1px solid var(--line);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4rem 0;
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	font-weight: 650;
	font-variation-settings: "SOFT" 100;
	cursor: pointer;
	list-style: none;
}

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

.faq__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	transition: transform 0.4s var(--ease), background-color 0.3s;
}

.faq__icon .icon {
	width: 18px;
	height: 18px;
}

.faq__item[open] .faq__icon {
	transform: rotate(45deg);
	background: var(--yellow);
}

.faq__answer p {
	max-width: 40rem;
	padding-bottom: 1.4rem;
	margin: 0;
	color: var(--ink-soft);
}

@media (max-width: 860px) {
	.faq__grid {
		grid-template-columns: 1fr;
	}
	.faq .section-head {
		position: static;
	}
}

/* --- CTA finale --- */
.final-cta {
	position: relative;
	padding-block: clamp(6rem, 14vw, 11rem);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.final-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bg-alt);
	overflow: hidden;
}

.final-cta__inner {
	display: grid;
	justify-items: center;
}

.final-cta__script {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	transform: rotate(-3deg);
	margin-bottom: 0.4rem;
}

.final-cta__title {
	font-size: clamp(3.4rem, 12vw, 10rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.88;
	margin-bottom: 2.4rem;
}

/* 6. Pagine interne e blog ------------------------------------------------- */

.page-hero {
	position: relative;
	padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(2rem, 5vw, 3.5rem);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}

.page-title {
	font-size: clamp(2.6rem, 7vw, 5.6rem);
	margin: 0;
}

.entry-content {
	max-width: 760px;
	font-size: 1.1rem;
}

.entry-content h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	margin-top: 2em;
}

.entry-content h3 {
	font-size: 1.5rem;
	margin-top: 1.6em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
	margin-bottom: 1em;
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content .alignwide,
.entry-content .alignfull {
	max-width: none;
}

.entry-content .lead {
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 2rem;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content a {
	color: var(--ink);
	text-decoration-color: var(--pink);
}

.entry-content table {
	width: 100%;
	max-width: 520px;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

.entry-content td,
.entry-content th {
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

/* Dato aziendale non ancora inserito (vedi inc/company.php) */
.todo {
	padding: 0 0.3em;
	border-radius: 4px;
	background: #fff1a8;
	font-size: 0.9em;
}

.entry-cover img {
	width: 100%;
	border-radius: var(--radius);
	margin-bottom: 2.5rem;
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 2.5rem 1.5rem;
}

.post-card__link {
	display: block;
	text-decoration: none;
}

.post-card__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(145deg, var(--pink-soft), #ffe2c7);
	margin-bottom: 1rem;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.post-card__link:hover img {
	transform: scale(1.05);
}

.post-card__date {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 0.4rem;
}

.post-card__title {
	font-size: 1.6rem;
	margin-bottom: 0.4rem;
}

.post-card__excerpt {
	color: var(--ink-soft);
}

.pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	margin-top: 3rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}

.pagination .current {
	background: var(--ink);
	color: var(--cream);
}

.notfound {
	display: grid;
	place-items: center;
	min-height: 80vh;
	padding-top: var(--header-h);
	text-align: center;
}

.notfound .page-title {
	font-size: clamp(6rem, 22vw, 16rem);
	line-height: 0.9;
}

.notfound .script {
	font-size: 2rem;
	color: var(--pink);
}

/* 7. Footer ------------------------------------------------------------------- */

.site-footer {
	position: relative;
	background: var(--ink);
	color: var(--cream);
	overflow: hidden;
	padding-bottom: 2rem;
}

.site-footer__big {
	max-width: 1560px;
	margin: clamp(2.5rem, 6vw, 4.5rem) auto;
	padding-inline: var(--gutter);
	color: rgba(255, 247, 239, 0.3);
	user-select: none;
}

.site-footer__big .logo-svg {
	width: 100%;
	height: auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
}

.site-footer .brand,
.site-footer .custom-logo-link {
	margin-bottom: 1.2rem;
}

.site-footer .custom-logo-link img {
	filter: invert(1);
}

.site-footer__about p {
	max-width: 30rem;
	color: rgba(255, 247, 239, 0.72);
}

.site-footer__title {
	font-family: var(--f-body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 247, 239, 0.55);
	margin-bottom: 1.2rem;
}

.site-footer .menu {
	display: grid;
	gap: 0.55rem;
}

.site-footer .menu a {
	text-decoration: none;
}

.site-footer .menu a:hover {
	color: var(--yellow);
}

.social {
	display: flex;
	gap: 0.5rem;
}

.social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid rgba(255, 247, 239, 0.35);
	border-radius: 50%;
	transition: background-color 0.3s, color 0.3s;
}

.social a:hover {
	background: var(--cream);
	color: var(--ink);
}

.social .icon {
	width: 20px;
	height: 20px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 247, 239, 0.14);
	font-size: 0.85rem;
	color: rgba(255, 247, 239, 0.6);
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

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

/* 8. Animazioni e accessibilità ------------------------------------------------- */

/* Elementi che entrano allo scroll (gestiti da main.js). Senza JS restano visibili. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(40px);
}

.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	transition-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* Logo nel titolo della sezione "Dal negozio" */
.spotlight__title {
	display: grid;
	gap: 0.4rem;
}

.spotlight__logo {
	height: clamp(44px, 6vw, 72px);
}

.spotlight__title em {
	font-size: 0.55em;
}

/* --- Manifesto (home) --- */
.manifesto {
	text-align: center;
	background: var(--bg);
}

.manifesto__quote {
	margin: 0 auto 2.5rem;
	max-width: 980px;
}

.manifesto__quote p {
	margin: 0 0 0.6rem;
	font-family: var(--f-display);
	font-size: clamp(2.2rem, 5.6vw, 4.6rem);
	font-weight: 750;
	font-variation-settings: "SOFT" 100, "WONK" 1;
	line-height: 1.02;
	letter-spacing: -0.03em;
}

.manifesto__quote cite {
	display: inline-block;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-style: normal;
	color: var(--pink);
	transform: rotate(-2deg);
}

.manifesto__lead {
	max-width: 640px;
	margin: 0 auto 2.5rem;
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	color: var(--ink-soft);
}

.manifesto__lead strong {
	color: var(--ink);
}

.manifesto__glass {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.8rem, 2.5vw, 2rem);
	margin-bottom: 3rem;
}

.manifesto__glass li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	width: 120px;
	font-size: 0.9rem;
	font-weight: 600;
}

.manifesto__glass .illu {
	width: 84px;
	height: 84px;
}

.manifesto__glass b {
	position: absolute;
	top: 0;
	right: 10px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--cyan);
	font-size: 0.85rem;
}

.manifesto__glass .is-ko b {
	background: var(--pink);
	color: #fff;
}

.manifesto__glass .is-ko span {
	text-decoration: line-through;
	text-decoration-color: var(--pink);
	text-decoration-thickness: 2px;
}

.manifesto__answer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1rem;
	margin: 0 0 clamp(3rem, 6vw, 4.5rem);
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 650;
}

.manifesto__logo {
	height: clamp(36px, 5vw, 56px);
}

.manifesto__answer .script {
	font-family: var(--f-script);
	font-weight: 700;
	color: var(--pink);
	transform: rotate(-4deg);
}

/* Punti chiave con icona (home e scheda prodotto) */
.claims {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
	text-align: left;
}

.claims li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	border: 2px solid var(--ink);
	border-radius: 20px;
	background: var(--paper);
	box-shadow: 0 5px 0 var(--ink);
	font-size: 1rem;
	line-height: 1.3;
}

.claims strong {
	display: block;
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 750;
}

.claims__illu {
	flex: none;
	width: 64px;
	height: 64px;
}

@media (max-width: 860px) {
	.claims {
		grid-template-columns: 1fr;
	}
}

/* Motto nel footer */
.site-footer__motto {
	display: block;
	margin: -0.6rem 0 1rem;
	font-size: 1.6rem;
	color: var(--pink);
}

/* --- Invito alla personalizzazione (home) --- */
.teaser {
	background: var(--bg-alt);
	overflow: hidden;
}

.teaser__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.teaser__visual {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.5rem;
}

.teaser__straws {
	display: grid;
	gap: clamp(1rem, 2.2vw, 1.8rem);
	width: 100%;
	transform: rotate(-7deg);
}

/* Le cannucce sono più larghe della colonna ed escono a destra: la punta con la stampa resta in vista. */
.teaser__straw {
	width: 128%;
}

.teaser__straw--1 {
	margin-left: -7%;
}

.teaser__straw--2 {
	margin-left: 4%;
}

.teaser__note {
	justify-self: start;
	max-width: 30ch;
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.teaser__note .script {
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--pink);
	transform: rotate(-3deg);
}

@media (max-width: 860px) {
	.teaser__grid {
		grid-template-columns: 1fr;
	}
	.teaser__straw {
		width: 165%;
	}
}

/* --- Cannuccia reale con la stampa personalizzata (home e scheda prodotto) ---
   La foto (1400×88) è riempita dalla cannuccia, con la punta aperta a sinistra.
   Misure in cqw = percentuali della larghezza della cannuccia, così la stampa scala con lei:
   24 caratteri arrivano a circa un terzo della lunghezza, come in produzione. */
.real-straw {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1400 / 88;
	filter: drop-shadow(0 14px 14px rgba(27, 21, 21, 0.16));
}

.real-straw__img {
	display: block;
	width: 100%;
	height: 100%;
}

.real-straw__img--flat {
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 35%, transparent 70%, rgba(0, 0, 0, 0.15)), var(--straw);
}

.real-straw__print {
	position: absolute;
	top: 50%;
	left: 7.5cqw;
	max-width: 52cqw;
	overflow: hidden;
	/* Un solo carattere, sans serif standard, come la stampa vera. */
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 2.55cqw;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	/* Inchiostro alimentare poco marcato: si fonde con il colore e la grana della cannuccia. */
	color: #3a2a2a;
	opacity: 0.52;
	mix-blend-mode: multiply;
	filter: blur(0.35px);
	transform: translateY(-50%) scaleY(0.94);
	transition: opacity 0.3s;
}

.real-straw.is-dark .real-straw__print {
	color: #fff4e6;
	opacity: 0.6;
	mix-blend-mode: screen;
}

.real-straw.is-empty .real-straw__print {
	opacity: 0.3;
}

/* Mentre la stampa scorre: un lieve bagliore sulla punta */
.real-straw__print::after {
	content: "";
	display: inline-block;
	width: 0.08em;
	height: 0.9em;
	margin-left: 0.08em;
	vertical-align: -0.1em;
	background: currentColor;
	opacity: 0;
}

.real-straw.is-printing .real-straw__print::after {
	opacity: 0.8;
}

/* --- Torna su: cannuccia verticale che si riempie scorrendo --- */
.back-to-top {
	--progress: 0;
	position: fixed;
	right: clamp(0.8rem, 2vw, 1.6rem);
	bottom: clamp(0.8rem, 2vw, 1.6rem);
	z-index: 90;
	display: grid;
	justify-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0.4s;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.back-to-top__arrow {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: -12px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--yellow);
	transition: transform 0.4s var(--ease);
}

.back-to-top__straw {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 128px;
	overflow: hidden;
	border: 0;
	border-radius: 7px;
	background: var(--paper);
	box-shadow: 0 8px 20px -8px rgba(27, 21, 21, 0.35), inset 0 0 0 1px rgba(27, 21, 21, 0.08);
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

/* Il "drink" che sale: righe diagonali come una cannuccia a strisce */
.back-to-top__fill {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, 0.35) 7px 14px),
		linear-gradient(0deg, var(--pink), #ff8ac0);
	transform: translateY(calc((1 - var(--progress)) * 100%));
	transition: transform 0.25s linear;
}

.back-to-top__label {
	position: relative;
	padding-top: 10px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.back-to-top:hover .back-to-top__arrow,
.back-to-top:focus-visible .back-to-top__arrow {
	transform: translateY(-6px);
}

.back-to-top:hover .back-to-top__straw {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(27, 21, 21, 0.4), inset 0 0 0 1px rgba(27, 21, 21, 0.08);
}

.back-to-top:hover .back-to-top__arrow svg {
	animation: btt-bounce 0.8s var(--ease) infinite;
}

@keyframes btt-bounce {
	50% { transform: translateY(-3px); }
}

.back-to-top:focus-visible {
	outline: none;
}

.back-to-top:focus-visible .back-to-top__straw {
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
}

.drawer-open .back-to-top {
	opacity: 0;
	visibility: hidden;
}

@media (max-width: 700px) {
	.back-to-top__arrow {
		width: 34px;
		height: 34px;
		margin-bottom: -10px;
	}
	.back-to-top__straw {
		width: 28px;
		height: 96px;
	}
	.back-to-top__label {
		font-size: 0.56rem;
	}
}

/* --- Fondo del footer: dati e link legali a sinistra, pagamenti e firma a destra --- */
.site-footer__legal {
	align-items: center;
}

.site-footer__legal-main {
	display: grid;
	gap: 0.7rem;
}

.site-footer__legal-side {
	display: grid;
	justify-items: end;
	gap: 0.7rem;
}

.site-footer__credit {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 247, 239, 0.6);
}

.site-footer__credit strong {
	color: var(--cream);
	font-weight: 600;
}

@media (max-width: 760px) {
	.site-footer__legal-side {
		justify-items: start;
	}
}

.heart {
	display: inline-block;
	color: var(--pink);
	vertical-align: -0.2em;
	animation: heart-beat 1.6s ease-in-out infinite;
}

.heart svg {
	display: block;
}

@keyframes heart-beat {
	0%, 40%, 100% { transform: scale(1); }
	15% { transform: scale(1.18); }
	28% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.announce__track {
		animation: none;
	}
}

/* Header su mobile */
@media (max-width: 960px) {
	:root {
		--header-h: 74px;
	}
	.has-announce {
		--header-h: 110px;
	}
	.site-header__sep,
	.cart-pill .cart-total {
		display: none;
	}
	.cart-pill {
		padding: 0;
	}
}

/* ==========================================================================
   Decorazioni delle sezioni (sorbos_deco)
   ========================================================================== */

.has-deco {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

.has-deco > .container,
.has-deco > .final-cta__inner {
	position: relative;
	z-index: 1;
}

.deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.deco__item {
	position: absolute;
	width: var(--w);
	transform: rotate(var(--r));
}

.deco__item .illu {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 16px 16px rgba(27, 21, 21, 0.14));
}

.deco__fruit .illu {
	animation: float-spin 8s ease-in-out infinite alternate;
}

.deco__fruit:nth-child(2n) .illu {
	animation-duration: 10s;
	animation-delay: -4s;
}

.deco__blob {
	position: absolute;
	width: var(--w);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--bc) 0%, transparent 68%);
	filter: blur(30px);
	opacity: 0.85;
}

.deco__dots {
	position: absolute;
	width: var(--w);
	aspect-ratio: 1;
	background-image: radial-gradient(var(--ink) 1.3px, transparent 1.6px);
	background-size: 16px 16px;
	opacity: 0.1;
	-webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
	mask: radial-gradient(circle, #000 30%, transparent 70%);
}

.deco__grain {
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	opacity: 0.22;
	mix-blend-mode: multiply;
}

/* "I gusti": niente più grigio piatto */
.flavors {
	background: #fffaf6;
}

.flavors .flavor-card__link {
	box-shadow: 0 0 0 2px var(--ink), 0 6px 0 var(--ink);
}

.flavors .flavor-card__link:hover {
	box-shadow: 0 0 0 2px var(--ink), 0 12px 0 var(--ink);
}

/* CTA finale più accesa */
.final-cta__bg {
	background: #ffd9e8;
}

.final-cta .blob--1 { background: radial-gradient(circle, #ff7eb6 0%, transparent 70%); }
.final-cta .blob--2 { background: radial-gradient(circle, #ffb36b 0%, transparent 70%); }
.final-cta .blob--3 { background: radial-gradient(circle, #c88bff 0%, transparent 70%); }

.final-cta {
	isolation: isolate;
	overflow: clip;
}

.final-cta .deco {
	z-index: 0;
}

.final-cta__inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 760px) {
	.deco__fruit {
		width: calc(var(--w) * 2.2) !important;
	}
	.deco__straw {
		width: calc(var(--w) * 1.8) !important;
		opacity: 0.8;
	}
}

/* Menu mobile aperto: l'header non deve "contenere" il pannello (la sfocatura e la traslazione
   lo limiterebbero all'altezza dell'header), così il menu copre tutto lo schermo. */
@media (max-width: 960px) {
	.nav-open .site-header,
	.nav-open .site-header.is-scrolled,
	.nav-open .site-header.is-hidden {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transform: none;
		background: var(--bg);
		box-shadow: none;
	}

	.site-nav {
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		align-content: start;
		padding-top: calc(var(--header-h) + 2.5rem);
	}

	.nav-open .site-nav .menu li {
		animation: nav-item-in 0.6s var(--ease) both;
	}

	.nav-open .site-nav .menu li:nth-child(2) { animation-delay: 0.05s; }
	.nav-open .site-nav .menu li:nth-child(3) { animation-delay: 0.1s; }
	.nav-open .site-nav .menu li:nth-child(4) { animation-delay: 0.15s; }
	.nav-open .site-nav .menu li:nth-child(5) { animation-delay: 0.2s; }
	.nav-open .site-nav .menu li:nth-child(6) { animation-delay: 0.25s; }

	.nav-open .back-to-top {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes nav-item-in {
	from { opacity: 0; transform: translateY(18px); }
}

/* Decorazione in fondo al menu mobile */
.site-nav__deco {
	display: none;
}

@media (max-width: 960px) {
	.site-nav__deco {
		position: relative;
		display: block;
		height: 220px;
		margin-top: 2rem;
		pointer-events: none;
	}
	.site-nav__deco .script {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
		font-size: 1.9rem;
		color: var(--pink);
		transform: rotate(-4deg);
	}
	.site-nav__straw {
		position: absolute;
		width: 78vw;
		height: auto;
	}
	.site-nav__straw--1 { left: -14vw; top: 70px; transform: rotate(-10deg); }
	.site-nav__straw--2 { right: -18vw; top: 140px; transform: rotate(8deg); }
	.site-nav__fruit {
		position: absolute;
		width: 64px;
		height: 64px;
		animation: float-spin 7s ease-in-out infinite alternate;
	}
	.site-nav__fruit--1 { right: 12%; top: 10px; }
	.site-nav__fruit--2 { left: 40%; top: 150px; animation-delay: -3s; }
}

/* Menu mobile spostato fuori dall'header (vedi placeNav in main.js): sta sotto l'header,
   che resta visibile con logo e pulsante di chiusura, ma sopra tutta la pagina. */
@media (max-width: 960px) {
	.site-nav.is-detached {
		z-index: 99;
		visibility: hidden;
		transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s;
	}

	.nav-open .site-nav.is-detached {
		visibility: visible;
		transition: clip-path 0.7s var(--ease), visibility 0s;
	}

	html:has(body.nav-open) {
		overflow: hidden;
	}
}

/* Il menu mobile scorre solo in verticale: le cannucce decorative escono dai lati
   ma vengono tagliate, così il pannello non si sposta più di lato. */
@media (max-width: 960px) {
	.site-nav {
		overflow-x: hidden;
		touch-action: pan-y;
	}

	.site-nav__deco {
		overflow: hidden;
		margin-inline: calc(var(--gutter) * -1);
	}

	.site-nav__deco .script {
		left: var(--gutter);
	}
}

/* ==========================================================================
   Fascia "Drink it, bite it" (template-parts/home/bite.php)
   ========================================================================== */

.bite {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(460px, 43vw, 760px);
	overflow: clip;
	background: #ff5f87;
	color: var(--cream);
}

.bite__media {
	position: absolute;
	inset: 0;
}

.bite__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	transform-origin: 75% 45%;
}

.bite__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(3rem, 6vw, 6rem);
}

.bite__copy {
	max-width: 34rem;
}

.bite__crunch {
	margin: 0 0 0.2rem;
	font-size: clamp(2rem, 3.4vw, 3rem);
	color: var(--yellow);
	transform: rotate(-6deg);
	transform-origin: left center;
}

.bite__title {
	margin: 0 0 1.2rem;
	font-size: clamp(3rem, 7vw, 6.6rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: var(--cream);
	text-shadow: 0 6px 30px rgba(120, 10, 50, 0.25);
}

.bite__title em {
	display: block;
	font-style: italic;
	color: var(--ink);
	text-shadow: none;
}

.bite__lead {
	max-width: 26rem;
	margin: 0 0 2rem;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	line-height: 1.5;
}

@media (max-width: 760px) {
	/* Mobile: niente taglio netto tra testo e foto. Il fondo sfuma verso il rosa della foto
	   e la foto entra dal basso in dissolvenza, lasciando aria sotto il pulsante. */
	.bite {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		background: linear-gradient(180deg, #ff5f87 0%, #ff74a0 45%, #fd8cb8 100%);
	}

	.bite__media {
		position: relative;
		order: 2;
		aspect-ratio: 1;
		margin-top: -22vw;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 34%);
		mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 16%, #000 34%);
	}

	.bite__img {
		object-position: center;
	}

	.bite__inner {
		order: 1;
		padding-block: 3.2rem 3.5rem;
		text-align: center;
	}

	.bite__copy,
	.bite__lead {
		margin-inline: auto;
	}

	.bite__crunch {
		transform-origin: center;
	}
}

/* ==========================================================================
   Card dei gusti con foto scontornate (assets/img/card/): inclinazione 3D,
   cannuccia morsa al passaggio del mouse e "+" che aggiunge al carrello
   ========================================================================== */

.flavor-card {
	position: relative;
	container-type: inline-size;
}

/* Inclinazione: una sola transizione morbida, sia entrando sia uscendo (niente cambi di velocità) */
.flavor-card.has-photo .flavor-card__link {
	transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.flavor-card.has-photo:hover .flavor-card__link {
	--lift: -8px;
	box-shadow: 0 0 0 2px var(--ink), 0 12px 0 var(--ink);
}

/* Contenitore delle due foto: movimento, zoom e ombra stanno qui (una sola ombra, mai sommata) */
.flavor-card__photos {
	position: absolute;
	inset: 0 0 1%;
	transform: translate3d(calc(3% + var(--mx, 0px)), var(--my, 0px), 0) scale(var(--zoom, 1));
	filter: drop-shadow(0 22px 22px rgba(27, 21, 21, 0.28));
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.flavor-card:hover,
.flavor-card.is-bitten {
	--zoom: 1.03;
}

.flavor-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Morso: scambio istantaneo tra foto intera e foto morsa (come un vero "crunch"),
 * senza dissolvenze che farebbero vedere insieme le due cannucce e le due ombre.
 * Lo scatto della composizione usa le proprietà scale/rotate, separate da transform,
 * così non interferisce con l'inclinazione che segue il mouse.
 */
.flavor-card__photo--bite {
	visibility: hidden;
}

.flavor-card.bite-ready:hover .flavor-card__photo--bite,
.flavor-card.bite-ready.is-bitten .flavor-card__photo--bite {
	visibility: visible;
}

.flavor-card.bite-ready:hover .flavor-card__photo:not(.flavor-card__photo--bite),
.flavor-card.bite-ready.is-bitten .flavor-card__photo:not(.flavor-card__photo--bite) {
	visibility: hidden;
}

.flavor-card.bite-ready:hover .flavor-card__photos,
.flavor-card.bite-ready.is-bitten .flavor-card__photos {
	animation: card-crunch 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes card-crunch {
	0% { scale: 1; rotate: 0deg; }
	30% { scale: 1.035; rotate: -1.2deg; }
	65% { scale: 0.995; rotate: 0.5deg; }
	100% { scale: 1; rotate: 0deg; }
}

/* Pulsante "+": in basso a destra della foto, dove le composizioni lasciano spazio libero */
.flavor-card__add {
	/* La foto è quadrata e larga quanto la card: 100cqw = altezza della foto */
	top: calc(100cqw - 44px - 0.9rem);
	z-index: 3;
	padding: 0;
	border: 2px solid var(--ink);
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 3px 0 var(--ink);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
}

.flavor-card__add .icon {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.flavor-card__add .icon--check {
	display: none;
}

.flavor-card__add:hover,
.flavor-card__add:focus-visible {
	background: var(--yellow);
	transform: scale(1.08);
}

.flavor-card__add:hover .icon--plus {
	transform: rotate(90deg);
}

.flavor-card__add.is-loading .icon--plus {
	animation: add-spin 0.8s linear infinite;
}

.flavor-card__add.is-added {
	background: #7ed957;
}

.flavor-card__add.is-added .icon--plus {
	display: none;
}

.flavor-card__add.is-added .icon--check {
	display: block;
}

/* Etichetta "Aggiungi": sopra il pulsante, centrata, compare quando si passa sulla card */
.flavor-card__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.45rem);
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.flavor-card:hover .flavor-card__add:not(.is-added) .flavor-card__tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

@keyframes add-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.flavor-card__add {
		top: calc(100cqw - 34px - 0.55rem);
		box-shadow: 0 2px 0 var(--ink);
	}

	.flavor-card__tip {
		display: none;
	}

	.flavor-card__photos {
		filter: drop-shadow(0 12px 12px rgba(27, 21, 21, 0.25));
	}
}

@media (prefers-reduced-motion: reduce) {
	.flavor-card.has-photo .flavor-card__link {
		transform: none !important;
	}

	.flavor-card__photos {
		transform: translateX(3%) !important;
		animation: none !important;
	}
}

/* ==========================================================================
   "Tre gesti, zero rifiuti" (template-parts/home/ritual.php):
   tre pannelli con video; su desktop quello attivo si allarga
   ========================================================================== */

.gestures {
	background: #fffaf6;
}

.gestures__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.gestures__head .section-title {
	margin: 0;
}

.gestures__lead {
	max-width: 24rem;
	margin: 0;
	color: var(--ink-soft);
	font-size: 1.05rem;
	line-height: 1.5;
}

.gestures__list {
	display: flex;
	gap: clamp(0.7rem, 1.2vw, 1.1rem);
	height: clamp(440px, 68vh, 640px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gesture {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	background: #ff9ec4;
	box-shadow: 0 0 0 2px var(--ink), 0 6px 0 var(--ink);
	transition: flex-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
}

.gesture.is-active {
	flex-grow: 2.3;
}

.gesture:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 4px;
}

.gesture__media {
	position: absolute;
	inset: 0;
}

.gesture__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	filter: saturate(0.8) brightness(0.9);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.gesture.is-active .gesture__video {
	transform: scale(1);
	filter: none;
}

.gesture__poster {
	position: absolute;
	inset: 0;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease, opacity 0.5s ease;
}

.gesture.is-playing .gesture__poster {
	opacity: 0;
}

/* Sfumatura scura in basso per leggere il testo sopra il video */
.gesture__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(27, 21, 21, 0.15) 0%, rgba(27, 21, 21, 0) 30%, rgba(27, 21, 21, 0) 48%, rgba(27, 21, 21, 0.7) 100%);
	pointer-events: none;
}

.gesture__n {
	position: absolute;
	top: 1rem;
	left: 1.3rem;
	z-index: 2;
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	line-height: 1;
	color: var(--cream);
	text-shadow: 0 3px 16px rgba(27, 21, 21, 0.35);
	transform: rotate(-6deg);
	transform-origin: left center;
}

.gesture__body {
	position: absolute;
	left: clamp(1.1rem, 2vw, 1.8rem);
	right: clamp(1.1rem, 2vw, 1.8rem);
	bottom: clamp(1.4rem, 2.4vw, 2.2rem);
	z-index: 2;
	color: var(--cream);
}

.gesture__title {
	margin: 0;
	font-size: clamp(1.8rem, 2.8vw, 2.9rem);
	line-height: 1;
	color: var(--cream);
	white-space: nowrap;
}

.gesture__text {
	max-width: 26rem;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	font-size: 1.02rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(12px);
	transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1), margin 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gesture.is-active .gesture__text {
	max-height: 8rem;
	margin-top: 0.6rem;
	opacity: 1;
	transform: none;
	transition-delay: 0.2s;
}

/* Barra di avanzamento: visibile quando i pannelli scorrono da soli */
.gesture__bar {
	position: absolute;
	left: clamp(1.1rem, 2vw, 1.8rem);
	right: clamp(1.1rem, 2vw, 1.8rem);
	bottom: 0.8rem;
	z-index: 2;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 247, 239, 0.3);
	opacity: 0;
	transition: opacity 0.3s;
}

.gesture__bar i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--yellow);
}

.gestures__list.is-auto .gesture.is-active .gesture__bar {
	opacity: 1;
}

.gestures__list.is-auto .gesture.is-active .gesture__bar i {
	animation: gesture-bar var(--gesture-time, 5s) linear forwards;
}

@keyframes gesture-bar {
	to { width: 100%; }
}

/* Mobile e tablet: pannelli uno sotto l'altro, testi sempre visibili */
@media (max-width: 860px) {
	.gestures__list {
		flex-direction: column;
		height: auto;
	}

	.gesture {
		flex: none;
		aspect-ratio: 4 / 3.4;
		cursor: default;
	}

	.gesture__video,
	.gesture.is-active .gesture__video {
		transform: none;
		filter: none;
		object-position: 50% 12%;
	}

	.gesture__shade {
		background: linear-gradient(180deg, rgba(27, 21, 21, 0.15) 0%, rgba(27, 21, 21, 0) 28%, rgba(27, 21, 21, 0) 38%, rgba(27, 21, 21, 0.78) 100%);
	}

	.gesture__text,
	.gesture.is-active .gesture__text {
		max-height: none;
		margin-top: 0.5rem;
		opacity: 1;
		transform: none;
	}

	.gesture__bar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gesture,
	.gesture__video,
	.gesture__text {
		transition: none !important;
	}
}

/* "Tre gesti": sfondo decorato (sorbos_deco). Su mobile restano solo colori e puntini. */
.gestures.has-deco {
	background: #fff7f1;
}

@media (max-width: 860px) {
	.gestures .deco__item {
		display: none;
	}
}

/* ==========================================================================
   Hero "palco colorato" (template-parts/home/hero.php)
   Il colore di fondo (--hero-bg) viene letto dal video a ogni fotogramma:
   video e pagina diventano un'unica superficie colorata.
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-h) + 1.5rem) 0 4.5rem;
	overflow: hidden;
	background-color: var(--hero-bg, #fb568e);
	color: var(--ink);
	transition: background-color 0.2s linear;
}

.hero__grid {
	display: grid;
	max-width: 1500px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	grid-template-areas:
		"head stage"
		"body stage";
	align-items: center;
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: 1.6rem;
}

.hero__head {
	grid-area: head;
	align-self: end;
}

.hero__body {
	grid-area: body;
	align-self: start;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.hero__eyebrow .script {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	transform: rotate(-4deg);
}

.hero__logo {
	height: clamp(26px, 2.4vw, 34px);
}

.hero__title {
	margin: 0;
	/* Legata alla larghezza della colonna: "La cannuccia" sta sempre su una riga */
	font-size: clamp(3rem, 6.6vw, 6.6rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var(--ink);
}

.hero__title .line {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	/* Spazio sotto per le lettere che scendono (g, q, p): la maschera dell'animazione non le taglia */
	padding-bottom: 0.2em;
	margin-bottom: -0.14em;
}

.hero__title .line > span {
	display: inline-block;
}

/* "mangia." in corsivo con una pennellata chiara dietro: si legge su ogni colore del video */
.hero__title em {
	font-style: italic;
	color: var(--ink);
	background: linear-gradient(transparent 58%, rgba(255, 247, 239, 0.8) 58%, rgba(255, 247, 239, 0.8) 90%, transparent 90%);
	padding: 0 0.06em;
}

.hero__lead {
	max-width: 32rem;
	margin: 0 0 1.8rem;
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	line-height: 1.5;
	font-weight: 500;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-bottom: 1.8rem;
}

.hero .btn--ghost {
	border-color: var(--ink);
	background: rgba(255, 255, 255, 0.18);
}

.hero .btn--ghost:hover {
	background: var(--paper);
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	font-size: 0.86rem;
	font-weight: 700;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hero__proof li::before {
	content: "✦";
	font-size: 0.8em;
}

/* Palco del video: quadrato, bordi sfumati per fondersi col colore della pagina */
.hero__stage {
	grid-area: stage;
	position: relative;
	justify-self: center;
	width: min(100%, calc(100svh - var(--header-h) - 2.5rem));
	aspect-ratio: 1;
}

/* Cornice del video: bordi sfumati, così il fondo del video si scioglie nel colore della pagina */
.hero__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Sfumatura ellittica: gli angoli (dove il video ha una leggera vignettatura) spariscono del tutto,
	   mentre punta della cannuccia e bicchiere restano nitidi */
	/* Sfumatura che arriva a trasparenza completa su tutti e quattro i bordi (nessun riquadro visibile):
	   ampia ai lati, più corta sopra (punta della cannuccia) e sotto (base del bicchiere) */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
	mask-composite: intersect;
}

/* Inquadratura ingrandita: il fondo è a tinta unita, quindi lo "zoom" non perde nulla */
.hero__video,
.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.15);
	transform-origin: 50% 51%;
}

.hero__poster {
	transition: opacity 0.5s ease;
}

.hero.is-playing .hero__poster {
	opacity: 0;
}

/* Etichetta "Gusto × Drink" sotto il bicchiere */
.hero__pair {
	position: absolute;
	left: 50%;
	bottom: 3%;
	z-index: 2;
	margin: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}

.hero__pair span {
	display: inline-block;
	padding: 0.35rem 1rem 0.4rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	box-shadow: 0 4px 0 var(--ink);
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	font-weight: 700;
}

.hero__pair span.is-in {
	animation: pair-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pair-in {
	from { opacity: 0; transform: translateY(8px) scale(0.92); }
}

/* Invito a scorrere */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 1.2rem;
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	transform: translateX(-50%);
}

.hero__scroll::after {
	content: "";
	width: 2px;
	height: 26px;
	background: var(--ink);
	transform-origin: top;
	animation: hero-scroll 1.8s ease-in-out infinite;
}

@keyframes hero-scroll {
	0% { transform: scaleY(0); }
	50% { transform: scaleY(1); transform-origin: top; }
	51% { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Tablet e mobile: titolo, video, poi testo e pulsanti; tutto centrato */
@media (max-width: 860px) {
	.hero {
		min-height: 0;
		padding: calc(var(--header-h) + 0.8rem) 0 3.5rem;
		text-align: center;
	}

	.hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"stage"
			"body";
		row-gap: 0.4rem;
	}

	.hero__eyebrow {
		justify-content: center;
		margin-bottom: 0.6rem;
	}

	.hero__title {
		font-size: clamp(2.9rem, 12.5vw, 4.6rem);
	}

	.hero__lead {
		margin-inline: auto;
		margin-bottom: 1.3rem;
	}

	.hero__cta,
	.hero__proof {
		justify-content: center;
	}

	.hero__proof li {
		font-size: 0.78rem;
	}

	.hero__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero,
	.hero__poster {
		transition: none;
	}

	.hero__scroll::after,
	.hero__pair span.is-in {
		animation: none;
	}
}


/* Hero: dettagli attorno al bicchiere ------------------------------------- */

/* Cristalli di zucchero che salgono piano attorno al bicchiere */
.hero__sugar {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero__sugar i {
	position: absolute;
	left: var(--x);
	bottom: 6%;
	width: calc(9px * var(--s));
	height: calc(9px * var(--s));
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
	opacity: 0;
	animation: hero-sugar var(--d) ease-in var(--delay) infinite;
}

@keyframes hero-sugar {
	0% { opacity: 0; transform: translateY(0) rotate(0deg); }
	15% { opacity: 0.9; }
	80% { opacity: 0.6; }
	100% { opacity: 0; transform: translateY(-75vh) rotate(220deg); }
}

/* Bollino rotante in alto a sinistra del video */
.hero__badge {
	position: absolute;
	top: 7%;
	left: 4%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: clamp(96px, 9vw, 140px);
	aspect-ratio: 1;
	filter: drop-shadow(0 5px 0 var(--ink));
}

.hero__badge svg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	animation: hero-badge 16s linear infinite;
}

.hero__badge text {
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	fill: var(--ink);
}

.hero__badge-center {
	/* Sopra al cerchio che ruota (la rotazione lo porterebbe in primo piano) */
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	display: grid;
	justify-items: center;
	font-family: var(--f-script);
	font-size: clamp(0.95rem, 1.1vw, 1.25rem);
	line-height: 0.9;
	color: var(--ink);
}

.hero__badge-center strong {
	font-family: var(--f-display);
	font-size: 2em;
	font-weight: 800;
	font-style: normal;
}

@keyframes hero-badge {
	to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
	.hero__stage {
		width: min(96vw, 52svh);
	}

	.hero__badge {
		top: 2%;
		left: auto;
		right: 0;
		width: 84px;
	}

	.hero__badge text {
		font-size: 16px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.hero__words-track,
	.hero__badge svg,
	.hero__sugar i {
		animation: none;
	}

	.hero__sugar {
		display: none;
	}
}


/* Hero: sfondo vivo ------------------------------------------------------- */

.hero__grid {
	position: relative;
	z-index: 1;
}

.hero__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Solo sul lato del testo: le luci non devono passare dietro al video (rifarebbero l'alone) */
	-webkit-mask-image: linear-gradient(to right, #000 38%, transparent 56%);
	mask-image: linear-gradient(to right, #000 38%, transparent 56%);
}

/* Macchie di luce: bianche e scure in trasparenza, quindi stanno bene su ogni colore del video */
.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform;
}

.hero__glow--1 {
	width: 46vw;
	height: 46vw;
	left: -12vw;
	top: -14vw;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 65%);
	animation: hero-glow-a 16s ease-in-out infinite alternate;
}

.hero__glow--2 {
	width: 40vw;
	height: 40vw;
	left: 18vw;
	bottom: -18vw;
	background: radial-gradient(circle, rgba(27, 21, 21, 0.14) 0%, rgba(27, 21, 21, 0) 65%);
	animation: hero-glow-b 20s ease-in-out infinite alternate;
}

.hero__glow--3 {
	width: 30vw;
	height: 30vw;
	left: 26vw;
	top: 8vw;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);
	animation: hero-glow-c 13s ease-in-out infinite alternate;
}

@keyframes hero-glow-a {
	to { transform: translate(14vw, 10vw) scale(1.15); }
}

@keyframes hero-glow-b {
	to { transform: translate(-12vw, -8vw) scale(0.85); }
}

@keyframes hero-glow-c {
	to { transform: translate(-16vw, 14vw) scale(1.25); }
}

/* Luce che segue il mouse (desktop) */
.hero__spot {
	position: absolute;
	inset: 0;
	background: radial-gradient(520px circle at var(--spot-x, 30%) var(--spot-y, 40%), rgba(255, 255, 255, 0.26), transparent 62%);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.hero.has-spot .hero__spot {
	opacity: 1;
}

/* Grana leggera: toglie l'effetto "colore piatto" */
.hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (max-width: 860px) {
	/* Su mobile il video è al centro: le luci restano sopra il titolo e sotto il video */
	.hero__ambient {
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 34%, transparent 70%, #000 82%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 34%, transparent 70%, #000 82%);
	}

	.hero__glow--1 { width: 90vw; height: 90vw; left: -30vw; top: -20vw; }
	.hero__glow--2 { width: 80vw; height: 80vw; left: 20vw; bottom: -30vw; }
	.hero__glow--3 { display: none; }
	.hero__spot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__glow {
		animation: none;
	}
}


/* Hero: scritte giganti a tutta larghezza, inclinate come la fascia nera sotto la hero */
.hero__words {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	align-content: space-around;
	padding-block: 14vh 8vh;
	overflow: hidden;
	pointer-events: none;
}

.hero__words-row {
	transform: rotate(-1.5deg);
	white-space: nowrap;
}

.hero__words-track {
	display: flex;
	width: max-content;
	animation: hero-words 60s linear infinite;
}

.hero__words-row--b .hero__words-track {
	animation-direction: reverse;
	animation-duration: 70s;
}

.hero__words span {
	padding-right: 0.35em;
	font-family: var(--f-display);
	font-size: clamp(4rem, 9vw, 10rem);
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(255, 255, 255, 0.2);
}

.hero__words-row--b span {
	color: rgba(27, 21, 21, 0.06);
}

@keyframes hero-words {
	to { transform: translateX(-50%); }
}

@media (max-width: 860px) {
	.hero__words {
		padding-block: 18vh 10vh;
	}
}

/* Infografica con la foto vera della cannuccia: niente icone disegnate, solo note e frecce a mano */
.straw-info--photo .straw-info__icon {
	display: none;
}

.straw-info--photo .straw-info__straw {
	margin-inline: -3%;
	padding-block: 1.2rem;
}

.straw-info__photo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 22px 22px rgba(27, 21, 21, 0.18));
	transform: rotate(-1.5deg);
}

@media (max-width: 760px) {
	/* Mobile: cannuccia più piccola, staccata dai bordi e leggermente inclinata, in cima;
	   sotto, le note diventano schede ordinate. */
	.straw-info--photo {
		gap: 0.9rem;
	}

	.straw-info--photo::before {
		inset: 0 0 auto;
		height: 160px;
	}

	.straw-info--photo .straw-info__straw {
		display: block;
		grid-row: auto;
		order: -1;
		width: 88%;
		margin: 0.4rem auto 1.6rem;
		padding-block: 1.2rem;
	}

	.straw-info--photo .straw-info__photo {
		transform: rotate(-7deg);
	}

	.straw-info--photo .straw-info__item {
		grid-template-columns: 1fr;
		padding: 1rem 1.2rem;
		border: 1.5px solid var(--line);
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.85);
		box-shadow: 0 10px 24px -18px rgba(27, 21, 21, 0.35);
	}

	.straw-info--photo .straw-info__item > * {
		grid-column: 1 !important;
	}

	.straw-info--photo .straw-info__note {
		font-size: 1.35rem;
		line-height: 1.25;
	}
}

/* ==========================================================================
   Kit assaggio "Scegli 4 gusti" (template-parts/home/products.php)
   ========================================================================== */

.kit__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.kit__media {
	position: relative;
}

.kit__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: 0 0 0 2px var(--ink), 0 10px 0 var(--ink);
}

.kit__sticker {
	position: absolute;
	top: -1.2rem;
	right: -1.2rem;
	display: grid;
	place-items: center;
	align-content: center;
	width: clamp(110px, 10vw, 140px);
	aspect-ratio: 1;
	margin: 0;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 5px 0 var(--ink);
	text-align: center;
	line-height: 1;
	transform: rotate(10deg);
}

.kit__sticker span {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kit__sticker strong {
	font-family: var(--f-script);
	font-size: clamp(2rem, 2.8vw, 2.6rem);
	color: var(--pink);
}

.kit__slots {
	display: grid;
	grid-template-columns: repeat(var(--kit-size, 3), minmax(0, 1fr));
	gap: 0.8rem;
	margin: 1.6rem 0 1.2rem;
	padding: 0;
	list-style: none;
}

.kit__slot {
	display: grid;
	place-items: center;
	min-height: 104px;
	border: 2px dashed rgba(27, 21, 21, 0.35);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.5);
	transition: border-color 0.3s, background-color 0.3s;
}

.kit__slot.is-filled {
	border: 2px solid var(--ink);
	background: var(--paper);
	box-shadow: 0 4px 0 var(--ink);
	animation: kit-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kit__slot-n {
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 800;
	color: rgba(27, 21, 21, 0.25);
}

.kit__slot-btn {
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	width: 100%;
	padding: 0.4rem;
	border: 0;
	background: none;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}

.kit__slot-btn img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.kit__slot-btn::after {
	content: "✕";
	position: absolute;
	margin: -0.2rem 0 0 4.4rem;
	font-size: 0.75rem;
	opacity: 0.5;
}

@keyframes kit-pop {
	from { transform: scale(0.85); }
}

.kit__flavors {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.6rem;
	padding: 0;
	list-style: none;
}

.kit__flavor {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.85rem 0.25rem 0.3rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.25s var(--ease), background 0.25s, opacity 0.25s;
}

.kit__flavor img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: contain;
	background: linear-gradient(145deg, var(--from), var(--to));
}

.kit__flavor:hover {
	transform: translateY(-2px);
}

.kit__flavor.is-on {
	background: linear-gradient(145deg, var(--from), var(--to));
	box-shadow: 0 3px 0 var(--ink);
}

.kit__flavor:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.kit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
}

.kit__add:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.kit__add.loading {
	opacity: 0.7;
	pointer-events: none;
}

.kit__price {
	margin: 0;
	font-family: var(--f-display);
	font-size: 1.6rem;
	font-weight: 800;
}

.kit__price span {
	font-family: var(--f-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ink-soft);
}

.kit__alt {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.kit__alt a {
	color: var(--ink);
	font-weight: 700;
}

@media (max-width: 900px) {
	.kit__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kit__media {
		max-width: 460px;
		margin-inline: auto;
	}

	.kit__sticker {
		right: -0.4rem;
	}

	.kit__slot {
		min-height: 88px;
	}

	.kit__slot-btn img {
		width: 48px;
		height: 48px;
	}
}

.kit .section-title {
	font-size: clamp(2.4rem, 4.2vw, 4rem);
}

.kit .section-title em {
	display: block;
}

.kit__slot-btn {
	position: relative;
}

.kit__slot-btn::after {
	top: 0.2rem;
	right: 0.5rem;
	margin: 0;
}

/* ==========================================================================
   Manifesto: ingredienti grandi che entrano uno alla volta, plastica barrata
   ========================================================================== */

.manifesto__glass {
	gap: clamp(1rem, 3vw, 2.6rem);
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.manifesto__glass li {
	container-type: inline-size;
	width: clamp(110px, 12vw, 160px);
	gap: 0.7rem;
	font-size: 1rem;
	font-weight: 700;
}

.manifesto__glass .illu {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	padding: 14%;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 6px 0 var(--ink);
}

.manifesto__glass li:nth-child(1) .illu { background: #e3f6ff; }
.manifesto__glass li:nth-child(2) .illu { background: #fff4b8; }
.manifesto__glass li:nth-child(3) .illu { background: #ffe2cc; }
.manifesto__glass li:nth-child(4) .illu { background: #ffd9ea; }
.manifesto__glass .is-ko .illu { background: #f1efec; }

.manifesto__glass b {
	top: 2%;
	right: 4%;
	width: 34px;
	height: 34px;
	font-size: 1rem;
	z-index: 1;
}

/* Barra rossa sopra la cannuccia di plastica */
.manifesto__glass .is-ko::after {
	content: "";
	position: absolute;
	left: -6%;
	right: -6%;
	top: calc(50cqw - 4px);
	height: 8px;
	border-radius: 8px;
	background: var(--pink);
	box-shadow: 0 0 0 2px var(--ink);
	transform: rotate(-24deg) scaleX(0);
	transform-origin: left center;
}

/* Animazione (solo con JS e senza "riduci movimento") */
.js .manifesto__glass:not(.is-static) li {
	opacity: 0;
	transform: translateY(-50px) rotate(-8deg);
}

.js .manifesto__glass:not(.is-static) b {
	transform: scale(0);
}

.js .manifesto__glass.is-in li {
	opacity: 1;
	transform: none;
	transition: opacity 0.4s ease calc(var(--i) * 0.18s), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.18s);
}

.js .manifesto__glass.is-in b {
	transform: scale(1);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.18s + 0.45s);
}

.manifesto__glass.is-in .is-ko::after,
.manifesto__glass.is-static .is-ko::after {
	transform: rotate(-24deg) scaleX(1);
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) 1.5s;
}

.manifesto__glass.is-in .is-ko .illu {
	filter: grayscale(1);
	transition: filter 0.4s ease 1.7s;
	animation: manifesto-shake 0.5s ease 1.9s;
}

@keyframes manifesto-shake {
	0%, 100% { transform: none; }
	25% { transform: rotate(-6deg); }
	75% { transform: rotate(6deg); }
}

@media (max-width: 600px) {
	.manifesto__glass li {
		width: calc(33% - 1rem);
	}

}

/* --- CTA finale: foto reali dei gusti che fluttuano --- */
.deco__photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 22px rgba(27, 21, 21, 0.18));
	animation: float-spin 9s ease-in-out infinite alternate;
}

.deco__photo:nth-child(2n) img {
	animation-duration: 11s;
	animation-delay: -5s;
}

@media (max-width: 760px) {
	.final-cta .deco__photo {
		width: calc(var(--w) * 1.7) !important;
		opacity: 0.9;
	}
	.final-cta .deco__photo:nth-child(n+3) {
		display: none;
	}
}

/* --- Garanzie d'acquisto (home) --- */
.trust {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-block: 2px solid var(--ink);
	background: var(--paper);
}

.trust__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.trust__item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.trust__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	box-shadow: 0 3px 0 var(--ink);
	background: var(--yellow);
}

.trust__item:nth-child(2) .trust__icon { background: var(--cyan); }
.trust__item:nth-child(3) .trust__icon { background: var(--pink-soft); }
.trust__item:nth-child(4) .trust__icon { background: var(--lime); }

.trust__icon .icon {
	width: 24px;
	height: 24px;
}

.trust__text {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.trust__text strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 1.05rem;
	color: var(--ink);
}

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

@media (max-width: 560px) {
	.trust__list {
		grid-template-columns: 1fr;
	}
}

/* --- Newsletter (sopra il footer, su tutte le pagine) --- */
.newsletter {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--pink);
	color: var(--ink);
	overflow: hidden;
	isolation: isolate;
}

.newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(27, 21, 21, 0.16) 1.4px, transparent 1.6px);
	background-size: 18px 18px;
	mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}

.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}

.newsletter__script {
	margin: 0 0 0.2rem;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--cream);
	transform: rotate(-3deg);
	transform-origin: left;
}

.newsletter__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
}

.newsletter__lead {
	margin: 0;
	max-width: 34ch;
}

.newsletter__form {
	position: relative;
}

.newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter__row {
	display: flex;
	gap: 0.6rem;
	padding: 0.4rem;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);
	box-shadow: 0 5px 0 var(--ink);
}

.newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
}

.newsletter__input:focus {
	outline: none;
}

.newsletter__row:focus-within {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}

.newsletter__btn {
	flex: none;
}

.newsletter__form.is-loading .newsletter__btn {
	opacity: 0.6;
}

.newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 1rem;
	font-size: 0.85rem;
	line-height: 1.45;
	cursor: pointer;
}

.newsletter__consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 0.1rem;
	accent-color: var(--ink);
}

.newsletter__consent a {
	color: inherit;
	text-decoration: underline;
}

.newsletter__msg {
	min-height: 1.4em;
	margin: 0.7rem 0 0;
	font-weight: 600;
	font-size: 0.95rem;
}

.newsletter__msg.is-ok::before {
	content: "✓ ";
}

.newsletter__msg.is-error {
	color: #fff;
}

@media (max-width: 860px) {
	.newsletter__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.newsletter__row {
		flex-direction: column;
		border-radius: 24px;
	}
	.newsletter__btn {
		justify-content: center;
	}
}

/* --- Metodi di pagamento nel footer --- */
.payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.payments svg {
	display: block;
	width: 44px;
	height: auto;
}

/* --- App installabile: link nel footer e fumetto (assets/js/pwa.js) --- */
.site-footer__app {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(255, 247, 239, 0.3);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cream);
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}

.site-footer__app:hover {
	background: var(--cream);
	color: var(--ink);
}

.is-pwa .site-footer__app {
	display: none;
}

.pwa-tip {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 120;
	width: min(420px, calc(100% - 1.5rem));
	max-height: calc(100vh - 6rem);
	overflow: auto;
	padding: 1.1rem 1.1rem 1rem;
	border: 2px solid var(--ink);
	border-radius: 24px;
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 6px 0 var(--ink), 0 30px 60px -20px rgba(27, 21, 21, 0.45);
	opacity: 0;
	transform: translate(-50%, 30px) scale(0.96);
	transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}

.pwa-tip.is-open {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

/* Con la freccia verso il basso il fumetto sale, così la freccia resta sullo schermo */
.pwa-tip--arrow-bottom {
	bottom: calc(3.6rem + env(safe-area-inset-bottom));
}

/* Sulla scheda prodotto sta sopra la barra fissa */
.has-buybar .pwa-tip {
	bottom: calc(100px + env(safe-area-inset-bottom));
}

.pwa-tip__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--bg-alt);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}

.pwa-tip__head {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding-right: 2rem;
}

.pwa-tip__icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	box-shadow: 0 6px 14px -6px rgba(255, 79, 154, 0.6);
}

.pwa-tip__title {
	margin: 0 0 0.15rem;
	font-family: var(--f-display);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.1;
}

.pwa-tip__text {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--ink-soft);
}

.pwa-tip__steps {
	display: grid;
	gap: 0.7rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: pwa;
}

.pwa-tip__steps li {
	position: relative;
	padding-left: 2.2rem;
	font-size: 0.9rem;
	line-height: 1.6;
	counter-increment: pwa;
}

.pwa-tip__steps li::before {
	content: counter(pwa);
	position: absolute;
	top: 0.05rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 800;
}

/* "Tasto" con l'icona vera del browser */
.pwa-key {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.05rem 0.45rem;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--bg-alt);
	vertical-align: middle;
	white-space: nowrap;
}

.pwa-key svg {
	width: 17px;
	height: 17px;
	color: #0a84ff;
}

.pwa-key b {
	font-weight: 700;
}

.pwa-tip__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.pwa-tip__install,
.pwa-tip__ok {
	flex: 1;
	justify-content: center;
}

.pwa-tip__install svg {
	width: 18px;
	height: 18px;
}

.pwa-tip__later {
	padding: 0.6rem 0.8rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
}

.pwa-tip__more {
	margin-top: 0.8rem;
	font-size: 0.86rem;
}

.pwa-tip__more summary {
	cursor: pointer;
	color: var(--ink-soft);
}

/* Freccia che indica dove si trova il pulsante del browser */
.pwa-tip--arrow-bottom::after,
.pwa-tip--arrow-top::after,
.pwa-tip--arrow-top-right::after {
	content: "";
	position: fixed;
	left: 50%;
	width: 28px;
	height: 28px;
	margin-left: -14px;
	background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4f9a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M5 13l7 7 7-7'/></svg>");
	animation: pwa-bounce 1.2s ease-in-out infinite;
	pointer-events: none;
}

.pwa-tip--arrow-bottom::after {
	bottom: -2.4rem;
}

.pwa-tip--arrow-top::after,
.pwa-tip--arrow-top-right::after {
	top: -2.4rem;
	transform: rotate(180deg);
	animation-name: pwa-bounce-up;
}

.pwa-tip--arrow-top-right::after {
	left: auto;
	right: 1.2rem;
}

/* Le frecce stanno fuori dal fumetto: serve far uscire il contenuto */
.pwa-tip--arrow-bottom,
.pwa-tip--arrow-top,
.pwa-tip--arrow-top-right {
	overflow: visible;
}

@keyframes pwa-bounce {
	50% { translate: 0 6px; }
}

@keyframes pwa-bounce-up {
	50% { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
	.pwa-tip::after {
		animation: none !important;
	}
}

/* Card "SORBOS Mix" in fondo alla griglia dei gusti */
.flavor-card--mix .flavor-card__link {
	background: linear-gradient(150deg, #ffd6e6, #fff3c4 55%, #e6ffc0);
}

.flavor-card__eyebrow {
	margin: 0 0 0.1rem;
	font-size: 1.35rem;
	color: var(--pink);
	transform: rotate(-3deg);
	transform-origin: left;
}

.flavor-card__custom {
	position: absolute;
	left: 1.4rem;
	bottom: 1.1rem;
	z-index: 2;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.flavor-card--mix .flavor-card__body {
	padding-bottom: 2.8rem;
}

.kit__sticker--gift {
	background: var(--pink);
	color: #fff;
}

.kit__sticker--gift strong {
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	color: var(--yellow);
}

/* Box HoReCa con link (es. Distributori) */
.horeca-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.8rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Secondo bollino del kit (spedizione gratis sotto all'omaggio) */
.kit__sticker--second {
	top: auto;
	right: auto;
	bottom: 8%;
	left: -1.2rem;
	transform: rotate(-8deg);
}

@media (max-width: 600px) {
	.kit__slots {
		gap: 0.45rem;
	}

	.kit__slot {
		min-height: 88px;
	}

	.kit__slot-btn {
		font-size: 0.72rem;
		padding: 0.35rem 0.15rem;
	}

	.kit__slot-btn span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.kit__slot-btn img {
		width: 48px;
		height: 48px;
	}

	.kit__sticker--second {
		left: -0.4rem;
	}
}