/*
Theme Name: Shampissima Professional
Theme URI: https://www.shampissima.com/
Author: Distribuitaly di Andrea Babetto
Description: Tema custom per la homepage one-page di Shampissima Professional (linea Season Detox). Leggero, senza page builder, font ospitati in locale, nessun cookie di profilazione.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shampissima-pro
Tags: one-page, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   1. Font ospitato in locale (GDPR: niente Google Fonts CDN)
   Manrope e' un font variabile: un solo file copre i pesi 200-800.
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design token
   I valori fluidi interpolano linearmente fra 390px (mobile) e 1280px
   (desktop), le due larghezze del file di design. Oltre i 1280 restano fermi.
   ========================================================================== */

:root {
	/* Colori */
	--c-ink: #111;
	--c-bg: #fff;
	--c-surface: #f4f3f0;
	--c-hero-bg: #e9e4dc;
	--c-banner-bg: #efebe4;
	--c-text-2: #555;
	--c-text-3: #777;
	--c-text-4: #888;
	--c-rule: #eee;
	--c-pipe: #ccc;
	--c-disabled: #b9b8b4;
	--c-placeholder: #999;

	/* Griglia */
	--content-max: 1280px;
	--gutter: clamp(18px, 1.35px + 4.27vw, 56px);

	/* Tipografia fluida */
	--fs-h1: clamp(38px, 26.61px + 2.92vw, 64px);
	--ls-h1: clamp(-2.4px, -0.96px - 0.112vw, -1.4px);
	--fs-hero-sub: clamp(15px, 13.69px + 0.337vw, 18px);
	--fs-section: clamp(28px, 20.99px + 1.8vw, 44px);
	--ls-section: clamp(-1.5px, -0.78px - 0.056vw, -1px);
	--fs-philosophy: clamp(24px, 16.99px + 1.8vw, 40px);
	--ls-philosophy: clamp(-1.3px, -0.29px - 0.079vw, -0.6px);
	--fs-banner: clamp(24px, 18.74px + 1.35vw, 36px);
	--ls-banner: clamp(-1.2px, -0.62px - 0.045vw, -0.8px);
	--fs-faq-title: clamp(24px, 19.62px + 1.12vw, 34px);
	--ls-faq-title: clamp(-1px, -0.42px - 0.045vw, -0.6px);
	--fs-eyebrow: clamp(11px, 10.56px + 0.112vw, 12px);
	--fs-product-name: clamp(13px, 11.25px + 0.449vw, 17px);
	--fs-faq-q: clamp(14px, 13.56px + 0.112vw, 15px);
	--fs-faq-a: clamp(13px, 12.56px + 0.112vw, 14px);
	--fs-field: clamp(13px, 12.56px + 0.112vw, 14px);

	/* Raggi */
	--r-card: clamp(14px, 12.25px + 0.449vw, 18px);
	--r-box: clamp(20px, 18.25px + 0.449vw, 24px);
	--r-input: clamp(10px, 9.12px + 0.225vw, 12px);
	--r-pill: 999px;

	/* Spaziature fluide */
	--gap-products: clamp(12px, 8.49px + 0.899vw, 20px);
	--gap-videos: clamp(10px, 7.37px + 0.674vw, 16px);
	--hero-text-gap: clamp(30px, 4.58px + 6.52vw, 88px);
	--pad-line-top: clamp(48px, 30.47px + 4.49vw, 88px);
	--pad-line-bottom: clamp(24px, 6.47px + 4.49vw, 64px);
	--pad-videos-bottom: clamp(40px, 18.97px + 5.39vw, 88px);
	--pad-philosophy-top: clamp(16px, 5.48px + 2.7vw, 40px);
	--pad-philosophy-bottom: clamp(24px, 16.99px + 1.8vw, 40px);
	--pad-faq-top: clamp(40px, 22.47px + 4.49vw, 80px);
}

/* ==========================================================================
   3. Reset essenziale
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* <picture> esiste solo per offrire il WebP: non deve generare una scatola,
   o le immagini in altezza percentuale (miniature, poster) non troverebbero
   un contenitore a cui riferirsi. Così l'<img> è figlio diretto del genitore. */
