/* components.css — contract_textile. Vetrina di prodotti di pregio: bianco dominante, BANDE PIENE di
   marca che incorniciano la pagina, fotografia grande a colori pieni, spazi ariosi.
   I colori arrivano SOLO dai token (tokens.css): qui non si dichiarano hex.
   ⚠ Contratto a11y: --azure è SUPERFICIE (mai testo, non regge nemmeno il bianco); il testo azzurro è
   --azure-ink. La CTA piena è --deep + bianco. Vedi l'intestazione di tokens.css. */

:root { --dur: 200ms; --ease: cubic-bezier(.2,.6,.2,1); }

/* ============================ Bottoni ============================
   Il cliente ha chiesto di "valorizzare i CTA con delle ombreggiature": la CTA piena porta un'ombra
   di marca (blu, non grigia) che si alza all'hover. Pill, come il lettering tondo del logo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  border-radius: var(--radius-pill); border: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
/* ⚠ Fondo --deep, MAI --azure: bianco su azzurro fa 4.49 (sotto AA). Su --deep fa 15.26. */
.btn--accent { background: var(--deep); color: var(--on-dark); box-shadow: var(--shadow-cta); }
.btn--accent:hover { background: var(--navy); box-shadow: var(--shadow-cta-hover); transform: translateY(-2px); }
.btn--ghost { border-color: var(--azure); color: var(--azure-ink); background: transparent; }
.btn--ghost:hover { background: var(--azure); color: var(--on-dark); border-color: var(--azure); }
/* Su fondo scuro il contorno è bianco: --azure-ink su navy sarebbe 3.19. */
.btn--ghost-on-dark { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
.btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--deep); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ============================ Header: BARRA BIANCA, UNA RIGA ============================
   Il cliente vuole il logo "fuori la foto oppure su barra bianca" e le voci di menu "in blu, che diventano
   azzurre". Su banda navy l'azzurro del logo scende a 3.69 ⇒ barra BIANCA (la banda di marca vive nel
   footer e negli scrim). ⚠ Header a UNA RIGA (come gli altri siti), centrato verticalmente: logo + 8 voci
   + CTA ci stanno perché il TELEFONO NON è in header (ridondante: footer, Contatti, e il CTA dice già
   "Contattaci"). La nav inline sta in riga fino a ~1150px; sotto, hamburger (WP collassa solo a 600px →
   la soglia la alziamo noi). */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.site-header__row {
  display: flex; align-items: center; gap: clamp(0.75rem, 0.1rem + 1vw, 1.5rem);
  padding-block: var(--space-3); flex-wrap: nowrap; max-width: 1500px;
}
/* Un margine di blocco su un figlio lo spinge fuori dal centro della riga. */
.site-header__row > * { align-self: center; margin-block: 0; }
.site-nav { flex: 1 1 auto; }   /* la nav prende lo spazio in mezzo e allinea le voci a destra */

/* Logo: GRANDE (era il reclamo). Il lockup è un'immagine sola, non ridotta a un mark quadrato.
   max-width alto: il wordmark è largo per natura e non va strozzato. */
.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.wordmark__logo { height: 32px; width: auto; max-width: min(50vw, 400px); object-fit: contain; }
.wordmark__txt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--deep);
  letter-spacing: -0.01em; line-height: 1.05; display: inline-flex; flex-direction: column;
}
.wordmark__txt small { font-family: var(--font-body); font-weight: 600; font-size: .62rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.site-footer .wordmark__logo { height: 32px; }

/* Nav: Sentence case (richiesta esplicita), voci in --deep, ATTIVA/hover in --azure-ink col filetto
   --azure sotto. ⚠ Niente text-transform:uppercase: il maiuscolo è largo ed è metà del motivo per cui
   il menu del sito bocciato andava a capo. */
.site-nav .wp-block-navigation__container { gap: clamp(.4rem, .05rem + .7vw, 1.05rem); flex-wrap: nowrap; }
.site-nav .wp-block-navigation-item__content {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--deep); text-transform: none; white-space: nowrap;
  padding-block: 0.5rem; position: relative;
  transition: color var(--dur) var(--ease);
}
.site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--azure); border-radius: 2px; transform: scaleX(0);
  transform-origin: left; transition: transform var(--dur) var(--ease);
}
.site-nav .wp-block-navigation-item__content:hover { color: var(--azure-ink); }
.site-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
/* Stato ATTIVO: la pagina in cui ci si trova. WP marca la voce con .current-menu-item. */
.site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content {
  color: var(--azure-ink);
}
.site-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.site-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.site-header__cta { flex: none; padding-block: var(--space-2); font-size: .9rem; }

/* ⚠ La nav inline con 8 voci sta in riga solo ≳1200px. WP collassa a hamburger solo a 600px, lasciando
   un buco 600–1200px dove la nav sborda. Alzo la soglia a 1200px: sotto, forzo l'hamburger (mostro il
   bottone di WP, nascondo la lista inline). L'overlay è lo stesso (già a prova di regola 23). */
@media (max-width: 1200px) {
  .wp-block-navigation__responsive-container-open { display: flex !important; }
  .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { display: none; }
  /* L'hamburger va a DESTRA, staccato dal logo: margin-left:auto lo spinge al bordo destro della riga. */
  .site-nav { flex: 0 0 auto; margin-left: auto; }
  /* Hamburger a 3 barrette (l'icona di WP ne ha solo 2): la nascondo e la ridisegno. */
  .wp-block-navigation__responsive-container-open {
    width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative;
  }
  .wp-block-navigation__responsive-container-open svg { display: none; }
  .wp-block-navigation__responsive-container-open::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 9px; height: 2.5px;
    background: var(--deep); border-radius: 2px;
    box-shadow: 0 7px 0 var(--deep), 0 14px 0 var(--deep);   /* + linea centrale + linea inferiore = 3 */
  }
}
/* Sotto i 900px: CTA fuori (è nella cta-bar fissa) e logo un filo più piccolo. */
@media (max-width: 900px) {
  .wordmark__logo { height: 30px; }
  .site-header__cta { display: none; }
}

/* Overlay mobile di wp:navigation: FISSO a tutto schermo, fondo --deep.
   ⚠⚠ REGOLA 23: il fondo BIANCO dell'overlay viene da WP con selettore a specificità 0,4,0
   (`.wp-block-navigation:not(.has-background) …:not(.disable-default-overlay)`) e le VOCI sono bianche →
   bianco-su-bianco, l'overlay sembra vuoto. Un `.is-menu-open{background}` (0,2,0) PERDE. Si vince solo
   RICOPIANDO il suo schema di specificità. Idem per la posizione/altezza. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed; inset: 0; z-index: 99999;
  height: 100vh; width: 100vw; overflow-y: auto; background: var(--deep);
  padding: 5rem var(--gutter) 6rem; display: flex; flex-direction: column; justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--on-dark); font-size: 1.25rem; width: 100%; padding-block: var(--space-3);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; flex-wrap: wrap; }
.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open { color: var(--deep); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--on-dark); }

/* ============================ Hero: foto grande, testo centrato ============================
   Il cliente si lamenta che l'header foto è "sgranato": qui la foto è full-bleed e va scelta hero-grade
   (>=1600x900) o presa dai RENDER. Senza foto (demo) resta una banda navy piena: mai una foto finta. */
.hero {
  position: relative; background: var(--navy); color: var(--on-dark);
  min-height: min(80vh, 680px); display: flex; align-items: center;
  overflow: hidden; isolation: isolate; text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--navy); }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-slide:nth-child(1) { opacity: 1; }
/* ⚠ Uno scrim NON basta a garantire il contrasto: queste foto (camere d'albergo, barche, dehors) hanno
   finestre e soffitti BIANCHI PURI. Misurato: col solo scrim il bianco sul pixel peggiore fa 2,96 — sotto
   perfino la soglia 3:1 del testo grande — e axe NON lo vede (non valuta il testo sopra un'immagine).
   Quindi il testo sta su una TARGA piena: targa .55 + scrim .25 = alpha efficace .66 -> bianco 5,55 sul
   pixel peggiore possibile. Il contrasto non dipende più dal fotogramma, e lo scrim leggero lascia viva la
   foto (sono prodotti di pregio: la foto è il prodotto). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--navy-rgb),.30) 0%, rgba(var(--navy-rgb),.22) 45%, rgba(var(--navy-rgb),.38) 100%);
}
.hero__inner { position: relative; padding-block: var(--space-9); width: 100%; }
.hero__text {
  max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column;
  gap: var(--space-5); align-items: center;
  background: rgba(var(--navy-rgb), .55);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-lg);
}
.hero__text h1 { color: var(--on-dark); }
/* ⚠ Sulla TARGA il testo è SOLO bianco. I token "on dark" (--azure-lt 6,42 · --muted-on-dark 10,24) sono
   tarati sulla banda navy PIENA: sulla targa semitrasparente il fondo è più chiaro (misurato 102,98,137)
   e lì scendono a 2,22 e 3,54. axe non lo coglie (sopra un'immagine non valuta), quindi la regola è esplicita. */
.hero__text .eyebrow--light { color: var(--on-dark); }
.hero__text .eyebrow--light::before { background: var(--on-dark); }
/* La misura di lettura sta sul PARAGRAFO, mai sul contenitore del display: un max-width sul wrapper
   strozzerebbe anche il titolo (errore ripetuto 4 volte in questo repo). */
.hero__text .lead { color: var(--on-dark); max-width: 42rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .hero-slide { animation: fp-hero-fade 32s linear infinite; }
  .hero-slide:nth-child(2) { animation-delay: 8s; }
  .hero-slide:nth-child(3) { animation-delay: 16s; }
  .hero-slide:nth-child(4) { animation-delay: 24s; }
}
@keyframes fp-hero-fade {
  0%   { opacity: 0; transform: scale(1.0); }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  27%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ============================ Intro di sezione ============================ */
.section-intro { max-width: 52rem; }
.section-intro--center { margin-inline: auto; text-align: center; align-items: center; }
.section-intro--center .lead { margin-inline: auto; max-width: 44rem; }

/* ============================ Manifesto (Chi siamo) ============================ */
.manifesto__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .manifesto__grid { grid-template-columns: 0.85fr 1fr 0.8fr; gap: var(--space-7); align-items: center; } }
/* La tessera chiude la riga: senza, «Chi siamo» è una colonna di prosa e basta — il "spoglio" del cliente. */
.manifesto__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-hover); }
.manifesto__fig img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
@media (max-width: 899px) { .manifesto__fig { display: none; } }
.manifesto__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }
/* Size PROPRIA e non --text-2xl: la copy reale del cliente supera i 100 caratteri, dove una size da
   titolo breve frantuma la colonna (lezione DeMartini: 123 char su una size tarata su 67). */
.statement { font-family: var(--font-display); font-weight: 600; color: var(--deep);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.3rem); line-height: var(--lh-snug); }

/* Striscia credenziali: dà autorità subito dopo il "Chi siamo", chiude la sezione con ritmo.
   Filetto azzurro in cima a ogni voce, numerali nel display. */
.creds { display: grid; grid-template-columns: 1fr; gap: var(--frame-gap); margin-top: var(--space-8); }
@media (min-width: 560px) { .creds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .creds { grid-template-columns: repeat(4, 1fr); } }
.creds__item { border-top: 3px solid var(--azure); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.creds__n { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--deep); }
.creds__l { color: var(--ink-muted); font-size: .9rem; line-height: 1.4; }

/* ============================ Offerta: card = foto + BANDA di caption ============================
   È il dispositivo del template: la foto non è mai nuda, porta una banda piena di marca col titolo.
   Il cliente vuole le foto "staccate da una cornice o bordatura", MAI appiccicate: gutter netto +
   cornice bianca + filetto azzurro. */
/* Flex e non grid: le categorie sono CINQUE e in una griglia a 3 colonne le ultime due restano appese a
   sinistra come un avanzo. Col flex la riga orfana si centra da sola, qualunque sia il numero di voci. */
.ocards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--frame-gap); margin-top: var(--space-7); }
.ocard { flex: 0 1 100%; }
@media (min-width: 640px) { .ocard { flex-basis: calc(50% - var(--frame-gap) / 2); } }
@media (min-width: 1000px) { .ocard { flex-basis: calc(33.333% - var(--frame-gap) * 2 / 3); } }
.ocard {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ocard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.ocard:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.ocard__media { display: block; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.ocard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.ocard:hover .ocard__media img { transform: scale(1.04); }
/* La banda: piena, testo bianco su --navy (16.5:1). */
.ocard__band {
  display: block; background: var(--navy); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  padding: var(--space-3) var(--space-5);
}
.ocard__text { display: block; padding: var(--space-5); color: var(--ink-muted); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) {
  .ocard:hover { transform: none; }
  .ocard:hover .ocard__media img { transform: none; }
}


/* Chip dei settori (Gallery): pastiglie a filetto, non bottoni. */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }
.chip { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--deep);
  padding: var(--space-2) var(--space-5); border: 1px solid var(--azure); border-radius: var(--radius-pill); }

/* Card offerta: affordance "Scopri" che appare all'hover (2026, senza rumore). */
.ocard__go { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--azure-ink);
  font-weight: 700; font-size: .9rem; padding: 0 var(--space-5) var(--space-5); opacity: 0;
  transform: translateX(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ocard:hover .ocard__go, .ocard:focus-within .ocard__go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ocard__go { opacity: 1; transform: none; } }

/* ============================ Metodo: quattro passi ============================ */
.pattern-steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-7); }
@media (min-width: 700px) { .pattern-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pattern-steps { grid-template-columns: repeat(4, 1fr); } }
.pstep { padding: var(--space-5); border-top: 3px solid var(--azure); background: var(--paper);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.pstep__n { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--azure-ink);
  letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--space-2); }
.pstep h3 { margin-bottom: var(--space-2); }
.pstep__text { color: var(--ink-muted); font-size: .95rem; }

/* ============================ Settori: banda navy piena + tessere foto ============================ */
.settori__head { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: end; }
@media (min-width: 900px) { .settori__head { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.settori__body { max-width: 60ch; }
.stiles { display: grid; gap: var(--frame-gap); grid-template-columns: 1fr; margin-top: var(--space-7); }
@media (min-width: 640px) { .stiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stiles { grid-template-columns: repeat(4, 1fr); } }
/* Cornice chiara attorno alla foto: staccata dalla banda navy, mai a filo. */
.stile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.stile__media { display: block; aspect-ratio: 3 / 4; background: rgba(255,255,255,.08); overflow: hidden; }
.stile__media img { width: 100%; height: 100%; object-fit: cover; }
.stile__cap { display: block; padding: var(--space-4) var(--space-5) var(--space-5); }
.stile__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--on-dark); margin-bottom: var(--space-2); }
.stile__text { display: block; color: var(--muted-on-dark); font-size: .9rem; line-height: 1.55; }

/* ============================ Banda contatti (CTA finale) ============================ */
.cband__box { max-width: 46rem; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.cband__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-3); }

/* ============================ Page-head (pagine interne) ============================
   Compatta: l'h1 NON usa la size dell'hero. Vale per tutte le pagine interne, si sistema una volta sola. */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); text-align: center;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.page-head h1 { font-size: var(--text-2xl); color: var(--deep); }
.page-head .container { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.page-head .lead { max-width: 48rem; }

/* ============================ Pagina categoria ============================ */
.cat-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .cat-split { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); } }
.cat-split__text { max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-4); }
.cat-split__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-card); min-height: 260px; }
.cat-split__fig img { width: 100%; height: 100%; object-fit: cover; }
.prose > * + * { margin-top: var(--space-4); }

/* ============================ Gallery: foto INCORNICIATE e STACCATE ============================
   Reclamo esplicito del cliente sui caroselli: mai foto a filo. Cornice bianca + filetto + gutter. */
.gal-grid { display: grid; gap: var(--frame-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
.gframe {
  margin: 0; background: var(--paper); padding: var(--frame-pad);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  aspect-ratio: 4 / 3; min-height: 200px;
  transition: box-shadow var(--dur) var(--ease);
}
.gframe:hover { box-shadow: var(--shadow-card-hover); }
.gframe img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

/* ============================ Banda «I nostri brand» ============================
   Il docx la vuole «a fondo pagina HOME» coi marchi «che devono girare a catena»: nastro infinito.
   ⚠ I marchi VERI non ci sono ancora (lo dice il cliente: «dobbiamo richiedere a casa madre») e qui
   stanno dei SEGNAPOSTO NEUTRI, dichiarati tali: non si disegnano imitazioni di marchi altrui.
   Il nastro è duplicato e scorre di -50%: l'anello è continuo senza salti. La copia duplicata è
   aria-hidden e il viewport ha un aria-label unico (uno screen reader non legge 30 etichette). */
.brands { background: var(--paper); overflow: hidden; padding-block: var(--space-7);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brands .eyebrow { justify-content: center; margin-bottom: var(--space-6); }
.brands__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brands__track { display: flex; gap: clamp(2rem, 1rem + 3vw, 4.5rem); width: max-content; align-items: center; }
.brandmark {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; white-space: nowrap;
  color: var(--deep); opacity: .72; letter-spacing: .04em;
  padding: var(--space-3) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius);
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brands__viewport:hover .brandmark { opacity: 1; border-color: var(--azure); }
.brands__note { color: var(--ink-muted); font-size: .8rem; text-align: center; margin-top: var(--space-5); }
@media (prefers-reduced-motion: no-preference) {
  .brands__track { animation: fp-marquee 42s linear infinite; }
  /* Il nastro si ferma al passaggio del mouse: si legge il marchio invece di inseguirlo. */
  .brands__viewport:hover .brands__track { animation-play-state: paused; }
}
@keyframes fp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ Pagina categoria: banda hero fotografica ============================
   Le pagine interne non vivono di una page-head tinta e basta: sono la VETRINA di un mestiere. La banda
   porta la foto grande (le foto sono del cliente) e il titolo su TARGA — stesso contratto dell'hero:
   il contrasto non dipende dal fotogramma. */
.page-hero { position: relative; min-height: clamp(320px, 34vw, 460px); display: flex; align-items: center;
  overflow: hidden; isolation: isolate; background: var(--navy); text-align: center; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--navy-rgb),.32) 0%, rgba(var(--navy-rgb),.26) 50%, rgba(var(--navy-rgb),.42) 100%); }
.page-hero__plate { max-width: 46rem; margin-inline: auto; background: rgba(var(--navy-rgb), .55);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.page-hero__plate h1 { color: var(--on-dark); font-size: var(--text-2xl); }
/* Sulla targa il testo è SOLO bianco: i token "on dark" sono tarati sulla banda PIENA (vedi hero). */
.page-hero__plate .eyebrow--light { color: var(--on-dark); }
.page-hero__plate .eyebrow--light::before { background: var(--on-dark); }
.page-hero__plate .lead { color: var(--on-dark); max-width: 40rem; }

/* Intro della categoria: statement + prosa, con una TESSERA che SCAVALCA la banda sopra (dispositivo
   Pafundi: dà profondità e lega le due sezioni invece di impilarle). */
.cat-intro { position: relative; }
.cat-intro__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .cat-intro__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-8); } }
.cat-intro__body { max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-4); }
.cat-intro__tile { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card-hover);
  border: 6px solid var(--paper); }
@media (min-width: 900px) { .cat-intro__tile { margin-top: -6rem; } }   /* scavalca la banda */
.cat-intro__tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* Variante "piatta": stessa grafica delle foto in pagina (ombra leggera, niente cornice
   né scavalcamento della banda). */
.cat-intro__tile--flat { box-shadow: var(--shadow-card); border: 0; }
@media (min-width: 900px) { .cat-intro__tile--flat { margin-top: 0; } }

/* Blocchi alternati testo/foto: è ciò che toglie il "muro di prosa" alle pagine del cliente, che sono
   testi LUNGHI. Le foto si alternano di lato (mai una colonna sola di testo che scorre). */
.cat-block { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
/* Il margine sta TRA i blocchi, mai sul primo (col padding della banda collasserebbe e il titolo toccherebbe il bordo). */
.cat-block + .cat-block { margin-top: var(--space-8); }
@media (min-width: 900px) {
  .cat-block { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .cat-block--flip .cat-block__fig { order: -1; }   /* sfalsate: la foto cambia lato a ogni blocco */
}
.cat-block__text { max-width: 60ch; display: flex; flex-direction: column; gap: var(--space-4); }
.cat-block__text h2 { margin-bottom: var(--space-2); }
.cat-block__fig { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.cat-block__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 700ms var(--ease); }
.cat-block__fig:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .cat-block__fig:hover img { transform: none; } }

/* Elenchi dei mestieri: pastiglie col filetto azzurro, non pallini di sistema. */
.checks { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink);
  padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius);
  border-left: 3px solid var(--azure); font-size: .95rem; }

/* ============================ Mosaico fotografico ============================
   Griglia ASIMMETRICA (alcune tessere scavalcano due colonne/righe): una griglia piatta di quadrati è
   quello che il cliente chiama "disordinato e spoglio". Cornice + gutter: il cliente vuole le foto
   STACCATE, mai appiccicate. */
/* Griglia UNIFORME: tutte le tessere 4/3, stessa dimensione → allineata, nessun buco (gli span
   sfalsati creavano vuoti brutti). Gutter + cornice: le foto restano staccate. */
.mosaic { display: grid; gap: var(--frame-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  aspect-ratio: 4/3; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mosaic figure:hover { box-shadow: 0 16px 40px rgba(32,24,100,.20); transform: translateY(-4px); z-index: 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); }
.mosaic figure:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .mosaic figure:hover { transform: none; }
  .mosaic figure:hover img { transform: none; }
}


/* «Perché noi»: tre tessere a numerali, riempiono il respiro sotto la scheda recapiti. */
.why { display: grid; grid-template-columns: 1fr; gap: var(--frame-gap); margin-top: var(--space-7); }
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-card); }
.why__n { font-family: var(--font-display); font-weight: 700; color: var(--azure-ink); font-size: 1.1rem;
  letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--space-3); }
.why__card h3 { margin-bottom: var(--space-2); }
.why__card p { color: var(--ink-muted); font-size: .95rem; }

/* ============================ Pagina Contatti ============================
   Due colonne: a sinistra la foto della sede, a destra i recapiti in una scheda CHIARA (mai la banda
   scura dell'home-band: qui il fondo è bianco). Il markup è per-progetto (pages.json), ma le classi
   vivono QUI — un cliente non deve scrivere CSS. */
.contact-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .contact-cols { grid-template-columns: 1.15fr .85fr; gap: var(--space-8); } }
.contact-main h2, .contact-info h2 { margin-bottom: var(--space-4); }
.contact-hero { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-card); }
.contact-hero img { width: 100%; height: 100%; object-fit: cover; }
/* La didascalia dice COSA si sta guardando: senza, una foto di un loro lavoro sotto un titolo di sezione
   si legge come se fosse la loro sede. */
.contact-hero figcaption { padding: var(--space-3) var(--space-4); background: var(--surface);
  color: var(--ink-muted); font-size: .88rem; }
.contact-main > p { margin-bottom: var(--space-5); }
.contact-info { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6); }
.contact-info h3 { margin: var(--space-6) 0 var(--space-3); }
.contact-info .btn { margin-top: var(--space-5); }
.map-link { color: var(--azure-ink); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; margin-top: var(--space-4); }

/* Tabella orari: una TABELLA vera, non uno screenshot (nel materiale di questi clienti gli orari
   arrivano come immagini di tabelle Word: illeggibili per uno screen reader e invisibili a Google). */
.hours { border-collapse: collapse; width: 100%; }
.hours th, .hours td { text-align: left; padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
  font-weight: 400; }
.hours th { color: var(--deep); font-weight: 700; padding-right: var(--space-4); white-space: nowrap; }
.hours td { color: var(--ink-muted); }
.hours .is-closed { color: var(--ink-muted); font-style: italic; }


/* Form di contatto first-party ([fp_contact_form]): campi puliti, moderni. */
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .contact-form .row { grid-template-columns: 1fr 1fr; } }
.contact-form .field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form label { font-weight: 700; font-size: .9rem; color: var(--deep); }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(92,116,188,.18);
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form .consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .9rem; color: var(--ink-muted); font-weight: 400; }
.contact-form .consent input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem; }
.contact-form .btn { align-self: flex-start; margin-top: var(--space-2); }
.fp-form-notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: .95rem; }
.fp-form-notice.is-error { background: #fdecec; color: #8a1f1f; border: 1px solid #f0b8b8; }
.fp-form-notice.is-ok { background: var(--surface); color: var(--deep); border: 1px solid var(--azure); }

/* ============================ Footer ============================
   Il cliente vuole il logo "fuori la foto oppure su barra bianca", "non andare a capo" e un uso migliore
   del bold. Barra bianca col logo + banda navy a 3 colonne con etichette in bold e valori regular. */
.site-footer__logobar { background: var(--paper); border-top: 1px solid var(--line); padding-block: var(--space-5); }
.site-footer__main { background: var(--navy); color: var(--on-dark); }
.site-footer__inner { padding-block: var(--space-8) var(--space-5); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.5fr 1.1fr 0.9fr; gap: var(--space-7); } }
.site-footer__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--on-dark); margin-bottom: var(--space-4); }
.site-footer__col a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.4); }
.site-footer__col a:hover { text-decoration-color: var(--on-dark); }
.site-footer__col .muted, .site-footer__tag { color: var(--muted-on-dark); }
.site-footer__tag { font-size: .9rem; margin-top: var(--space-4); max-width: 34ch; }
.site-footer__demo { color: var(--muted-on-dark); font-size: .82rem; margin-top: var(--space-4); }

/* Il bold porta l'etichetta, il regular il valore: è la gerarchia che il cliente ha chiesto.
   ⚠ Niente a capo: l'etichetta non si spezza e il valore resta sulla sua riga.
   ⚠⚠ `.finfo` è un componente CONDIVISO chiaro/scuro: nasce SCURO-SU-CHIARO (il caso generale — la
   pagina Contatti) ed è il FOOTER a ridipingerlo per la sua banda navy. Il contrario — colori "on dark"
   di default — rende le etichette BIANCHE SU BIANCO fuori dal footer: invisibili, e axe non le segnala
   nemmeno (segnala solo i valori). Verificato dal vivo, non dedotto. */
.finfo { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: baseline; }
.finfo dt { font-weight: 700; color: var(--deep); white-space: nowrap; }
.finfo dd { margin: 0; color: var(--ink-muted); text-wrap: pretty; }
.finfo dd a { color: var(--azure-ink); }
.site-footer .finfo dt { color: var(--on-dark); }
.site-footer .finfo dd, .site-footer .finfo dd a { color: var(--muted-on-dark); }
@media (max-width: 420px) { .finfo { grid-template-columns: 1fr; gap: 0 0; } .finfo dd { margin-bottom: var(--space-3); } }

.flinks { display: flex; flex-direction: column; gap: var(--space-3); }
.flinks a { display: inline-flex; align-items: center; gap: var(--space-3); }
.flinks a::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--azure-lt); flex: none; }

.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.18); color: var(--muted-on-dark); font-size: .85rem;
}
.site-footer__dgitaly { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted-on-dark); }
.site-footer__dgitaly img { width: 20px; height: 20px; }

/* ============================ Barra CTA mobile ============================ */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40; background: var(--line); box-shadow: 0 -4px 18px rgba(28,34,51,.18);
  }
  .cta-bar a { background: var(--paper); color: var(--deep); text-align: center;
    padding: var(--space-4); font-weight: 700; font-family: var(--font-display); }
  /* ⚠ Specificità: `.cta-bar a` (0,1,1) batterebbe `.cta-bar__call` (0,1,0) — il selettore va qualificato. */
  a.cta-bar__call { background: var(--deep); color: var(--on-dark); }
  /* ⚠ Fondo --azure-ink e non --azure: bianco su --azure fa 4.49 (sotto AA). Si legge azzurro lo stesso. */
  a.cta-bar__wa { background: var(--azure-ink); color: var(--on-dark); }
  body { padding-bottom: 4rem; }
}

/* ============================ Foto apribili (lightbox) ============================
   Le foto dei lavori sono `a.zoom`: cursore d'ingrandimento + un'icona che appare all'hover. Il lightbox
   (JS bundlato, guardato) mostra l'immagine a PIENA risoluzione (1200×900): a schermo intero ci sta senza
   upscale, quindi non si sgrana. */
a.zoom { display: block; position: relative; cursor: zoom-in; }
a.zoom::after {
  content: ""; position: absolute; right: var(--space-3); bottom: var(--space-3); width: 30px; height: 30px;
  border-radius: 50%; background: rgba(27,21,80,.72);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
  opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; transform: none; }

.fp-lb {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 5vh 4vw;
  background: rgba(27,21,80,.94); cursor: zoom-out;
}
.fp-lb.is-open { display: flex; animation: fp-lb-in 200ms var(--ease); }
@keyframes fp-lb-in { from { opacity: 0; } to { opacity: 1; } }
.fp-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.fp-lb__x { position: absolute; top: max(1rem, 3vh); right: max(1rem, 3vw); width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer; transition: background var(--dur) var(--ease); }
.fp-lb__x:hover { background: rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) { .fp-lb.is-open { animation: none; } }

/* ============================ Pulsante WhatsApp con glow ============================
   Come su K Edilizia: il WhatsApp "vive" con un anello che pulsa (richiama l'attenzione senza rumore).
   ⚠ Palette del cliente = solo blu/azzurro: il bottone resta --deep (non verde WhatsApp) e l'anello pulsa
   in azzurro. Fail-safe: reduced-motion → niente pulsazione. */
.btn--wa { position: relative; }
.btn--wa svg { width: 1.15em; height: 1.15em; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .btn--wa { animation: fp-wa-pulse 2.6s ease-in-out infinite; }
}
@keyframes fp-wa-pulse {
  0%, 70%, 100% { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(92,116,188,.55); }
  35% { box-shadow: var(--shadow-cta), 0 0 0 12px rgba(92,116,188,0); }
}
/* Anche il tasto WhatsApp della cta-bar mobile pulsa. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  a.cta-bar__wa { position: relative; animation: fp-wa-pulse-bar 2.6s ease-in-out infinite; }
}
@keyframes fp-wa-pulse-bar {
  0%, 70%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,.0); }
  35% { box-shadow: inset 0 0 22px 0 rgba(255,255,255,.22); }
}

/* ============================ 404 ============================ */
.nf { text-align: center; padding-block: var(--space-9); }
/* --azure-ink anche qui: la regola "l'azzurro non è testo" resta assoluta, senza eccezioni da ricordare. */
.nf__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 2rem + 7vw, 7rem);
  color: var(--azure-ink); line-height: 1; }
.nf__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* ============================ Scroll-reveal (micro-JS IntersectionObserver) ============================
   ⚠⚠ Il reveal MUOVE, non sfuma. Due motivi, entrambi pagati altrove: un'opacità intermedia COMPONE il
   testo col fondo e un --ink-muted (5.75 sul tint) scende sotto AA a metà transizione; e un contenitore
   trasparente non fa scaricare le immagini che contiene. Fail-visible: senza JS resta tutto visibile. */
.js .reveal { opacity: 1; transform: translateY(24px); }
.js .reveal.is-visible { transform: none; transition: transform 620ms var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; } }

/* --- Stagger: i figli di una griglia entrano a scalare, non tutti insieme. In SOLO transform (le foto
   dentro devono scaricarsi comunque) e senza toccare l'opacità del testo. --- */
.js .stagger > * { transform: translateY(20px); transition: transform 640ms var(--ease); }
.js .stagger.is-visible > * { transform: none; }
.js .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.js .stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.js .stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }
.js .stagger.is-visible > *:nth-child(n+9) { transition-delay: 560ms; }
@media (prefers-reduced-motion: reduce) { .js .stagger > * { transform: none; } }

/* --- Wipe: la foto si SCOPRE da sinistra invece di comparire. È il gesto che fa "2026" senza chiedere
   nulla al contenuto. ⚠ clip-path e non opacity: un'immagine trasparente non si scarica, e il wipe
   lascia il testo accanto sempre pieno (mai un testo che attraversa la soglia AA sfumando). --- */
.js .wipe img, .js img.wipe { clip-path: inset(0 100% 0 0); transform: scale(1.04); }
.js .wipe.is-visible img, .js img.wipe.is-visible {
  clip-path: inset(0 0 0 0); transform: none;
  transition: clip-path 900ms cubic-bezier(.22,.8,.24,1), transform 1200ms cubic-bezier(.22,.8,.24,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .wipe img, .js img.wipe { clip-path: none; transform: none; }
}

/* --- Il titolo di sezione porta un filetto che si tira da sinistra: piccolo, sobrio, percepibile. --- */
.js .section-intro h2 { position: relative; }
.js .section-intro.is-visible h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px;
  width: 0; height: 3px; background: var(--azure); border-radius: 3px;
  animation: fp-rule 700ms 240ms var(--ease) forwards;
}
@keyframes fp-rule { to { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .js .section-intro.is-visible h2::after { width: 64px; animation: none; } }

/* Bottone hamburger di wp:navigation: WP lo mostra solo sotto il breakpoint (overlayMenu:"mobile").
   Sta sulla barra BIANCA dell'header, quindi porta --deep. */
.wp-block-navigation__responsive-container-open { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--deep); padding: var(--space-2); }
@media (min-width: 901px) { .wp-block-navigation__responsive-container-open { display: none; } }
@media (max-width: 900px) { .site-nav > .wp-block-navigation__container { display: none; } }

/* Cataloghi Diesse: gerarchia comune, fotografie manuali e comandi sempre riconoscibili. */
.product-index { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; padding:0 0 1.8rem; margin:0 0 2.6rem; border-bottom:1px solid var(--line); }
.product-index a { color:var(--deep); font-size:.92rem; text-decoration:underline; text-underline-offset:5px; padding:.35rem 0; }
.product-contexts { color:var(--ink-muted); margin-bottom:1.6rem; font-size:.9rem; }
.product-block { align-items:start; scroll-margin-top:7rem; }
.product-block + .product-block { margin-top:3.5rem; padding-top:3.5rem; border-top:1px solid var(--line); }
.product-block .cat-block__text { min-width:0; gap:1.25rem; }
.product-block h2 { font-size:clamp(1.7rem,2.5vw,2.35rem); line-height:1.2; margin:0; }
.product-block .checks { margin:0; padding:0; list-style:none; gap:.65rem; }
.product-block .checks li { padding:.65rem .85rem; background:transparent; }
.product-links { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.product-links a { color:var(--deep); text-decoration:underline; text-underline-offset:5px; font-weight:600; }
.product-note { color:var(--ink-muted); font-size:.92rem; }
.product-block--compact { display:block; }
.product-block--compact .cat-block__text { max-width:none; }
.product-block--compact .checks { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* Cornici uniformi; gli originali panoramici restano completi anche nella miniatura. */
.mosaic figure,.mosaic figure.mosaic__full { aspect-ratio:3/2; align-self:stretch; }
.mosaic figure a { display:block; width:100%; height:100%; }
.mosaic figure img { width:100%; height:100%; object-fit:cover; }
.mosaic .mosaic__full img { height:100%; object-fit:contain; }
.mosaic .mosaic__full:hover img { transform:none; }
.product-gallery { min-width:0; width:100%; position:relative; }
.product-gallery__track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.product-gallery.is-ready .product-gallery__track { scrollbar-width:none; }
.product-gallery.is-ready .product-gallery__track::-webkit-scrollbar { display:none; }
.product-gallery__slide { margin:0; flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; }
.product-gallery__slide a { width:100%; }
.product-gallery__slide img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.product-gallery__bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.75rem; min-height:44px; }
.product-gallery__count { color:var(--ink-muted); font-size:.85rem; font-variant-numeric:tabular-nums; }
.product-gallery__controls { display:flex; gap:.5rem; }
.product-gallery__controls[hidden] { display:none; }
.product-arrow { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--azure); border-radius:50%; background:var(--paper); color:var(--deep); cursor:pointer; }
.product-arrow:hover { color:white; background:var(--deep); border-color:var(--deep); }
.product-arrow svg,.fp-lb__nav svg { display:block; width:22px; height:22px; }
.product-gallery a.zoom::after { opacity:1; transform:none; }
.fp-lb { padding:5rem 5.5rem; touch-action:pan-y pinch-zoom; }
.fp-lb__img { max-width:calc(100vw - 11rem); max-height:calc(100dvh - 10rem); }
.fp-lb__nav { position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:white; color:var(--deep); padding:0; cursor:pointer; z-index:2; }
.fp-lb__nav[hidden] { display:none; }
.fp-lb__prev { left:1.25rem; }
.fp-lb__next { right:1.25rem; }
.fp-lb__caption { position:absolute; left:5rem; right:5rem; bottom:1rem; color:white; text-align:center; font-size:.88rem; }
.fp-lb__count { display:block; font-variant-numeric:tabular-nums; margin-top:.25rem; }
.fp-lb button:focus-visible,.product-arrow:focus-visible { outline:3px solid var(--azure); outline-offset:4px; }
@media(min-width:900px) {
 .product-block:nth-of-type(even) .product-gallery { order:-1; }
}
@media(max-width:899px) { .product-block { gap:1.5rem; } .product-block--compact .checks { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:559px) {
 .product-index { gap:.35rem 1.1rem; margin-bottom:2rem; }
 .product-block + .product-block { margin-top:2.5rem; padding-top:2.5rem; }
 .product-block .checks,.product-block--compact .checks { grid-template-columns:1fr; }
 .fp-lb { padding:4.5rem .6rem 7.5rem; }
 .fp-lb__img { max-width:calc(100vw - 1.2rem); max-height:calc(100dvh - 12rem); }
 .fp-lb__nav { top:auto; bottom:3.5rem; transform:none; }
 .fp-lb__prev { left:calc(50% - 60px); } .fp-lb__next { right:calc(50% - 60px); }
 .fp-lb__caption { left:.75rem; right:.75rem; bottom:.65rem; font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) { .product-gallery__track { scroll-behavior:auto; } }

/* Diesse: composizione e sfumatura delicata approvate. Estensione solo progetto. */
:root{--surface:#F7F5F1}
.ds-hero,.product-catalog,.ds-home #offerta,.ds-home .cband,.ds-page .cband{
 background-color:var(--surface);
 background-image:radial-gradient(ellipse 85% 100% at 100% 0%,rgba(23,26,25,.14) 0%,rgba(23,26,25,.045) 40%,rgba(23,26,25,0) 76%),linear-gradient(115deg,var(--surface) 0%,var(--paper) 62%,var(--surface) 100%);
}
.ds-page .container,.ds-home>.section>.container{max-width:1320px;padding-inline:36px}
.ds-page .section,.ds-home>.section{padding-block:64px}
.ds-hero{display:grid;grid-template-columns:43% 57%;min-height:480px;max-width:1440px;margin-inline:auto;text-align:left;color:var(--ink);isolation:isolate}
.ds-hero::after{display:none}.ds-hero>.container{grid-column:1;grid-row:1;min-width:0;padding:48px 48px 48px 36px;margin:0;width:100%}
.ds-hero .page-hero__plate,.ds-hero .hero__text{display:block;padding:0;background:transparent;box-shadow:none;border:0;backdrop-filter:none;text-align:left;max-width:540px;margin:0}
.ds-hero .page-hero__plate h1,.ds-hero .hero__text h1{color:var(--deep);font-size:clamp(40px,4.2vw,60px);line-height:1.06;letter-spacing:-.035em;text-wrap:initial;margin:20px 0 26px}
.ds-hero .lead,.ds-hero .page-hero__plate .lead,.ds-hero .hero__text .lead{color:var(--ink);font-size:18px;line-height:1.6}
.ds-hero .eyebrow,.ds-hero .eyebrow--light{color:var(--azure-ink);justify-content:flex-start}.ds-hero .eyebrow::before{display:none}
.ds-hero .hero__actions{justify-content:flex-start;margin-top:24px}.ds-hero .btn--ghost-on-dark{color:var(--deep);border-color:var(--deep)}
.ds-hero .hero-media,.ds-hero-photo{grid-column:2;grid-row:1;position:relative;inset:auto;z-index:0;margin:0;min-height:480px;height:100%;width:100%;overflow:hidden}
.ds-hero-photo>.page-hero__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.ds-page .cat-intro .cat-block{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.ds-page .cat-intro .cat-block__text{max-width:none;gap:18px;order:0}.ds-page .cat-intro h2{font-size:clamp(28px,2.6vw,38px);line-height:1.2;margin:0 0 7px}
.ds-page .cat-intro p{font-size:17px;line-height:1.65;max-width:59ch}.ds-collage{position:relative;display:grid;grid-template-columns:1fr 25%;padding-bottom:30px;align-items:center;min-width:0;order:1}
.ds-collage>.cat-block__fig,.ds-collage>.manifesto__fig{position:relative;grid-column:1/3;grid-row:1;margin:0 38px 0 0;overflow:hidden}
.ds-home .ds-collage>.manifesto__fig{display:block}
.ds-collage .cat-block__fig img,.ds-collage .manifesto__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;transform:none}
.ds-detail{grid-column:2;grid-row:1;align-self:end;z-index:2;position:relative;margin:0 0 -30px -48px;border:7px solid var(--paper);border-radius:5px;box-shadow:var(--shadow-card);will-change:transform}
.ds-detail img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}.ds-detail>.ds-credit{top:auto;right:2px;bottom:2px;padding:3px 5px;font-size:10px}
.ds-manifesto{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.ds-manifesto .ds-manifesto-text{display:flex;flex-direction:column;gap:22px;max-width:59ch}.ds-manifesto .manifesto__body{max-width:none}.ds-manifesto .statement{font-size:clamp(28px,2.6vw,38px)}
.ds-home .creds{margin-top:56px}.ds-home .ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.ds-home .ocard{width:auto;min-width:0;border:0;box-shadow:var(--shadow-card);border-radius:7px;overflow:hidden}.ds-home .ocard__media{aspect-ratio:16/10;position:relative}.ds-home .ocard__band{background:var(--paper);color:var(--deep);padding:20px 22px 0;font-size:25px}.ds-home .ocard__text{padding:14px 22px 20px;font-size:16px}.ds-home .ocard__go{opacity:1;transform:none;margin:0 22px 22px;padding:0;min-height:24px}.ds-home .stile img{object-fit:cover}
.ds-page .product-catalog{padding-block:44px 56px}.product-catalog .product-contexts{font-size:15px;color:var(--ink-muted);margin-bottom:20px}.product-catalog .product-index{gap:10px;margin:0 0 30px;padding:0;border:0}.product-catalog .product-index a{font-size:15px;line-height:1.3;color:var(--deep);padding:11px 16px;border:1px solid var(--azure-lt);border-radius:30px;background:var(--paper);text-decoration:none}.product-catalog .product-index a:hover{background:var(--line)}
.ds-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:28px;align-items:stretch}
.ds-catalog-grid>.product-block{display:flex;flex-direction:column;gap:0;min-width:0;scroll-margin-top:30px;background:var(--paper);border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(23,26,25,.04);margin:0;padding:0;border:0}
.ds-catalog-grid>.product-block>.cat-block__text{display:flex;flex-direction:column;flex:1;gap:0;min-width:0;width:100%;max-width:none;padding:22px 25px 26px;order:1}
.ds-catalog-grid .product-block h2{font-size:29px;line-height:1.2;margin:0 0 13px;letter-spacing:-.015em}
.ds-catalog-grid .checks{display:block;padding:0;margin:0;list-style:none;font-size:16px;line-height:1.8}.ds-catalog-grid .checks li{display:inline;padding:0;background:none;border:0;border-radius:0}.ds-catalog-grid .checks li::before{display:none}.ds-catalog-grid .checks li:not(:last-child)::after{content:' / ';color:var(--azure-ink);padding:0 .16em}
.ds-catalog-grid .product-note{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-muted)}.ds-catalog-grid .product-links{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:17px}.ds-catalog-grid .product-links a{font-size:14px;font-weight:700;color:var(--deep);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--azure-lt);padding-block:4px}
.ds-catalog-grid>.product-block>.product-gallery{order:0;position:relative;min-width:0;align-self:stretch;margin:0;width:100%}.ds-catalog-grid .product-gallery__track{border-radius:0;box-shadow:none}.ds-catalog-grid .product-gallery__slide{position:relative}.ds-catalog-grid .product-gallery__slide a{height:100%;display:block;position:relative}.ds-catalog-grid .product-gallery__slide img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.ds-catalog-grid .product-gallery__slide .zoom::after{right:14px;bottom:14px;width:42px;height:42px;background-color:var(--deep);opacity:1;transform:none}
.ds-catalog-grid .product-gallery__bar{position:absolute;bottom:14px;left:14px;min-height:0;margin:0;gap:0;background:var(--paper);color:var(--deep);padding:3px;border-radius:30px;box-shadow:var(--shadow-card)}
.ds-catalog-grid .product-gallery__controls{display:contents}.ds-catalog-grid .product-gallery__controls[hidden]{display:none}.ds-catalog-grid .product-arrow{border:0;width:42px;height:42px;order:0}.ds-catalog-grid .product-arrow svg{width:19px;height:19px}.ds-catalog-grid .product-arrow[data-next]{order:2}.ds-catalog-grid .product-gallery__count{order:1;min-width:36px;text-align:center;font-size:12px;color:var(--deep)}.ds-catalog-grid .product-arrow:hover{background:var(--surface);color:var(--deep)}
.ds-catalog-grid .product-gallery--single .product-gallery__bar{display:none}.ds-catalog-links{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.ds-page .cband__box{padding:0;box-shadow:none;background:none;border:0}
@media(max-width:1150px){.ds-hero>.container{padding:38px}.ds-hero .page-hero__plate h1,.ds-hero .hero__text h1{font-size:44px}.ds-hero,.ds-hero-photo,.ds-hero .hero-media{min-height:430px}.ds-page .cat-intro .cat-block,.ds-manifesto{gap:38px}}
@media(max-width:899px){
 .ds-page .container,.ds-home>.section>.container{padding-inline:24px}.ds-hero{grid-template-columns:1fr 1fr;min-height:390px}.ds-hero>.container{padding:28px 24px}.ds-hero .page-hero__plate h1,.ds-hero .hero__text h1{font-size:36px}.ds-hero .lead,.ds-hero .page-hero__plate .lead,.ds-hero .hero__text .lead{font-size:16px}.ds-hero-photo,.ds-hero .hero-media{min-height:390px}
 .ds-page .cat-intro .cat-block,.ds-manifesto{gap:26px}.ds-page .cat-intro h2,.ds-manifesto .statement{font-size:28px}.ds-page .cat-intro p{font-size:16px}.ds-detail{margin-left:-26px}.ds-catalog-grid{gap:20px}.ds-catalog-grid .product-block h2{font-size:24px}.ds-catalog-grid>.product-block>.cat-block__text{padding:18px}.ds-catalog-grid .checks{font-size:15px}.ds-page .section,.ds-home>.section{padding-block:48px}.ds-home .ocards{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-home .ocard__band{font-size:23px}
}
@media(max-width:600px){
 .ds-page .container,.ds-home>.section>.container{padding-inline:20px}.ds-hero{display:flex;flex-direction:column-reverse;min-height:0}.ds-hero-photo,.ds-hero .hero-media{min-height:0;height:255px}.ds-hero>.container{padding:30px 20px 34px}.ds-hero .page-hero__plate h1,.ds-hero .hero__text h1{font-size:40px;margin:14px 0 18px;max-width:14ch}.ds-hero .hero__actions{gap:12px}
 .ds-page .cat-intro .cat-block,.ds-manifesto{display:block}.ds-page .cat-intro h2,.ds-manifesto .statement{font-size:29px}.ds-collage{margin-top:28px;padding-bottom:20px}.ds-collage>.cat-block__fig,.ds-collage>.manifesto__fig{margin-right:26px}.ds-detail{margin-bottom:-20px;transform:none!important}.ds-home .ocards{grid-template-columns:1fr}.ds-home .creds{margin-top:34px}
 .ds-catalog-grid{grid-template-columns:1fr;gap:22px}.ds-page .product-catalog{padding-block:30px}.product-catalog .product-contexts{font-size:13px;margin-bottom:16px}.product-catalog .product-index{gap:8px;margin-bottom:22px}.product-catalog .product-index a{font-size:13px;padding:10px 12px}.ds-catalog-grid>.product-block>.cat-block__text{padding:19px 20px 23px}.ds-catalog-grid .product-block h2{font-size:27px}.ds-catalog-grid .checks{font-size:16px;line-height:1.8}.ds-catalog-grid .product-block--visual{display:grid;grid-template-columns:42% 58%;min-height:0}.ds-catalog-grid .product-block--visual .product-gallery__slide img{height:190px;aspect-ratio:auto}.ds-catalog-grid .product-block--visual h2{font-size:23px}.ds-catalog-grid .product-block--visual .zoom::after{width:32px;height:32px;right:7px;bottom:7px}
}
@media(prefers-reduced-motion:reduce){.ds-detail{transform:none!important;will-change:auto}.ds-catalog-grid .product-gallery__track{scroll-behavior:auto}}

/* Rifiniture del 17 settembre: home immersiva, griglie regolari e filtri reali. */
.ds-home .ocards{grid-auto-rows:1fr;align-items:stretch}
.ds-catalog-grid>.product-block>.product-gallery{flex:none}
.ds-catalog-grid .product-gallery__track{aspect-ratio:3/2}
.ds-catalog-grid .product-gallery__slide{height:100%}
.ds-catalog-grid .product-gallery__slide img{height:100%;aspect-ratio:3/2}
.ds-catalog-grid .product-links{margin-top:auto;padding-top:18px}
.ds-catalog-grid .product-note{margin-bottom:0}
.ds-home-hero{min-height:clamp(590px,83svh,850px);padding:80px 0;max-width:none;width:100%;text-align:left}
.ds-home-hero::after{background:linear-gradient(90deg,rgba(22,17,67,.78),rgba(22,17,67,.64) 60%,rgba(22,17,67,.14));z-index:-1}
.ds-home-hero>.container{width:100%;max-width:1392px;padding-inline:48px;margin-inline:auto}
.ds-home-hero .hero__text{max-width:760px;margin:0;padding:0;background:none;backdrop-filter:none;border-radius:0;box-shadow:none;text-align:left;align-items:flex-start;gap:0}
.ds-home-hero .eyebrow{justify-content:flex-start;color:white;font-size:14px;letter-spacing:.14em}
.ds-home-hero h1{font-size:clamp(44px,5.1vw,74px);line-height:1.06;letter-spacing:-.025em;margin:26px 0;color:white;max-width:20ch;text-wrap:balance}
.ds-home-hero .hero__text .eyebrow,.ds-home-hero .hero__text .lead{margin-inline:0;text-align:left}
.ds-home-hero h1 span{display:block}
.ds-home-hero .lead{font-size:19px;line-height:1.6;color:white;max-width:58ch}
.ds-home-hero .hero-slide{animation:none;opacity:0;transform:scale(1);object-position:center}
.ds-home-hero .hero-slide:first-child{opacity:1}
.ds-home-hero.is-animated .hero-slide{animation:ds-home-dissolve 40s linear infinite both}
.ds-home-hero.is-animated .hero-slide:nth-child(1){animation-delay:-10s}
.ds-home-hero.is-animated .hero-slide:nth-child(2){animation-delay:0s}
.ds-home-hero.is-animated .hero-slide:nth-child(3){animation-delay:10s}
.ds-home-hero.is-animated .hero-slide:nth-child(4){animation-delay:20s}
.ds-home-hero.is-paused .hero-slide{animation-play-state:paused}
@keyframes ds-home-dissolve{0%{opacity:0;transform:scale(1)}5%{opacity:1}30%{opacity:1}35%{opacity:0;transform:scale(1.065)}100%{opacity:0;transform:scale(1.065)}}
.ds-hero-pause{position:absolute;right:28px;bottom:28px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(22,17,67,.65);color:white;cursor:pointer}
.ds-hero-pause[hidden]{display:none}.ds-hero-pause svg{width:23px;height:23px}.ds-hero-pause .ds-play-icon,.is-paused .ds-hero-pause .ds-pause-icon{display:none}.is-paused .ds-hero-pause .ds-play-icon{display:block}
.ds-hero-pause:focus-visible{outline:3px solid white;outline-offset:4px}
.ds-gallery-filters{gap:10px;flex-wrap:wrap}
.ds-gallery-filters .chip{font:600 16px/1.3 var(--font-body);padding:12px 24px;min-height:46px;background:white;color:var(--deep);cursor:pointer;transition:background-color .18s,color .18s,box-shadow .18s}
.ds-gallery-filters .chip:hover{background:var(--surface)}
.ds-gallery-filters .chip[aria-pressed=true]{background:var(--deep);color:white;border-color:var(--deep);box-shadow:0 3px 12px rgba(23,26,25,.16)}
.ds-gallery-filters .chip:focus-visible{outline:3px solid var(--azure);outline-offset:4px}
.ds-gallery-status{text-align:center;color:var(--ink-muted);font-size:14px;margin:18px 0 0;min-height:22px;font-variant-numeric:tabular-nums}
.mosaic.ds-realizations{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ds-realizations>figure{position:relative;border:0;overflow:hidden;border-radius:8px;background:var(--surface);margin:0}
.ds-realizations>figure[hidden]{display:none}
.ds-gallery-category{position:absolute;left:14px;bottom:14px;padding:5px 11px;color:var(--deep);background:white;border-radius:3px;font:600 12px/1.5 var(--font-body);pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.1)}
.ds-realizations a.zoom::after{bottom:14px;right:14px}
.ds-social{display:flex;align-items:center;gap:12px;margin-top:23px;color:var(--on-dark)}
.ds-social>span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%}
.ds-social svg{width:19px;height:19px;display:block;fill:currentColor}
@media(min-width:601px){.ds-catalog-grid>.product-block:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - 28px)/2);justify-self:center}}
@media(max-width:899px){.ds-home-hero{min-height:640px;padding-block:68px}.ds-home-hero>.container{padding-inline:28px}.ds-home-hero .hero__text{max-width:650px}.ds-home-hero h1{font-size:58px}.mosaic.ds-realizations{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:601px) and (max-width:899px){.ds-catalog-grid>.product-block:last-child:nth-child(odd){width:calc((100% - 20px)/2)}}
@media(max-width:600px){.ds-home-hero{min-height:620px;padding-block:62px 80px}.ds-home-hero>.container{padding-inline:24px}.ds-home-hero h1{font-size:44px;margin-block:22px}.ds-home-hero .lead{font-size:17px}.ds-home-hero .eyebrow{font-size:11px;line-height:1.7}.ds-home-hero::after{background:linear-gradient(90deg,rgba(22,17,67,.78),rgba(22,17,67,.58))}.ds-hero-pause{right:20px;bottom:20px}.ds-gallery-filters .chip{font-size:14px;padding:11px 17px}.ds-gallery-filters{gap:8px}.mosaic.ds-realizations{gap:12px}.ds-gallery-category{font-size:10px;left:8px;bottom:8px;padding:3px 7px}.ds-realizations a.zoom::after{width:30px;height:30px;right:8px;bottom:8px}}
@media(max-width:360px){.ds-home-hero h1{font-size:39px}.mosaic.ds-realizations{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ds-home-hero.is-animated .hero-slide{animation:none;opacity:0;transform:none}.ds-home-hero.is-animated .hero-slide:first-child{opacity:1}.ds-gallery-filters .chip{transition:none}}

/* Interazioni del catalogo: trasformazioni senza reflow, confinate alle pagine prodotto. */
.ds-page .product-links a{
 position:relative;transform-origin:left center;
 transition:transform 260ms cubic-bezier(.2,.65,.3,1),text-decoration-color 220ms ease;
}
.ds-page .product-links a>span[aria-hidden]{position:relative;left:0;top:0;transition:left 260ms cubic-bezier(.2,.65,.3,1),top 260ms cubic-bezier(.2,.65,.3,1)}
.ds-page .product-links a:focus-visible{outline:2px solid var(--azure);outline-offset:5px;text-decoration-color:var(--deep)}
.ds-page .product-index a{transition:transform 240ms ease,background-color 240ms ease,border-color 240ms ease,box-shadow 240ms ease}
.ds-page .product-index a:focus-visible{outline:2px solid var(--azure);outline-offset:4px;border-color:var(--deep)}
.ds-page .ds-catalog-grid>.product-block{transition:box-shadow 300ms ease}
.ds-page .ds-catalog-grid>.product-block:target{box-shadow:0 0 0 2px rgba(23,26,25,.3),0 10px 28px rgba(23,26,25,.08)}
.ds-page a.zoom{overflow:hidden}
.ds-page a.zoom img{transform:none;transition:transform 720ms cubic-bezier(.2,.65,.3,1)}
.ds-page a.zoom:focus-visible{outline:3px solid var(--azure);outline-offset:-4px}
.ds-page a.zoom::after{transition:transform 260ms ease,opacity 220ms ease,box-shadow 260ms ease}
.ds-page .mosaic figure:hover{transform:none}
.ds-page .mosaic figure:hover img,.ds-page .cat-block__fig:hover img{transform:none}
@media(hover:hover) and (pointer:fine){
 .ds-page .product-links a:is(:hover,:focus-visible){text-decoration-color:var(--deep)}
 .ds-page .product-index a:is(:hover,:focus-visible){border-color:var(--azure);box-shadow:0 5px 14px rgba(23,26,25,.09)}
 .ds-page .ds-catalog-grid>.product-block:is(:hover,:focus-within){box-shadow:0 10px 28px rgba(23,26,25,.1)}
 .ds-page .ds-catalog-grid>.product-block:target{box-shadow:0 0 0 2px rgba(23,26,25,.3),0 10px 28px rgba(23,26,25,.08)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .ds-page .product-links a:is(:hover,:focus-visible){transform:translateY(-1px) scale(1.05)}
 .ds-page .product-links a:is(:hover,:focus-visible)>span[aria-hidden]{left:2px;top:-2px}
 .ds-page .product-index a:is(:hover,:focus-visible){transform:translateY(-2px) scale(1.025)}
 .ds-page a.zoom:is(:hover,:focus-visible) img{transform:scale(1.045)}
 .ds-page a.zoom:is(:hover,:focus-visible)::after{opacity:1;transform:scale(1.08);box-shadow:0 3px 14px rgba(23,26,25,.18)}
 /* Queste due foto Nautico devono restare intere, anche durante l'interazione. */
 .ds-page .mosaic__full a.zoom:is(:hover,:focus-visible) img{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .ds-page .product-links a,.ds-page .product-links a>span[aria-hidden],.ds-page .product-index a,
 .ds-page .ds-catalog-grid>.product-block,.ds-page a.zoom img,.ds-page a.zoom::after{transition:none}
}

/* Menu mobile aperto: elenco alto, leggibile e raggiungibile anche in landscape. */
@media(max-width:1200px){
 .site-header nav.site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){
  height:100vh;height:100dvh;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(80px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(92px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
  scroll-padding-block:76px 92px;
 }
 .site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open::before{
  content:'';position:fixed;inset:0 0 auto;height:calc(72px + env(safe-area-inset-top,0px));background:var(--deep);z-index:2;
 }
 .site-header .site-nav .is-menu-open .wp-block-navigation__responsive-close{width:100%;max-width:640px;flex-shrink:0;margin:0 auto}
 .site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-content{padding:0;align-items:stretch}
 .site-header .site-nav .is-menu-open .wp-block-navigation__container{width:100%;align-items:stretch;gap:0;margin:0}
 .site-header .site-nav .is-menu-open .wp-block-navigation-item{width:100%;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.16)}
 .site-header .site-nav .is-menu-open .wp-block-navigation-item__content{
  display:flex;align-items:center;min-height:52px;width:100%;padding:11px 28px 11px 0;
  font-size:21px;line-height:1.35;letter-spacing:-.015em;text-align:left;white-space:normal;
 }
 .site-header .site-nav .is-menu-open .wp-block-navigation-item__content::after{
  content:'';display:block;position:absolute;inset:50% 5px auto auto;width:7px;height:7px;
  border:solid currentColor;border-width:1.5px 1.5px 0 0;border-radius:0;background:none;
  transform:translateY(-50%) rotate(45deg);opacity:.55;transition:none;
 }
 .site-header .site-nav .is-menu-open .wp-block-navigation-item__content:is(:hover,:focus-visible){background:rgba(255,255,255,.06)}
 .site-header .site-nav .is-menu-open .wp-block-navigation-item__content:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px;border-radius:3px}
 .site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-close{
  position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px));
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;background:var(--deep);color:var(--on-dark);z-index:3;
 }
 .site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible{outline:2px solid var(--on-dark);outline-offset:4px}
}
@media(max-width:1200px) and (max-height:700px){
 .site-header nav.site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding-top:calc(68px + env(safe-area-inset-top,0px))}
 .site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open::before{height:calc(64px + env(safe-area-inset-top,0px))}
 .site-header .site-nav .is-menu-open .wp-block-navigation-item__content{min-height:44px;padding-block:8px;font-size:19px}
}

/* Home: contenitori leggermente più ampi e foto principale a tutta colonna. */
@media(min-width:1321px){
 .ds-home>section.wp-block-group>.container{max-width:1440px;padding-inline:36px}
 .ds-home .ds-manifesto-text{max-width:588px}
}
@media(min-width:601px){
 .ds-home #chi-siamo .ds-collage>.manifesto__fig{margin-right:0}
}

/* Chi siamo: fotografia a filo dei tre bordi, contenuti raccolti nella metà sinistra. */
@media(min-width:900px){
 .ds-home #chi-siamo{position:relative;--intro-gap:72px}
 .ds-home #chi-siamo>.container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--intro-gap)}
 .ds-home #chi-siamo .ds-manifesto{display:contents}
 .ds-home #chi-siamo .ds-manifesto-text{grid-column:1}
 .ds-home #chi-siamo .creds{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds-home #chi-siamo .ds-collage{position:absolute;inset:0 0 0 calc(50% + var(--intro-gap)/2);display:block;padding:0;margin:0}
 .ds-home #chi-siamo .ds-collage>.manifesto__fig{position:absolute;inset:0;margin:0;border-radius:0;box-shadow:none}
 .ds-home #chi-siamo .manifesto__fig img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
 .ds-home #chi-siamo .ds-detail{position:absolute;inset:auto 36px 36px auto;width:clamp(160px,16vw,210px);margin:0}
}
@media(min-width:900px) and (max-width:1150px){
 .ds-home #chi-siamo{--intro-gap:38px}
}

/* Champagne e carbone chiaro: palette approvata il 23 settembre.
   Estensione del solo sito Diesse; fotografie, logo e geometrie restano invariati. */
:root{
 --paper:#F6F1E7;--surface:#E9DFCC;--ink:#30312F;--ink-muted:#626057;--line:#D6CAB6;
 --deep:#30312F;--navy:#252625;--navy-rgb:37,38,37;
 --azure:#B7A17D;--azure-ink:#75603E;--azure-lt:#D5BF98;
 --on-dark:#F7F1E6;--muted-on-dark:#D2C7B6;
 --shadow-cta:0 5px 16px rgba(23,26,25,.13);--shadow-cta-hover:0 10px 26px rgba(23,26,25,.22);
 --shadow-card:0 2px 10px rgba(23,26,25,.045);--shadow-card-hover:0 12px 30px rgba(23,26,25,.09);
}
body,.ds-home #chi-siamo,.ds-home #metodo{background:#F6F1E7}
.site-header,.site-footer__logobar{background:#F6F2E9;border-color:#D6CAB6}
.site-header{color:#30312F;--deep:#30312F;--ink:#30312F;--on-dark:#F7F1E6;--azure-ink:#75603E}
/* Resta in flusso: nessun salto del contenuto quando si scorre la pagina.
   La parte template ha display:contents: lo sticky va sull'header visibile. */
:root{--ds-header-top:var(--wp-admin--admin-bar--height,0px);scroll-padding-top:calc(96px + var(--ds-header-top))}
.site-header{position:sticky;top:var(--ds-header-top)}
@media(max-width:600px){:root{--ds-header-top:0px}}
.ds-hero,.product-catalog,.ds-home #offerta,.ds-home .cband,.ds-page .cband{
 background-color:#E9DFCC;
 background-image:radial-gradient(ellipse 90% 100% at 100% 0%,rgba(203,181,139,.20),rgba(203,181,139,0) 72%),linear-gradient(115deg,#E9DFCC,#F6F1E7 66%,#E9DFCC);
}
.ds-home #settori{background:#30312F;--on-dark:#E9D5B2;--muted-on-dark:#D8CFC0;--azure-lt:#D5BF98}
.ds-home #settori .stile{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.15)}
.ds-home .ocard,.ds-home .ocard__band,.ds-home .pstep,.ds-catalog-grid>.product-block{background:#FFF9EF}
.ds-home-hero::after{background:linear-gradient(90deg,rgba(23,26,25,.77),rgba(23,26,25,.52) 48%,rgba(23,26,25,.09))}
.ds-home-hero .eyebrow,.ds-home-hero h1,.ds-home-hero .lead{color:#FFFCF6}
.ds-home .ds-detail{border-color:#F6F2E9}
.ds-home .creds__item,.ds-home .pstep{border-top-color:#B7A17D}
.site-footer__main{background:#252625}
.site-footer__social,.ds-social{color:#F7F1E6}
.ds-hero-pause{background:rgba(23,26,25,.65)}
.ds-gallery-filters .chip,.ds-gallery-category,.fp-lb__nav{background:#FFF9EF}
.ds-gallery-filters .chip[aria-pressed=true]{background:var(--deep);color:var(--on-dark)}
.ds-gallery-filters .chip:hover{background:var(--surface)}
.ds-gallery-filters .chip[aria-pressed=true]:hover{background:var(--navy)}
.btn--ghost{border-color:var(--azure-ink)}
.btn--ghost:hover{background:var(--deep);border-color:var(--deep);color:var(--on-dark)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--azure-ink);box-shadow:0 0 0 3px rgba(117,96,62,.20)}
.ds-page .product-links a:focus-visible,.ds-page .product-index a:focus-visible,.ds-page a.zoom:focus-visible,
.ds-gallery-filters .chip:focus-visible,.product-arrow:focus-visible{outline-color:var(--azure-ink)}
.fp-lb{background:rgba(23,26,25,.94)}
.fp-lb button:focus-visible{outline-color:var(--azure-lt)}
a.zoom::after{background-color:rgba(23,26,25,.78)}
.mosaic figure:hover{box-shadow:0 16px 40px rgba(23,26,25,.20)}
@keyframes fp-wa-pulse{
 0%,70%,100%{box-shadow:var(--shadow-cta),0 0 0 0 rgba(183,161,125,.55)}
 35%{box-shadow:var(--shadow-cta),0 0 0 12px rgba(183,161,125,0)}
}
@media(max-width:600px){
 .ds-home-hero::after{background:linear-gradient(90deg,rgba(23,26,25,.80),rgba(23,26,25,.64))}
}

/* Contenuti interni allineati alla larghezza già approvata per la home. */
@media(min-width:1321px){
 .entry-content :is(.section,.page-head,.page-hero:not(.ds-hero))>.container{max-width:1440px;padding-inline:36px}
}
/* La foto delle testate divise prosegue sino al bordo della finestra.
   100,8 px è lo scarto fra il 50% e il 43% di 1440 px.
   Il rientro del testo non supera 72 px; la misura conserva le righe approvate. */
.ds-page{--ds-split-x:43%}
.ds-page .ds-hero{max-width:none;grid-template-columns:var(--ds-split-x) calc(100% - var(--ds-split-x))}
@media(max-width:899px){.ds-page{--ds-split-x:50%}}
@media(min-width:1441px){
 .ds-page{--ds-split-x:calc(50% - 100.8px)}
 .ds-page .ds-hero{grid-template-columns:var(--ds-split-x) minmax(0,1fr)}
 .ds-page .ds-hero>.container{padding-left:min(72px,calc((100vw - 1440px)/2 + 36px))}
 .ds-page .ds-hero .page-hero__plate{max-width:535.2px}
}
/* Rimosso il solo dettaglio fotografico del Chi siamo in home. */
@media(max-width:899px){
 .ds-home #chi-siamo .ds-collage{padding-bottom:0}
 .ds-home #chi-siamo .ds-collage>.manifesto__fig{margin-right:0}
}
/* Integrazione del fondo bianco del logo originale, senza ridisegnarlo o
   moltiplicarne i colori: darken conserva i canali più scuri del fondo champagne. */
.site-header,.site-footer__logobar{isolation:isolate}
.site-header .wordmark__logo,.site-footer__logobar .wordmark__logo{mix-blend-mode:darken}

/* Introduzioni delle attività: stessa fotografia a filo bordo del Chi siamo. */
@media(min-width:900px){
 .ds-page .cat-intro{--intro-gap:72px;position:relative;display:grid;align-items:center;min-height:480px}
 .ds-page .cat-intro .cat-block{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--intro-gap)}
 .ds-page .cat-intro .cat-block__text{grid-column:1}
 .ds-page .cat-intro .ds-collage{position:absolute;inset:0 0 0 calc(50% + var(--intro-gap)/2);display:block;padding:0;margin:0}
 .ds-page .cat-intro .ds-collage>.cat-block__fig{position:absolute;inset:0;margin:0;border-radius:0;box-shadow:none}
 .ds-page .cat-intro .cat-block__fig a.zoom{width:100%;height:100%}
 .ds-page .cat-intro .cat-block__fig img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}
@media(min-width:900px) and (max-width:1150px){
 .ds-page .cat-intro{--intro-gap:38px}
}
@media(max-width:899px){
 .ds-page .cat-intro .ds-collage{padding-bottom:0}
 .ds-page .cat-intro .ds-collage>.cat-block__fig{margin-right:0}
}

/* Marchio blu originale su fondo champagne compatto, nel footer carbone. */
.site-footer__inner{padding-top:48px}
.site-footer .site-footer__brand{display:flex;width:352px;max-width:100%;padding:14px 18px;margin:0 0 32px;background:#F6F2E9;border-radius:4px;isolation:isolate}
.site-footer .site-footer__brand .wordmark__logo{width:100%;max-width:100%;height:auto;mix-blend-mode:darken}
.site-footer .site-footer__brand:focus-visible{outline:2px solid var(--on-dark);outline-offset:8px;border-radius:2px}
@media(max-width:759px){
 .site-footer__inner{padding-top:36px}
 .site-footer .site-footer__brand{width:300px;margin-bottom:28px}
}

/* La stessa divisione della testata unisce i vertici delle due fotografie. */
@media(min-width:601px){
 .ds-page .cat-intro{position:relative}
 .ds-page .cat-intro .cat-block__text{grid-column:2;grid-row:1}
 .ds-page .cat-intro .ds-collage{grid-column:1;grid-row:1;order:0}
}
@media(min-width:900px){
 .ds-page .cat-intro .ds-collage{grid-area:auto;inset:0 calc(100% - var(--ds-split-x)) 0 0}
}
@media(min-width:601px) and (max-width:899px){
 /* Lo spazio nella griglia conserva altezza e posizione del testo su tablet. */
 .ds-page .cat-intro .ds-collage{position:static;aspect-ratio:4/3}
 .ds-page .cat-intro .ds-collage>.cat-block__fig{position:absolute;inset:0 calc(100% - var(--ds-split-x)) 0 0;margin:0;border-radius:0;box-shadow:none}
 .ds-page .cat-intro .cat-block__fig a.zoom{width:100%;height:100%}
 .ds-page .cat-intro .cat-block__fig img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
}

/* Richiami carbone nelle sezioni narrative; cataloghi e form restano champagne. */
.ds-home #metodo,.ds-page .cat-intro,.entry-content :is(.cband,.contact-info){
 --ink:#F7F1E6;--ink-muted:#D8CFC0;--deep:#E9D5B2;--azure-ink:#D5BF98;--line:#656358;
 background:#30312F;color:var(--ink);
}
.ds-home #metodo .pstep{background:#383A36}
.ds-home #metodo .pstep h3{color:#F7F1E6}
.entry-content :is(.cband,.contact-info) .btn--accent{background:#E9D5B2;color:#252625;border-color:#E9D5B2}
.entry-content :is(.cband,.contact-info) .btn--accent:hover{background:#F7F1E6;border-color:#F7F1E6;color:#252625}
.entry-content :is(.cband,.contact-info) .btn--ghost{background:transparent;color:#E9D5B2;border-color:#D5BF98}
.entry-content :is(.cband,.contact-info) .btn--ghost:hover{background:#E9D5B2;border-color:#E9D5B2;color:#252625}
.entry-content :is(.cband,.contact-info) a:focus-visible{outline:2px solid #D5BF98;outline-offset:5px}

/* Gallerie più leggibili e forniture mostrate senza ingrandimenti artificiali. */
.mosaic,.mosaic.ds-realizations{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.mosaic>figure,.mosaic>figure.mosaic__full{grid-column:auto;grid-row:auto;aspect-ratio:3/2}
.ds-catalog-grid .product-gallery__count{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ds-catalog-grid .product-gallery__slide.ds-photo-contained img,.mosaic .ds-photo-contained img{object-fit:scale-down;background:var(--paper)}
.ds-anchor-alias{display:block;height:0;scroll-margin-top:110px}
.site-footer .site-footer__brand{background:transparent;padding:0;isolation:auto;mix-blend-mode:screen}
.site-footer .site-footer__brand .wordmark__logo{filter:grayscale(1) invert(1) brightness(2);mix-blend-mode:normal}
@media(max-width:600px){.mosaic,.mosaic.ds-realizations{grid-template-columns:minmax(0,1fr);gap:18px}}

/* Rifiniture per telefono: proporzioni del footer e comandi fotografici. */
@media (max-width: 759px) {
  .site-footer .site-footer__brand { width: 210px; margin-bottom: 24px; }
  .site-footer__inner { padding-top: 28px; }
  .site-footer__grid { gap: 28px; }
  .ds-catalog-grid .product-arrow { width: 46px; height: 46px; }
}

/* La Gallery conserva tutti i testi, con meno spazio prima delle fotografie. */
@media (max-width: 600px) {
  .section--tight:has(.ds-gallery-filters) { padding-block: 24px; }
  .section--tight:has(.ds-gallery-filters) .section-intro > * + * { margin-top: 10px; }
  .ds-gallery-filters { margin-top: 20px; }
  .ds-gallery-status { margin-top: 12px; }
}

/* Le verticali restano fotografie indipendenti, raccolte in moduli allineati. */
.mosaic .ds-photo-pair,.mosaic .ds-photo-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0;aspect-ratio:3/2}
.mosaic .ds-photo-feature{grid-column:1/-1;gap:24px;grid-template-rows:repeat(2,minmax(0,1fr))}
.mosaic .ds-photo-feature>figure:first-child{grid-row:1/3}
.mosaic .ds-photo-pair>figure,.mosaic .ds-photo-feature>figure{aspect-ratio:auto;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch}
.mosaic .ds-photo-pair img,.mosaic .ds-photo-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.mosaic .ds-photo-solo{width:min(100%,420px);justify-self:center;aspect-ratio:3/4}
.mosaic .ds-photo-solo>figure{width:100%;height:100%;aspect-ratio:auto}
.mosaic .ds-photo-solo img{object-fit:cover}
.mosaic figure[hidden]{display:none!important}
.ds-realizations figure{border:0}
.ds-realizations .ds-gallery-category{max-width:calc(100% - 82px);box-sizing:border-box;white-space:normal}
@media(max-width:600px){
 .mosaic .ds-photo-pair{gap:10px}
 .mosaic .ds-photo-feature{gap:12px}
 .ds-realizations .ds-gallery-category{max-width:calc(100% - 52px);font-size:10px;line-height:1.3}
}

/* Caricamento a richiesta: i moduli verticali rimangono indivisibili. */
.ds-realizations [hidden],.ds-gallery-pagination[hidden],.ds-gallery-more[hidden]{display:none!important}
.ds-gallery-pagination{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:36px}
.ds-gallery-progress{margin:0;color:var(--muted);font-size:14px}
.ds-gallery-more{min-height:48px;cursor:pointer}
.ds-gallery-more:focus-visible{outline:2px solid var(--azure-ink);outline-offset:4px}
.ds-service-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.ds-service-details figure{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:8px;position:relative}
.ds-service-details a{display:block;width:100%;height:100%}
.ds-service-details img{width:100%;height:100%;object-fit:cover;display:block}
.ds-service-details a.zoom::after{width:32px;height:32px;right:8px;bottom:8px}
@media(max-width:600px){.ds-service-details{gap:10px}.ds-gallery-pagination{margin-top:28px}}

/* Proporzioni del marchio nel footer; il logo originale resta bianco sul carbone. */
.site-footer .site-footer__brand{width:240px;margin-bottom:22px}
@media(max-width:759px){.site-footer .site-footer__brand{width:180px;margin-bottom:20px}}

/* Due inquadrature verticali della stessa lavorazione riempiono una diapositiva. */
.ds-catalog-grid .product-gallery__slide.ds-service-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ds-catalog-grid .ds-service-pair>a.zoom{min-width:0;overflow:hidden}
.ds-catalog-grid .ds-service-pair img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;background:transparent}
.ds-catalog-grid .ds-service-pair a.zoom::after{top:12px;bottom:auto;right:12px;width:36px;height:36px}
.ds-service-supplies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.ds-service-supplies figure{margin:0;min-width:0}
.ds-service-supplies a.zoom{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:#F3EDE2}
.ds-service-supplies img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ds-service-supplies figcaption{margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink-muted)}
.ds-service-supplies a.zoom::after{width:30px;height:30px;right:6px;bottom:6px}

/* Su telefono le schede seguono il contenuto, senza ereditare l'altezza della più lunga. */
@media(max-width:600px){
 .ds-page .section,.ds-home>.section{padding-block:32px}
 .ds-page .product-catalog{padding-block:28px}
 .ds-page .ds-hero>.container{padding-block:24px}
 .ds-page .ds-hero-photo,.ds-page .ds-hero .hero-media{height:220px}
 .ds-page .cat-intro .ds-collage,.ds-home #chi-siamo .ds-collage{margin-top:20px}
 .ds-home-hero{min-height:560px;padding-block:44px 64px}
 .ds-home .ds-manifesto-text{gap:18px}
 .ds-home .creds{margin-top:24px;gap:18px}
 .ds-home .creds__item{padding-top:12px}
 .ds-home .ocards{grid-auto-rows:auto;gap:18px;margin-top:28px}
 .ds-home .stiles,.ds-home .pattern-steps{gap:18px;margin-top:28px}
 .ds-home .stile__media{aspect-ratio:4/3}
 .ds-home .pstep{padding:20px}
 .ds-catalog-grid{grid-auto-rows:auto;gap:20px}
 .ds-catalog-grid>.product-block>.cat-block__text{padding:18px 20px 20px}
 .product-catalog .product-index{margin-bottom:20px}
 .product-catalog .product-index a{min-height:44px;display:inline-flex;align-items:center}
 .ds-service-supplies{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:20px}
 .ds-service-details{margin-top:20px}
 .ds-catalog-grid .product-gallery__slide.ds-service-pair{gap:6px}
 .ds-catalog-grid .ds-service-pair a.zoom::after{width:30px;height:30px;top:8px;right:8px}
 .site-footer .site-footer__brand{width:180px;margin-bottom:20px}
 .site-footer__inner{padding-top:26px}
 .site-footer__grid{gap:24px}
 .site-footer__col h4{margin-bottom:12px}
 .site-footer__legal{margin-top:24px;padding-top:20px}
 .section--tight:has(.ds-gallery-filters){padding-block:24px}
}