/* Amica Boutique — step 5: la home fedele al design del kit (design-amica-boutique/home-approvata.png), rifinita.
   Colori misurati sul design (confronta-design.py --colori) e presi dalla guida del kit; caratteri serviti dal sito. */

@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baskervville"; src: url("/assets/fonts/baskervville-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --avorio: #FBF8F4;        /* fondo della pagina */
  --avorio-chiaro: #FCFBF8; /* piede e schede */
  --bianco: #FFFFFF;        /* campi */
  --taupe: #F2ECE3;         /* barra alta, cerchi delle categorie */
  --sabbia: #EFE6DC;        /* fondo della hero e dei banner */
  --sabbia-scura: #E8DACC;  /* ombra calda dei banner */
  --rosa: #F2E5DF;          /* fascia «La passerella è tua» */
  --linea: #E5DDD3;         /* divisori */
  --linea-scura: #D9CFC4;   /* bordi dei campi */
  --inchiostro: #241F1A;    /* titoli, pulsante scuro */
  --testo: #4A423B;         /* testo corrente */
  --testo-tenue: #776D66;   /* sottotitoli */
  --rosso: #A30E30;         /* link e pulsanti WhatsApp */
  --stelle: #E6A73A;        /* stelle delle recensioni */

  --serif: "Baskervville", "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --contenitore: 1320px;
  --margine: 40px;
  --raggio: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);    /* entrate e uscite */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* cose che si spostano sullo schermo */
}

/* ---------------------------------------------------------------- base (e base da telefono, 09 § 5) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
html.menu-aperto { overflow: hidden; }
body { margin: 0; background: var(--avorio); color: var(--testo); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--inchiostro); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
blockquote, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; border-radius: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.4; vertical-align: middle; }
.visuale { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--inchiostro); color: var(--avorio); padding: 10px 16px; border-radius: 4px; }
.salta:focus { top: 12px; }
.contenitore { width: 100%; max-width: calc(var(--contenitore) + 2 * var(--margine)); margin-inline: auto; padding-left: max(var(--margine), env(safe-area-inset-left, 0px)); padding-right: max(var(--margine), env(safe-area-inset-right, 0px)); }
.contenitore--stretto { max-width: calc(820px + 2 * var(--margine)); }

/* ---------------------------------------------------------------- elementi ricorrenti */
.occhiello { font-size: 12.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--inchiostro); font-weight: 500; }
.occhiello--rosso { color: var(--rosso); display: flex; align-items: center; gap: 18px; font-size: 11.5px; }
.link-rosso { display: inline-flex; align-items: center; gap: 10px; color: var(--rosso); font-size: 15px; font-weight: 500; -webkit-user-select: none; user-select: none; }
.link-rosso .ico { width: 18px; height: 18px; stroke-width: 1.6; transition: transform 0.25s var(--ease-out); }
.link-rosso--sottolineato span:not(.rosso-nome), .link-rosso--sottolineato { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link-maiuscolo { display: inline-flex; align-items: center; gap: 10px; color: var(--rosso); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; -webkit-user-select: none; user-select: none; }
.link-maiuscolo .ico { width: 18px; height: 18px; stroke-width: 1.6; transition: transform 0.25s var(--ease-out); }
.tasto-scuro { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 30px; background: var(--inchiostro); color: var(--avorio); border-radius: 3px; font-size: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; -webkit-user-select: none; user-select: none; transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.categoria, .look__foto, .scheda__foto, .articolo__foto { transition: transform 0.16s var(--ease-out); }
.categoria:active, .look__foto:active, .scheda__foto:active, .articolo__foto:active { transform: scale(0.97); }
.tasto-scuro .ico { width: 20px; height: 20px; stroke-width: 1.5; transition: transform 0.25s var(--ease-out); }
.tasto-scuro:active, .tasto-wa:active, .freccia-tonda:active, .tasto-icona:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tasto-scuro:hover { background: #3A332D; }
  .tasto-scuro:hover .ico, .link-rosso:hover .ico, .link-maiuscolo:hover .ico { transform: translateX(4px); }
  .tasto-wa:hover { background: var(--rosso); color: var(--avorio); }
  .testata__menu a:hover { color: var(--rosso); }
  .categoria:hover img { transform: translateY(-3px); }
  .scheda__foto:hover img, .look__foto:hover img, .articolo__foto:hover img { transform: scale(1.035); }
  .freccia-tonda:hover { border-color: var(--inchiostro); }
  .piede a:hover { color: var(--rosso); }
}

/* intestazione delle sezioni: titolo, filo rosso, sottotitolo, link a destra */
.intesta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.intesta h2 { font-size: 44px; line-height: 1.1; }
.intesta__linea { display: inline-block; width: 44px; height: 1.5px; background: var(--rosso); flex: none; }
.intesta__sotto { color: var(--testo-tenue); font-size: 15px; line-height: 1.45; max-width: 470px; }
.intesta .link-rosso { margin-left: auto; }
.sezione { padding-block: 34px; }

/* righe che scorrono col dito (da telefono): niente barra visibile */
.riga-scorre { scrollbar-width: none; }
.riga-scorre::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- barra alta */
.barra-alta { background: var(--taupe); color: var(--testo); font-size: 13px; }
.barra-alta__lista { display: flex; justify-content: space-between; align-items: center; min-height: 46px; gap: 24px; }
.barra-alta__lista li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.barra-alta .ico { width: 22px; height: 22px; stroke-width: 1.2; color: var(--inchiostro); --fondo-icona: var(--taupe); }

/* ---------------------------------------------------------------- testata */
.testata { background: var(--avorio); position: sticky; top: 0; z-index: 20; transition: transform 0.4s var(--ease-in-out), box-shadow 0.25s ease; }
.is-staccata { box-shadow: 0 1px 0 var(--linea), 0 10px 28px -18px rgba(36, 31, 26, 0.35); }
.is-nascosta { transform: translateY(-100%); }
.testata__riga { display: flex; align-items: center; gap: 32px; min-height: 134px; }
.testata__marchio { flex: none; display: block; }
.testata__marchio { transition: transform 0.16s var(--ease-out); }
.testata__marchio:active { transform: scale(0.97); }
.testata__marchio img { height: 108px; width: auto; }
.testata__menu { flex: 1; display: flex; justify-content: center; }
.testata__menu ul { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.testata__menu a { font-size: 15px; color: var(--inchiostro); padding-block: 10px; transition: color 0.2s ease; }
.testata__menu-wa { display: none !important; }
.testata__azioni { display: flex; align-items: center; gap: 8px; flex: none; }
.tasto-icona { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: var(--inchiostro); transition: background-color 0.2s ease, transform 0.16s var(--ease-out); }
.tasto-icona .ico { width: 27px; height: 27px; stroke-width: 1.5; }
.tasto-menu { display: none; }
.tasto-menu .chiudi { display: none; }

/* ---------------------------------------------------------------- hero */
.hero { padding-inline: clamp(16px, 2.65vw, 40px); }
.hero__box { position: relative; max-width: 1400px; margin-inline: auto; height: clamp(540px, 43.4vw, 640px); border-radius: var(--raggio); overflow: hidden; background: linear-gradient(100deg, #F7F1EA 0%, var(--sabbia) 45%, var(--sabbia-scura) 100%); isolation: isolate; }
.hero__foto { position: absolute; inset: 0 0 0 auto; width: 66%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%); mask-image: linear-gradient(90deg, transparent 0%, #000 26%); }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transform-origin: 60% 50%; }
.hero__testo { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: clamp(24px, 4.6vw, 66px); max-width: 640px; }
.hero__filo { width: 58px; height: 2px; background: var(--rosso); margin-bottom: 26px; }
.hero h1 { font-size: clamp(46px, 6.1vw, 88px); line-height: 1.02; letter-spacing: -0.02em; margin: 18px 0 26px; }
.hero__sotto { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: var(--testo); margin-bottom: 34px; }
.hero .link-rosso { margin-top: 30px; }

/* ---------------------------------------------------------------- categorie */
.categorie { padding-block: 24px 12px; }
.categorie__lista { display: flex; justify-content: space-between; gap: 12px; }
.categoria { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 14.5px; line-height: 1.25; color: var(--inchiostro); min-width: 120px; }
.categoria img { width: 124px; height: 124px; transition: transform 0.3s var(--ease-out); }

/* ---------------------------------------------------------------- nuovi arrivi */
.arrivi .intesta { margin-bottom: 22px; }
.arrivi__griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.scheda { display: flex; flex-direction: column; }
.scheda__foto { display: block; aspect-ratio: 17 / 18; border-radius: 6px; overflow: hidden; background: var(--sabbia); }
.scheda__foto img, .look__foto img, .articolo__foto img, .banner__foto img, .passerella__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.scheda__nome { font-family: var(--sans); font-size: 16px; color: var(--inchiostro); margin-top: 14px; letter-spacing: 0; }
.scheda__prezzo { font-size: 14.5px; color: var(--testo-tenue); margin-top: 2px; }
.scheda__taglia { position: relative; margin-top: 14px; }
.scheda__taglia select { width: 100%; height: 46px; appearance: none; -webkit-appearance: none; background: var(--bianco); border: 1px solid var(--linea-scura); border-radius: 3px; padding: 0 44px 0 14px; font: inherit; font-size: 16px; color: var(--inchiostro); cursor: pointer; }
.scheda__taglia .ico { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; stroke-width: 1.6; color: var(--inchiostro); }
.tasto-wa { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 6px 12px; border: 1.5px solid var(--rosso); border-radius: 3px; color: var(--rosso); font-size: 14.5px; font-weight: 500; text-align: center; line-height: 1.2; -webkit-user-select: none; user-select: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out); }
.tasto-wa .ico { width: 24px; height: 24px; stroke-width: 1.6; }

/* ---------------------------------------------------------------- due banner */
.banner-due { padding-block: 10px 30px; }
.banner-due__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.banner { position: relative; height: 300px; border-radius: var(--raggio); overflow: hidden; background: linear-gradient(100deg, var(--sabbia) 0%, var(--sabbia-scura) 100%); isolation: isolate; }
.banner__foto { position: absolute; inset: 0 0 0 auto; width: 56%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.banner--stagione .banner__foto { width: 60%; }
.banner--accessori .banner__foto { width: 46%; }
.banner__testo { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: clamp(22px, 3.4vw, 46px); max-width: 56%; }
.banner h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.05; }
.banner p { font-size: 15.5px; line-height: 1.45; color: var(--testo); margin: 16px 0 26px; }

/* ---------------------------------------------------------------- la passerella è tua */
.passerella { background: var(--rosa); padding-block: 36px 26px; }
.passerella .intesta__linea { width: 40px; }
.passerella__testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; }
.passerella h2 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.05; }
.passerella__testa .link-rosso { margin-bottom: 10px; }
.passerella__sotto { font-size: 17px; color: var(--testo); margin-top: 6px; }
.passerella__foto { display: grid; grid-template-columns: 2.04fr 1fr; gap: 16px; margin-top: 22px; }
.passerella__foto figure { display: flex; flex-direction: column; }
.passerella__foto img { height: 420px; border-radius: 4px; }
.passerella__foto figcaption { font-size: 13.5px; color: var(--testo); margin-top: 8px; }

/* ---------------------------------------------------------------- servizi */
.servizi { padding-block: 22px 6px; }
.servizi__lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.servizio { display: flex; align-items: flex-start; gap: 26px; padding: 6px 40px; border-left: 1px solid var(--linea); }
.servizio:first-child { border-left: 0; padding-left: 10px; }
.servizio__ico { width: 64px; height: 64px; stroke-width: 1.5; color: var(--inchiostro); }
.servizio h3 { font-size: 19px; line-height: 1.2; }
.servizio p { font-size: 14.5px; color: var(--testo-tenue); margin-top: 4px; line-height: 1.45; }
.servizio__bandiera { width: 40px; height: 40px; margin-top: 4px; margin-left: -4px; }

/* ---------------------------------------------------------------- recensioni */
.recensioni { padding-block: 24px 10px; }
.recensioni__testa { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.recensioni .intesta h2 { font-size: 36px; }
.frecce { display: flex; gap: 12px; }
.freccia-tonda { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-scura); display: inline-flex; align-items: center; justify-content: center; background: var(--avorio-chiaro); transition: border-color 0.2s ease, transform 0.16s var(--ease-out); }
.freccia-tonda .ico { width: 18px; height: 18px; stroke-width: 1.8; }
.recensioni__lista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 0px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 8px; }
.recensione { scroll-snap-align: start; text-align: center; padding: 4px 24px; border-left: 1px solid var(--linea); transition: opacity 0.25s ease; }
.recensione:first-child { border-left: 0; }
.stelle { display: flex; justify-content: center; gap: 4px; color: var(--stelle); }
.stelle .ico { width: 21px; height: 21px; }
.recensione blockquote p { font-size: 17px; line-height: 1.5; color: var(--testo); margin-top: 10px; }
.recensioni__lista.gira .recensione { opacity: 0; }

/* ---------------------------------------------------------------- i nostri look */
.look .intesta { margin-bottom: 20px; }
.look .intesta h2, .magazine .intesta h2 { font-size: 38px; }
.look .link-rosso { font-size: 15px; }
.look__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.look__foto { display: block; aspect-ratio: 1 / 0.96; border-radius: 4px; overflow: hidden; background: var(--sabbia); }

/* ---------------------------------------------------------------- magazine */
.magazine { padding-bottom: 40px; }
.magazine .intesta { margin-bottom: 22px; }
.magazine__lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.articolo { display: flex; gap: 26px; padding: 0 30px; border-left: 1px solid var(--linea); }
.articolo:first-child { border-left: 0; padding-left: 0; }
.articolo:last-child { padding-right: 0; }
.articolo__foto { flex: none; width: 46%; aspect-ratio: 1.45; border-radius: 4px; overflow: hidden; background: var(--sabbia); }
.articolo__testo { display: flex; flex-direction: column; align-items: flex-start; }
.articolo h3 { font-size: 19.5px; line-height: 1.2; }
.articolo p { font-size: 14.5px; line-height: 1.45; color: var(--testo-tenue); margin: 10px 0 14px; }

/* ---------------------------------------------------------------- piede */
.piede { background: var(--avorio-chiaro); border-top: 1px solid var(--linea); color: var(--testo); font-size: 14.5px; }
.piede__griglia { display: grid; grid-template-columns: 1.15fr 1.45fr 0.8fr 0.72fr 1fr 1.5fr; padding-top: 34px; }
.piede__griglia > * { padding-inline: 26px; border-left: 1px solid var(--linea); }
.piede__griglia > :first-child { border-left: 0; padding-left: 0; }
.piede__griglia > :last-child { padding-right: 0; border-left: 1px solid var(--linea); }
.piede h2 { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--inchiostro); margin-bottom: 14px; letter-spacing: 0; }
.piede ul li + li { margin-top: 4px; }
.piede ul a { color: var(--testo-tenue); transition: color 0.2s ease; }
.piede__marchio img { height: 108px; width: auto; }
.piede__marchio p { font-size: 18px; line-height: 1.4; color: var(--inchiostro); margin-top: 18px; }
.piede__riga { display: flex; align-items: flex-start; gap: 14px; color: var(--testo-tenue); }
.piede__riga + .piede__riga { margin-top: 14px; }
.piede__riga .ico { width: 26px; height: 26px; stroke-width: 1.5; color: var(--inchiostro); margin-top: 1px; }
.piede__grande { font-size: 23px; color: var(--inchiostro); align-items: center; }
.piede__grande a { color: var(--inchiostro); }
.piede__social li + li { margin-top: 10px; }
.piede__social a { display: flex; align-items: center; gap: 14px; }
.piede__social .ico { width: 26px; height: 26px; color: var(--inchiostro); stroke-width: 1.5; }
.piede__firma-donna { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; position: relative; min-height: 250px; }
.piede__firma-donna p { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--inchiostro); padding-bottom: 46px; white-space: nowrap; }
.piede__firma-donna img { width: 150px; height: auto; margin-top: -40px; }
.piede__fondo { border-top: 1px solid var(--linea); margin-top: 10px; }
.piede__fondo-riga { display: flex; justify-content: space-between; align-items: center; gap: 12px 30px; flex-wrap: wrap; padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--testo-tenue); }
.piede__legale a, .credit a { color: var(--testo-tenue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea-scura); }
.credit a { color: var(--inchiostro); }

