/* Boutique Stefany — step 5, la home fedele al design (versione 6), rifinita.
   Colori misurati dal design con confronta-design.py; carattere Onest (il più vicino al design che abbia anche il cirillico). */

@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-cirillico.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --crema: #FBF5F0;
  --crema-testata: #FAF2EC;
  --avorio: #F8F0E6;
  --scheda: #FCF9F6;
  --inchiostro: #26140D;
  --espresso: #3B271E;
  --testo: #4F433D;
  --testo-tenue: #6F6460;
  --oro: #CCA566;
  --oro-scuro: #AC762B;
  --oro-icone: #B88624;
  --linea-oro: #E3C7A2;
  --mappa: #F6EBDB;
  --ombra: rgba(43, 29, 22, .10);
  --ombra-forte: rgba(43, 29, 22, .16);
  --raggio: 16px;
  --raggio-piccolo: 12px;
  --gutter: clamp(16px, 4vw, 48px);
  --largo: 1240px;
  --testata: 96px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0; background: var(--crema); color: var(--testo);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { color: var(--inchiostro); font-weight: 700; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, select, input { font: inherit; }
a, button, select { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 3px; border-radius: 6px; }

.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--espresso); color: var(--crema); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.salta:focus { top: 12px; }
.contenitore { width: min(100% - 2 * var(--gutter), var(--largo)); margin-inline: auto; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── pulsanti ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font-weight: 600;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform 140ms var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
.btn-scuro { background: var(--espresso); color: var(--crema); padding: 1.02em 1.7em; font-size: 1.0625rem; box-shadow: 0 10px 24px var(--ombra-forte); }
.btn-scuro svg { width: 1.25em; height: auto; color: var(--crema); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-scuro:hover { background: #26140D; box-shadow: 0 14px 30px var(--ombra-forte); }
  .btn-scuro:hover svg { transform: translateX(3px); }
}
.btn-scuro svg { transition: transform .2s var(--ease-out); }
.ico-wa { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* ── intestazione ── */
.testata { position: sticky; top: 0; z-index: 40; background: var(--crema-testata); transition: box-shadow .25s ease; }
.testata.scorsa { box-shadow: 0 6px 24px var(--ombra); }
.testata-riga { height: var(--testata); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { width: auto; height: 58px; }
.menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); }
.menu ul { display: flex; gap: clamp(20px, 2.8vw, 44px); }
.menu a { text-decoration: none; color: var(--inchiostro); font-weight: 500; font-size: 1.0625rem; position: relative; padding: 6px 0; -webkit-user-select: none; user-select: none; }
.menu ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menu ul a:hover::after { transform: scaleX(1); } }
.cerca { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.cerca img { width: 24px; height: 24px; }
.cerca:active { transform: scale(.94); }
.apri-menu { display: none; }

/* ── hero ── */
.hero { position: relative; overflow: hidden; background: var(--crema) url("/assets/img/fondi/fondo-hero-avorio-oro.webp") center / cover no-repeat; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, var(--crema-testata) 0%, rgba(250, 242, 236, 0) 100%); pointer-events: none; }
.hero-riga { position: relative; min-height: 600px; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero-testo { position: relative; z-index: 2; padding: 64px 0 72px; }
.occhiello { text-transform: uppercase; letter-spacing: .045em; font-size: .9375rem; font-weight: 500; color: var(--inchiostro); margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 4.6vw, 3.9rem); line-height: 1.07; }
.hero h1 .oro { display: block; color: var(--oro); }
.hero-sotto { font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); line-height: 1.5; margin: 24px 0 38px; max-width: 26ch; color: var(--testo); }
.hero-arte { position: relative; z-index: 1; width: 100%; aspect-ratio: 680 / 520; }
.borsa { position: absolute; filter: drop-shadow(0 14px 18px rgba(43, 29, 22, .20)); }
.borsa img { width: 100%; height: auto; }
.borsa-pochette   { left: 4.41%;  top: 9%;     width: 36.76%; }
.borsa-bauletto   { left: 48.53%; top: 3%;     width: 39.71%; }
.borsa-trapuntata { left: 0;      top: 57.69%; width: 39.71%; }
.borsa-hobo       { left: 31.62%; top: 50.38%; width: 36.76%; }
.borsa-tracolla   { left: 58.82%; top: 55.77%; width: 41.18%; }
/* i fianchi tagliati nelle foto: coperti da un'altra borsa, e dove non si può sfumano nel fondo */
.borsa-pochette img, .borsa-bauletto img { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 3%, #000 8.5%, #000 91.5%, rgba(0,0,0,.55) 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 3%, #000 8.5%, #000 91.5%, rgba(0,0,0,.55) 97%, transparent 100%); }
.borsa-hobo img { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 90%, transparent 100%); }
.borsa-trapuntata img { -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, #000 94%, transparent 100%); }

/* ── marchi ── */
.marchi { background: var(--crema-testata); border-block: 1px solid rgba(227, 199, 162, .45); }
.marchi-riga { display: flex; align-items: center; gap: 28px; min-height: 120px; padding-block: 18px; }
.marchi-titolo { flex: none; width: 150px; font-size: .9375rem; line-height: 1.35; color: var(--inchiostro); }
.marchi-lista { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.marchi-lista li { display: flex; align-items: center; justify-content: center; padding-inline: 18px; min-height: 52px; }
.marchi-lista li + li { border-left: 1px solid var(--linea-oro); }
.marchi-lista img { width: auto; filter: brightness(0); opacity: .82; }
.logo-valentino-bags { height: 20px; }
.logo-john-richmond { height: 22px; }
.logo-mbrc { height: 28px; }
.logo-gio-cellini { height: 17px; }
.logo-bhpc { height: 54px; }
.marchio-testo { flex-direction: column; text-align: center; line-height: 1.2; color: var(--inchiostro); font-weight: 600; font-size: .9375rem; }
.marchio-testo em { font-weight: 400; color: var(--testo); font-size: .875rem; }

/* ── sezioni ── */
.sezione { padding-block: clamp(44px, 4.2vw, 60px); }
.contatti { padding-bottom: 0; }
.sezione-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.sezione h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.375rem); line-height: 1.1; text-wrap: balance; }
.sotto-titolo { margin-top: 8px; font-size: clamp(1rem, .92rem + .35vw, 1.25rem); color: var(--testo); }

/* ── catalogo ── */
.filtri { display: flex; gap: 16px; flex: none; }
.filtro { position: relative; }
.filtro select {
  -webkit-appearance: none; appearance: none; cursor: pointer; font-size: 1rem; color: var(--inchiostro);
  background: rgba(252, 249, 246, .7); border: 1px solid var(--linea-oro); border-radius: 12px;
  padding: 11px 46px 11px 20px; min-height: 48px; transition: border-color .2s ease, background-color .2s ease;
}
.filtro img { position: absolute; right: 18px; top: 50%; width: 14px; height: auto; transform: translateY(-50%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .filtro select:hover { border-color: var(--oro); background: var(--scheda); } }
.schede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.scheda { background: #FDFBF9; border-radius: var(--raggio); overflow: hidden; box-shadow: 0 10px 30px var(--ombra); display: flex; flex-direction: column; transition: transform .25s var(--ease-out), box-shadow .25s ease; }
@media (hover: hover) and (pointer: fine) { .scheda:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--ombra-forte); } }
.scheda[hidden] { display: none; }
.scheda-foto { aspect-ratio: 1 / 1; overflow: hidden; background: var(--avorio); }
.scheda-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(var(--zoom, 1)); transform-origin: 50% 0; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .scheda:hover .scheda-foto img { transform: scale(calc(var(--zoom, 1) * 1.05)); } .video-scheda:hover video { transform: scale(1.04); } }
.video-scheda video { transition: transform 700ms var(--ease-out); }
.scheda-corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.scheda h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.01em; }
.scheda-modello { margin-top: 6px; font-size: .9375rem; line-height: 1.35; min-height: 2.7em; color: var(--testo); }
.prezzo-etichetta { margin-top: 18px; font-size: .875rem; color: var(--testo); }
.prezzo { font-size: 1.4375rem; font-weight: 700; color: var(--inchiostro); letter-spacing: -.01em; margin-bottom: 18px; }
.btn-wa { margin-top: auto; background: var(--espresso); color: var(--crema); font-size: .9375rem; padding: .78em 1em; width: 100%; }
@media (hover: hover) and (pointer: fine) { .btn-wa:hover { background: #26140D; } }
.catalogo-piede { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.nota { font-size: .9375rem; color: var(--testo); }
.link-oro { color: var(--oro-scuro); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; display: inline-flex; align-items: center; gap: .4em; }
.link-oro svg { width: 1.05em; height: auto; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-oro:hover svg { transform: translateX(3px); } }
[data-v~="vuoto"] { grid-column: 1 / -1; text-align: center; padding: 40px 20px; background: var(--scheda); border-radius: var(--raggio); }
[data-v~="vuoto"] button { margin-top: 14px; background: transparent; border: 1px solid var(--linea-oro); color: var(--inchiostro); border-radius: 999px; padding: 10px 20px; cursor: pointer; }

/* ── categorie ── */
.categorie { padding-block: 0 clamp(16px, 1.5vw, 24px); }
.categorie ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.categoria {
  display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 116px; text-decoration: none;
  background: var(--avorio); border: 1px solid var(--linea-oro); border-radius: 999px; color: var(--inchiostro);
  font-weight: 600; font-size: 1.3125rem; letter-spacing: -.01em; -webkit-user-select: none; user-select: none;
  transition: transform .2s var(--ease-out), background-color .2s ease, box-shadow .2s ease;
}
.categoria img { width: 46px; height: 46px; object-fit: contain; }
.categoria:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .categoria:hover { background: #FCF9F6; box-shadow: 0 10px 26px var(--ombra); } }

/* ── valori ── */
.valori-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.valore { background: var(--scheda); border-radius: var(--raggio); padding: 36px 26px 34px; text-align: center; box-shadow: 0 8px 26px rgba(43, 29, 22, .06); }
.valore img { width: auto; height: 54px; margin: 0 auto 22px; }
.valore h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.01em; }
.valore p { margin-top: 10px; font-size: 1rem; line-height: 1.45; }

/* ── video ── */
.video-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.video-scheda { position: relative; aspect-ratio: 9 / 14; border-radius: var(--raggio); overflow: hidden; background: #2F221F; cursor: pointer; box-shadow: 0 12px 30px var(--ombra); }
.video-scheda video { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; left: 50%; top: 45%; width: 64px; height: 64px; transform: translate(-50%, -50%); transition: opacity .35s ease; pointer-events: none; }
.video-scheda.in-onda .video-play { opacity: 0; }
.video-titolo { position: absolute; left: 0; right: 0; bottom: 0; min-height: 84px; display: grid; place-items: center; padding: 14px 16px; text-align: center; color: #FBF5F0; font-weight: 600; font-size: 1.125rem; line-height: 1.25; background: rgba(54, 40, 34, .62); }

/* ── contatti ── */
.contatti-griglia { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; }
.contatti-foto { position: relative; border-radius: var(--raggio) 0 0 var(--raggio); overflow: hidden; min-height: 440px; }
.contatti-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.scheda-contatti { position: relative; z-index: 1; margin-left: -28px; background: #FAF6F3; border-radius: var(--raggio); box-shadow: 0 16px 40px var(--ombra); padding: 34px 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.scheda-contatti h3 { font-size: 1.75rem; line-height: 1.15; margin-bottom: 20px; }
.contatti-lista { display: grid; gap: 14px; margin-bottom: 24px; }
.contatti-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1rem; line-height: 1.45; color: var(--inchiostro); }
.contatti-lista img { width: 20px; height: 24px; object-fit: contain; margin-top: 1px; }
.contatti-lista strong { display: block; font-weight: 600; }
.contatti-lista a { text-decoration: none; }
.contatti-lista a:not(.btn) { border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .contatti-lista a:hover { border-color: var(--linea-oro); } }
.social { display: flex; gap: 18px; margin: -6px 0 22px 38px; font-size: .9375rem; }
.social a { color: var(--oro-scuro); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-grande { width: 100%; font-size: 1.0625rem; padding: 1em 1.2em; }
.come-arrivare { align-self: center; margin-top: 16px; }

/* ── mappa al clic ── */
.mappa { margin-top: 26px; position: relative; border-radius: 20px; overflow: hidden; min-height: 176px; background: var(--mappa) url("/assets/img/fondi/fondo-mappa-decorativo.webp") center / cover no-repeat; display: grid; place-items: center; text-align: center; }
.mappa-avviso { padding: 24px 20px; max-width: 640px; display: grid; justify-items: center; gap: 10px; }
.mappa-avviso img { width: 26px; height: auto; }
.mappa-avviso p { font-size: .875rem; color: var(--testo); }
.mappa-avviso p a { color: var(--oro-scuro); }
.mappa-avviso button { background: var(--espresso); color: var(--crema); border: 0; border-radius: 999px; padding: .7em 1.4em; font-weight: 600; cursor: pointer; }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa.caricata { min-height: 360px; }

/* ── piè di pagina ── */
.piede { margin-top: 28px; background: var(--crema); border-top: 1px solid rgba(227, 199, 162, .6); font-size: .9375rem; color: var(--testo); }
.piede-riga { display: flex; align-items: center; gap: 30px; padding-block: 26px; }
.piede-riga + .piede-riga { border-top: 1px solid rgba(227, 199, 162, .45); }
.piede-logo img { height: 46px; width: auto; }
.piede-menu { display: flex; flex-wrap: wrap; gap: 10px 30px; padding-inline: 30px; border-inline: 1px solid var(--linea-oro); }
.piede-menu a { text-decoration: none; color: var(--inchiostro); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .piede-menu a:hover { color: var(--oro-scuro); } }
.piede-societa { margin-left: auto; line-height: 1.5; color: var(--inchiostro); }
.piede-contatti { flex-wrap: wrap; gap: 10px 26px; }
.piede-contatti a { color: var(--inchiostro); text-decoration: none; }
.piede-contatti .social-piede a { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 4px; }
.piede-legale { justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: .875rem; color: var(--testo-tenue); }
.piede-legale a { color: inherit; }
.credit a { color: var(--inchiostro); font-weight: 600; }

/* ── WhatsApp fisso, solo telefono ── */
.wa-fisso { display: none; }

/* ── pagine semplici (legali, 404) ── */
.pagina-semplice { padding-block: clamp(48px, 7vw, 90px); }
.pagina-semplice h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1; margin-bottom: 18px; }
.testo-legale { max-width: 780px; }
.testo-legale h2 { font-size: 1.375rem; margin: 34px 0 10px; }
.testo-legale h3 { font-size: 1.125rem; margin: 24px 0 8px; }
.testo-legale p, .testo-legale li { margin-bottom: 10px; }
.testo-legale ul, .testo-legale ol { list-style: disc; padding-left: 1.3em; margin-bottom: 14px; }
.testo-legale table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; font-size: .9375rem; }
.testo-legale th, .testo-legale td { border: 1px solid var(--linea-oro); padding: 8px 10px; text-align: left; vertical-align: top; }
.testo-legale a { color: var(--oro-scuro); }
.errore-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }

/* ── tablet ── */
@media (max-width: 1180px) and (min-width: 861px) {
  .hero-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; min-height: 0; }
  .hero-testo { padding: 48px 0 52px; }
  .hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
  .hero-sotto { margin: 18px 0 28px; }
}
@media (max-width: 1100px) {
  .marchi-riga { flex-direction: column; align-items: stretch; gap: 10px; }
  .marchi-titolo { width: auto; text-align: center; }
  .marchi-titolo br { display: none; }
  .marchi-lista { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .schede, .valori-griglia, .video-griglia { gap: 16px; }
  .categoria { min-height: 92px; font-size: 1.125rem; gap: 14px; }
  .piede-riga { flex-wrap: wrap; }
  .piede-societa { margin-left: 0; }
}

/* ── telefono ── */
@media (max-width: 860px) {
  :root { --testata: 72px; }
  .logo img { height: 42px; }
  .menu { position: fixed; inset: 0; z-index: 60; flex-direction: column; justify-content: center; gap: 30px; background: var(--crema-testata); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--testata) + 20px) 24px 40px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  .menu ul { flex-direction: column; align-items: center; gap: 22px; }
  .menu a { font-size: 1.5rem; }
  html.menu-aperto .menu { opacity: 1; visibility: visible; transition: opacity .25s ease; }
  .apri-menu { display: grid; place-items: center; position: relative; z-index: 70; width: 48px; height: 48px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; -webkit-user-select: none; user-select: none; }
  .apri-menu span, .apri-menu span::before, .apri-menu span::after { display: block; width: 24px; height: 2px; background: var(--inchiostro); border-radius: 2px; transition: transform .25s var(--ease-out), background-color .2s ease; }
  .apri-menu span { position: relative; }
  .apri-menu span::before, .apri-menu span::after { content: ""; position: absolute; left: 0; }
  .apri-menu span::before { top: -7px; }
  .apri-menu span::after { top: 7px; }
  html.menu-aperto .apri-menu span { background: transparent; }
  html.menu-aperto .apri-menu span::before { transform: translateY(7px) rotate(45deg); }
  html.menu-aperto .apri-menu span::after { transform: translateY(-7px) rotate(-45deg); }
  .testata-azioni { display: flex; align-items: center; gap: 4px; position: relative; z-index: 70; }

  .hero-testo { padding: 40px 0 8px; max-width: none; }
  .occhiello { font-size: .8125rem; margin-bottom: 16px; }
  .hero-sotto { margin: 16px 0 26px; }
  .hero-riga { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-arte { width: 100%; margin: 14px 0 24px; }

  .marchi-riga { padding-block: 22px; }
  .marchi-lista { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .marchi-lista li { padding-inline: 8px; min-height: 48px; }
  .marchi-lista li + li { border-left: 0; }
  .marchi-lista li:nth-child(3n+2), .marchi-lista li:nth-child(3n+3) { border-left: 1px solid var(--linea-oro); }
  .logo-valentino-bags { height: 13px; }
  .logo-john-richmond { height: 14px; }
  .logo-mbrc { height: 22px; }
  .logo-gio-cellini { height: 11px; }
  .logo-bhpc { height: 40px; }
  .marchio-testo { font-size: .8125rem; }
  .marchio-testo em { font-size: .75rem; }

  .sezione-testa { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
  .filtri { width: 100%; gap: 10px; }
  .filtro { flex: 1; }
  .filtro select { width: 100%; font-size: 1rem; padding-left: 14px; }
  .schede { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .schede::-webkit-scrollbar { display: none; }
  .schede > li { flex: 0 0 68%; scroll-snap-align: start; }
  .scheda-corpo { padding: 12px 12px 14px; }
  .scheda h3 { font-size: 1.0625rem; }
  .scheda-modello { font-size: .875rem; }
  .prezzo-etichetta { margin-top: 10px; font-size: .8125rem; }
  .prezzo { font-size: 1.125rem; margin-bottom: 12px; }
  .btn-wa { font-size: .875rem; padding: .8em .6em; }
  .catalogo-piede { flex-direction: column; align-items: flex-start; gap: 12px; }

  .categorie ul { grid-template-columns: 1fr; gap: 12px; }
  .categoria { min-height: 68px; justify-content: flex-start; padding-inline: 28px; font-size: 1.125rem; }
  .categoria img { width: 36px; height: 36px; }

  .valori-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .valore { padding: 24px 14px 22px; }
  .valore img { height: 42px; margin-bottom: 14px; }
  .valore h3 { font-size: 1.0625rem; }
  .valore p { font-size: .875rem; }

  .video-griglia { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scrollbar-width: none; }
  .video-griglia::-webkit-scrollbar { display: none; }
  .video-griglia li { flex: 0 0 64%; scroll-snap-align: start; }
  .video-titolo { font-size: 1rem; min-height: 70px; }
  .video-play { width: 54px; height: 54px; }

  .contatti-griglia { grid-template-columns: 1fr; }
  .contatti-foto { border-radius: var(--raggio) var(--raggio) 0 0; min-height: 0; aspect-ratio: 16 / 11; }
  .scheda-contatti { margin: -26px 10px 0; padding: 26px 20px 24px; }
  .scheda-contatti h3 { font-size: 1.5rem; }
  .social { margin-left: 38px; }

  .piede-riga { flex-direction: column; align-items: flex-start; gap: 16px; }
  .piede-menu { padding-inline: 0; border: 0; gap: 10px 22px; }
  .wa-fisso { display: grid; place-items: center; position: fixed; z-index: 50; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%; background: var(--espresso); color: var(--crema); box-shadow: 0 10px 26px var(--ombra-forte); -webkit-user-select: none; user-select: none; }
  .wa-fisso svg { width: 28px; height: 28px; fill: currentColor; }
  .wa-fisso:active { transform: scale(.94); }
  .piede { padding-bottom: 76px; }
}

@media (min-width: 1101px) {
  :root { --testata: 108px; }
  .logo img { height: 72px; }
  .menu a { font-size: 1.1875rem; }
  .occhiello { font-size: 1.0625rem; }
  .hero-sotto { font-size: 1.4375rem; }
  .hero .btn-scuro { font-size: 1.1875rem; padding: .86em 1.8em; }
  .sotto-titolo { font-size: 1.375rem; }
  .marchi-titolo { font-size: 1.0625rem; width: 170px; }
  .scheda h3 { font-size: 1.625rem; }
  .scheda-modello { font-size: 1.125rem; }
  .prezzo-etichetta { font-size: 1rem; }
  .prezzo { font-size: 1.75rem; }
  .btn-wa { font-size: 1.0625rem; }
  .nota { font-size: 1.0625rem; }
  .link-oro { font-size: 1.125rem; }
  .categoria { font-size: 1.5625rem; }
  .valore h3 { font-size: 1.625rem; }
  .valore p { font-size: 1.1875rem; }
  .video-titolo { font-size: 1.3125rem; }
  .scheda-contatti h3 { font-size: 2.25rem; }
  .contatti-lista li { font-size: 1.125rem; }
  .btn-grande { font-size: 1.1875rem; }
}


/* ── 5-bis · il movimento (regole di Emil Kowalski, 09 § 0-bis-2) ── */
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sale { from { transform: translateY(34px) scale(.97); } to { transform: none; } }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
.hero-testo > * { animation: entra 820ms var(--ease-out) both; }
.hero-testo > :nth-child(2) { animation-delay: 70ms; }
.hero-testo > :nth-child(3) { animation-delay: 150ms; }
.hero-testo > :nth-child(4) { animation-delay: 220ms; }
.borsa img { animation: sale 1000ms var(--ease-out) both; }
.borsa-bauletto img { animation-delay: 60ms; }
.borsa-trapuntata img { animation-delay: 140ms; }
.borsa-hobo img { animation-delay: 200ms; }
.borsa-tracolla img { animation-delay: 260ms; }
.borsa { will-change: transform; }
.testata .logo img { transform-origin: left center; transition: transform 300ms var(--ease-out); }
.testata.scorsa .logo img { transform: scale(.86); }
.testata { transition: box-shadow .25s ease, background-color .25s ease; }
html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .menu li { transform: translateY(14px); opacity: 0; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
  html.menu-aperto .menu li { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
  html.menu-aperto .menu li:nth-child(2) { transition-delay: 50ms; }
  html.menu-aperto .menu li:nth-child(3) { transition-delay: 100ms; }
  html.menu-aperto .menu li:nth-child(4) { transition-delay: 150ms; }
}
.categoria img, .valore img { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .categoria:hover img, .valore:hover img { transform: translateY(-3px); } }
/* meno movimento, non zero: restano le dissolvenze, via gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-testo > * { animation-name: appare; animation-duration: 500ms; }
  .borsa img { animation: none; }
  html.js .reveal { transform: none; transition: opacity 500ms ease; }
  .scheda-foto img, .video-scheda video { transition: none; }
  .menu li { transform: none !important; }
}

/* ── step 6 e 6-bis · pezzi per il copy e per le pagine interne (stessi componenti della home) ── */
.menu a[aria-current="page"] { color: var(--oro-scuro); }
.btn-testata { font-size: .9375rem; padding: .72em 1.15em; box-shadow: none; }
.btn-testata .ico-wa { width: 1.2em; height: 1.2em; }
.hero-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero-azioni .btn .ico-wa, [data-v~="invito"] .btn .ico-wa, .btn-grande .ico-wa { width: 1.3em; height: 1.3em; }
.marchi-titolo p { margin: 0 0 4px; font-weight: 600; }
.marchi-titolo .link-oro { font-size: .9375rem; }
.marchi-lista a { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; min-height: 44px; }
.marchi-lista a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .marchi-lista a img { transition: opacity .2s ease; } .marchi-lista a:hover img { opacity: 1; } }
.marchio-testo a { flex-direction: column; }
.prezzo { margin: 16px 0 18px; font-size: 1.25rem; }
.link-riga { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 26px; }
.contatti .link-riga { margin-top: 16px; justify-content: center; }
.nota a { color: var(--oro-scuro); font-weight: 600; }
[data-v~="pagina-testa"] { background: var(--crema) url("/assets/img/fondi/fondo-hero-avorio-oro.webp") center / cover no-repeat; position: relative; }
[data-v~="pagina-testa"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(180deg, var(--crema-testata) 0%, rgba(250, 242, 236, 0) 100%); }
[data-v~="pagina-testa-testo"] { position: relative; max-width: 820px; padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
[data-v~="pagina-testa"] h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.08; text-wrap: balance; margin-bottom: 18px; }
[data-v~="pagina-testa"] .hero-sotto { margin: 0 0 10px; max-width: 46ch; }
[data-v~="pagina-testa"] .hero-azioni, [data-v~="pagina-testa"] .marchi-lista { margin-top: 26px; }
[data-v~="pagina-testa"] > .contenitore > div > * { animation: entra 820ms var(--ease-out) both; }
[data-v~="pagina-testa"] > .contenitore > div > :nth-child(2) { animation-delay: 70ms; }
[data-v~="pagina-testa"] > .contenitore > div > :nth-child(3) { animation-delay: 140ms; }
[data-v~="pagina-testa"] > .contenitore > div > :nth-child(4) { animation-delay: 210ms; }
[data-v~="marchi-lista-pagina"] { max-width: 1000px; background: rgba(250, 242, 236, .7); border-radius: var(--raggio); padding: 12px 8px; }
[data-v~="filtro-cerca"] { flex: 1 1 260px; max-width: 360px; }
[data-v~="filtro-cerca"] input { width: 100%; min-height: 48px; font-size: 1rem; color: var(--inchiostro); background: rgba(252, 249, 246, .7); border: 1px solid var(--linea-oro); border-radius: 12px; padding: 11px 44px 11px 16px; -webkit-appearance: none; appearance: none; }
[data-v~="filtro-cerca"] img { width: 18px; }
[data-v~="catalogo-pagina"] .sezione-testa { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
[data-v~="info"] h2 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.01em; }
[data-v~="info"] p { margin-top: 10px; }
[data-v~="info"] p a { color: var(--oro-scuro); font-weight: 600; }
[data-v~="info"] .link-riga { margin-top: 4px; justify-content: center; }
[data-v~="info-tre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-v~="invito"] { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; background: var(--scheda); border: 1px solid rgba(227, 199, 162, .6); border-radius: 20px; padding: clamp(26px, 3.5vw, 44px); box-shadow: 0 12px 34px var(--ombra); }
[data-v~="invito"] h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }
[data-v~="invito-azioni"] { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
[data-v~="indirizzo"] { font-size: 1.125rem; line-height: 1.5; color: var(--inchiostro); margin-bottom: 20px; }
.scheda-contatti h2 { font-size: 1.5rem; margin-bottom: 14px; }
[data-v~="sotto-scheda"] { margin-top: 26px; }
[data-v~="passi"] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
[data-v~="passo"] { background: var(--scheda); border-radius: var(--raggio); padding: 28px 24px; box-shadow: 0 8px 26px rgba(43, 29, 22, .06); }
[data-v~="passo-numero"] { display: block; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--oro); margin-bottom: 14px; }
[data-v~="passo"] p { font-size: 1.0625rem; color: var(--inchiostro); }
[data-v~="marchi-blocchi"] { display: grid; gap: 22px; }
[data-v~="marchio-blocco"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; background: var(--scheda); border-radius: 20px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 10px 30px var(--ombra); }
[data-v~="marchi-coppia"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
[data-v~="marchi-coppia"] [data-v~="marchio-blocco"] { grid-template-columns: 1fr; }
[data-v~="marchio-testo-blocco"] h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); margin: 14px 0 10px; }
[data-v~="marchio-testo-blocco"] p { margin-bottom: 10px; }
[data-v~="marchio-testo-blocco"] p a { color: var(--oro-scuro); font-weight: 600; }
[data-v~="marchio-testo-blocco"] .link-oro { margin-top: 8px; }
[data-v~="marchio-logo"] { min-height: 56px; display: flex; align-items: center; gap: 28px; }
[data-v~="marchio-logo"] img { width: auto; filter: brightness(0); opacity: .82; }
[data-v~="marchio-logo"] .logo-valentino-bags { height: 26px; } [data-v~="marchio-logo"] .logo-john-richmond { height: 28px; } [data-v~="marchio-logo"] .logo-mbrc { height: 36px; }
[data-v~="marchio-logo"] .logo-gio-cellini { height: 22px; } [data-v~="marchio-logo"] .logo-bhpc { height: 64px; }
[data-v~="marchio-nome-arrivo"] { font-size: 1.5rem; font-weight: 700; color: var(--inchiostro); }
[data-v~="marchio-nome-arrivo"] em { font-weight: 400; font-size: 1rem; color: var(--testo); margin-left: 8px; }
[data-v~="marchio-foto"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
[data-v~="marchio-foto"] li { aspect-ratio: 1 / 1; border-radius: var(--raggio-piccolo); overflow: hidden; background: var(--avorio); }
[data-v~="marchio-foto"] img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: 50% 0; }
@media (max-width: 1180px) and (min-width: 861px) { .btn-testata span { display: none; } .btn-testata { padding: .72em; } }
@media (max-width: 860px) {
  .menu .btn-testata { font-size: 1rem; padding: .9em 1.4em; }
  [data-v~="schede-tutte"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; margin-inline: 0; padding: 0; }
  [data-v~="schede-tutte"] .btn-wa { font-size: .78rem; padding: .85em .35em; gap: .35em; }
  [data-v~="schede-tutte"] .scheda-corpo { padding: 12px 12px 14px; }
  [data-v~="filtro-cerca"] { flex: none; width: 100%; max-width: none; }
  [data-v~="schede-tutte"] .prezzo { font-size: 1rem; margin: 10px 0 12px; }
  [data-v~="catalogo-pagina"] .sezione-testa { gap: 10px; }
  [data-v~="info-tre"], [data-v~="passi"] { grid-template-columns: 1fr; }
  [data-v~="marchio-blocco"], [data-v~="marchi-coppia"] { grid-template-columns: 1fr; }
  [data-v~="marchio-foto"] { gap: 8px; }
  [data-v~="marchi-lista-pagina"] { padding: 8px 4px; }
  [data-v~="invito-azioni"] .btn { width: 100%; }
  .hero-azioni .btn { width: 100%; }
}
@media (min-width: 1101px) {
  .prezzo { font-size: 1.5rem; }
  [data-v~="info"] h2 { font-size: 1.5rem; }
  [data-v~="info"] p, [data-v~="passo"] p { font-size: 1.1875rem; }
  .marchi-titolo p { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { [data-v~="pagina-testa"] > .contenitore > div > * { animation-name: appare; animation-duration: 500ms; } }

/* le tabelle dei testi legali non escono dallo schermo del telefono */
.testo-legale table { display: block; max-width: 100%; overflow-x: auto; }
.testo-legale th, .testo-legale td { overflow-wrap: normal; word-break: normal; min-width: 110px; }

/* ══ 6-quater · IL SALTO DI LIVELLO: più eleganza e più struttura, non più cose. Niente riquadri: sezioni aperte che
   sfumano una nell'altra, la stessa testa per ogni sezione (filo d'oro, titolo, una riga), fili sottili, tanto spazio. ══ */
body { background: linear-gradient(180deg, #FBF5F0 0%, #FAF2EC 30%, #FBF5F0 55%, #FAF2EC 80%, #FBF5F0 100%); }
.sezione { padding-block: clamp(64px, 7vw, 112px); }
.sezione-testa { margin-bottom: clamp(30px, 3.4vw, 48px); }
.sezione h2::before, [data-v~="pagina-testa"] h1::before, [data-v~="invito"] h2::before {
  content: ""; display: block; width: 44px; height: 2px; margin-bottom: 18px; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro), rgba(204, 165, 102, 0));
}
.sezione h2 { letter-spacing: -.025em; }
.sotto-titolo { max-width: 62ch; color: var(--testo); }

/* hero spaziale */
.hero { background-position: center; }
.hero-riga { min-height: clamp(600px, 76vh, 760px); grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px; }
.hero-arte::before { content: ""; position: absolute; inset: 6% 2% 0 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227, 199, 162, .55), rgba(250, 242, 236, 0) 72%); }
.occhiello { display: flex; align-items: center; gap: 14px; letter-spacing: .08em; color: var(--testo); }
.occhiello::before { content: ""; width: 34px; height: 1px; background: var(--oro); }
.hero h1 { letter-spacing: -.03em; }
.hero-sotto { color: var(--testo); }

/* fascia dei marchi: niente bordi, una velatura che sfuma */
.marchi { background: linear-gradient(180deg, rgba(250, 242, 236, 0), rgba(248, 240, 230, .85) 30%, rgba(248, 240, 230, .85) 70%, rgba(250, 242, 236, 0)); border: 0; }
.marchi-riga { min-height: 136px; gap: 40px; }
.marchi-lista li + li { border-left-color: rgba(227, 199, 162, .7); }
.marchi-lista li { padding-inline: 22px; }
[data-v~="marchi-lista-pagina"] { background: transparent; padding: 0; }

/* schede delle borse: aperte, la foto arrotondata, il testo senza fondo */
.scheda { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.scheda-foto { border-radius: 18px; aspect-ratio: 4 / 5; box-shadow: 0 14px 34px rgba(43, 29, 22, .08); }
.scheda-corpo { padding: 18px 4px 0; }
.scheda h3 { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--oro-scuro); }
.scheda-modello { margin-top: 4px; color: var(--inchiostro); font-weight: 500; min-height: 0; }
.prezzo { margin: 10px 0 16px; color: var(--inchiostro); }
.btn-wa { background: transparent; color: var(--inchiostro); border: 1px solid rgba(38, 20, 13, .55); }
@media (hover: hover) and (pointer: fine) {
  .btn-wa:hover { background: var(--espresso); color: var(--crema); border-color: var(--espresso); }
  .scheda:hover { transform: none; box-shadow: none; }
}
.schede { gap: 28px; }
.filtro select, [data-v~="filtro-cerca"] input { border-radius: 999px; background: rgba(252, 249, 246, .6); border-color: rgba(227, 199, 162, .9); }

/* categorie: navigazione leggera */
.categoria { background: rgba(252, 249, 246, .45); border-color: rgba(227, 199, 162, .85); min-height: 104px; }
@media (hover: hover) and (pointer: fine) { .categoria:hover { background: rgba(252, 249, 246, .95); } }

/* le quattro schede della boutique e le schede informative: colonne aperte coi fili d'oro */
.valore, [data-v~="info"] { background: transparent; box-shadow: none; border-radius: 0; padding: 8px 28px 10px; }
.valori-griglia { gap: 0; }
.valori-griglia > li + li { border-left: 1px solid rgba(227, 199, 162, .75); }
.valore img { box-sizing: content-box; height: 34px; padding: 17px; border: 1px solid rgba(204, 165, 102, .55); border-radius: 50%; margin-bottom: 20px; }
.valore img[src*="negozio"], .valore img[src*="consiglio"] { width: 40px; object-fit: contain; }

/* video: la sfumatura al posto della barra piena */
.video-scheda { border-radius: 18px; }
.video-titolo { background: linear-gradient(0deg, rgba(38, 20, 13, .78) 0%, rgba(38, 20, 13, .38) 60%, rgba(38, 20, 13, 0) 100%); min-height: 110px; align-items: end; padding-bottom: 20px; }

/* dove siamo */
.scheda-contatti { box-shadow: 0 18px 50px rgba(43, 29, 22, .08); border: 1px solid rgba(227, 199, 162, .55); }
.contatti-foto { border-radius: 20px 0 0 20px; }
.mappa { border-radius: 22px; background-color: rgba(246, 235, 219, .75); }

/* pagine interne: la stessa luce della hero, righe aperte divise da fili */
[data-v~="pagina-testa"] { background-size: cover; }
[data-v~="pagina-testa-testo"] { padding: clamp(56px, 6.5vw, 100px) 0 clamp(40px, 4.5vw, 64px); }
[data-v~="marchi-blocchi"] { gap: 0; }
[data-v~="marchio-blocco"] { background: transparent; box-shadow: none; border-radius: 0; padding: clamp(28px, 3.6vw, 52px) 0; border-top: 1px solid rgba(227, 199, 162, .75); }
[data-v~="marchi-coppia"] { gap: 0; border-top: 1px solid rgba(227, 199, 162, .75); }
[data-v~="marchi-coppia"] [data-v~="marchio-blocco"] { border-top: 0; padding-inline: 0 clamp(20px, 3vw, 44px); }
[data-v~="marchi-coppia"] [data-v~="marchio-blocco"] + [data-v~="marchio-blocco"] { border-left: 1px solid rgba(227, 199, 162, .75); padding-inline: clamp(20px, 3vw, 44px) 0; }
[data-v~="marchio-foto"] { gap: 16px; }
[data-v~="marchio-foto"] li { border-radius: 16px; aspect-ratio: 4 / 5; box-shadow: 0 12px 30px rgba(43, 29, 22, .07); }
[data-v~="marchio-logo"] img { opacity: .9; }
[data-v~="invito"] { background: transparent; border: 0; border-block: 1px solid rgba(227, 199, 162, .8); border-radius: 0; box-shadow: none; padding: clamp(34px, 4vw, 56px) 0; }
[data-v~="passi"] { gap: 0; counter-reset: none; }
[data-v~="passo"] { background: transparent; box-shadow: none; border-radius: 0; padding: 26px 28px 8px 0; border-top: 1px solid rgba(204, 165, 102, .8); margin-right: 22px; }
[data-v~="passo-numero"] { font-size: 3rem; font-weight: 600; }

/* footer: aria e gerarchia */
.piede { background: linear-gradient(180deg, rgba(250, 242, 236, 0), #F8F0E6 40%); border-top: 0; }
.piede-riga { padding-block: 30px; }
.piede-marchio p { margin-top: 10px; color: var(--testo); }
.piede-societa { color: var(--testo); max-width: 34ch; }

/* 404 e pagine legali */
.pagina-semplice { background: url("/assets/img/fondi/fondo-hero-avorio-oro.webp") top center / 100% auto no-repeat; }
.pagina-semplice .contenitore { max-width: 820px; }
.errore-azioni { justify-content: flex-start; }
.testo-legale { max-width: 72ch; line-height: 1.7; }
.testo-legale h2 { margin-top: 44px; }

@media (max-width: 1180px) and (min-width: 861px) { .hero-riga { min-height: 0; gap: 24px; } }
@media (max-width: 1100px) {
  .valori-griglia:not([data-v~="info-tre"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .valori-griglia:not([data-v~="info-tre"]) > li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 860px) {
  .sezione { padding-block: 52px; }
  .hero-riga { min-height: 0; gap: 0; }
  .marchi-riga { gap: 14px; }
  .schede > li { flex-basis: 70%; }
  .valore, [data-v~="info"] { padding: 6px 10px 8px; }
  [data-v~="info-griglia"] { grid-template-columns: 1fr !important; row-gap: 0; }
  [data-v~="info-griglia"] > li { border-left: 0 !important; border-top: 1px solid rgba(227, 199, 162, .75); padding: 26px 4px; text-align: left; }
  [data-v~="info-griglia"] > li:first-child { border-top: 0; padding-top: 4px; }
  [data-v~="info-griglia"] .valore img, [data-v~="info-griglia"] img { margin: 0 0 14px; }
  [data-v~="passo"] { margin-right: 0; padding-right: 0; }
  [data-v~="marchi-coppia"] { grid-template-columns: 1fr; }
  [data-v~="marchi-coppia"] [data-v~="marchio-blocco"], [data-v~="marchi-coppia"] [data-v~="marchio-blocco"] + [data-v~="marchio-blocco"] { padding-inline: 0; border-left: 0; }
  [data-v~="marchi-coppia"] [data-v~="marchio-blocco"] + [data-v~="marchio-blocco"] { border-top: 1px solid rgba(227, 199, 162, .75); }
  .contatti-foto { border-radius: 20px 20px 0 0; }
  .video-titolo { min-height: 90px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-arte::before { transition: none; } }

.btn-wa { white-space: nowrap; }
@media (max-width: 860px) { [data-v~="schede-tutte"] .btn-wa { font-size: .72rem; padding: .85em .3em; gap: .3em; } [data-v~="schede-tutte"] .btn-wa .ico-wa { width: 1.05em; height: 1.05em; } }

/* ══ correzioni del collaudo (step 7, giro 1) ══ */
/* 1 · la griglia della hero del salto vale solo da 1181 px; tablet e telefono tornano come nella fedele */
@media (max-width: 1180px) and (min-width: 861px) { .hero-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; } }
@media (max-width: 860px) { .hero-riga { grid-template-columns: 1fr; gap: 0; } .hero-arte { width: 100%; } }
/* 2 · il pulsante WhatsApp della testata: testo chiaro, il suo spazio, e la versione stretta */
.menu .btn-testata { color: var(--crema); padding: .72em 1.15em; font-size: .9375rem; }
@media (max-width: 1180px) and (min-width: 861px) { .menu .btn-testata { padding: 0; width: 44px; height: 44px; } }
@media (max-width: 860px) { .menu .btn-testata { font-size: 1rem; padding: .9em 1.4em; } }
/* 4 · i titoli che sono anche «sezione-testa» non sono una riga flessibile */
h2.sezione-testa { display: block; }
/* 5 · le righe che scorrono col dito si fermano al margine, non al bordo */
@media (max-width: 860px) { .schede, .video-griglia { scroll-padding-inline: var(--gutter); } .scheda-corpo { padding-inline: 6px; } }
/* 7 · il filo d'oro al centro sopra i titoli centrati */
.valore h2::before { margin-inline: auto; }
@media (max-width: 860px) { [data-v~="info-griglia"] .valore h2::before { margin-inline: 0; } }
/* 8 · fra 861 e 1100 px i marchi restano su una riga */
@media (max-width: 1100px) and (min-width: 861px) {
  .marchi-lista { flex-wrap: nowrap; justify-content: space-between; }
  .marchi-lista li { padding-inline: 10px; }
  .logo-valentino-bags { height: 15px; } .logo-john-richmond { height: 16px; } .logo-mbrc { height: 22px; } .logo-gio-cellini { height: 13px; } .logo-bhpc { height: 40px; }
  .marchio-testo { font-size: .8125rem; }
}
/* 9 · /katalog da telefono: «Chiedi su WhatsApp» leggibile e alto 44 px */
@media (max-width: 860px) { [data-v~="schede-tutte"] .btn-wa { font-size: .78rem; min-height: 44px; padding: .6em .3em; } }
/* 11 · il numero di telefono non va a capo */
.tel { white-space: nowrap; }
.contatti-griglia > * { min-width: 0; }
/* 12 · lo sfondo delle pagine semplici sfuma, senza scalino */
.pagina-semplice { background: linear-gradient(180deg, rgba(251, 245, 240, 0) 0, rgba(251, 245, 240, 0) 18vw, #FBF5F0 41vw), url("/assets/img/fondi/fondo-hero-avorio-oro.webp") top center / 100% auto no-repeat; }
/* 14 · i passi arrivano fino al bordo */
[data-v~="passi"] { column-gap: 22px; }
[data-v~="passo"] { margin-right: 0; }
@media (max-width: 860px) { [data-v~="passi"] { column-gap: 0; } }
/* 15 · menu aperto da telefono: il logo resta, il WhatsApp fisso si nasconde */
@media (max-width: 860px) {
  .testata .logo { position: relative; z-index: 70; }
  html.menu-aperto .wa-fisso { opacity: 0; visibility: hidden; pointer-events: none; }
}
.wa-fisso { transition: opacity 160ms ease, visibility 0s linear 160ms; }

/* ══ Modifiche di Domenico, 05/11 (STOP 1, fase A): un poco meno spazio, più eleganza. Si raffina, non si rifà ══ */
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-cirillico.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-corsivo-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-corsivo-cirillico.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
:root { --titoli: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif; --filetto: #E3C7A2; }

/* 1 · spazi: circa un terzo in meno, sempre arioso */
.sezione { padding-block: clamp(44px, 5vw, 76px); }
.sezione-testa { margin-bottom: clamp(24px, 2.6vw, 38px); }
.contatti { padding-bottom: clamp(44px, 5vw, 76px); }
.categorie { padding-block: 0 clamp(8px, 1vw, 16px); }
@media (min-width: 1181px) { .hero-riga { min-height: clamp(560px, 70vh, 700px); } }
@media (max-width: 860px) { .sezione { padding-block: 40px; } .contatti { padding-bottom: 40px; } }

/* 2 · i titoli: un carattere da moda con le grazie fini (Cormorant Garamond, col cirillico); il corpo resta Onest */
.hero h1, .sezione h2, [data-v~="pagina-testa"] h1, .pagina-semplice h1, .scheda-contatti h3, .scheda-contatti h2, [data-v~="invito"] h2 {
  font-family: var(--titoli); font-weight: 600; letter-spacing: -.005em; }
.hero h1 { font-size: clamp(2.9rem, 1.5rem + 5vw, 4.9rem); line-height: 1; }
.hero h1 .oro { font-style: italic; font-weight: 500; }
.sezione h2 { font-size: clamp(2.15rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.04; }
[data-v~="pagina-testa"] h1, .pagina-semplice h1 { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4rem); line-height: 1.02; }
.scheda-contatti h3 { font-size: clamp(1.9rem, 1.4rem + 1vw, 2.4rem); }
.valore h2 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); }
.sezione h2::before, [data-v~="pagina-testa"] h1::before, [data-v~="invito"] h2::before { width: 56px; height: 1px; background: var(--filetto); margin-bottom: 20px; }

/* 3 · etichette maiuscole piccole e spaziate */
.scheda h3 { text-transform: uppercase; font-size: .75rem; letter-spacing: .16em; font-weight: 600; }
.marchi-titolo p { text-transform: uppercase; font-size: .75rem; letter-spacing: .16em; }
.occhiello { font-size: .8125rem; letter-spacing: .18em; }
.scheda-modello { font-size: 1.0625rem; }
@media (min-width: 1101px) { .scheda-modello { font-size: 1.1875rem; } }

/* 4 · filetti d'oro sottili, ombre leggere e morbide */
.marchi-lista li + li, .valori-griglia > li + li { border-left-color: var(--filetto); }
.categoria { border-color: var(--filetto); }
.scheda-foto { box-shadow: 0 10px 30px rgba(43, 29, 22, .05); }
.scheda-contatti { box-shadow: 0 14px 44px rgba(43, 29, 22, .055); border-color: rgba(227, 199, 162, .7); }
.borsa { filter: drop-shadow(0 12px 16px rgba(43, 29, 22, .15)); }
.video-scheda { box-shadow: 0 10px 28px rgba(43, 29, 22, .07); }

/* 5 · pulsanti più sottili e precisi */
.btn { font-weight: 500; letter-spacing: .02em; }
.btn-scuro { padding: .86em 1.6em; box-shadow: 0 6px 18px rgba(43, 29, 22, .12); }
@media (min-width: 1101px) { .hero .btn-scuro { font-size: 1.0625rem; padding: .9em 1.75em; } }
.btn-wa { border-width: 1px; border-color: rgba(38, 20, 13, .45); padding: .68em 1em; }
.menu .btn-testata { font-size: .875rem; font-weight: 500; }
.link-oro { font-weight: 500; text-decoration-color: var(--filetto); text-underline-offset: 6px; letter-spacing: .01em; }

/* 6 · schede delle borse su un fondo avorio uniforme, pronte per le foto scontornate */
.scheda-foto { background: linear-gradient(180deg, #FAF3EB 0%, #F4EBE0 100%); }

/* 7 · hover delicati */
@media (hover: hover) and (pointer: fine) {
  .scheda:hover .scheda-foto img { transform: scale(calc(var(--zoom, 1) * 1.03)); }
  .btn-scuro:hover { background: #2E1D15; box-shadow: 0 8px 22px rgba(43, 29, 22, .14); }
  .categoria:hover { box-shadow: 0 6px 18px rgba(43, 29, 22, .05); }
  .link-oro:hover { text-decoration-color: var(--oro-scuro); }
}
.scheda-foto img { transition: transform 900ms var(--ease-out); }

/* ══ Fase B (05/11): le sezioni nuove della home, coi pezzi e la grafica della fase A ══ */
/* in boutique ti seguiamo */
.accoglienza-griglia { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.accoglienza-foto { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 14px 40px rgba(43, 29, 22, .07); }
.accoglienza-foto img { width: 100%; height: 100%; object-fit: cover; }
.accoglienza-testo .sezione-testa { margin-bottom: 22px; }
.punti { display: grid; gap: 0; margin-bottom: 22px; }
.punti li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--filetto); }
.punti li:last-child { border-bottom: 1px solid var(--filetto); }
.punti img { box-sizing: content-box; width: 22px; height: 22px; object-fit: contain; padding: 12px; border: 1px solid rgba(204, 165, 102, .55); border-radius: 50%; }
.punti p { color: var(--inchiostro); font-size: 1.0625rem; line-height: 1.45; }
.accoglienza .nota a, .invito-finale a:not(.btn):not(.link-oro) { color: var(--oro-scuro); font-weight: 600; }
/* come si acquista: tre passi in fila, il numero grande */
.passi-home { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.passi-home li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding-top: 22px; border-top: 1px solid var(--oro); }
.passo-num { font-family: var(--titoli); font-size: clamp(2.8rem, 2rem + 2vw, 3.8rem); line-height: .9; font-weight: 500; color: var(--oro); }
.passi-home p { color: var(--inchiostro); font-size: 1.0625rem; line-height: 1.5; padding-top: 6px; }
.passi-home p a { color: var(--oro-scuro); font-weight: 600; }
/* domande frequenti a fisarmonica */
.domande-contenitore { max-width: 900px; }
.domande-elenco { border-top: 1px solid var(--filetto); }
.domanda { border-bottom: 1px solid var(--filetto); }
.domanda summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; min-height: 44px;
  font-family: var(--titoli); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); color: var(--inchiostro); -webkit-user-select: none; user-select: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary img { flex: none; width: 14px; height: auto; transition: transform 250ms var(--ease-out); }
.domanda[open] summary img { transform: rotate(180deg); }
.domanda p { padding: 0 4px 22px; max-width: 70ch; color: var(--testo); }
.domanda p a { color: var(--oro-scuro); font-weight: 600; }
.domanda summary:active { transform: scale(.995); }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--oro-scuro); } }
/* l'invito finale, accanto la confezione della boutique */
.invito-griglia { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  border-top: 1px solid var(--filetto); padding-top: clamp(34px, 4vw, 56px); }
.invito-testo h2 { font-family: var(--titoli); font-weight: 600; font-size: clamp(2.15rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.04; }
.invito-testo h2::before { content: ""; display: block; width: 56px; height: 1px; background: var(--filetto); margin-bottom: 20px; }
.invito-testo .sotto-titolo { margin: 14px 0 26px; }
.invito-foto { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 380px; justify-self: end; width: 100%; box-shadow: 0 14px 40px rgba(43, 29, 22, .07); }
.invito-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .accoglienza-griglia, .invito-griglia { grid-template-columns: 1fr; }
  .passi-home { grid-template-columns: 1fr; row-gap: 18px; }
  .passi-home li { padding-top: 16px; }
  .invito-foto { justify-self: start; max-width: 72%; }
  .domanda summary { padding: 16px 2px; }
}

/* ══ Fase C (05/11): le foto ufficiali scontornate ══ */
/* hero: cinque borse intere, in due file, sovrapposte appena; ombre vere e morbide */
.borsa img { -webkit-mask-image: none; mask-image: none; }
.borsa { filter: drop-shadow(0 18px 18px rgba(43, 29, 22, .16)) drop-shadow(0 3px 4px rgba(43, 29, 22, .10)); }
.borsa-1 { left: 6%;  top: 3%;  width: 30%; }
.borsa-2 { left: 52%; top: 10%; width: 37%; }
.borsa-3 { left: 0;   top: 64%; width: 40%; }
.borsa-4 { left: 37%; top: 44%; width: 26%; }
.borsa-5 { left: 72%; top: 44%; width: 23%; }
.borsa-1 img { animation-delay: 0ms; } .borsa-2 img { animation-delay: 60ms; } .borsa-3 img { animation-delay: 140ms; }
.borsa-4 img { animation-delay: 200ms; } .borsa-5 img { animation-delay: 260ms; }
/* schede: il prodotto centrato sul fondo avorio, con l'ombra di contatto (nella foto, uguale per tutti) */
.scheda-foto img { object-fit: contain; object-position: 50% 50%; transform: none; }
@media (hover: hover) and (pointer: fine) { .scheda:hover .scheda-foto img { transform: scale(1.03); } }
/* categorie: tre schede, ognuna col suo prodotto */
.categorie ul { gap: clamp(14px, 1.6vw, 24px); }
.categoria { flex-direction: column; justify-content: flex-start; gap: 0; min-height: 0; padding: 0 0 22px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #FAF3EB 0%, #F4EBE0 100%); border: 1px solid var(--filetto); }
.categoria-foto { display: block; width: 100%; aspect-ratio: 4 / 3; }
.categoria-foto img { width: 100%; height: 100%; object-fit: contain; transition: transform 900ms var(--ease-out); }
.categoria-nome { font-family: var(--titoli); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); letter-spacing: -.005em; color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) { .categoria:hover .categoria-foto img { transform: scale(1.04); } .categoria:hover { background: linear-gradient(180deg, #FCF7F1 0%, #F6EEE4 100%); } }
@media (max-width: 860px) {
  .categorie ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .categoria { padding: 0 0 12px; border-radius: 16px; }
  .categoria-foto { aspect-ratio: 1 / 1; }
  .categoria-nome { font-size: 1.05rem; text-align: center; padding-inline: 4px; }
}
/* /marki: le foto dei prodotti di ogni marchio sul fondo avorio */
[data-v~="marchio-foto"] li { background: linear-gradient(180deg, #FAF3EB 0%, #F4EBE0 100%); }
[data-v~="marchio-foto"] img { object-fit: contain; transform: none; }
[data-v~="marchio-foto"]:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { [data-v~="marchio-foto"]:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ritocchi delle foto della fase B */
.contatti-foto img { object-position: 50% 80%; }
.invito-foto { aspect-ratio: 2 / 3; }
.invito-foto img { object-position: 50% 0; }
/* Cormorant scrive le cifre allineate (l'«1» non sembra una «I») */
.passo-num, .hero h1, .sezione h2, .categoria-nome, .domanda summary, [data-v~="passo-numero"], .scheda-contatti h3, .scheda-contatti h2 { font-variant-numeric: lining-nums; }

/* 05/11 · foto del negozio scambiate: in «Dove siamo» l'interno orizzontale, nell'accoglienza la tracolla sul tavolo */
.contatti-foto img { object-position: 50% 55%; }
.accoglienza-foto { aspect-ratio: 5 / 4; }
.accoglienza-foto img { object-position: 50% 28%; }

/* ══ correzioni del collaudo, giro 2 (05/11) ══ */
/* 4 · le ancore si fermano sotto la testata fissa */
html { scroll-padding-top: 124px; }
@media (max-width: 860px) { html { scroll-padding-top: 88px; } }
/* 1 · la tessera che chiude la riga del catalogo quando le schede visibili sono dispari */
.scheda[data-v~="tessera"] { display: flex; }
.scheda[data-v~="tessera"][hidden] { display: none; }
[data-v~="tessera-corpo"] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center;
  min-height: 100%; padding: 28px 18px; border-radius: 18px; border: 1px solid var(--filetto); background: linear-gradient(180deg, #FAF3EB 0%, #F4EBE0 100%); }
[data-v~="tessera-corpo"] img { width: 40px; height: auto; }
[data-v~="tessera-corpo"] p { font-family: var(--titoli); font-weight: 600; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); line-height: 1.2; color: var(--inchiostro); max-width: 18ch; }
[data-v~="tessera-corpo"] .btn-wa { width: auto; padding-inline: 1.2em; }
/* 2 · i cinque loghi piccoli nella scheda «Cinque marchi» */
.loghi-mini { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 12px; }
.loghi-mini img { width: auto; filter: brightness(0); opacity: .78; }
.loghi-mini .logo-valentino-bags { height: 13px; } .loghi-mini .logo-john-richmond { height: 14px; } .loghi-mini .logo-mbrc { height: 19px; }
.loghi-mini .logo-gio-cellini { height: 11px; } .loghi-mini .logo-bhpc { height: 30px; }
@media (max-width: 860px) {
  .loghi-mini { gap: 8px 10px; }
  .loghi-mini .logo-valentino-bags { height: 10px; } .loghi-mini .logo-john-richmond { height: 10px; } .loghi-mini .logo-mbrc { height: 15px; }
  .loghi-mini .logo-gio-cellini { height: 9px; } .loghi-mini .logo-bhpc { height: 24px; }
  /* a · «Chiedi su WhatsApp» largo quanto la scheda, con margine interno */
  [data-v~="schede-tutte"] .scheda-corpo { padding-inline: 2px; }
  [data-v~="schede-tutte"] .btn-wa { width: 100%; padding-inline: .45em; gap: .3em; }
  [data-v~="schede-tutte"] .btn-wa .ico-wa { width: 1em; height: 1em; }
  [data-v~="tessera-corpo"] { padding: 20px 10px; gap: 12px; }
  [data-v~="tessera-corpo"] p { font-size: 1.1rem; }
  [data-v~="tessera-corpo"] .btn-wa { width: 100%; padding-inline: .45em; }
}

/* i cinque loghi in due righe, 3 + 2, mai uno da solo */
.loghi-mini { gap: 10px 0; }
.loghi-mini li { flex: 0 0 33.333%; display: flex; justify-content: center; align-items: center; min-height: 30px; }

@media (max-width: 860px) { [data-v~="tessera-corpo"] p { font-size: 1rem; max-width: none; } }

/* l'elemento di un'ancora entra già al suo posto: lo spostamento dell'entrata non lo porta sotto la testata */
html.js .reveal:target, html.js :target .reveal { opacity: 1; transform: none; transition: none; }

/* 05/11 · collaudo, giro 2: i loghi di «Cinque marchi» non prendono lo stile delle icone tonde della scheda */
.valore .loghi-mini img { box-sizing: border-box; padding: 0; border: 0; border-radius: 0; margin: 0; }
/* la tessera del catalogo: da telefono il pulsante largo come quelli delle schede */
@media (max-width: 860px) { [data-v~="tessera-corpo"] { padding-inline: 2px; } }
/* un'ancora dentro un blocco che entra (es. #gio-cellini nel blocco MBRC): il blocco è già al suo posto */
html.js .reveal:has(:target) { opacity: 1; transform: none; transition: none; }

/* 05/11 · «Cinque marchi»: i loghi con le loro proporzioni vere, mai attaccati e mai uno da solo */
#boutique .loghi-mini img { height: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 861px) {
  #boutique .loghi-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 6px; align-items: center; justify-items: center; }
  #boutique .loghi-mini li { flex: none; min-height: 0; width: 100%; display: flex; justify-content: center; }
  #boutique .loghi-mini li:has(.logo-john-richmond) { grid-column: 1 / span 3; grid-row: 1; }
  #boutique .loghi-mini li:has(.logo-gio-cellini) { grid-column: 4 / span 3; grid-row: 1; }
  #boutique .loghi-mini li:has(.logo-valentino-bags) { grid-column: 1 / span 2; grid-row: 2; }
  #boutique .loghi-mini li:has(.logo-mbrc) { grid-column: 3 / span 2; grid-row: 2; }
  #boutique .loghi-mini li:has(.logo-bhpc) { grid-column: 5 / span 2; grid-row: 2; }
  #boutique .loghi-mini .logo-john-richmond { width: 104px; } #boutique .loghi-mini .logo-gio-cellini { width: 100px; }
  #boutique .loghi-mini .logo-valentino-bags { width: 74px; } #boutique .loghi-mini .logo-mbrc { width: 42px; } #boutique .loghi-mini .logo-bhpc { width: 46px; }
}
/* da telefono le quattro schede una sotto l'altra, icona a sinistra: i loghi hanno la riga intera */
@media (max-width: 860px) {
  #boutique .valori-griglia { grid-template-columns: 1fr; row-gap: 0; }
  #boutique .valori-griglia > li { border-left: 0; border-top: 1px solid rgba(227, 199, 162, .75); }
  #boutique .valori-griglia > li:first-child { border-top: 0; }
  #boutique .valore { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; align-items: center; text-align: left; padding: 18px 2px; background: transparent; box-shadow: none; }
  #boutique .valore > img { grid-row: 1 / span 2; margin: 0; height: 26px; padding: 13px; }
  #boutique .valore h3, #boutique .valore p, #boutique .valore .loghi-mini { grid-column: 2; }
  #boutique .valore p { margin-top: 4px; }
  #boutique .valore .loghi-mini { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 12px 14px; margin-top: 8px; }
  #boutique .valore .loghi-mini li { flex: 0 0 auto; min-height: 0; }
  #boutique .loghi-mini .logo-valentino-bags { width: 72px; } #boutique .loghi-mini .logo-john-richmond { width: 80px; }
  #boutique .loghi-mini .logo-mbrc { width: 34px; } #boutique .loghi-mini .logo-gio-cellini { width: 72px; } #boutique .loghi-mini .logo-bhpc { width: 40px; }
}
@media (max-width: 860px) { #boutique .valore > img { width: 26px; height: 26px; object-fit: contain; } }

/* ══ 2 Step (05/11) · voce 1: da telefono prima le borse, poi il testo; pronta per l'immagine panoramica 3:2 ══ */
@media (max-width: 860px) {
  .hero-arte { order: -1; margin: 14px 0 4px; }
  .hero-testo { padding-top: 14px; }
}
/* l'immagine panoramica (voce 2), quando c'è: <figure class="hero-foto"> come primo figlio della hero.
   Da computer copre la hero, con le borse a destra e lo spazio calmo a sinistra sotto il testo;
   da telefono sta sopra il testo e mostra la parte con le borse. */
.hero-foto { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero:has(.hero-foto) .hero-arte { display: none; }
.hero:has(.hero-foto) .hero-riga { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
@media (max-width: 860px) {
  .hero-foto { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .hero-foto img { object-position: 84% 50%; }
}
/* voci 3 e 4: le file che scorrono di lato da telefono stanno ferme in verticale.
   La causa: l'entrata delle schede (32 px dal basso) partiva mentre la fila scorreva di lato. */
@media (max-width: 860px) {
  html.js .schede:not([data-v~="schede-tutte"]) > .reveal, html.js .video-griglia > .reveal { opacity: 1; transform: none; transition: none; }
  .schede:not([data-v~="schede-tutte"]), .video-griglia { overscroll-behavior-x: contain; }
}

/* ══ 2 Step · lo stampo delle pagine prodotto (/borse/<id>/), coi pezzi del sito ══ */
[data-v~="briciole"] { padding-top: 22px; font-size: .875rem; color: var(--testo); }
[data-v~="briciole"] a { color: var(--oro-scuro); text-decoration: none; }
[data-v~="prodotto"] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
[data-v~="prodotto-foto"] { margin: 0; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; }
[data-v~="prodotto-foto"] img { width: 100%; height: 100%; object-fit: contain; }
[data-v~="prodotto-testo"] h1 { font-family: var(--titoli); font-weight: 600; font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.04; font-variant-numeric: lining-nums; }
[data-v~="prodotto-testo"] .prezzo { font-size: 1.5rem; margin: 14px 0 22px; }
[data-v~="prodotto-testo"] .btn-grande { width: auto; }
[data-v~="prodotto-testo"] .sotto-titolo { margin: 26px 0 8px; }
[data-v~="prodotto-testo"] h2 { font-family: var(--titoli); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); margin: 34px 0 12px; }
[data-v~="caratteristiche"] { width: 100%; border-collapse: collapse; font-size: 1rem; }
[data-v~="caratteristiche"] th, [data-v~="caratteristiche"] td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--filetto); }
[data-v~="caratteristiche"] th { width: 38%; font-weight: 500; color: var(--testo); padding-right: 18px; }
[data-v~="caratteristiche"] td { color: var(--inchiostro); }
[data-v~="prodotto-testo"] .passi-home { grid-template-columns: 1fr; row-gap: 12px; }
.scheda-modello a, a.scheda-foto { color: inherit; text-decoration: none; display: block; }
@media (max-width: 860px) { [data-v~="prodotto"] { grid-template-columns: 1fr; } [data-v~="prodotto-testo"] .btn-grande { width: 100%; } }

/* ══ 2 Step · voci 3 (allargata), 8 e 9 ══ */
/* da telefono nessuna foto sale o scende: l'entrata è solo una dissolvenza (nelle file che scorrono di lato nemmeno quella) */
@media (max-width: 860px) { html.js .reveal { transform: none; transition: opacity 600ms var(--ease-out); } }
/* «Dove siamo» e /kontakti: la vetrina intera, in un riquadro stretto e alto accanto alla scheda */
@media (min-width: 861px) {
  .contatti-griglia { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: center; }
  .contatti-foto { aspect-ratio: 3 / 4; min-height: 0; border-radius: 20px; }
  .scheda-contatti { margin-left: 0; }
}
@media (max-width: 860px) { .contatti-foto { aspect-ratio: 4 / 5; } }
/* i video: cinque schede in fila da computer */
@media (min-width: 861px) { .video-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .video-titolo { font-size: 1.125rem; } }

/* pagine prodotto: etichetta e valore nella stessa cella, in due colonne */
[data-v~="caratteristiche"] td { display: grid; grid-template-columns: 38% 1fr; gap: 18px; }
[data-v~="etichetta"] { color: var(--testo); font-weight: 500; }
[data-v~="valore"] { color: var(--inchiostro); }

/* la descrizione del prodotto: una frase per blocco, da telefono al massimo 3 righe */
[data-v~="descrizione"] { margin-top: 26px; }
[data-v~="descrizione"] .sotto-titolo { margin: 0 0 12px; }
@media (max-width: 860px) { [data-v~="descrizione"] .sotto-titolo { font-size: 1rem; line-height: 1.5; } }

/* ══ 2 Step · voci 2 e 2b: la hero panoramica (una delle 5 di Design/Hero-da-scegliere), pronta ══
   Da computer l'immagine 3:2 sta a destra alta quanto la hero (niente si taglia in alto o in basso), il suo lato
   sinistro calmo sfuma nel fondo sotto il testo; da telefono sta sopra il testo e mostra le borse.
   Il movimento: uno zoom lento avanti e indietro (22 s), solo transform; fermo con «riduci animazioni». */
.hero:has(.hero-foto) .hero-riga { position: relative; z-index: 1; }
.hero-foto { position: absolute; inset: 0 0 0 auto; height: 100%; width: auto; aspect-ratio: 3 / 2; max-width: none; margin: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
  transform-origin: var(--origine, 65% 30%); animation: respiro 22s var(--ease-in-out) infinite alternate; will-change: transform; }
@keyframes respiro { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(var(--zoom, 1.05)) translate3d(var(--dx, -1%), var(--dy, -.5%), 0); } }
.hero-foto[data-v~="hero-1"] img { --origine: 65% 0%;  --zoom: 1.05; --dx: -1%;  --dy: .4%; }
.hero-foto[data-v~="hero-2"] img { --origine: 72% 50%; --zoom: 1.05; --dx: -1%;  --dy: 0%; }
.hero-foto[data-v~="hero-3"] img { --origine: 62% 40%; --zoom: 1.05; --dx: -.8%; --dy: 0%; }
.hero-foto[data-v~="hero-4"] img { --origine: 66% 0%;  --zoom: 1.05; --dx: -1%;  --dy: .4%; }
.hero-foto[data-v~="hero-5"] img { --origine: 62% 35%; --zoom: 1.04; --dx: -.8%; --dy: 0%; }
@media (max-width: 1180px) and (min-width: 861px) { .hero:has(.hero-foto) .hero-riga { grid-template-columns: minmax(0, 1fr); } .hero:has(.hero-foto) .hero-testo { max-width: 46%; } }
@media (max-width: 860px) {
  .hero-foto { position: relative; inset: auto; height: auto; width: 100%; aspect-ratio: 4 / 3; -webkit-mask-image: none; mask-image: none; }
  .hero-foto img { object-position: 86% 50%; }
  .hero:has(.hero-foto) .hero-testo { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-foto img { animation: none; } }

/* 05/11 · 2 Step voce 6: le miniature di /marki aprono la pagina del prodotto */
a[data-v~="miniatura-prodotto"] { display: block; border-radius: inherit; }
a[data-v~="miniatura-prodotto"]:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a[data-v~="miniatura-prodotto"]:hover img { transform: scale(1.03); } }

/* ══ 3 Step, voce 8 · Viber accanto a WhatsApp (icona ufficiale, monocroma, viola) ══ */
.ico-viber { width: 1.2em; height: 1.2em; flex: none; fill: #7360F2; }
.btn-viber { background: transparent; color: var(--inchiostro); border: 1px solid rgba(38, 20, 13, .45); padding: .84em 1.5em; }
@media (hover: hover) and (pointer: fine) { .btn-viber:hover { border-color: #7360F2; background: rgba(115, 96, 242, .06); } }
.btn-viber-piccolo { width: 100%; margin-top: 8px; font-size: .9375rem; padding: .62em 1em; }
@media (min-width: 1101px) { .btn-viber-piccolo { font-size: 1rem; } }
.hero-azioni .btn-viber, .invito-testo .btn-viber { font-size: inherit; }
.scheda-contatti .btn-viber { width: 100%; margin-top: 10px; }
.btn-viber-icona { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--filetto); background: rgba(252, 249, 246, .7);
  transition: border-color .2s ease, background-color .2s ease, transform 140ms var(--ease-out); -webkit-user-select: none; user-select: none; }
.btn-viber-icona .ico-viber { width: 21px; height: 21px; }
.btn-viber-icona:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .btn-viber-icona:hover { border-color: #7360F2; } }
.viber-fisso { display: none; }
@media (max-width: 860px) {
  .btn-viber-piccolo { font-size: .8125rem; padding: .6em .4em; gap: .35em; min-height: 40px; }
  [data-v~="schede-tutte"] .btn-viber-piccolo { font-size: .78rem; min-height: 44px; }
  .viber-fisso { display: grid; place-items: center; position: fixed; z-index: 50; right: calc(84px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%; background: #7360F2; box-shadow: 0 10px 26px var(--ombra-forte); -webkit-user-select: none; user-select: none;
    transition: opacity 160ms ease, visibility 0s linear 160ms; }
  .viber-fisso .ico-viber { width: 28px; height: 28px; fill: #FFFFFF; }
  .viber-fisso:active { transform: scale(.94); }
  html.menu-aperto .viber-fisso { opacity: 0; visibility: hidden; pointer-events: none; }
  .menu .btn-viber-icona { width: 52px; height: 52px; }
}

/* ══ 3 Step, voce 8 (secondo giro) · Viber PRIMA di WhatsApp e GRANDE UGUALE, in tutto il sito ══
   La cliente: in Bulgaria si usa Viber. Ogni coppia è <div class="chat-coppia">: due colonne uguali quando c'è posto,
   una sotto l'altra a larghezza piena quando non c'è, sempre alte uguali. Viber: il pulsante scuro, icona bianca.
   WhatsApp: a contorno, icona verde. Nelle schede tutti e due a contorno. Quando la scritta più lunga non sta su una
   riga, vanno a capo tutte e due nello stesso punto («Richiedi informazioni su» / «Viber», «… su» / «WhatsApp»). */
.chat-coppia { --chat-min: 24em; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--chat-min)), 1fr)); grid-auto-rows: 1fr; gap: 12px; font-size: 1rem; }
.chat-coppia > .btn { width: 100%; min-width: 0; min-height: 3.35em; font-size: 1em; line-height: 1.25; padding: .8em 1em; gap: .6em; border: 1px solid transparent; box-shadow: none; text-align: center; }
.chat-coppia > .btn svg { width: 1.3em; height: 1.3em; flex: none; transition: none; }
.chat-coppia > .btn-scuro { background: var(--espresso); color: var(--crema); border-color: var(--espresso); box-shadow: 0 6px 18px rgba(43, 29, 22, .12); }
.btn-scuro .ico-viber { fill: #FFFFFF; }
.btn-contorno { background: transparent; color: var(--inchiostro); border: 1px solid rgba(38, 20, 13, .45); }
.chat-coppia > .btn-contorno { border-color: rgba(38, 20, 13, .45); }
.btn-contorno .ico-wa { fill: #25D366; }
.btn-contorno .ico-viber { fill: #7360F2; }
@media (hover: hover) and (pointer: fine) {
  .chat-coppia > .btn:hover svg { transform: none; }
  .chat-coppia > .btn-scuro:hover { background: #2E1D15; border-color: #2E1D15; box-shadow: 0 8px 22px rgba(43, 29, 22, .14); }
  .chat-coppia > .btn-contorno.chat-wa:hover { border-color: #25D366; background: rgba(37, 211, 102, .07); color: var(--inchiostro); }
  .chat-coppia > .btn-contorno.chat-viber:hover { border-color: #7360F2; background: rgba(115, 96, 242, .06); color: var(--inchiostro); }
}

/* hero, invito, /kontakti e l'invito di /katalog: una sotto l'altra, larghe quanto basta per la scritta più lunga */
.hero-azioni .chat-coppia, [data-v~="invito-azioni"] .chat-coppia { font-size: 1.0625rem; width: 24em; max-width: 100%; }
/* «Dove siamo» e la pagina del prodotto: larghi quanto la scheda o la colonna */
.chat-grande { font-size: 1.0625rem; }
[data-v~="prodotto-testo"] .chat-coppia { --chat-min: 14em; margin-top: 4px; }
/* le scritte lunghe: a capo tutte e due nello stesso punto, quando la più lunga non sta su una riga */
.hero-azioni .chat-coppia, [data-v~="invito-azioni"] .chat-coppia, .scheda-contatti .chat-coppia { container: chat-lunga / inline-size; }
@container chat-lunga (max-width: 20.9em) { .chat-coppia > .btn span { max-width: 12.2em; } }

/* le schede del catalogo: una sotto l'altra, larghe quanto la scheda */
.chat-piccola { grid-template-columns: 1fr; gap: 8px; font-size: .9375rem; container: chat-corta / inline-size; }
.chat-piccola > .btn { min-height: 44px; padding: .62em .5em; gap: .4em; }
.chat-piccola > .btn svg { width: 1.2em; height: 1.2em; }
@container chat-corta (max-width: 12.6em) { .chat-piccola > .btn span { max-width: 5.2em; } }
.scheda-corpo > .chat-coppia { margin-top: auto; }
[data-v~="tessera-corpo"] .chat-coppia { width: min(100%, 16em); }
@media (max-width: 1100px) and (min-width: 861px) { .chat-piccola { font-size: .8125rem; } .scheda-contatti .chat-grande { font-size: .90625rem; } .hero-azioni .chat-coppia, [data-v~="invito-azioni"] .chat-coppia { font-size: 1rem; } }
@media (min-width: 1101px) { .chat-piccola { font-size: 1rem; } }

/* la testata da computer: due cerchi uguali, Viber prima */
.chat-testata { display: flex; gap: 10px; }
.menu .chat-testata > .btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; box-shadow: none; }
.menu .chat-testata > .btn span { display: none; }
.menu .chat-testata > .btn svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .chat-coppia { font-size: .9375rem; }
  .hero-azioni .chat-coppia, [data-v~="invito-azioni"] .chat-coppia { font-size: .9375rem; width: 100%; }
  [data-v~="invito-azioni"] { width: 100%; }
  .chat-grande { font-size: .9375rem; }
  .scheda-contatti .chat-grande { font-size: .875rem; }
  .chat-piccola { font-size: .875rem; }
  [data-v~="schede-tutte"] .chat-piccola { font-size: .78rem; container-name: chat-catalogo; }
  [data-v~="schede-tutte"] .chat-piccola > .btn { padding: .6em .3em; gap: .3em; }
  [data-v~="schede-tutte"] .chat-piccola > .btn svg { width: 1.1em; height: 1.1em; }
  /* il menu aperto: due pulsanti uguali con la scritta, a larghezza piena */
  .menu .chat-testata { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; width: min(100%, 340px); gap: 12px; container: chat-lunga / inline-size; }
  .menu .chat-testata > .btn { width: 100%; height: auto; min-height: 54px; padding: .85em .9em; border-radius: 999px; font-size: .9375rem; }
  .menu .chat-testata > .btn span { display: inline; }
  .menu .chat-testata > .btn-scuro { box-shadow: 0 6px 18px rgba(43, 29, 22, .12); }
  /* i pulsanti fissi: Viber all'angolo, scuro; WhatsApp accanto, a contorno; uguali */
  .viber-fisso { right: calc(16px + env(safe-area-inset-right, 0px)); background: var(--espresso); border: 1px solid var(--espresso); }
  .viber-fisso .ico-viber { fill: #FFFFFF; }
  .wa-fisso { right: calc(84px + env(safe-area-inset-right, 0px)); background: var(--crema); color: var(--inchiostro); border: 1px solid rgba(38, 20, 13, .3); }
  .wa-fisso svg { fill: #25D366; }
}
@container chat-catalogo (max-width: 12em) { .chat-piccola > .btn span { max-width: 5.2em; } }
/* /kontakti: «Indicazioni stradali» largo quanto la scheda (era btn-grande, che la home non usa più) */
.btn[data-v~="grande"] { width: 100%; font-size: 1.0625rem; padding: 1em 1.2em; }
@media (min-width: 1101px) { .btn[data-v~="grande"] { font-size: 1.1875rem; } }
/* ══ 3 Step, voci 1-7 · le foto ufficiali col fondo bianco (in attesa dello scontorno): il bianco sparisce nell'avorio ══
   Il campo «fondo» di borse.json (e di misure.json): «bianco» → data-fondo="bianco" sull'immagine. Quando arriva la PNG
   scontornata, foto-prodotti-3-step.py la rifà trasparente e il campo torna «trasparente»: questa regola non serve più. */
img[data-fondo="bianco"] { mix-blend-mode: multiply; }
/* pagine prodotto da telefono: etichetta e valore di seguito, a larghezza piena (le caratteristiche lunghe del 3 Step
   in due colonne andavano a 4-5 righe; così al massimo 3) */
@media (max-width: 860px) {
  [data-v~="caratteristiche"] td { display: block; font-size: .9375rem; line-height: 1.5; }
}
/* ══ 3 Step, secondo giro (06/11) ══ */
/* da telefono i pulsanti fissi si nascondono mentre una coppia Viber/WhatsApp della pagina è sullo schermo (main.js),
   con la stessa transizione del menu aperto; restano Viber all'angolo e WhatsApp accanto */
@media (max-width: 860px) {
  html.chat-in-vista .wa-fisso, html.chat-in-vista .viber-fisso { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* pagina prodotto: il numero sotto i due pulsanti, come in «Dove siamo» (da computer senza Viber il pulsante non apre niente) */
[data-v~="numero-prodotto"] { margin: 16px 0 0; }
/* sotto i 400 px il filtro dei marchi ha una riga sua: «Beverly Hills Polo Club» si legge intero */
@media (max-width: 399px) {
  .filtri { flex-wrap: wrap; }
  .filtri > .filtro:first-child { flex: 1 1 100%; }
}

/* ── 6-ter, il pannello (06/11/2026): i loghi dei MARCHI NUOVI che Stefania aggiunge dal negozio (logo-<marchio>, senza
   una regola sua): mai più grandi dei loghi di oggi. :where() non pesa: le misure di ogni logo di oggi restano quelle ── */
/* 6-ter (06/11/2026): un logo nuovo caricato dal pannello non diventa enorme; «min(…, 100%)» lascia i loghi comprimibili come
   prima (con un tetto in px soli, a 320 e 390 px la striscia dei marchi usciva dallo schermo) */
:where(.marchi-lista) img { max-height: 54px; max-width: min(200px, 100%); }
:where([data-v~="marchio-logo"]) img { max-height: 64px; max-width: min(240px, 100%); }
:where(.loghi-mini) img { max-height: 30px; max-width: min(120px, 100%); }
@media (max-width: 860px) {
  :where(.marchi-lista) img { max-height: 40px; max-width: min(120px, 100%); }
  :where(.loghi-mini) img { max-height: 24px; max-width: min(90px, 100%); }
}
/* ── 6-ter, audit P16 (06/11/2026): una parola lunghissima scritta dal pannello (un nome, un titolo, una domanda) va a capo
   anche dentro la parola, invece di far scorrere la pagina di lato. «anywhere» spezza solo la parola che non ci sta: i testi
   normali restano come sono. :where() non pesa: le regole del sito vincono sempre ── */
:where(h1, h2, h3, h4, h5, h6, summary, summary span, p, li, dt, dd, figcaption, blockquote) { overflow-wrap: anywhere; }

/* ══ 4 Step (06/11/2026): IL MENÙ DELLE LINGUE nella testata (il <details class="lingue" data-thk-lingue> del kit, /assets/thk/lingue.css,
   con le variabili del sito): chiuso la sigla e la freccia, aperto IT · BG · EN · FR · ES. Da computer sta nella barra del menu, accanto
   alla ricerca; da telefono si vede senza aprire il menu del sito: il logo si stringe quanto basta, e niente si copre. ══ */
.testata-azioni { display: flex; align-items: center; gap: 6px; }
details.lingue {
  --thk-lingue-bordo: var(--linea-oro);
  --thk-lingue-pulsante-testo: var(--inchiostro);
  --thk-lingue-fuoco: var(--oro-scuro);
  --thk-lingue-fondo: var(--scheda);
  --thk-lingue-testo: var(--inchiostro);
  --thk-lingue-raggio-elenco: var(--raggio-piccolo);
  --thk-lingue-evidenza: rgba(204, 165, 102, .16);
  font-size: .9375rem;
}
details.lingue > summary { font-weight: 500; padding: 0 .75em; transition: background-color .2s ease, border-color .2s ease; }
details.lingue[open] > summary { background: rgba(204, 165, 102, .12); border-color: var(--oro); }
@media (hover: hover) and (pointer: fine) { details.lingue > summary:hover { background: rgba(204, 165, 102, .12); border-color: var(--oro); } }
details.lingue > ul { border: 1px solid rgba(227, 199, 162, .6); box-shadow: 0 18px 40px var(--ombra-forte); }
details.lingue > ul a { font-weight: 500; }
details.lingue > ul a[aria-current="true"] { color: var(--oro-scuro); font-weight: 600; }
/* da telefono: logo, lingue, ricerca e menu nella stessa riga, fino a 320 px */
@media (max-width: 430px) {
  .testata-riga { gap: 8px; }
  .logo img { height: 36px; }
  .testata-azioni { gap: 2px; }
  details.lingue > summary { padding: 0 .55em; min-width: 44px; }
  .apri-menu { width: 44px; height: 44px; }
}
@media (max-width: 374px) { .logo img { height: 30px; } }
@media (max-width: 340px) {
  .testata-riga { gap: 4px; }
  .logo img { height: 27px; }
  details.lingue > summary { padding: 0 .4em; gap: .25em; }
}
/* le pagine legali nelle altre lingue: la riga «prevale il testo italiano», sotto il titolo */
.legale .prevale { font-size: .9375rem; font-style: italic; color: var(--testo-tenue); }

/* ── 4 Step (audit del 07/11/2026, M3): nelle altre lingue le parole non si spezzano a metà sui telefoni stretti ──
   In italiano i pulsanti delle schede vanno a capo in «Chiedi su / Viber» col max-width di 5.2em; «Попитайте» (BG) è più
   lungo di 5.2em e si spezzava: fuori dall'italiano il testo del pulsante prende tutto il posto e va a capo fra le parole.
   Lo stesso per i link dei social nella home (vanno uno sotto l'altro), la striscia dei marchi («Prochainement») e le
   categorie della home a 320 px («Портфейли», «Portefeuilles»). L'italiano resta com'era. */
html:not([lang="it"]) .chat-piccola > .btn span { max-width: none; text-wrap: balance; }
html:not([lang="it"]) .social { flex-wrap: wrap; }
html:not([lang="it"]) .social a { overflow-wrap: normal; }
html:not([lang="it"]) .marchio-testo a { overflow-wrap: normal; }
@media (max-width: 380px) {
  html:not([lang="it"]) .categoria-nome { font-size: clamp(.875rem, 4.6vw, 1.05rem); hyphens: auto; }
}
/* (riprova dell'audit, P13) la didascalia dei video a 5 colonne: in bulgaro «капитонираната» non ci stava a 912-1024 px */
@media (min-width: 861px) {
  html:not([lang="it"]) .video-titolo { padding-inline: 8px; }
  html[lang="bg"] .video-titolo { font-size: 1rem; }
}