picture {
	display: contents;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

a {
	color: inherit;
}

/* Contenitore comune a tutte le sezioni (hero escluso: e' full-bleed). */
.wrap {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--c-ink);
	color: #fff;
	padding: 12px 20px;
	font: 700 14px/1 "Manrope", sans-serif;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* Alcune etichette del design cambiano testo fra mobile e desktop
   (es. "Tutta la linea ↗" / "Vedi tutta la linea ↗"): stampiamo entrambe
   e mostriamo quella giusta, così il testo resta modificabile dall'admin. */
.only-lg {
	display: none;
}

:where(a, button, input, select, textarea, summary, video):focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 3px;
}

/* Elementi comuni ------------------------------------------------------- */

.eyebrow {
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	letter-spacing: 1.5px;
	color: var(--c-text-3);
	text-transform: uppercase;
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.section-title {
	font-weight: 800;
	font-size: var(--fs-section);
	line-height: 1;
	letter-spacing: var(--ls-section);
	margin: 0;
}

/* Link sottolineato "Vedi tutta la linea", "@shampissima" */
.link-rule {
	font-weight: 700;
	font-size: 14px;
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-ink);
	padding-bottom: 3px;
	white-space: nowrap;
}

/* Bottone pill nero */
.btn {
	display: inline-block;
	background: var(--c-ink);
	color: #fff;
	border: none;
	border-radius: var(--r-pill);
	padding: 14px 26px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* Bottone pill bianco (header hero) */
.btn--light {
	background: #fff;
	color: var(--c-ink);
	padding: 10px 20px;
	font-size: 13px;
}

/* Bottone pill con solo bordo (card prodotto) */
.btn--outline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-ink);
	padding: 11px 18px;
	font-size: 13px;
}

/* ==========================================================================
   4. Marquee
   ========================================================================== */

.marquee {
	background: var(--c-ink);
	color: #fff;
	overflow: hidden;
	padding: 7px 0;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 1.5px;
	white-space: nowrap;
}

.marquee__track {
	display: inline-flex;
	animation: marquee-scroll 30s linear infinite;
}

.marquee__item {
	display: flex;
	gap: 48px;
	padding-right: 48px;
}

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

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
	position: relative;
	background: var(--c-hero-bg);
	overflow: hidden;
}

.hero__media,
.hero__media img {
	display: block;
	width: 100%;
}

.hero__media img {
	height: 680px;
	object-fit: cover;
	object-position: 58% center;
}

.hero__inner {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: 16px var(--gutter) 20px;
}

.hero__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hero__logo {
	height: 28px;
	width: auto;
	mix-blend-mode: multiply;
}

.hero__copy {
	align-self: start;
	padding-top: var(--hero-text-gap);
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 500px;
}

.hero__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-h1);
	line-height: 0.98;
	letter-spacing: var(--ls-h1);
	text-wrap: pretty;
}

.hero__sub {
	margin: 0;
	font-weight: 500;
	font-size: var(--fs-hero-sub);
	line-height: 1.45;
	color: #222;
	max-width: 300px;
}

.hero__cta {
	align-self: end;
	justify-self: stretch;
	text-align: center;
	padding: 14px;
}

/* ==========================================================================
   6. La linea (card prodotto)
   ========================================================================== */

.line {
	padding-top: var(--pad-line-top);
	padding-bottom: var(--pad-line-bottom);
}

.line__head {
	margin-bottom: 16px;
}

.line__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-products);
}

.product {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.product__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-card);
	background: var(--c-surface);
	overflow: hidden;
}

.product__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product__badge {
	display: none;
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 1;
	background: #fff;
	border-radius: var(--r-pill);
	padding: 4px 10px;
	font-weight: 700;
	font-size: 11px;
	color: var(--c-ink);
}

.product__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.product__step,
.product__desc {
	display: none;
}

.product__name {
	font-weight: 700;
	font-size: var(--fs-product-name);
	line-height: 1.25;
}

.product__size {
	font-weight: 500;
	font-size: 12px;
	color: var(--c-text-3);
}

.product .btn--outline {
	justify-content: center;
	gap: 6px;
	padding: 8px;
	font-size: 12px;
}

/* ==========================================================================
   7. Chi l'ha provato (carosello video)
   ========================================================================== */

.social {
	padding-top: 24px;
	padding-bottom: var(--pad-videos-bottom);
	/* Su mobile il carosello esce a filo del bordo destro. */
	padding-left: var(--gutter);
	max-width: var(--content-max);
	margin-inline: auto;
}

.social__head {
	margin-bottom: 16px;
	padding-right: var(--gutter);
}

.social__nav {
	display: none;
	gap: 10px;
	align-items: center;
}

.social__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--c-ink);
	background: transparent;
	color: var(--c-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
}

.social__arrow--next {
	background: var(--c-ink);
	color: #fff;
}

.social__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.social__link {
	margin-left: 12px;
}

.social__rail {
	display: flex;
	gap: var(--gap-videos);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	padding-right: var(--gutter);
}

.social__rail::-webkit-scrollbar {
	display: none;
}

.clip {
	position: relative;
	flex: none;
	width: 160px;
	aspect-ratio: 9 / 16;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--c-ink);
}

.clip__video,
.clip__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.clip__play {
	position: absolute;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--c-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	padding-left: 4px;
}

.clip.is-playing .clip__play {
	display: none;
}

.clip__tag {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	background: #fff;
	border-radius: 10px;
	padding: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.clip__thumb {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--c-surface);
	flex: none;
	overflow: hidden;
}

.clip__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.clip__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.clip__name {
	display: none;
	font-weight: 700;
	font-size: 12px;
	color: var(--c-ink);
}

.clip__buy {
	font-weight: 700;
	font-size: 10px;
	line-height: 1.2;
	color: var(--c-ink);
	text-decoration: none;
}

/* ==========================================================================
   8. Filosofia
   ========================================================================== */

.philosophy {
	padding-top: var(--pad-philosophy-top);
	padding-bottom: var(--pad-philosophy-bottom);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.philosophy__text {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-philosophy);
	line-height: 1.15;
	letter-spacing: var(--ls-philosophy);
	max-width: 820px;
	text-wrap: pretty;
}

/* ==========================================================================
   9. Banner
   ========================================================================== */

.banner {
	position: relative;
	border-radius: var(--r-box);
	overflow: hidden;
	background: var(--c-banner-bg);
	display: flex;
	flex-direction: column;
	/* La .wrap dà i margini laterali: qui serve solo azzerare il padding. */
	padding: 0;
}

.banner__media {
	height: 170px;
	overflow: hidden;
}

.banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

.banner__copy {
	padding: 20px 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.banner__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-banner);
	line-height: 1.05;
	letter-spacing: var(--ls-banner);
}

.banner__sub {
	margin: -6px 0 0;
	font-weight: 500;
	font-size: 13px;
	color: #444;
}

.banner .btn {
	padding: 12px 20px;
	font-size: 13px;
}

/* ==========================================================================
   10. FAQ + contatti
   ========================================================================== */

.faq-contact {
	padding-top: var(--pad-faq-top);
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__title {
	margin: 0;
	font-weight: 800;
	font-size: var(--fs-faq-title);
	line-height: 1.1;
	letter-spacing: var(--ls-faq-title);
}

.faq__list {
	border-top: 1px solid var(--c-ink);
	display: flex;
	flex-direction: column;
}

.faq__item {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--c-rule);
}

.faq__q {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: none;
	text-align: left;
	font-weight: 700;
	font-size: var(--fs-faq-q);
	line-height: 1.35;
	color: var(--c-ink);
	cursor: pointer;
}

.faq__sign {
	flex: none;
	font-weight: 700;
	line-height: 1.35;
}

/* Senza JavaScript le risposte restano tutte visibili: la fisarmonica si
   attiva solo quando lo script aggiunge .has-js all'elemento <html>. */
.faq__a {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.22s ease;
}

.has-js .faq__item:not(.is-open) .faq__a {
	grid-template-rows: 0fr;
}

.faq__a > div {
	overflow: hidden;
}

.faq__a p {
	margin: 0;
	padding: 0 0 14px;
	font-weight: 400;
	font-size: var(--fs-faq-a);
	line-height: 1.6;
	color: var(--c-text-2);
	max-width: 520px;
}

/* Box contatti ----------------------------------------------------------- */

.contact {
	margin-top: 12px;
	border-radius: var(--r-box);
	background: var(--c-surface);
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact__title {
	margin: 0;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.4px;
}

.contact__sub {
	margin: 4px 0 0;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text-2);
}

.contact__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.field {
	width: 100%;
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--r-input);
	padding: 13px 14px;
	font-weight: 500;
	font-size: var(--fs-field);
	color: var(--c-ink);
	outline: none;
}

.field::placeholder {
	color: var(--c-placeholder);
	opacity: 1;
}

.field:focus {
	border-color: var(--c-ink);
}

.field[aria-invalid="true"] {
	border-color: #c0392b;
}

textarea.field {
	height: 70px;
	resize: vertical;
}

/* Il placeholder della select e' grigio finche' non si sceglie un motivo. */
select.field {
	appearance: auto;
	cursor: pointer;
	color: var(--c-ink);
}

select.field:has(option[value=""]:checked) {
	color: var(--c-placeholder);
}

/* Honeypot antispam: invisibile ma non display:none, così i bot lo compilano. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consent {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 500;
	font-size: 12px;
	color: var(--c-text-2);
	cursor: pointer;
}

.consent input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--c-ink);
	flex: none;
	cursor: pointer;
}

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

.contact__submit {
	align-self: stretch;
	padding: 13px;
}

.contact__submit[disabled] {
	background: var(--c-disabled);
	cursor: not-allowed;
}

.contact__note {
	font-weight: 500;
	font-size: 11px;
	color: var(--c-text-4);
}

.contact__mail {
	display: none;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.6;
	color: var(--c-text-2);
	margin-top: 6px;
}

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

.field-error {
	font-weight: 500;
	font-size: 11px;
	color: #c0392b;
	margin-top: -6px;
}

.form-message {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.5;
	border-radius: var(--r-input);
	padding: 12px 14px;
}

.form-message--ok {
	background: #fff;
	color: var(--c-ink);
}

.form-message--error {
	background: #fff;
	color: #c0392b;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
	padding-top: 18px;
	padding-bottom: 0;
}

.footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-bottom: 18px;
	font-weight: 500;
	font-size: 12px;
	color: var(--c-text-3);
	text-align: center;
}

.footer__logo {
	height: 26px;
	width: auto;
	mix-blend-mode: multiply;
}

.footer__links a {
	color: var(--c-text-3);
	text-decoration: none;
}

.footer__links a.is-strong {
	color: var(--c-ink);
	font-weight: 700;
}

.footer__legal {
	border-top: 1px solid var(--c-rule);
	padding: 14px 0 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-weight: 400;
	font-size: 11px;
	line-height: 1.6;
	color: var(--c-text-4);
	text-align: center;
}

.footer__legal .is-name {
	color: var(--c-text-2);
	font-weight: 600;
}

/* Il DOM segue l'ordine desktop (… P.IVA · REA …); su mobile il design
   chiede REA prima di P.IVA, quindi i due elementi si scambiano con order. */
.footer__legal .is-vat {
	order: 1;
}

.footer__legal .is-copy {
	order: 2;
	margin-top: 6px;
}

/* I separatori "|" esistono solo nel layout desktop. */
.footer__pipe {
	display: none;
	color: var(--c-pipe);
}

/* ==========================================================================
   12. Pagine interne (privacy, cookie, 404)
   ========================================================================== */

.page-content {
	padding-top: var(--pad-faq-top);
	padding-bottom: var(--pad-line-bottom);
	max-width: 760px;
}

.page-content h1 {
	font-weight: 800;
	font-size: var(--fs-faq-title);
	line-height: 1.1;
	letter-spacing: var(--ls-faq-title);
	margin: 0 0 24px;
}

.page-content h2 {
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.4px;
	margin: 32px 0 10px;
}

.page-content h3 {
	font-weight: 700;
	font-size: 16px;
	margin: 24px 0 8px;
}

.page-content p,
.page-content li {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-text-2);
}

.page-content a {
	color: var(--c-ink);
	font-weight: 600;
}

.page-content blockquote {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--c-surface);
	border-radius: var(--r-input);
}

.page-content blockquote p {
	margin: 0;
	font-size: 13px;
}

.page-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 14px;
}

.page-content th,
.page-content td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-text-2);
	vertical-align: top;
}

.page-content th {
	color: var(--c-ink);
	font-weight: 700;
}

/* ==========================================================================
   13. Magazine: elenco e articolo
   Arrivano con la migrazione del blog da Shopify. La griglia non ha media
   query: auto-fill porta da sola 1 colonna a 390px e 4 a 1280px, lo stesso
   ritmo delle card prodotto.
   ========================================================================== */

.magazine {
	padding-top: var(--pad-faq-top);
	padding-bottom: var(--pad-videos-bottom);
}

.magazine__head {
	margin-bottom: 32px;
}

.magazine__title {
	font-weight: 800;
	font-size: var(--fs-section);
	line-height: 1;
	letter-spacing: var(--ls-section);
	margin: 8px 0 0;
}

.magazine__intro {
	max-width: 680px;
	margin-top: 14px;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-text-2);
}

.magazine__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	column-gap: var(--gap-products);
	/* In colonna singola le card si toccherebbero: fra una riga e l'altra
	   serve piu' aria di quanta ne basti fra due colonne. */
	row-gap: 36px;
}

.magazine__empty {
	font-size: 15px;
	color: var(--c-text-2);
}

/* Card dell'elenco ------------------------------------------------------ */

.card-article__link {
	display: block;
	text-decoration: none;
	color: var(--c-ink);
}

.card-article__media {
	aspect-ratio: 3 / 2;
	background: var(--c-surface);
	border-radius: var(--r-card);
	overflow: hidden;
}

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

.card-article__date {
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	color: var(--c-text-3);
	margin: 12px 0 6px;
}

.card-article__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	font-size: var(--fs-product-name);
	line-height: 1.25;
	letter-spacing: -0.2px;
	margin: 0 0 6px;
}

.card-article__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-text-2);
	margin: 0;
}

.card-article__link:hover .card-article__title,
.card-article__link:focus-visible .card-article__title {
	text-decoration: underline;
}

/* Paginazione ----------------------------------------------------------- */

.magazine .navigation.pagination {
	margin-top: 40px;
}

.magazine .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.magazine .page-numbers {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid var(--c-rule);
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--c-ink);
}

.magazine .page-numbers.current {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-bg);
}

.magazine .page-numbers.dots {
	border-color: transparent;
}

/* Articolo singolo ------------------------------------------------------ */

/* Come .page-content, 760px e' la misura di riga per i testi lunghi.
   Vince su .wrap perche' questa sezione viene dopo nel foglio. */
.article {
	max-width: 760px;
	padding-top: var(--pad-faq-top);
}

.article__head {
	margin-bottom: 24px;
}

.article__title {
	font-weight: 800;
	font-size: var(--fs-faq-title);
	line-height: 1.1;
	letter-spacing: var(--ls-faq-title);
	margin: 10px 0 12px;
}

.article__meta {
	font-weight: 500;
	font-size: 12px;
	color: var(--c-text-3);
	margin: 0;
}

.article__sep {
	margin: 0 6px;
	color: var(--c-pipe);
}

.article__cover {
	margin: 0 0 28px;
	background: var(--c-surface);
	border-radius: var(--r-card);
	overflow: hidden;
}

.article__cover img {
	width: 100%;
	height: auto;
	display: block;
}

/* page-content porta la tipografia, ma la spaziatura verticale qui e' gia'
   data da .article: va azzerata, o il corpo sbanda in basso. */
.article__body.page-content {
	padding-top: 0;
	padding-bottom: 0;
	max-width: none;
}

.article__nav {
	max-width: 760px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--c-rule);
}

.article__nav-link {
	display: grid;
	gap: 6px;
	text-decoration: none;
	color: var(--c-ink);
}

.article__nav-link.is-next {
	text-align: right;
}

.article__nav-title {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.35;
}

.article__nav-link:hover .article__nav-title,
.article__nav-link:focus-visible .article__nav-title {
	text-decoration: underline;
}

.article__back {
	max-width: 760px;
	padding-top: 28px;
	padding-bottom: var(--pad-videos-bottom);
	font-size: 14px;
	font-weight: 600;
}

/* ==========================================================================
   14. WooCommerce: negozio e schede prodotto
   I prodotti sono "esterni": il pulsante porta ad Amazon, il carrello non
   entra mai in funzione.

   Una trappola da ricordare: WooCommerce imposta `display:flex` in colonna
   su div.product, e questo annulla i float con cui affiancherebbe immagine e
   informazioni. Il risultato e' tutto incolonnato a meta' larghezza. Qui si
   rifa' il layout con una griglia, che e' anche piu' facile da governare.
   ========================================================================== */

.woocommerce #primary,
.woocommerce-page #primary {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-top: var(--pad-faq-top);
	padding-bottom: var(--pad-videos-bottom);
}

.woocommerce .woocommerce-breadcrumb {
	font-size: 12px;
	color: var(--c-text-3);
	margin: 0 0 24px;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--c-text-2);
}

/* Scheda prodotto ------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
	float: none;
	width: auto;
	margin: 0;
}

/* L'immagine riceve lo stesso trattamento delle card in homepage: pannello
   #f4f3f0, foto contenuta e multiply, che fonde il bianco dello scatto. */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__image {
	background: var(--c-surface);
	border-radius: var(--r-card);
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: 10px;
}

.woocommerce div.product .product_title {
	font-weight: 800;
	font-size: 28px;
	line-height: 1.12;
	letter-spacing: -0.8px;
	margin: 0 0 14px;
}

.woocommerce div.product p.price {
	font-weight: 700;
	font-size: 22px;
	color: var(--c-ink);
	margin: 0 0 16px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-text-2);
	margin: 0 0 22px;
}

.woocommerce div.product form.cart {
	margin: 0 0 24px;
}

.woocommerce div.product .product_meta {
	display: block;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--c-rule);
	font-size: 12px;
	color: var(--c-text-3);
}

.woocommerce div.product .product_meta a {
	color: var(--c-text-2);
}

/* Schede a tendina: le pillole di WooCommerce diventano semplici linguette. */

.woocommerce div.product .woocommerce-tabs {
	margin-top: 56px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--c-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0 0 10px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-weight: 600;
	font-size: 13px;
	color: var(--c-text-3);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--c-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--c-ink);
}

.woocommerce div.product .woocommerce-Tabs-panel p {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-text-2);
}

.woocommerce div.product .woocommerce-tabs h2,
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.4px;
	margin: 0 0 14px;
}

.woocommerce .related,
.woocommerce .upsells {
	margin-top: 56px;
}

/* Griglia del negozio e dei prodotti correlati -------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	column-gap: var(--gap-products);
	row-gap: 36px;
	margin: 0;
}

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

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	border-radius: var(--r-card);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-weight: 700;
	font-size: var(--fs-product-name);
	line-height: 1.25;
	letter-spacing: -0.2px;
}

/* Il pulsante si allinea in fondo anche quando i titoli hanno righe diverse. */
.woocommerce ul.products li.product a.button {
	margin-top: auto;
	align-self: start;
}

/* Pulsanti: neri, a pillola, come il resto del sito. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product a.button {
	background: var(--c-ink);
	color: var(--c-bg);
	border-radius: var(--r-pill);
	padding: 14px 24px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	text-transform: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce ul.products li.product a.button:hover {
	background: var(--c-text-2);
	color: var(--c-bg);
}

/* Il carrello non si usa: le note che WooCommerce mostrerebbe non servono. */
.woocommerce .cart-collaterals,
.woocommerce-cart-form {
	display: none;
}

/* Da 900px in su immagine e informazioni stanno affiancate. La media query
   sta qui e non nella sezione 15 perche' e' la correzione del flex di
   WooCommerce: tenerla accanto alla regola che corregge aiuta a capirla. */
@media (min-width: 900px) {
	.woocommerce div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(32px, 3.5vw, 64px);
		align-items: start;
	}

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

	.woocommerce div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce div.product > .summary {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ==========================================================================
   15. Desktop (>= 900px)
   Qui cambiano solo le cose che il design non interpola: numero di colonne,
   contenuto delle card, banner sovrapposto invece che impilato.
   ========================================================================== */

@media (min-width: 900px) {
	.only-sm {
		display: none;
	}

	.only-lg {
		display: inline;
	}

	.marquee {
		padding: 8px 0;
		font-size: 11px;
	}

	/* Hero: altezza naturale dell'immagine (16/9), con un tetto sui monitor alti. */
	.hero__media img {
		height: auto;
		aspect-ratio: 16 / 9;
		max-height: 860px;
		object-position: center;
	}

	.hero__inner {
		padding: 24px var(--gutter) 48px;
	}

	.hero__logo {
		height: 38px;
	}

	.hero__copy {
		gap: 18px;
	}

	.hero__sub {
		max-width: 440px;
		line-height: 1.5;
	}

	.hero__cta {
		justify-self: start;
		padding: 16px 28px;
	}

	.line__head,
	.social__head {
		margin-bottom: 32px;
	}

	.line__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.product {
		gap: 14px;
	}

	.product__badge {
		display: block;
	}

	.product__text {
		gap: 6px;
	}

	.product__step {
		display: block;
		font-weight: 600;
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--c-text-3);
	}

	.product__size {
		display: none;
	}

	.product__desc {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.5;
		color: var(--c-text-2);
		min-height: 63px;
	}

	.product .btn--outline {
		justify-content: space-between;
		padding: 11px 18px;
		font-size: 13px;
	}

	/* Carosello: 4 clip visibili, scroll a scatti. */
	.social {
		padding-right: var(--gutter);
	}

	.social__head {
		padding-right: 0;
	}

	.social__nav {
		display: flex;
	}

	.social__rail {
		scroll-snap-type: x mandatory;
		padding-right: 0;
	}

	.clip {
		width: calc((100% - var(--gap-videos) * 3) / 4);
		scroll-snap-align: start;
	}

	.clip__play {
		width: 64px;
		height: 64px;
		font-size: 23px;
	}

	.clip__tag {
		left: 12px;
		right: 12px;
		bottom: 12px;
		border-radius: 12px;
		padding: 8px;
		gap: 10px;
	}

	.clip__thumb {
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}

	.clip__name {
		display: block;
	}

	.clip__buy {
		font-weight: 500;
		font-size: 11px;
		color: var(--c-text-3);
	}

	.philosophy {
		gap: 18px;
	}

	.philosophy__text {
		line-height: 1.1;
	}

	/* Banner: testo sovrapposto all'immagine. */
	.banner {
		height: 300px;
		display: block;
	}

	.banner__media {
		position: absolute;
		inset: 0;
		height: 100%;
	}

	.banner__media img {
		object-position: right center;
	}

	.banner__copy {
		position: absolute;
		left: 48px;
		top: 50%;
		transform: translateY(-50%);
		max-width: 440px;
		padding: 0;
		gap: 16px;
	}

	.banner__sub {
		margin: 0;
		font-size: 15px;
		color: #333;
	}

	.banner .btn {
		padding: 14px 26px;
		font-size: 14px;
	}

	/* FAQ e contatti affiancati. */
	.faq-contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		padding-bottom: var(--pad-faq-top);
		align-items: start;
	}

	.faq {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.faq__list {
		margin-top: 8px;
	}

	.faq__q {
		padding: 16px 0;
		gap: 16px;
	}

	.faq__a p {
		padding-bottom: 16px;
	}

	.contact {
		margin-top: 0;
		padding: 36px;
		gap: 14px;
	}

	.contact__title {
		font-size: 24px;
		letter-spacing: -0.6px;
	}

	.contact__sub {
		margin-top: 6px;
		font-size: 14px;
	}

	.contact__form {
		gap: 14px;
	}

	.field {
		padding: 14px 16px;
	}

	textarea.field {
		height: 90px;
	}

	.consent {
		gap: 10px;
		font-size: 13px;
	}

	.consent input {
		width: 18px;
		height: 18px;
	}

	.contact__submit {
		align-self: flex-start;
		padding: 14px 26px;
	}

	.contact__mail {
		display: block;
	}

	/* Footer su una riga, dati legali distribuiti. */
	.site-footer {
		padding-top: 0;
	}

	.footer__row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
		border-top: 1px solid var(--c-rule);
		padding: 22px 0;
		text-align: left;
	}

	.footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 6px 12px;
		padding: 16px 0 24px;
		text-align: left;
	}

	.footer__pipe {
		display: inline;
	}

	.footer__legal .is-vat,
	.footer__legal .is-copy {
		order: 0;
	}

	.footer__legal .is-copy {
		margin-top: 0;
		white-space: nowrap;
	}
}

/* ==========================================================================
   16. Accessibilita': rispetta prefers-reduced-motion
   ========================================================================== */

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

	.social__rail {
		scroll-behavior: auto;
	}

	.faq__a {
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   17. Stampa
   ========================================================================== */

@media print {
	.marquee,
	.social,
	.hero__cta,
	.contact__form {
		display: none;
	}

	body {
		color: #000;
	}
}