/* ---------------------------------------------------------------- pagine legali e 404 */
.pagina-legale main, .pagina-404 main { padding-block: 56px 72px; }
.legale h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.1; margin-bottom: 10px; }
.legale h1 + p { color: var(--testo-tenue); font-size: 14.5px; margin-bottom: 30px; }
.legale h2 { font-size: 26px; line-height: 1.2; margin: 36px 0 12px; }
.legale p, .legale li { font-size: 16.5px; line-height: 1.65; }
.legale p + p { margin-top: 12px; }
.legale ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--rosso); text-decoration: underline; text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legale th { font-weight: 600; color: var(--inchiostro); background: var(--taupe); }
.errore { text-align: center; }
.errore h1 { font-size: clamp(40px, 6vw, 64px); margin: 14px 0 18px; }
.errore .occhiello { justify-content: center; }
.errore > p { font-size: 18px; max-width: 560px; margin-inline: auto; }
.errore__azioni { margin-top: 30px; }
.errore__link { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-top: 26px; }

/* ---------------------------------------------------------------- computer stretto e tablet */
@media (max-width: 1180px) {
  .testata__menu ul { gap: 18px; }
  .testata__menu a { font-size: 14px; }
  .piede__griglia { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .piede__griglia > :nth-child(4) { border-left: 0; padding-left: 0; }
  .piede__firma-donna { justify-content: flex-start; }
}

@media (max-width: 1020px) {
  :root { --margine: 24px; }
  .barra-alta__lista { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; gap: 34px; }
  .barra-alta__lista::-webkit-scrollbar { display: none; }
  .testata { padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 1px 0 var(--linea); }
  .testata__riga { min-height: 82px; gap: 12px; justify-content: space-between; }
  .testata__marchio img { height: 66px; }
  .tasto-menu { display: inline-flex; }
  .testata__menu { position: fixed; inset: 0; top: 0; z-index: -1; height: 100dvh; background: var(--avorio); padding: calc(128px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); flex-direction: column; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.25s var(--ease-out), visibility 0s linear 0.25s; }
  .menu-aperto .testata__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s; }
  .testata__menu ul { flex-direction: column; gap: 0; }
  .testata__menu li { border-bottom: 1px solid var(--linea); }
  .testata__menu a { display: block; font-family: var(--serif); font-size: 30px; padding-block: 14px; }
  .testata__menu-wa { display: inline-flex !important; align-items: center; gap: 12px; margin-top: 28px; color: var(--rosso) !important; font-family: var(--sans) !important; font-size: 17px !important; font-weight: 500; }
  .testata__menu-wa .ico { width: 26px; height: 26px; stroke-width: 1.6; }
  .menu-aperto .tasto-menu .apri { display: none; }
  .menu-aperto .tasto-menu .chiudi { display: block; }
  .hero__box { height: auto; display: flex; flex-direction: column; }
  .hero__foto { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3.3; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .hero__img { transform: scale(1.5); transform-origin: 60% 50%; }
  .hero__testo { padding: 0 24px 34px; margin-top: -28px; max-width: none; }
  .hero__filo { margin-bottom: 18px; }
  .intesta h2 { font-size: 36px; }
  .intesta .link-rosso { margin-left: 0; }
  .categorie__lista { overflow-x: auto; scroll-snap-type: x proximity; justify-content: flex-start; gap: 6px; padding-bottom: 4px; }
  .categorie__lista li { scroll-snap-align: start; }
  .categoria { min-width: 96px; font-size: 13.5px; }
  .categoria img { width: 92px; height: 92px; }
  .arrivi__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .servizi__lista { grid-template-columns: 1fr; }
  .servizio, .servizio:first-child { border-left: 0; padding: 16px 0; border-top: 1px solid var(--linea); }
  .servizio:first-child { border-top: 0; }
  .look__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- telefono */
@media (max-width: 760px) {
  :root { --margine: 16px; }
  body { font-size: 15.5px; }
  .barra-alta { font-size: 12px; }
  .barra-alta__lista { min-height: 38px; gap: 26px; }
  .barra-alta .ico { width: 18px; height: 18px; }
  .testata__riga { min-height: 74px; }
  .testata__marchio img { height: 60px; }
  .tasto-icona { width: 44px; height: 44px; }
  .tasto-icona .ico { width: 25px; height: 25px; }
  .hero { padding-inline: 12px; }
  .hero__testo { padding: 0 20px 30px; }
  .occhiello { font-size: 11px; letter-spacing: 0.26em; }
  .hero h1 { font-size: 46px; margin: 14px 0 18px; }
  .hero__sotto { font-size: 17px; margin-bottom: 26px; }
  .hero__sotto br { display: none; }
  .tasto-scuro { width: 100%; min-height: 54px; font-size: 13px; letter-spacing: 0.14em; }
  .hero .link-rosso { margin-top: 22px; }
  .sezione { padding-block: 26px; }
  .intesta { gap: 10px 16px; }
  .intesta h2 { font-size: 32px; }
  .intesta__sotto { font-size: 14.5px; flex-basis: 100%; }
  .intesta__sotto br { display: none; }
  .intesta .link-rosso { flex-basis: 100%; font-size: 14.5px; }
  /* le serie scorrono col dito: schede all'80%, si vede il bordo della successiva */
  .riga-scorre { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); overscroll-behavior-x: contain; }
  .riga-scorre > li { scroll-snap-align: start; }
  .categorie__lista { grid-auto-columns: 92px; gap: 4px; }
  .banner-due__lista { grid-auto-columns: 84%; gap: 14px; }
  .banner { height: auto; display: flex; flex-direction: column; }
  .banner__foto, .banner--stagione .banner__foto, .banner--accessori .banner__foto { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 11; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
  .banner__testo { padding: 0 20px 22px; max-width: none; margin-top: -8px; }
  .banner h2 { font-size: 28px; }
  .banner p { font-size: 14.5px; margin: 10px 0 14px; }
  .banner p br { display: none; }
  .passerella { padding-block: 30px 22px; }
  .passerella__testa { flex-direction: column; align-items: flex-start; gap: 12px; }
  .passerella h2 { font-size: 40px; }
  .passerella__sotto { font-size: 15.5px; }
  .passerella__foto { grid-auto-columns: 84%; gap: 12px; }
  .passerella__foto img { height: auto; aspect-ratio: 4 / 3.4; }
  .servizi { padding-block: 10px 0; }
  .servizio { gap: 18px; padding: 14px 0; }
  .servizio__ico { width: 48px; height: 48px; }
  .servizio p br, .servizio h3 br { display: none; }
  .recensioni__testa { flex-wrap: wrap; }
  .recensioni .intesta h2 { font-size: 30px; }
  .recensioni__lista { grid-auto-columns: 84%; gap: 12px; margin-top: 14px; }
  .recensione, .recensione:first-child { border: 1px solid var(--linea); border-radius: 6px; padding: 18px 16px; background: var(--avorio-chiaro); }
  .recensione blockquote p br { display: none; }
  .look__lista { grid-auto-columns: 78%; gap: 12px; }
  .look .intesta h2, .magazine .intesta h2 { font-size: 30px; }
  .magazine__lista { grid-auto-columns: 84%; gap: 14px; }
  .articolo, .articolo:first-child, .articolo:last-child { padding: 0; border-left: 0; flex-direction: column; gap: 14px; }
  .articolo__foto { width: 100%; aspect-ratio: 16 / 10; }
  .articolo p br { display: none; }
  .piede__griglia { grid-template-columns: 1fr 1fr; padding-top: 30px; row-gap: 26px; }
  .piede__griglia > *, .piede__griglia > :last-child { border-left: 0; padding-inline: 0; }
  .piede__griglia > :nth-child(odd) { padding-right: 12px; }
  .piede__marchio, .piede__negozio, .piede__firma-donna { grid-column: 1 / -1; }
  .piede__marchio { display: flex; align-items: center; gap: 18px; }
  .piede__marchio img { height: 84px; }
  .piede__marchio p { margin-top: 0; font-size: 16px; }
  .piede__grande { font-size: 21px; }
  .piede__firma-donna { justify-content: space-between; min-height: 0; border-top: 1px solid var(--linea); padding-top: 10px !important; }
  .piede__firma-donna p { padding-bottom: 30px; }
  .piede__firma-donna img { width: 120px; margin-top: 0; }
  .piede__fondo-riga { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 40px; }
  .testata__marchio img { height: 52px; }
}


/* avviso armonizzato della garanzia, nelle condizioni di vendita */
.legale figure { margin: 18px 0; }
.legale figure img { width: 100%; max-width: 420px; border: 1px solid var(--linea); }
.legale figcaption { font-size: 13.5px; color: var(--testo-tenue); margin-top: 8px; }

/* ================================================================ 5-bis · il movimento
   Curve e durate di 09 § 0-bis-2 (regole di Emil Kowalski): solo transform e opacity, entrate più lente delle uscite. */

/* la hero entra al caricamento, in CSS: titolo, testi e pulsante; la foto non parte mai da opacity 0 */
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes filo { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: none; } }
@keyframes respiro { from { transform: scale(calc(var(--zoom) + 0.09)); } to { transform: scale(var(--zoom)); } }
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }
.hero__img { --zoom: 1.25; transform: scale(var(--zoom)); animation: respiro 1.8s var(--ease-out) both; }
.hero__filo { transform-origin: left center; animation: filo 0.9s var(--ease-out) 0.05s both; }
.hero__testo > :not(.hero__filo) { animation: entra 0.85s var(--ease-out) both; }
.hero__testo > :nth-child(2) { animation-delay: 0.1s; }
.hero__testo > :nth-child(3) { animation-delay: 0.18s; }
.hero__testo > :nth-child(4) { animation-delay: 0.28s; }
.hero__testo > :nth-child(5) { animation-delay: 0.36s; }
.hero__testo > :nth-child(6) { animation-delay: 0.44s; }
@media (max-width: 1020px) { .hero__img { --zoom: 1.5; } }

/* le sezioni arrivano scorrendo: .reveal → .in, una volta sola (main.js); senza JavaScript tutto è visibile */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js li.reveal:nth-child(2) { transition-delay: 60ms; }
.js li.reveal:nth-child(3) { transition-delay: 120ms; }
.js li.reveal:nth-child(4) { transition-delay: 180ms; }
.js li.reveal:nth-child(5) { transition-delay: 240ms; }
.js li.reveal:nth-child(6) { transition-delay: 300ms; }
.js li.reveal:nth-child(7) { transition-delay: 360ms; }
.js li.reveal:nth-child(n+8) { transition-delay: 420ms; }

/* le immagini delle schede si avvicinano col mouse; i pulsanti rispondono al dito (:active) */
.tasto-wa .ico, .tasto-icona .ico { transition: transform 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tasto-icona:hover { background: var(--taupe); }
  .tasto-wa:hover .ico { transform: rotate(-8deg); }
  .banner:hover .banner__foto img { transform: scale(1.04); }
  .barra-alta a:hover { color: var(--rosso); }
}

/* il menu da telefono: le voci arrivano una dopo l'altra, e se ne vanno più in fretta */
@media (max-width: 1020px) {
  .testata__menu li, .testata__menu-wa { opacity: 0; transform: translateY(14px); transition: opacity 0.15s ease, transform 0.18s var(--ease-out); }
  .menu-aperto .testata__menu li, .menu-aperto .testata__menu-wa { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); }
  .menu-aperto .testata__menu li:nth-child(2) { transition-delay: 40ms; }
  .menu-aperto .testata__menu li:nth-child(3) { transition-delay: 80ms; }
  .menu-aperto .testata__menu li:nth-child(4) { transition-delay: 120ms; }
  .menu-aperto .testata__menu li:nth-child(5) { transition-delay: 160ms; }
  .menu-aperto .testata__menu li:nth-child(6) { transition-delay: 200ms; }
  .menu-aperto .testata__menu li:nth-child(7) { transition-delay: 240ms; }
  .menu-aperto .testata__menu-wa { transition-delay: 280ms; }
  .tasto-menu .ico { transition: transform 0.25s var(--ease-out), opacity 0.2s ease; }
  .menu-aperto .tasto-menu .chiudi { animation: compare 0.2s ease both; }
}

/* meno movimento, non zero: restano le dissolvenze, spariscono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__img { animation: none; }
  .hero__filo, .hero__testo > :not(.hero__filo) { animation-name: compare; animation-duration: 0.5s; }
  .js .reveal { transform: none; transition: opacity 0.5s ease; }
  .testata { transition: box-shadow 0.25s ease; }
  .is-nascosta { transform: none; }
  .testata__menu, .menu-aperto .testata__menu, .testata__menu li, .menu-aperto .testata__menu li, .testata__menu-wa, .menu-aperto .testata__menu-wa { transform: none; }
  .scheda__foto img, .look__foto img, .articolo__foto img, .banner__foto img, .passerella__foto img { transition: none; }
}