/* ============================================================
   Le sezioni della home. Ognuna ha il suo trattamento: non e la
   stessa griglia con dentro cose diverse.
   Regola tenuta ovunque: fondo bianco o marmo, filetti d'argento,
   nessun colore di marca. Il movimento sta in oc-anim.js.
   ============================================================ */

.titolo-grande{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-.022em;margin:0 0 1.15rem}
/* la parola e un guscio che nasconde: senza un po' di respiro sopra e sotto,
   la maschera taglia le aste alte e le code della grazia */
.titolo-grande .parola{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.1em 0 .18em;margin-bottom:-.18em}
.titolo-grande .parola>span{display:inline-block;will-change:transform}
/* il segno della casa, riusato come separatore */
.segno{display:inline-block;width:9px;height:9px;border:1px solid currentColor;
  background:radial-gradient(circle at 50% 50%,currentColor 0 1.8px,transparent 2.3px);opacity:.55}

/* ---------------------------------------------------------- ticker */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--oc-linea);background:#fff;
  display:flex;white-space:nowrap}
.ticker-pista{display:flex;align-items:center;flex:0 0 auto;padding-block:1.15rem}
.ticker a{display:inline-flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);
  padding-inline:clamp(.75rem,1.5vw,1.4rem);font-size:.8125rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oc-testo-secondario);transition:color var(--oc-t)}
.ticker a:hover{color:var(--oc-testo)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:9vw;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.ticker::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}

/* ---------------------------------------------------------- vetrina: carosello */
.vetrina{padding-bottom:clamp(2.5rem,5vw,4rem)}
.vetrina-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.vetrina-comandi{display:flex;align-items:center;gap:.75rem}
.vetrina-conta{display:flex;align-items:center;gap:.55rem;font-family:var(--oc-font-display);
  font-size:.9375rem;letter-spacing:.1em;color:var(--oc-testo-secondario);margin-right:.5rem}
.vetrina-conta b{font-weight:500;color:var(--oc-testo)}
.vetrina-conta i{display:block;width:22px;height:1px;background:var(--oc-filetto)}
.embla{overflow:hidden;padding-inline:var(--oc-gutter);cursor:grab}
.embla:active{cursor:grabbing}
.embla__pista{display:flex;gap:clamp(1rem,1.8vw,1.5rem);margin-inline:auto;max-width:var(--oc-max)}
.embla__slide{flex:0 0 clamp(240px,25%,320px);min-width:0}
.embla__slide .prodotto{height:100%}
.vetrina-pie{display:flex;align-items:center;gap:2rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.vetrina-barra{flex:1;height:1px;background:var(--oc-linea);position:relative;overflow:hidden}
.vetrina-barra i{position:absolute;inset:0 auto 0 0;width:22%;background:var(--oc-testo);transform-origin:left}

/* ---------------------------------------------------------- marchi: griglia dei loghi
   Dal 18/10/2026 i marchi si riconoscono dal logo, non dal nome in grazia.
   Le misure del logo arrivano gia nell'HTML (width/height) da _home.py. */
.marchi-lista{position:relative;background:var(--oc-fondo-alt);padding-block:var(--oc-sezione)}
.marchi-griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--oc-linea);border:1px solid var(--oc-linea)}
.marchi-griglia a{position:relative;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;
  gap:.9rem;height:clamp(150px,13vw,190px);padding:1.5rem 1rem 1.15rem;background:#fff;transition:background var(--oc-t)}
.marchi-griglia img{max-width:82%;height:auto;object-fit:contain;filter:grayscale(1) brightness(0);
  opacity:.82;transition:opacity var(--oc-t),transform .5s cubic-bezier(.22,1,.36,1)}
.marchi-griglia em{font-style:normal;font-size:.6875rem;letter-spacing:var(--oc-track);text-transform:uppercase;
  color:var(--oc-testo-tenue);transition:color var(--oc-t)}
.marchi-griglia a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--oc-testo);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.marchi-griglia a:hover img,.marchi-griglia a:focus-visible img{opacity:1;transform:scale(1.04)}
.marchi-griglia a:hover em{color:var(--oc-testo)}
.marchi-griglia a:hover::after{transform:scaleX(1)}
@media(max-width:900px){.marchi-griglia{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .marchi-griglia{grid-template-columns:repeat(2,1fr)}
  .marchi-griglia a{height:128px;padding:1.1rem .75rem .9rem;gap:.6rem}
  .marchi-griglia img{max-width:78%;transform:scale(.82)}
  .marchi-griglia a:hover img{transform:scale(.86)}
  .marchi-griglia em{font-size:.625rem}
}
.marchi-altri{margin:1.75rem 0 0;font-size:.8125rem;letter-spacing:.06em;color:var(--oc-testo-tenue)}

/* ---------------------------------------------------------- dittico: due lastre */
.dittico{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--oc-linea)}
@media(max-width:820px){.dittico{grid-template-columns:1fr}}
.lastra{position:relative;display:block;overflow:hidden;background:#fff;aspect-ratio:3/4;
  clip-path:inset(0 0 0 0)}
.lastra-foto{position:absolute;inset:-8% 0;overflow:hidden}
.lastra-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;will-change:transform}
.lastra::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,20,24,.06) 0,rgba(17,20,24,.02) 45%,rgba(17,20,24,.62) 100%)}
.lastra-testo{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(1.5rem,3vw,2.75rem);color:#fff;
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:.5rem 1.1rem}
.lastra-testo i{grid-row:span 2;font-style:normal;font-family:var(--oc-font-display);font-size:.875rem;
  letter-spacing:.14em;opacity:.7;align-self:start;padding-top:.5rem}
.lastra-testo h3{grid-column:2;font-family:var(--oc-font-display);font-size:clamp(1.6rem,2.8vw,2.4rem);
  font-weight:500;margin:0;color:#fff;line-height:1.05}
.lastra-testo em{grid-column:2;font-style:normal;font-size:.6875rem;letter-spacing:var(--oc-track);
  text-transform:uppercase;opacity:.82}
.lastra-testo svg{grid-column:3;grid-row:span 2;width:40px;height:40px;padding:10px;border:1px solid rgba(255,255,255,.4);
  stroke:#fff;transition:background var(--oc-t),color var(--oc-t)}
.lastra:hover .lastra-testo svg{background:#fff;stroke:var(--oc-testo)}

/* ---------------------------------------------------------- bottega */
.bottega-righe{list-style:none;margin:2rem 0 2.5rem;padding:0}
.bottega-righe li{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;
  padding:1.1rem 0;border-top:1px solid var(--oc-linea-su-scuro);position:relative}
.bottega-righe li:last-child{border-bottom:1px solid var(--oc-linea-su-scuro)}
.bottega-righe li::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--oc-metallo);transform:scaleX(0);transform-origin:left}
.riga-num{font-family:var(--oc-font-display);font-size:.8125rem;letter-spacing:.14em;color:var(--oc-metallo)}
.bottega-righe strong{display:block;font-weight:500;color:#fff;font-size:1.0625rem}
.bottega-righe span:not(.riga-num){font-size:.875rem;color:var(--oc-testo-su-scuro-secondario)}
.bottega-righe svg{width:20px;height:20px;stroke:var(--oc-metallo);fill:none;stroke-width:1.2}
.bottega-foto{margin:0;overflow:hidden;aspect-ratio:4/5}
.bottega-foto img{width:100%;height:112%;object-fit:cover;will-change:transform}

/* ---------------------------------------------------------- pilastri: la foto resta ferma
   Rifatta il 18/10/2026: titolo sopra, foto rettangolare che cambia con la voce.
   La colonna resta ferma solo se ci sta tutta nello schermo (min-height), altrimenti
   scorre normale: prima finiva sotto la testata. */
.pilastri{background:#fff;padding-block:var(--oc-sezione)}
.pilastri-griglia{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
@media(max-width:900px){.pilastri-griglia{grid-template-columns:1fr;gap:2rem}}
.pilastri-colonna{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.pilastri-colonna .titolo-grande{margin:0}
@media(min-width:901px) and (min-height:820px){.pilastri-colonna{position:sticky;top:200px}}
.pilastri-foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--oc-superficie)}
.pilastri-foto picture{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.pilastri-foto picture.e-attiva{opacity:1}
.pilastri-foto img{width:100%;height:100%;object-fit:cover}
.pilastri-foto picture:nth-child(3) img{object-position:78% 50%}
.pilastri-lista{list-style:none;margin:0;padding:0;counter-reset:p}
.pilastri-lista li{position:relative;padding:clamp(1.6rem,3vw,2.4rem) 0;border-top:1px solid var(--oc-linea);
  display:grid;grid-template-columns:3.25rem 1fr;gap:1.25rem;align-items:start}
.pilastri-lista li:last-child{border-bottom:1px solid var(--oc-linea)}
/* la voce attiva si segna con un filo nero sopra, il testo delle altre resta pieno */
.pilastri-lista li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;
  background:var(--oc-testo);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pilastri-lista li[data-attivo]::before{transform:scaleX(1)}
.pilastri-lista li[data-attivo] b{color:var(--oc-testo)}
.pilastri-lista b{font-weight:400;font-family:var(--oc-font-display);font-size:.875rem;letter-spacing:.14em;
  color:var(--oc-metallo);padding-top:.35rem}
.pilastri-lista h3{grid-column:2;font-family:var(--oc-font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:500;line-height:1.06;margin:0 0 .5rem}
/* il paragrafo va tenuto in colonna 2: senza, cade sotto il numero e si impila una parola per riga */
.pilastri-lista p{grid-column:2;margin:0;font-size:.9375rem;color:var(--oc-testo-secondario);max-width:46ch}
.pilastri-lista b{grid-row:1}

/* ---------------------------------------------------------- voci */
.voci{background:var(--oc-fondo-alt);padding-block:var(--oc-sezione);overflow:hidden}
.voci-testa{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  margin-bottom:clamp(2rem,4vw,3.25rem)}
@media(max-width:820px){.voci-testa{grid-template-columns:1fr;gap:1.5rem}}
.voci-voto{text-align:center;border:1px solid var(--oc-linea);background:#fff;padding:1.75rem 2.25rem}
.voci-voto b{display:block;font-family:var(--oc-font-display);font-size:clamp(3rem,7vw,4.75rem);
  line-height:1;font-weight:500;letter-spacing:-.03em}
.voci-voto span{display:block;margin-top:.4rem;font-size:.6875rem;letter-spacing:var(--oc-track);
  text-transform:uppercase;color:var(--oc-testo-tenue)}
.voci-nastro{overflow:hidden;border-block:1px solid var(--oc-linea);background:#fff;margin-bottom:clamp(2rem,4vw,3rem)}
.voci-pista{display:flex;white-space:nowrap;padding-block:1.1rem;will-change:transform}
.voci-pista span{display:inline-flex;align-items:center;gap:1.25rem;padding-inline:1.25rem;
  font-family:var(--oc-font-corsivo);font-size:1.75rem;line-height:1.35;color:var(--oc-testo-secondario)}
.voci-schede{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.75rem)}
@media(max-width:820px){.voci-schede{grid-template-columns:1fr}}
.voci-schede li{background:#fff;border:1px solid var(--oc-linea);padding:1.75rem 1.5rem;display:grid;gap:.85rem}
.voci-schede b{font-size:1.5rem;color:var(--oc-testo)}
.voci-schede em{font-style:normal;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oc-testo-tenue)}

/* ---------------------------------------------------------- scrivi */
.scrivi-dati{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.9rem}
.scrivi-dati li{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:var(--oc-testo-secondario)}
.scrivi-dati svg{width:17px;height:17px;stroke:var(--oc-metallo-forte);fill:none;stroke-width:1.3;flex:0 0 auto}
.campo-galleggiante .campo{position:relative}
.campo-galleggiante .campo label{position:absolute;left:.95rem;top:.95rem;margin:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.22,1,.36,1),font-size .28s,color .28s;transform-origin:left top;
  background:#fff;padding-inline:.25rem}
.campo-galleggiante input:focus+label,.campo-galleggiante input:not(:placeholder-shown)+label,
.campo-galleggiante textarea:focus+label,.campo-galleggiante textarea:not(:placeholder-shown)+label{
  transform:translateY(-1.6rem) scale(.92);color:var(--oc-testo)}
.campo-galleggiante input,.campo-galleggiante textarea{padding-top:1.05rem}

/* ---------------------------------------------------------- seo */
.seo-titolo{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.seo-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem)}
@media(max-width:820px){.seo-griglia{grid-template-columns:1fr}}
.seo-griglia article{position:relative;padding-top:1.5rem}
.filo-tira{position:absolute;top:0;left:0;height:1px;width:100%;background:var(--oc-linea);
  transform:scaleX(0);transform-origin:left}
.seo-griglia h2{font-size:1.25rem;margin:0 0 .6rem}
.seo-griglia p{margin:0;font-size:.9375rem;color:var(--oc-testo-secondario)}

/* ---------------------------------------------------------- stato senza JS */
html:not(.js) [data-anim],html:not(.js) [data-pilastro]{opacity:1!important}
html:not(.js) .embla{overflow-x:auto}

/* ---------------------------------------------------------- dittico a tre lastre */
.dittico{grid-template-columns:repeat(3,1fr)}
.lastra{aspect-ratio:1/1}
@media(max-width:900px){.dittico{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.dittico{grid-template-columns:1fr}}

/* ---------------------------------------------------------- compra per forma
   Dal 18/10/2026 tre per riga, con la foto ufficiale di un modello di quella forma. */
.forme-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--oc-linea);
  border:1px solid var(--oc-linea)}
@media(max-width:560px){.forme-griglia{grid-template-columns:repeat(2,1fr)}}
.forma{background:#fff;padding:clamp(1.25rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem) clamp(1.1rem,2vw,1.5rem);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:.35rem 1rem;position:relative;transition:background var(--oc-t)}
.forma:hover{background:var(--oc-fondo-alt)}
.forma-foto{grid-column:1/-1;display:grid;place-items:center;aspect-ratio:16/7;margin-bottom:clamp(.75rem,1.5vw,1.25rem)}
.forma-foto picture{display:contents}
.forma-foto img{max-width:88%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.forma:hover .forma-foto img{transform:translateY(-4px) scale(1.04)}
.forma-nome{font-family:var(--oc-font-display);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.1;color:var(--oc-testo)}
.forma em{font-style:normal;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--oc-testo-tenue);white-space:nowrap;padding-bottom:.2rem}
.forma::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--oc-testo);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.forma:hover::after{transform:scaleX(1)}
@media(max-width:560px){
  .forma{grid-template-columns:1fr;padding:1rem .75rem .9rem}
  .forma-nome{font-size:1.125rem}
  .forma em{font-size:.5625rem;letter-spacing:.08em}
}

/* ---------------------------------------------------------- avvisami */
.avvisami{padding-block:clamp(3rem,6vw,5rem)}
.avvisami-griglia{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.avvisami-griglia{grid-template-columns:1fr}}
.avvisami .titolo-grande{color:#fff}
.avvisami-modulo{display:grid;gap:1rem}
.avvisami-modulo .campo{position:relative}
.avvisami-modulo .campo input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);
  color:#fff;font:inherit;font-size:1.0625rem;padding:.9rem 0 .7rem;border-radius:0}
.avvisami-modulo .campo input:focus{outline:none;border-color:#fff}
.avvisami-modulo .campo>label{position:absolute;left:0;top:.9rem;pointer-events:none;color:var(--oc-testo-su-scuro-secondario);
  font-size:1.0625rem;letter-spacing:0;text-transform:none;transition:transform .28s cubic-bezier(.22,1,.36,1),font-size .28s}
.avvisami-modulo .campo input:focus+label,.avvisami-modulo .campo input:not(:placeholder-shown)+label{
  transform:translateY(-1.5rem);font-size:.6875rem;letter-spacing:var(--oc-track);text-transform:uppercase;color:#fff}
.avvisami-modulo .consenso{color:var(--oc-testo-su-scuro-secondario)}
.avvisami-modulo .consenso a{color:#fff;text-decoration:underline}
.avvisami-modulo .btn{justify-self:start}

/* ---------------------------------------------------------- recensioni vere */
.voci-fonti{display:flex;gap:1rem}
.voci-fonte{background:#fff;border:1px solid var(--oc-linea);padding:1.25rem 1.5rem;text-align:center;min-width:132px}
.voci-fonte b{display:block;font-family:var(--oc-font-display);font-size:2.5rem;line-height:1;font-weight:500;
  letter-spacing:-.03em}
.voci-fonte span{display:block;margin-top:.35rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oc-testo)}
.voci-fonte em{display:block;font-style:normal;font-size:.6875rem;color:var(--oc-testo-tenue);margin-top:.15rem}
.voci-schede{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.voci-schede{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.voci-schede{grid-template-columns:1fr}}
.voci-schede li{gap:1rem}
.voci-schede blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--oc-testo)}
.voci-schede blockquote a{border-bottom:1px solid var(--oc-filetto);white-space:nowrap}
.voci-schede footer{display:grid;gap:.15rem;margin-top:auto}
.voci-schede footer b{font-family:var(--oc-font-display);font-size:1.125rem;font-weight:500;color:var(--oc-testo)}
.voci-schede footer span{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--oc-testo-tenue)}
.voci-nota{margin-top:clamp(1.5rem,3vw,2rem);font-size:.75rem;color:var(--oc-testo-tenue)}
.voci-nota a{border-bottom:1px solid var(--oc-filetto)}

/* ---------------------------------------------------------- mappa */
.mappa{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;background:var(--oc-fondo-alt);
  border-top:1px solid var(--oc-linea)}
@media(max-width:900px){.mappa{grid-template-columns:1fr}}
.mappa-testo{display:flex;align-items:center;padding:clamp(2.5rem,6vw,5rem) var(--oc-gutter)}
.mappa-testo>div{max-width:46ch;margin-left:auto}
@media(max-width:900px){.mappa-testo>div{margin-left:0}}
.mappa-telaio{position:relative;min-height:clamp(320px,42vw,520px);border-left:1px solid var(--oc-linea)}
@media(max-width:900px){.mappa-telaio{border-left:0;border-top:1px solid var(--oc-linea)}}
.mappa-telaio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mappa-piena{position:relative;height:clamp(320px,45vw,540px);border-top:1px solid var(--oc-linea)}
.mappa-piena iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* la mappa si carica solo su clic: l'iframe di Google manderebbe l'IP di chi passa */
.mappa-invito{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;padding:2rem var(--oc-gutter);text-align:center;
  background:var(--oc-superficie);
  background-image:radial-gradient(circle at 50% 42%,var(--oc-bianco) 0,transparent 62%)}
/* il cerchio nel quadrato, come sulle card di anteprima. Senza left/top un elemento
   assoluto dentro un flex prende la posizione statica: si centra a mano. */
.mappa-invito::before,.mappa-invito::after{content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;width:min(64%,410px);aspect-ratio:1;
  border:1px solid var(--oc-filetto);pointer-events:none}
.mappa-invito::after{border-radius:50%}
.mappa-invito>*{position:relative;z-index:1}
/* la nota deve stare dentro il cerchio: prima usciva dai filetti */
.mappa-nota{max-width:28ch;margin:0;font-size:.8125rem;line-height:1.5;color:var(--oc-testo-tenue)}
.mappa-nota a{color:inherit}
.mappa-telaio .mappa-invito,.mappa-piena .mappa-invito{position:absolute}

/* ============================================================
   I MATERIALI DELLA CASA
   Sono tre e tornano ovunque: la ceramica bianca a cupole,
   il marmo nero con i filetti d'argento, e il rovere chiaro
   degli scaffali, che resta un dettaglio sottile e mai una
   superficie grande (regola della guida del brand).
   ============================================================ */

/* ---- ceramica: il fondo a cupole, come nell'apertura ---- */
.fondo-cupole{position:relative;background:#fff;isolation:isolate}
.fondo-cupole::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("../brand/pattern-01-lucido.svg") repeat;background-size:190px;opacity:.5}
.fondo-cupole::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.85) 62%,#fff)}
.fondo-cupole .prodotto{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ---- rovere: la nota calda, mai una superficie ----
   La guida e chiara: "Espresso e rovere sono dettagli: un filetto, un bordo,
   un numero. Mai una superficie." E i numeri parlano: il rovere chiaro su bianco
   fa 1,74 di contrasto (invisibile), su marmo nero fa 10,62 (perfetto).
   Quindi: su fondo chiaro il legno e il rovere SCURO nei numeri e nelle
   didascalie; sul marmo e il rovere CHIARO nei filetti e nei numeri.
   Il legno nel negozio serve a bilanciare il marmo: qui fa lo stesso. */
:root{--oc-rovere:#E8BF66;--oc-rovere-scuro:#603C00}

.filo-caldo{height:1px;border:0;margin:0;background:rgba(96,60,0,.34)}
.marmo .filo-caldo,.sito-footer .filo-caldo{background:rgba(232,191,102,.55)}

/* i numeri: e uno dei tre usi ammessi */
.lastra-testo i{color:var(--oc-rovere-scuro)}
.marmo .riga-num,.bottega-righe .riga-num{color:var(--oc-rovere)}

/* la didascalia: l'altro uso ammesso */
.nota-legno{margin:.9rem 0 0;font-size:.75rem;letter-spacing:.06em;color:var(--oc-rovere-scuro);
  display:flex;align-items:center;gap:.6rem}
.nota-legno::before{content:"";width:18px;height:1px;background:currentColor;opacity:.5;flex:0 0 auto}

/* ---- avvisami: riga input piu bottone, consenso sotto ---- */
.avvisami-riga{display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:end}
@media(max-width:560px){.avvisami-riga{grid-template-columns:1fr}}
.avvisami-modulo .campo{min-width:0}
.avvisami-modulo .btn{justify-self:start;white-space:nowrap}
.avvisami-modulo .consenso{align-items:flex-start;gap:.6rem;line-height:1.5;max-width:52ch}
.avvisami-modulo .consenso span{display:block}
.avvisami-modulo .consenso input{flex:0 0 auto;accent-color:#fff}
.avvisami-modulo .esito{color:var(--oc-testo-su-scuro-secondary,#fff);margin:0}

/* ---- recensioni: carosello che si trascina ---- */
.voci-pista-embla{margin-top:clamp(1.5rem,3vw,2.5rem)}
.voci-schede{display:flex;grid-template-columns:none;gap:clamp(1rem,2vw,1.75rem);margin:0;padding:0;list-style:none}
.voci-schede .embla__slide{flex:0 0 clamp(280px,32%,420px);min-width:0;background:#fff;
  border:1px solid var(--oc-linea);padding:clamp(1.75rem,2.6vw,2.4rem);display:flex;flex-direction:column;gap:1.1rem}
.voci-schede blockquote{font-family:var(--oc-font-display);font-size:1.25rem;line-height:1.45;
  letter-spacing:-.005em;color:var(--oc-testo);margin:0}
.voci-schede .stelle svg{width:13px;height:13px}
.voci-comandi{display:flex;align-items:center;gap:1.5rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(max-width:640px){.voci-schede .embla__slide{flex:0 0 84%}}

/* ---- recensioni su marmo (18/10/2026): erano "troppo invisibili" ----
   Fondo scuro, voto grande in bianco con le stelle in rovere chiaro (10,6 sul marmo),
   schede bianche con le stelle piene in nero. */
.voci.marmo{padding-block:var(--oc-sezione)}
.voci.marmo .sommario{color:var(--oc-testo-su-scuro-secondario,rgba(255,255,255,.72))}
.voci.marmo .voci-testa{grid-template-columns:1fr auto}
.voci.marmo .voci-fonti{gap:1.25rem}
.voci.marmo .voci-fonte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
  padding:1.5rem 1.9rem 1.35rem;min-width:180px;display:grid;justify-items:center;gap:.55rem}
.voci.marmo .voci-fonte b{font-size:clamp(3rem,5vw,4.25rem);color:#fff;line-height:.9}
.voci.marmo .voci-fonte--prima{background:#fff;border-color:#fff}
.voci.marmo .voci-fonte--prima b{color:var(--oc-testo)}
.voci.marmo .voci-fonte .stelle{display:flex;gap:.25rem;margin:0}
.voci.marmo .voci-fonte .stelle svg{width:17px;height:17px;fill:var(--oc-rovere)}
.voci.marmo .voci-fonte--prima .stelle svg{fill:var(--oc-testo)}
.voci.marmo .voci-fonte em{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--oc-testo-su-scuro-secondario,rgba(255,255,255,.72))}
.voci.marmo .voci-fonte--prima em{color:var(--oc-testo-secondario)}
.voci.marmo .voci-schede .embla__slide{border:0;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.voci.marmo .voci-schede .stelle svg{width:18px;height:18px;fill:var(--oc-testo)}
.voci.marmo .voci-schede blockquote{font-size:1.375rem;font-weight:500}
.voci.marmo .voci-schede footer b{font-size:1.25rem}
.voci.marmo .vetrina-barra{background:rgba(255,255,255,.18)}
.voci.marmo .vetrina-barra i{background:#fff}
.voci.marmo .palco-freccia{color:#fff;border-color:rgba(255,255,255,.4)}
.voci.marmo .palco-freccia:hover{background:#fff;color:var(--oc-testo);border-color:#fff}
.voci.marmo .palco-freccia:disabled{opacity:.35}
.voci.marmo .voci-nota{color:var(--oc-testo-su-scuro-secondario,rgba(255,255,255,.72))}
.voci.marmo .voci-nota a{color:#fff;border-color:rgba(255,255,255,.5)}
@media(max-width:820px){.voci.marmo .voci-testa{grid-template-columns:1fr}}
@media(max-width:640px){
  .voci.marmo .voci-fonte{min-width:0;padding:1.1rem .8rem 1rem}
  .voci.marmo .voci-fonte b{font-size:2.6rem}
  .voci.marmo .voci-fonte em{font-size:.625rem}
  .voci.marmo .voci-schede blockquote{font-size:1.2rem}
}

/* ============================================================
   MOBILE
   Regole tenute: niente bersaglio sotto i 44 px, niente campo
   sotto i 16 px (altrimenti iOS zooma da solo al fuoco), due
   colonne dove il pollice se le aspetta, e una barra di azione
   fissa in basso perche su telefono nessuno risale alla testata.
   ============================================================ */
@media(max-width:760px){
  :root{--oc-sezione:clamp(2.75rem,9vw,4rem)}

  /* --- bersagli: sotto i 44 px il pollice sbaglia --- */
  a,button{-webkit-tap-highlight-color:rgba(17,20,24,.06);touch-action:manipulation}
  .nav-primaria>ul>li>a{min-height:52px;display:flex;align-items:center}
  .mega-col a{min-height:44px;display:flex;align-items:center}
  .sito-footer ul a{display:inline-flex;align-items:center;min-height:44px}
  .sito-footer ul{gap:.15rem}
  .ticker a{min-height:44px}
  .filtro{min-height:44px;padding-inline:1.1rem}
  .link-filo{min-height:44px;align-items:center}
  .header-azioni a,.header-borsa{min-width:44px;min-height:44px;justify-content:center}
  .palco-freccia{width:48px;height:48px}
  .briciole a{display:inline-block;padding-block:.35rem}
  .btn-menu{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0}
  .scrivi-dati a{min-height:44px;display:inline-flex;align-items:center}
  /* la scheda intera diventa il bersaglio: il titolo da solo sarebbe 21 px */
  .prodotto{position:relative}
  .prodotto-modello a::after{content:"";position:absolute;inset:0;z-index:1}
  .prodotto-figura{position:static}

  /* --- campi: 16 px o iOS zooma --- */
  .campo input,.campo select,.campo textarea,.cerca input,
  .campo-galleggiante input,.campo-galleggiante textarea{font-size:16px}
  .avvisami-modulo .campo input{font-size:16px}
  .campo-galleggiante .campo label{font-size:.9375rem}

  /* --- due colonne dove servono --- */
  .griglia.g-4,.griglia.g-3{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .prodotto-corpo{padding:.85rem .9rem 1rem;gap:.3rem}
  .prodotto-modello{font-size:1.0625rem}
  .prodotto-meta{font-size:.75rem}
  .prodotto-prezzo{font-size:.875rem;padding-top:.5rem}
  .prodotto .pastiglie{display:none}
  .prodotto-tag{font-size:.5625rem;padding:.25rem .45rem}
  .footer-griglia{grid-template-columns:1fr 1fr;gap:1.75rem 1rem;padding-block:2.5rem}
  .footer-griglia>div:first-child{grid-column:1/-1}
  .sito-footer .footer-griglia:last-of-type ul{grid-auto-flow:row;grid-template-columns:1fr 1fr}

  /* --- immagini piu basse: il pollice deve arrivare in fondo --- */
  .lastra{aspect-ratio:3/2}
  .lastra-testo{padding:1.1rem}
  .lastra-testo h3{font-size:1.35rem}
  .lastra-testo svg{width:34px;height:34px;padding:8px}
  .bottega-foto{aspect-ratio:3/2}
  .split-foto{aspect-ratio:3/2}
  .pilastri-lista li{padding-block:1.35rem;grid-template-columns:2.5rem 1fr;gap:.85rem}
  .pilastri-lista h3{font-size:1.25rem}

  /* --- testi e spazi --- */
  .titolo-grande{font-size:clamp(1.85rem,7.5vw,2.4rem)}
  .seo-griglia{gap:1.5rem}
  .seo-griglia article{padding-top:1.1rem}
  .voci-testa{gap:1.25rem}
  .voci-fonti{gap:.6rem}
  .voci-fonte{flex:1;min-width:0;padding:1rem .75rem}
  .voci-fonte b{font-size:2rem}
  .mappa-telaio{min-height:280px}
  .avvisami-riga{gap:.9rem}
  .avvisami-modulo .btn{width:100%;justify-self:stretch}
  .rassicura .wrap{gap:1rem;padding-block:1.25rem}
  .rassicura div{font-size:.75rem;gap:.5rem}

  /* --- carrello e schede --- */
  .scheda-figura{aspect-ratio:3/2;padding:1.5rem}
  /* sulla scheda i due tasti vanno a tutta larghezza, uno sotto l'altro */
  .scheda .hero-azioni{gap:.6rem}
  .scheda .hero-azioni .btn{width:100%}
  /* le varianti colore sono da toccare: 20 px non bastano */
  .scheda-dati .pastiglia{min-height:40px;min-width:52px;font-size:.6875rem}
  .scheda-tabella th,.scheda-tabella td{padding:.85rem 0}
  .vetrina-pie{flex-direction:column;align-items:stretch;gap:1rem}
  /* nel carrello e nelle pagine di azione i tasti vanno pieni */
  [data-carrello-pie] .hero-azioni,.vuoto .hero-azioni{flex-direction:column;gap:.6rem}
  [data-carrello-pie] .btn,.vuoto .btn{width:100%}
  .riga-carrello{grid-template-columns:64px 1fr;gap:.9rem;padding-block:1rem}
  .riga-carrello>div:last-child{grid-column:2;text-align:left}
  .riga-carrello .prodotto-prezzo{justify-content:flex-start}
  .vetrina-pie .link-filo{justify-content:center}
  .voci-comandi{gap:1rem}
  .filtri{gap:.4rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    margin-inline:calc(var(--oc-gutter)*-1);padding-inline:var(--oc-gutter)}
  .filtri::-webkit-scrollbar{display:none}
  .conteggio{display:none}
}

/* --- barra di azione fissa: su telefono la testata e lontana --- */
.barra-pollice{display:none}
@media(max-width:760px){
  .barra-pollice{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
    grid-template-columns:1fr 1fr;gap:1px;background:var(--oc-linea);
    border-top:1px solid var(--oc-linea);
    padding-bottom:env(safe-area-inset-bottom,0);
    transform:translateY(110%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .barra-pollice[data-mostra]{transform:none}
  .barra-pollice a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:56px;background:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--oc-testo)}
  .barra-pollice a.primaria{background:var(--oc-testo);color:#fff}
  .barra-pollice svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
  body{padding-bottom:0}
  .sito-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
}

/* ============================================================
   MENU A PAGINA INTERA + NAVIGAZIONE IN BASSO (telefono)
   ============================================================ */
@media(max-width:900px){
  /* la testata resta solo: hamburger, marchio, borsa */
  .header-tel{display:none}
  .header-riga{grid-template-columns:44px 1fr 44px}

  /* ATTENZIONE: backdrop-filter crea un blocco di contenimento, e un figlio
     position:fixed resta prigioniero dentro la testata invece di coprire lo schermo.
     Su telefono la testata e bianca piena, il velo non serve. */
  .sito-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* il menu prende tutto lo schermo e sotto non si scorre */
  .nav-primaria{position:fixed;inset:0;z-index:90;background:#fff;display:flex;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0));
    opacity:0;visibility:hidden;transform:translateY(1.25rem);
    transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility .3s}
  .nav-primaria[data-aperta]{display:flex;opacity:1;visibility:visible;transform:none}
  .nav-testa{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1rem var(--oc-gutter);border-bottom:1px solid var(--oc-linea);position:sticky;top:0;background:#fff;z-index:2}
  .nav-testa img{width:150px;height:auto}
  .nav-chiudi{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--oc-testo)}
  .nav-chiudi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}
  .nav-primaria>ul{flex:1 0 auto}
  .nav-piede{padding:1.5rem var(--oc-gutter) 0;display:grid;gap:1rem}
  .nav-contatti{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem}
  .nav-contatti a{min-height:44px;display:inline-flex;align-items:center;font-size:.8125rem;
    letter-spacing:.06em;color:var(--oc-testo-secondario)}
  html[data-menu-aperto]{overflow:hidden}
  html[data-menu-aperto] body{position:fixed;width:100%;overflow:hidden}
}
.nav-testa,.nav-piede{display:none}
@media(max-width:900px){.nav-testa{display:flex}.nav-piede{display:grid}}

/* la barra in basso: navigazione, non due bottoni */
.navbar-basso{display:none}
@media(max-width:760px){
  .navbar-basso{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
    grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--oc-linea);padding-bottom:env(safe-area-inset-bottom,0)}
  .navbar-basso a,.navbar-basso button{position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.3rem;min-height:58px;background:none;border:0;
    font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oc-testo-tenue);
    transition:color var(--oc-t)}
  .navbar-basso svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.35}
  .navbar-basso [aria-current]{color:var(--oc-testo)}
  .navbar-basso [aria-current]::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:2px;background:var(--oc-testo)}
  .navbar-basso .carrello-badge{position:absolute;top:8px;right:calc(50% - 20px);min-width:15px;height:15px;
    font-size:.5rem}
  html[data-menu-aperto] .navbar-basso{display:none}
  .sito-footer{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}
}

/* la mappa aperta dentro il riquadro (oc-consenso.js): piena, senza cerchio e quadrato */
.mappa-invito[data-aperta]{padding:0;background:none}
.mappa-invito[data-aperta]::before,.mappa-invito[data-aperta]::after{display:none}
.mappa-invito[data-aperta]>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}