/*
Theme Name: Mya
Description: Tema WooCommerce di Boutique Mya, fedele al negozio originale. Mobile first.
Version: 2.1.0
Requires PHP: 8.0
Text Domain: mya
*/

/*
 * Mobile first: the base rules are for phones; each block then widens at
 * 600px (large phones), 750px (tablet), 990px (desktop nav) and 1200px.
 */

@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
	--rosso: #8b1a1a;
	--rosso-hover: #6e1515;
	--rosso-sezione: #a42325;
	--nero: #1a1a1a;
	--testo: #555;
	--grigio: #767676;
	--box: #f4f4f4;
	--bordo: #e6e6e6;
	--footer: #f0eeeb;
	--heading: "Barlow Condensed", sans-serif;
	--body: "Inter", sans-serif;
	--page: 1200px; /* content column: sections never stretch to the screen edges */
	--wrap: calc(var(--page) + 2 * var(--gutter));
	--gutter: 16px;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 750px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: #fff; color: #000; font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
@media (min-width: 750px) { body { font-size: 14px; line-height: 1.4; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1.2; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; } /* 16px keeps iOS from zooming on focus */
@media (min-width: 750px) { input, select, textarea { font-size: 14px; } }
::selection { background: var(--rosso); color: #fff; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 200; background: #fff; padding: 10px 16px; clip: auto; width: auto; height: auto; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (min-width: 990px) { .icon { width: 20px; height: 20px; } }

/* ---------- Header ---------- */
/* Announcement bar: one line, fixed height so the header over the hero can sit right below it. */
:root { --announce-h: 34px; }
.announce { display: flex; align-items: center; justify-content: center; gap: 18px; height: var(--announce-h); padding: 0 var(--gutter); background: var(--rosso); color: #fff; font: 600 12px/1 var(--body); letter-spacing: .03em; white-space: nowrap; overflow: hidden; }
.announce a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.has-overlay-header .site-header:not(.is-fixed) { top: var(--announce-h); }

/* Sticky everywhere; over a hero image it starts transparent and becomes a fixed white bar once you scroll
   (see mya.js: it hides while you scroll down and comes back as soon as you scroll up). */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; color: #000; transition: transform 320ms var(--ease-out), box-shadow 200ms ease; }
.has-overlay-header .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; color: #fff; }
.site-header.is-fixed { box-shadow: 0 2px 16px rgba(0, 0, 0, .07); }
.has-overlay-header .site-header.is-fixed { position: fixed; background: #fff; color: #000; }
.has-overlay-header .site-header.is-fixed .logo-light { display: none; }
.has-overlay-header .site-header.is-fixed .logo-dark { display: block; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.no-anim { transition: none; }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 10px 8px; padding-top: max(10px, env(safe-area-inset-top)); }
.header-left { display: flex; }
.logo { display: block; width: 88px; justify-self: center; }
.logo img { width: 100%; }
.logo .logo-light { display: none; }
.has-overlay-header .logo .logo-light { display: block; }
.has-overlay-header .logo .logo-dark { display: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
/* Logged-in users have the WordPress bar on top (fixed from 601px). */
@media (min-width: 601px) { .admin-bar:not(.has-overlay-header) .site-header, .admin-bar .site-header.is-fixed { top: var(--wp-admin--admin-bar--height, 32px); } }
.admin-bar.has-overlay-header .site-header:not(.is-fixed) { top: calc(var(--announce-h) + var(--wp-admin--admin-bar--height, 0px)); }
.header-icons { display: flex; align-items: center; justify-self: end; }
.header-icons .search-desktop { display: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none; position: relative; touch-action: manipulation; }
.cart-count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--rosso); color: #fff; font: 700 10px/18px var(--body); text-align: center; }
.cart-count[data-count="0"] { display: none; }

/* Drawer menu on phones and tablets */
.main-nav { position: fixed; inset: 0 auto 0 0; width: min(86vw, 360px); background: #fff; color: #000; padding: 72px 0 40px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); visibility: hidden; transition: transform 400ms var(--ease-drawer), visibility 0s linear 400ms; z-index: 60; }
.nav-open .main-nav { transform: none; visibility: visible; transition: transform 400ms var(--ease-drawer), visibility 0s; }
.nav-open { overflow: hidden; }
/* The header is its own stacking context (z-index 50): lift it above the page dimmer so the drawer stays bright. */
.nav-open .site-header { z-index: 70; }
body::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 65; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms var(--ease-drawer), visibility 0s linear 400ms; }
.nav-open::after { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease-drawer), visibility 0s; }
@media (min-width: 990px) { body::after { display: none; } }
.main-nav > ul { list-style: none; margin: 0; padding: 0; }
.main-nav a { display: block; padding: 13px 24px; font: 600 22px/1.2 var(--heading); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--bordo); }
.main-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 8px; }
.main-nav .sub-menu a { padding: 10px 36px; border: 0; font: 400 15px var(--body); text-transform: none; }
.nav-close { position: absolute; top: 14px; left: 12px; }
.mega { display: none; }

.search-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: #000; padding: 12px var(--gutter); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms; }
.search-open .search-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.search-panel form { display: flex; max-width: 720px; margin: 0 auto; border-bottom: 1px solid #000; }
.search-panel input { flex: 1; min-width: 0; border: 0; padding: 12px 0; font-size: 18px; outline: none; background: none; }
.search-panel button { border: 0; background: none; cursor: pointer; padding: 0 8px; min-width: 44px; }

@media (min-width: 990px) {
	.site-header .bar { display: flex; gap: 28px; padding: 18px var(--gutter); max-width: var(--wrap); margin: 0 auto; }
	.header-left, .nav-close { display: none; }
	.logo { width: 136px; }
	.header-icons { margin-left: auto; gap: 4px; }
	.header-icons .search-desktop { display: grid; }
	.icon-btn { width: 40px; height: 40px; }
	.main-nav { position: static; flex: 1; width: auto; padding: 0; background: none; color: inherit; overflow: visible; transform: none; visibility: visible; transition: none; }
	.main-nav > ul { display: flex; gap: 2px; }
	.main-nav li { position: relative; }
	.main-nav a { padding: 8px 10px; font-size: 19px; border: 0; }
	.main-nav > ul > li > a { background: linear-gradient(currentColor, currentColor) no-repeat 10px calc(100% - 4px) / 0 1px; transition: background-size 250ms var(--ease-out); }
	.main-nav > ul > li > a:hover, .main-nav > ul > li:focus-within > a, .main-nav > ul > li.current-menu-item > a { background-size: calc(100% - 20px) 1px; }
	.main-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; padding: 14px 0; background: #fff; color: #000; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97); transform-origin: top left; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
	.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
	.main-nav .sub-menu a { padding: 8px 22px; font-size: 14px; }
	.main-nav .sub-menu a:hover { color: var(--rosso); }
	/* "Catalogo": a full-width panel with one column per catalog section. */
	.main-nav li.has-mega { position: static; }
	.main-nav li.has-mega > .sub-menu { display: none; }
	.mega { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: #000; box-shadow: 0 12px 28px rgba(0, 0, 0, .08); border-top: 1px solid var(--bordo); padding: 28px 48px 22px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
	.main-nav li.has-mega:hover > .mega, .main-nav li.has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; }
	/* Over the hero, an open menu turns the header white so header and panel read as one piece. */
	.has-overlay-header .site-header:has(.main-nav > ul > li:hover > .mega, .main-nav > ul > li:focus-within > .mega, .main-nav > ul > li:hover > .sub-menu, .main-nav > ul > li:focus-within > .sub-menu) { background: #fff; color: #000; }
	.has-overlay-header .site-header:has(.main-nav > ul > li:hover > .mega, .main-nav > ul > li:focus-within > .mega, .main-nav > ul > li:hover > .sub-menu, .main-nav > ul > li:focus-within > .sub-menu) .logo-light { display: none; }
	.has-overlay-header .site-header:has(.main-nav > ul > li:hover > .mega, .main-nav > ul > li:focus-within > .mega, .main-nav > ul > li:hover > .sub-menu, .main-nav > ul > li:focus-within > .sub-menu) .logo-dark { display: block; }
	.has-overlay-header .site-header { transition: transform 320ms var(--ease-out), box-shadow 200ms ease, background-color 180ms ease, color 180ms ease; }
	/* Invisible bridge over the gap between "Catalogo" and the panel, so the mouse can travel down. */
	.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; }
	.mega-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 32px; max-width: var(--page); margin: 0 auto; }
	.main-nav .mega a { display: inline-block; padding: 5px 0; font: 400 14px/1.3 var(--body); text-transform: none; background: none; }
	.main-nav .mega a:hover { color: var(--rosso); }
	.main-nav .mega .mega-title a { font: 600 17px/1.2 var(--heading); text-transform: uppercase; letter-spacing: .02em; padding: 0 0 8px; }
	.mega ul { list-style: none; margin: 0; padding: 0; }
	.mega-all { max-width: var(--page); margin: 18px auto 0; padding-top: 14px; border-top: 1px solid var(--bordo); }
	.main-nav .mega-all a { font-weight: 600; color: var(--rosso); }
	/* Desktop: a compact field that drops from the search icon, not a band across the page. */
	.search-panel { left: auto; right: max(var(--gutter), calc((100% - var(--page)) / 2)); top: calc(100% - 6px); width: 380px; padding: 14px 16px; transform-origin: top right; }
	.search-panel form { max-width: none; }
	.search-panel input { font-size: 15px; padding: 10px 0; }
}

/* ---------- Buttons ---------- */
.btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 32px; font: 700 .75rem var(--body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--rosso); border: 2px solid var(--rosso); background: transparent; cursor: pointer; transition: background-color .25s, color .25s; }
.btn-outline:hover { background: var(--rosso); color: #fff; }
.btn-outline, .btn-primary, .single_add_to_cart_button, .button, .hero-btn, .contact button, .ft-form button, .size-buttons button, .icon-btn, .quantity button { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 200ms, 200ms, 200ms, 200ms, 160ms; transition-timing-function: ease, ease, ease, ease, var(--ease-out); }
.btn-outline:active, .btn-primary:active, .single_add_to_cart_button:active, .button:active, .hero-btn:active, .contact button:active, .ft-form button:active, .size-buttons button:active, .icon-btn:active, .quantity button:active { transform: scale(0.97); }
.btn-primary, .single_add_to_cart_button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border: 0; background: var(--rosso); color: #fff; font: 700 13px var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s; }
.btn-primary:hover, .single_add_to_cart_button:hover, .button:hover { background: rgba(120, 4, 6, .91); }
.single_add_to_cart_button.disabled, .button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 560px; height: min(560px, 82svh); overflow: hidden; background: #222; color: #fff; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two soft shades, barely visible: behind the white header at the top, behind the text at the bottom left.
   They keep logo, icons and title readable on the bright beach scenes. */
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero::before { top: 0; height: 160px; background: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, 0)); }
.hero::after { bottom: 0; height: 75%; background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, 0)); }
.hero-content { position: absolute; left: 16px; right: 16px; bottom: 56px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-content h1 { font: 700 40px/1 var(--heading); letter-spacing: .01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .15); }
.hero-sub { margin: 0; font: 400 15px/1.4 var(--body); max-width: 30ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; background: #fff; color: var(--rosso); border: 1px solid #fff; padding: 12px 18px; font: 700 13px/1.2 var(--heading); text-transform: uppercase; letter-spacing: .04em; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.hero-btn:hover { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.hero-btn.is-ghost { background: transparent; color: #fff; }
.hero-btn.is-ghost:hover { background: #fff; border-color: #fff; color: var(--rosso); }
/* Pause control for the moving video (WCAG 2.2.2). */
.hero-pause { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; opacity: .75; transition: opacity .2s, background-color .2s; }
.hero-pause:hover, .hero-pause:focus-visible { opacity: 1; background: rgba(0, 0, 0, .55); }
.hero-pause svg { width: 18px; height: 18px; fill: currentColor; }
.hero-pause .i-play, .hero-pause[aria-pressed="true"] .i-pause { display: none; }
.hero-pause[aria-pressed="true"] .i-play { display: block; }
@media (min-width: 750px) {
	.hero { height: 720px; }
	.hero::before { height: 200px; }
	.hero::after { background: linear-gradient(to top right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, 0) 70%); height: 100%; }
	.hero-content { left: 40px; right: auto; bottom: 150px; gap: 14px; }
	.hero-content h1 { font-size: 56px; }
	.hero-sub { font-size: 17px; max-width: none; }
	.hero-actions { gap: 12px; }
	.hero-btn { padding: 14px 26px; }
	.hero-pause { right: 32px; bottom: 28px; }
}

/* ---------- Section intro ---------- */
.mya-section { padding: 56px var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.intro { text-align: center; margin-bottom: 32px; }
.intro-eyebrow { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grigio); margin-bottom: 12px; }
.intro-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; color: var(--nero); margin: 0 0 10px; }
.intro-title.rosso { color: var(--rosso); margin-bottom: 14px; }
.intro-text { font-size: 1rem; color: var(--testo); letter-spacing: .03em; line-height: 1.6; max-width: 560px; margin: 0 auto; }
.cta-wrap { text-align: center; margin-top: 36px; }
@media (min-width: 750px) {
	.mya-section { padding: 80px var(--gutter); }
	.intro { margin-bottom: 48px; }
	.intro-title { font-size: 2rem; }
	.cta-wrap { margin-top: 50px; }
}

/* ---------- Product card (grey info box) ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 990px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.lpdo-section .cards { grid-template-columns: 1fr; }
@media (min-width: 481px) { .lpdo-section .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 990px) { .lpdo-section .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; position: relative; min-width: 0; }
.card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-media img { transform: scale(1.04); } }
.card-badge { position: absolute; top: 12px; left: 0; z-index: 2; background: var(--rosso); color: #fff; font-size: .65rem; font-weight: 600; letter-spacing: .08em; padding: 4px 12px; border-radius: 2px; }
.card-badge.pill { left: 8px; border-radius: 40px; font-size: 11px; letter-spacing: 0; padding: 4px 10px; font-weight: 500; }
.card-badge.esaurito { background: #c8c8c8; color: #000; }
.card-body { background: var(--box); padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font: 700 .95rem/1.3 var(--heading); letter-spacing: .06em; text-transform: uppercase; color: var(--nero); margin: 0; overflow-wrap: anywhere; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-title a:hover { color: var(--rosso); }
.card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: nowrap; font-family: var(--heading); }
.card-price .sale { font-size: .95rem; color: var(--nero); font-weight: 700; }
.card-price s { font-size: .85rem; color: #8a8a8a; }
@media (min-width: 600px) {
	.card-body { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; flex: none; }
	.card-title { flex: 1; }
	.card-price { flex-direction: column; align-items: flex-end; flex-shrink: 0; }
}

/* ---------- Equivalenti ---------- */
.equiv-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 769px) { .equiv-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.equiv-card { display: flex; flex-direction: column; }
.equiv-card-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.equiv-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .equiv-card:hover .equiv-card-img img { transform: scale(1.04); } }
.equiv-card-body { padding: 16px 0 0; border-top: 1px solid #e0e0e0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.equiv-card-title { font: 700 .95rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--nero); margin: 0; }
.equiv-card-desc { font-size: .88rem; color: var(--testo); line-height: 1.6; flex: 1; }
.equiv-card .btn-outline { align-self: flex-start; margin-top: 10px; }

/* ---------- Quote ---------- */
.quote { padding: 24px var(--gutter); text-align: center; }
.quote p { max-width: 1100px; margin: 0 auto; font: 700 clamp(1.4rem, 2.9vw, 2.6rem)/1.2 var(--heading); text-transform: uppercase; color: #000; text-wrap: balance; }
@media (min-width: 750px) { .quote { padding: 32px 20px 24px; } }

/* ---------- Product list (home) ---------- */
.product-list { padding: 16px var(--gutter) 48px; max-width: var(--wrap); margin: 0 auto; }
.product-list .card-media { aspect-ratio: 1; }
.product-list .card-media img { object-fit: cover; }
@media (min-width: 750px) { .product-list { padding: 24px var(--gutter) 60px; } .product-list .cards { gap: 32px; } }

/* ---------- Contact ---------- */
.contact { background: var(--rosso-sezione); color: #fff; padding: 32px var(--gutter) 36px; scroll-margin-top: 0; }
.contact h2 { text-align: center; font-size: 36px; font-weight: 600; margin-bottom: 24px; }
.contact form { max-width: 700px; margin: 0 auto; display: grid; gap: 12px; }
.contact .row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.contact .field { display: grid; gap: 6px; margin: 0; }
.contact label { font: 600 12px var(--heading); letter-spacing: .08em; text-transform: uppercase; }
.contact input, .contact textarea, .contact select { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, .85); color: #fff; padding: 14px 16px; border-radius: 0; outline: none; -webkit-appearance: none; appearance: none; }
.contact input::placeholder, .contact textarea::placeholder { color: rgba(255, 255, 255, .6); }
.contact select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; padding-right: 44px; cursor: pointer; }
.contact select option { color: var(--nero); }
.contact textarea { min-height: 160px; resize: vertical; }
.contact input:focus, .contact textarea:focus, .contact select:focus { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
/* The order number is only asked for messages about an order. */
.contact .field-ordine { display: none; }
.contact form:has(#c-arg option[value="ordine"]:checked) .field-ordine { display: grid; }
.contact-send { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
.contact-privacy { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .85); }
.contact-privacy a { color: #fff; }
.contact button { justify-self: start; min-height: 48px; background: #fff; color: var(--rosso-sezione); border: 0; padding: 14px 26px; font: 700 13px var(--heading); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.contact button:hover { background: #000; color: #fff; }
.form-notice { max-width: 700px; margin: 0 auto 20px; padding: 12px 16px; background: rgba(255, 255, 255, .15); text-align: center; }
@media (min-width: 750px) {
	.contact h2 { font-size: 40px; margin-bottom: 32px; }
	.contact form, .contact .row { gap: 16px; }
	.contact .row { grid-template-columns: 1fr 1fr; }
	.contact textarea { min-height: 200px; }
	.contact button { font-size: 12px; }
	.contact-send { grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
}

/* ---------- Footer ---------- */
.ft { background: var(--footer); padding: 40px var(--gutter) 0; padding-bottom: env(safe-area-inset-bottom); font-family: var(--body); }
.ft-top, .ft-bottom { max-width: var(--page); margin-inline: auto; }
.ft-top { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid #d8d5d0; }
.ft-logo img { max-width: 130px; margin-bottom: 16px; }
.ft-address { font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--nero); line-height: 1.9; margin: 0 0 20px; font-style: normal; }
.ft-address a { color: var(--nero); text-decoration: none; display: inline-block; padding: 2px 0; }
.ft-address a:hover { color: var(--rosso); }
.ft-social { display: flex; gap: 10px; }
.ft-social a { width: 44px; height: 44px; border: 1px solid var(--rosso); display: flex; align-items: center; justify-content: center; color: var(--rosso); text-decoration: none; transition: background-color .25s, color .25s; }
.ft-social a:hover { background: var(--rosso); color: #fff; }
.ft-social svg { width: 16px; height: 16px; fill: currentColor; }
.ft-col-title { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nero); margin: 0 0 14px; }
.ft-links { list-style: none; padding: 0; margin: 0; }
.ft-links a { display: block; padding: 7px 0; font-size: 14px; color: var(--nero); text-decoration: none; letter-spacing: .02em; transition: color .2s; }
.ft-links a:hover { color: var(--rosso); }
.ft-newsletter-text { font-size: 14px; color: var(--nero); line-height: 1.6; margin: 0 0 16px; }
.ft-form { display: flex; border: 1px solid var(--nero); overflow: hidden; }
.ft-form input[type="email"] { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 14px; letter-spacing: .02em; outline: none; color: var(--nero); }
.ft-form button { min-height: 46px; background: var(--rosso); color: #fff; border: none; padding: 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .25s; }
.ft-form button:hover { background: var(--rosso-hover); }
.ft-msg { margin-top: 10px; font-size: 13px; color: var(--rosso); }
.ft-bottom { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0; font-size: 12px; color: var(--nero); letter-spacing: .04em; text-transform: uppercase; gap: 10px; }
.ft-bottom a { color: var(--nero); text-decoration: none; transition: color .2s; }
.ft-bottom a:hover { color: var(--rosso); }
@media (min-width: 481px) { .ft-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 769px) {
	.ft { padding: 60px 80px 0; }
	.ft-top { grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 48px; }
	.ft-col-title { margin-bottom: 20px; }
	.ft-links li { margin-bottom: 12px; }
	.ft-links a { display: inline; padding: 0; }
	.ft-social a { width: 34px; height: 34px; }
	.ft-bottom { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
}

/* ---------- Collection ---------- */
.coll-banner { position: relative; height: 300px; background: #333 center / cover no-repeat; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; }
.coll-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); }
.coll-banner h1 { position: relative; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 600; letter-spacing: .02em; padding: 60px 16px 0; text-wrap: balance; }
.coll-plain { padding: 32px var(--gutter) 8px; text-align: center; }
.coll-plain h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; }
.coll-desc { max-width: 720px; margin: 0 auto; padding: 32px var(--gutter) 8px; text-align: center; font: 600 clamp(1.15rem, 2vw, 1.75rem)/1.25 var(--heading); text-transform: uppercase; color: #000; text-wrap: balance; }
.coll-desc p + p { margin-top: .5em; }
.coll-layout { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 20px var(--gutter) 60px; max-width: var(--wrap); margin: 0 auto; }
.coll-main { min-width: 0; }
.filters { display: none; }
.filters-open .filters { display: block; }
.filters h2 { font-size: 20px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--bordo); }
.filter-group { border-bottom: 1px solid var(--bordo); padding: 14px 0; }
.filter-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 32px; font: 500 15px var(--body); text-transform: uppercase; letter-spacing: .02em; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.3px 1.3px 0 0; transform: rotate(-45deg); margin-right: 4px; }
.filter-group:not([open]) summary::after { transform: rotate(135deg); }
.filter-body { padding-top: 12px; }
.price-range { display: flex; align-items: center; gap: 8px; color: var(--grigio); }
.price-range label { flex: 1; display: flex; align-items: center; border: 1px solid var(--bordo); padding: 0 10px; height: 46px; gap: 6px; }
.price-range input { width: 100%; min-width: 0; border: 0; outline: none; text-align: right; color: #000; background: none; }
.filter-hint { color: var(--grigio); font-size: 12px; margin-top: 8px; }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.filter-list label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; color: #444; font-size: 15px; }
.filter-list input { width: 18px; height: 18px; accent-color: var(--rosso); margin: 0; }
.filter-list li.is-hidden { display: none; }
.filter-more { margin-top: 10px; background: none; border: 0; color: var(--rosso); cursor: pointer; padding: 8px 0; font-size: 14px; }
.filter-actions { display: flex; gap: 10px; margin-top: 18px; }
.filter-actions .btn-primary { min-height: 46px; font-size: 12px; padding: 0 16px; flex: 1; }
.filter-actions a { align-self: center; color: var(--grigio); font-size: 13px; padding: 10px 0; }
.coll-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.filters-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 1px solid var(--bordo); padding: 0 14px; text-transform: uppercase; font-weight: 600; font-size: 12px; cursor: pointer; margin-right: auto; }
.coll-toolbar .woocommerce-ordering { margin: 0 0 0 auto; }
.coll-toolbar select { appearance: none; min-height: 44px; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right center; padding-right: 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.grid-switch { display: flex; gap: 4px; }
.grid-switch button { width: 40px; height: 40px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: #bbb; border-radius: 4px; }
.grid-switch button[aria-pressed="true"] { color: #000; background: var(--box); }
.grid-switch svg { width: 14px; height: 14px; fill: currentColor; }
.coll-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.coll-grid.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coll-grid .card-media { aspect-ratio: 1 / 1.05; border: 1px solid #f2f2f2; }
.coll-grid .card-media img { padding: 7%; }
.coll-grid.is-dense .card-media img { padding: 4%; }
.coll-grid .card-body { padding: 12px 10px; }
.empty { padding: 40px 0; text-align: center; color: var(--testo); }
.empty .btn-outline { margin-top: 20px; }
.woocommerce-pagination { margin-top: 40px; }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; text-decoration: none; font-weight: 600; }
.woocommerce-pagination .current { background: #000; color: #fff; }
.woocommerce-pagination a:hover { color: var(--rosso); }
@media (min-width: 601px) {
	.coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.coll-grid.is-dense { gap: 16px; }
}
@media (min-width: 750px) {
	.coll-banner { height: 385px; }
	.coll-banner h1 { padding-top: 80px; }
	.coll-desc { padding: 48px 20px 24px; }
}
@media (min-width: 990px) {
	.coll-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; padding: 30px var(--gutter) 80px; }
	.filters { display: block; }
	.filters-toggle { display: none; }
	.coll-toolbar { justify-content: flex-end; gap: 22px; margin-bottom: 24px; }
	.coll-toolbar .woocommerce-ordering { margin-left: 0; }
	.coll-toolbar select { font-size: 12px; }
	.coll-grid.is-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.coll-grid .card-body { padding: 14px 8px; }
	.filter-list { gap: 6px; }
	.filter-list label { min-height: 0; font-size: 13px; gap: 8px; }
	.filter-list input { width: 13px; height: 13px; }
	.woocommerce-pagination { margin-top: 48px; }
}

/* ---------- Product ---------- */
.product-page { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 60px; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.product-gallery .woocommerce-product-gallery { opacity: 1 !important; margin: 0; position: relative; }
.product-gallery .woocommerce-product-gallery__image img { width: 100%; max-height: 640px; object-fit: contain; }
.product-gallery .flex-control-thumbs { display: flex; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; overflow-x: auto; }
.product-gallery .flex-control-thumbs li { flex: none; width: 64px; cursor: pointer; }
.product-gallery .flex-control-thumbs img { opacity: .5; }
.product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.woocommerce-product-gallery__trigger { display: none; }
.product-vendor { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--grigio); margin-bottom: 6px; }
.product-summary .product_title { font-size: 26px; font-weight: 700; letter-spacing: .1em; color: #1a1a1a; overflow-wrap: anywhere; }
.product-summary > .price { display: block; margin: 18px 0; font: 700 22px var(--heading); color: #000; }
.product-summary .price del { color: #8a8a8a; font-weight: 400; font-size: 18px; margin-right: 8px; }
.product-summary .price ins { text-decoration: none; }
.summary-sep { border: 0; border-top: 1px solid var(--bordo); margin: 0 0 20px; }
.variations { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.variations tr { display: block; }
.variations th { display: block; text-align: left; font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 0 0 10px; }
.variations td { display: block; padding: 0; }
.variations .reset_variations { display: none !important; }
.size-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.size-buttons button { height: 52px; border: 1px solid #000; background: #fff; color: #000; font-size: 14px; cursor: pointer; touch-action: manipulation; transition: background-color .15s, color .15s; }
@media (hover: hover) and (pointer: fine) { .size-buttons button:hover { box-shadow: inset 0 0 0 1px #000; } }
.size-buttons button[aria-pressed="true"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.has-size-buttons .variations select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.woocommerce-variation-price { display: none; }
.woocommerce-variation-availability .stock { margin: 0 0 10px; }
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.quantity { display: flex; flex: none; border: 1px solid #000; height: 52px; }
.quantity button { width: 44px; border: 0; background: none; cursor: pointer; font-size: 18px; touch-action: manipulation; }
.quantity .qty { width: 40px; border: 0; border-inline: 1px solid var(--bordo); text-align: center; -moz-appearance: textfield; background: none; }
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.single_add_to_cart_button { flex: 1; min-width: 0; }
.trust { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--bordo); display: grid; gap: 10px; font-size: 13px; color: #444; }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust svg { width: 16px; height: 16px; stroke: var(--rosso); fill: none; stroke-width: 1.5; }
.product_meta { display: none; }
.stock.out-of-stock { color: var(--rosso); font-weight: 600; }
.product-desc { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--bordo); max-width: 900px; font-size: 15px; line-height: 1.7; color: #333; }
.product-desc h2 { font-size: 22px; letter-spacing: .1em; margin-bottom: 16px; }
.product-desc p + p { margin-top: 1em; }
.related { margin-top: 56px; }
.related > h2 { text-align: center; font-size: 1.5rem; letter-spacing: .12em; margin-bottom: 28px; }
@media (min-width: 990px) {
	.product-page { padding: 40px 96px 80px; }
	.product-layout { grid-template-columns: 1fr 1fr; gap: 48px; }
	.product-summary { max-width: 580px; }
	.product-summary .product_title { font-size: 32px; }
	.product-summary > .price { margin: 22px 0; }
	.size-buttons { gap: 8px; }
	.size-buttons button { font-size: 13px; }
	.product-gallery .flex-control-thumbs li { width: 72px; }
	.product-desc { margin-top: 60px; padding-top: 40px; font-size: 14px; }
	.related { margin-top: 80px; }
	.related > h2 { font-size: 2rem; margin-bottom: 40px; }
}

/* ---------- Pages, cart, checkout ---------- */
.page-title { padding: 32px var(--gutter) 4px; text-align: center; }
.page-title h1 { font-size: 1.6rem; letter-spacing: .12em; color: var(--nero); }
.page-content { max-width: 900px; margin: 0 auto; padding: 24px var(--gutter) 56px; font-size: 15px; line-height: 1.7; overflow-wrap: break-word; }
.page-content.wide { max-width: 1200px; }
.page-content > * + * { margin-top: 1em; }
.page-content table { display: block; overflow-x: auto; max-width: 100%; }
.page-content.is-intro { padding-bottom: 8px; text-align: center; max-width: 620px; font-size: 16px; }
/* Contact page: ways to reach the shop, then quick answers for customers who already ordered. */
.contact-ways { padding: 24px var(--gutter) 40px; }
.contact-cards { list-style: none; margin: 0 auto; padding: 0; max-width: var(--page); display: grid; gap: 12px; }
.contact-card { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; padding: 18px 16px; border: 1px solid var(--bordo); background: #fff; }
.contact-card > * { grid-column: 2; }
.contact-card .icon { grid-column: 1; grid-row: 1 / span 4; width: 26px; height: 26px; fill: none; stroke: var(--rosso); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.contact-card h2 { font-size: 20px; letter-spacing: .04em; color: var(--nero); }
.contact-card p, .contact-card address { margin: 0; font-style: normal; color: var(--testo); font-size: 14px; line-height: 1.55; }
.contact-card-link, .contact-social a { justify-self: start; margin-top: 4px; color: var(--rosso); font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 1px solid currentColor; transition: color 200ms ease; }
.contact-card-link:hover, .contact-social a:hover { color: var(--nero); }
.contact-social { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.contact-social a { margin-top: 0; }
@media (min-width: 600px) {
	/* Side by side: icon on top, and the links on one line at the bottom of every card. */
	.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px; }
	.contact-card .icon { margin-bottom: 6px; }
	.contact-card > :last-child { margin-top: auto; }
}
.contact-help { background: var(--footer); padding: 36px var(--gutter) 40px; }
.contact-help h2 { text-align: center; font-size: 28px; color: var(--nero); margin-bottom: 20px; }
.contact-help ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 10px; }
.contact-help a { display: grid; gap: 4px; padding: 16px 44px 16px 18px; background: #fff; color: var(--nero); text-decoration: none; position: relative; transition: box-shadow 200ms ease; }
.contact-help a::after { content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--rosso); transition: transform 200ms var(--ease-out); }
.contact-help a:hover { box-shadow: inset 0 0 0 1px var(--nero); }
.contact-help a:hover::after { transform: translate(4px, -50%); }
.contact-help strong { font: 600 17px var(--heading); letter-spacing: .04em; text-transform: uppercase; }
.contact-help span { font-size: 13px; color: var(--testo); }
@media (min-width: 600px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 750px) {
	.contact-ways { padding: 32px var(--gutter) 56px; }
	.contact-help { padding: 48px var(--gutter) 56px; }
	.contact-help h2 { font-size: 34px; }
	.contact-help ul { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 990px) { .contact-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } .contact-card { padding: 28px 24px; } }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; background: var(--box); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.woocommerce-message .button { min-height: 44px; }
.wc-block-components-title, .wc-block-cart__totals-title { font-family: var(--heading) !important; text-transform: uppercase; }
.wc-block-components-product-name { font-family: var(--heading); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.wc-block-components-text-input input, .wc-blocks-components-select select, .wc-block-components-combobox input { border-radius: 0 !important; }
@media (min-width: 750px) {
	.page-title { padding: 48px 20px 8px; }
	.page-title h1 { font-size: 2rem; }
	.page-content { padding: 32px var(--gutter) 80px; font-size: 14px; }
}

/* ---------- Home page motion ---------- */

/* Hero: title and button rise in once the page paints. Pure CSS, so it runs off the main thread. */
@keyframes mya-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Hero: the title rises word by word out of its own line, then the button follows. */
.hero-content > .hero-sub { animation: mya-rise 700ms var(--ease-out) 380ms both; }
.hero-content > .hero-actions { animation: mya-rise 700ms var(--ease-out) 500ms both; }

/* Scroll reveal: only once the script has armed it (.js-reveal), so crawlers and no-JS visitors see everything. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* Equivalenti photos: a slow uncovering from the bottom as they come into view. */
.js-reveal .equiv-card-img[data-reveal] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js-reveal .equiv-card-img[data-reveal].is-visible { clip-path: inset(0 0 0 0); }

/* ---------- Text motion ---------- */

/* Each word sits in a clipped box and rises into it: the line "draws itself" from below. */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
@keyframes mya-word-up { from { transform: translateY(105%); } to { transform: none; } }
.hero-content h1 .w > span, .coll-banner h1 .w > span { animation: mya-word-up 900ms var(--ease-out) both; animation-delay: calc(150ms + var(--wi) * 90ms); }

/* Section titles: words rise as the title scrolls in, then a short red rule draws underneath. */
.js-reveal .split[data-reveal] { opacity: 1; transform: none; }
.js-reveal .split[data-reveal] .w > span { transform: translateY(105%); transition: transform 800ms var(--ease-out); transition-delay: calc(var(--wi) * 60ms); }
.js-reveal .split[data-reveal].is-visible .w > span { transform: none; }
.intro-title.split::after, .contact h2.split::after, .related > h2.split::after { content: ""; display: block; width: 56px; height: 2px; margin: 14px auto 0; background: currentColor; transform-origin: center; }
.intro-title.split:not(.rosso)::after, .related > h2.split::after { background: var(--rosso); }
.contact h2.split::after { background: #fff; }
.js-reveal .split[data-reveal]::after { transform: scaleX(0); transition: transform 700ms var(--ease-out) 350ms; }
.js-reveal .split[data-reveal].is-visible::after { transform: scaleX(1); }

/* The signup title rises with its block. */
.js-reveal .signup-copy[data-reveal] .split .w > span { transform: translateY(105%); transition: transform 800ms var(--ease-out); transition-delay: calc(150ms + var(--wi) * 50ms); }
.js-reveal .signup-copy[data-reveal].is-visible .split .w > span { transform: none; }

/* Quote: words start pale and light up in reading order as the quote crosses the screen. */
.quote-fill .w { display: inline; }
.js-fill .quote-fill .w > span { color: #d2cfcb; transition: color 350ms ease; }
.js-fill .quote-fill .w.on > span { color: #000; }
.js-fill .quote-fill .w.on:nth-last-child(-n+5) > span { color: var(--rosso); } /* "per offrirti solo il meglio." ends in the brand red */

@media (prefers-reduced-motion: reduce) {
	.split .w > span, .js-reveal .split[data-reveal] .w > span { animation: none !important; transform: none !important; }
	.js-reveal .split[data-reveal]::after { transform: scaleX(1); }
	.js-fill .quote-fill .w > span { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
	/* Fewer, gentler: keep the fades, drop the movement. */
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.hero-content > .hero-sub, .hero-content > .hero-actions { animation: none; }
	.js-reveal [data-reveal] { transform: none; transition: opacity 300ms ease !important; }
	.js-reveal .equiv-card-img[data-reveal] { clip-path: none; opacity: 0; }
	.js-reveal .equiv-card-img[data-reveal].is-visible { opacity: 1; }
}

/* ---------- Account ---------- */
.woocommerce-account .page-content { max-width: 1100px; }
.account-perk { background: var(--box); border-left: 0; padding: 18px 20px; margin-bottom: 28px; }
.account-perk-title { font: 700 1.25rem/1.2 var(--heading); text-transform: uppercase; letter-spacing: .04em; color: var(--rosso); margin-bottom: 6px; }
.account-perk p:last-child { color: var(--testo); }
#customer_login { display: grid; grid-template-columns: 1fr; gap: 40px; }
#customer_login h2, .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 1.5rem; letter-spacing: .1em; margin-bottom: 18px; }
.woocommerce-account form .form-row { margin: 0 0 14px; }
.woocommerce-account form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.woocommerce-account form .input-text, .woocommerce-account form input[type=email], .woocommerce-account form input[type=password], .woocommerce-account form input[type=text], .woocommerce-account form select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #c8c8c8; border-radius: 0; background: #fff; }
.woocommerce-account form .input-text:focus { border-color: #000; outline: none; box-shadow: inset 0 0 0 1px #000; }
.woocommerce-account form .woocommerce-form__label-for-checkbox, .ft-consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; cursor: pointer; }
.woocommerce-account form input[type=checkbox], .ft-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--rosso); }
.woocommerce-account form .button { width: 100%; margin-top: 6px; }
.woocommerce-account .lost_password a, .woocommerce-privacy-policy-text { font-size: 13px; color: var(--testo); }
.woocommerce-privacy-policy-text a, .lost_password a { color: var(--rosso); }
.woocommerce-password-strength { font-size: 12px; margin-top: 6px; }
.anchor { display: block; position: relative; top: -80px; }
.consent legend { font: 700 1rem var(--heading); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.consent { border: 0; padding: 0; margin: 16px 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 4px 0; overflow-x: auto; border-bottom: 1px solid var(--bordo); scrollbar-width: none; }
.woocommerce-MyAccount-navigation a { display: block; padding: 12px 14px; white-space: nowrap; text-decoration: none; font: 600 15px var(--heading); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.woocommerce-MyAccount-navigation .is-active a { border-bottom-color: var(--rosso); color: var(--rosso); }
.perk-copy { min-height: 40px; padding: 0 14px; border: 1px solid var(--nero); background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-MyAccount-content th, .woocommerce-MyAccount-content td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bordo); }
.ft-consent { margin-top: 10px; font-size: 12px; line-height: 1.4; }
.ft-consent input { width: 16px; height: 16px; }
.ft-consent a { color: var(--rosso); }
.member-perk { display: grid; gap: 4px; margin: 4px 0 18px; padding: 14px 16px; background: var(--box); font-size: 14px; }
.member-perk strong { font: 700 1rem var(--heading); text-transform: uppercase; letter-spacing: .06em; color: var(--rosso); }
.member-perk span { color: var(--testo); }
.member-perk a { justify-self: start; margin-top: 6px; color: var(--rosso); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
@media (min-width: 750px) {
	#customer_login { grid-template-columns: 1fr 1fr; gap: 64px; }
	.woocommerce-MyAccount-navigation ul { gap: 8px; }
}
.woocommerce-account .password-input { position: relative; display: block; }
.woocommerce-account .password-input .input-text { padding-right: 52px; }
.show-password-input { position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; color: var(--testo); display: grid; place-items: center; }
.show-password-input::before { content: ""; width: 20px; height: 14px; border: 1.5px solid currentColor; border-radius: 50% / 60%; box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 10px currentColor; }
.show-password-input.display-password::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: currentColor; transform: rotate(-35deg); }

/* ---------- Member discounts, account sections, tracking ---------- */
.account-perk ul { margin: 8px 0 10px; padding-left: 18px; }
.account-perk li { margin: 2px 0; font-weight: 600; }
.account-shortcuts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.account-shortcuts a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--bordo); text-decoration: none; transition: border-color .2s; }
.account-shortcuts a:hover { border-color: var(--rosso); }
.account-shortcuts strong { font: 700 1.15rem var(--heading); text-transform: uppercase; letter-spacing: .06em; color: var(--rosso); }
.account-shortcuts span { color: var(--testo); font-size: 14px; }
.sconti-intro { color: var(--testo); margin-bottom: 20px; max-width: 65ch; }
.sconti-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sconto { border: 2px dashed var(--rosso); padding: 18px 18px 16px; display: grid; gap: 6px; }
.sconto-line { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); }
.sconto-benefit { font: 700 1.25rem/1.2 var(--heading); text-transform: uppercase; letter-spacing: .04em; color: var(--nero); }
.sconto-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.sconto-code span { font: 700 22px/1 ui-monospace, "Courier New", monospace; letter-spacing: .1em; color: var(--rosso); }
.perk-copy { min-height: 40px; padding: 0 14px; border: 1px solid var(--nero); background: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.sconto-link { justify-self: start; margin-top: 4px; color: var(--rosso); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; padding: 6px 0; }
.tracking-box { border: 1px solid var(--bordo); padding: 18px 20px; margin-bottom: 28px; }
.tracking-box h2 { font-size: 1.3rem; letter-spacing: .1em; margin-bottom: 12px; }
.tracking-box dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; }
.tracking-box dt { color: var(--grigio); font-size: 13px; }
.tracking-box dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.tracking-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tracking-actions .btn-primary, .tracking-actions .btn-outline { min-height: 46px; }
.tracking-note { margin-top: 10px; color: var(--testo); font-size: 14px; }
.woocommerce-orders-table { font-size: 14px; }
@media (max-width: 749px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--bordo); }
	.woocommerce-orders-table td, .woocommerce-orders-table th { border: 0 !important; padding: 2px 0 !important; }
	.woocommerce-orders-table td::before { content: attr(data-title) ": "; color: var(--grigio); font-size: 12px; }
}
@media (min-width: 750px) {
	.account-shortcuts { grid-template-columns: 1fr 1fr; }
	.sconti-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Home sign-up section */
.signup { background: var(--footer); padding: 48px var(--gutter); scroll-margin-top: 0; }
.signup-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.signup h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: .06em; color: var(--rosso); margin-bottom: 14px; text-wrap: balance; }
.signup-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.signup-perks li { position: relative; padding-left: 26px; font: 700 1.05rem/1.3 var(--heading); text-transform: uppercase; letter-spacing: .04em; }
.signup-perks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 8px; border: solid var(--rosso); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.signup-copy > p { color: var(--testo); }
.signup-form { display: grid; gap: 10px; }
.signup-form input[type=text], .signup-form input[type=email] { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c8c8c8; background: #fff; border-radius: 0; outline: none; }
.signup-form input:focus { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.signup-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--testo); cursor: pointer; }
.signup-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--rosso); }
.signup-consent a { color: var(--rosso); }
.signup-form button { min-height: 52px; border: 0; background: var(--rosso); color: #fff; font: 700 13px var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, transform 160ms var(--ease-out); }
.signup-form button:hover { background: var(--rosso-hover); }
.signup-form button:active { transform: scale(0.97); }
.signup-notice { padding: 12px 14px; background: #fff; border-left: 0; font-weight: 600; color: var(--rosso); }
@media (min-width: 750px) {
	.signup { padding: 72px var(--gutter); }
	.signup-inner { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
.woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 700; }

/* ---------- Catalog index ---------- */
.catalog-head { padding-bottom: 0; }
.catalog-intro { margin: 10px auto 0; max-width: 46ch; color: var(--testo); }
.catalog-search { display: flex; max-width: 520px; margin: 22px auto 0; border: 1px solid #c8c8c8; background: #fff; }
.catalog-search input { flex: 1; min-width: 0; border: 0; padding: 13px 16px; outline: none; background: none; }
.catalog-search button { width: 50px; border: 0; background: none; cursor: pointer; }
.catalog-search:focus-within { border-color: #000; }
.catalog-jump { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 14px var(--gutter); margin-top: 22px; background: #fff; border-bottom: 1px solid var(--bordo); scrollbar-width: none; }
.catalog-jump::-webkit-scrollbar { display: none; }
.catalog-jump a, .coll-chips a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--bordo); border-radius: 40px; font: 600 15px var(--heading); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.catalog-jump a:hover, .coll-chips a:hover { border-color: #000; }
.coll-chips a[aria-current] { background: #000; border-color: #000; color: #fff; }
.catalog { max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 64px; }
.catalog-section { padding-top: 40px; scroll-margin-top: 70px; }
.catalog-section-head { margin-bottom: 20px; }
.catalog-section-head h2 { font-size: 1.6rem; letter-spacing: .1em; color: var(--rosso); }
.catalog-section-head p { margin-top: 6px; color: var(--testo); }
.catalog-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.catalog-tile a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.catalog-tile-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--box); margin-bottom: 8px; }
.catalog-tile-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .catalog-tile a:hover .catalog-tile-img img { transform: scale(1.04); } }
.catalog-tile-name { font: 700 1.05rem/1.2 var(--heading); text-transform: uppercase; letter-spacing: .06em; }
.catalog-tile-count { font-size: 13px; color: var(--testo); }
.catalog-tiles.is-single { grid-template-columns: 1fr; }
.catalog-tiles.is-single .catalog-tile-img { aspect-ratio: 16 / 7; }
@media (min-width: 750px) {
	.catalog-jump { justify-content: center; }
	.catalog-section { padding-top: 56px; }
	.catalog-section-head h2 { font-size: 2rem; }
	.catalog-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
	.catalog-tiles.is-single { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
}
@media (min-width: 990px) { .catalog-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .catalog-section:first-child .catalog-tiles, #genere .catalog-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Collection pages: where you are in the catalog */
.coll-nav { max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter) 0; }
.coll-path { font-size: 13px; color: var(--testo); margin-bottom: 12px; }
.coll-path a { color: inherit; text-decoration: none; }
.coll-path a:hover { color: var(--rosso); text-decoration: underline; }
.coll-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.coll-chips::-webkit-scrollbar { display: none; }
.coll-chips.is-types { margin-top: 6px; align-items: center; }
.coll-chips.is-types span { flex: none; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--grigio); margin-right: 4px; }
.coll-chips.is-types a { min-height: 34px; font: 500 13px var(--body); text-transform: none; letter-spacing: 0; }
@media (min-width: 990px) { .coll-nav { padding: 22px var(--gutter) 0; } }

/* Lenis smooth scroll (from lenis.css 1.1.20) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }