/* ————————————————————————————————
   MOLLAIAN · Tappeti orientali · Treviso
   ———————————————————————————————— */

:root {
  --lana: #F2EAE0;
  --lana-2: #E9DFD1;
  --oliva: #31351F;
  --oliva-2: #3C4227;
  --robbia: #8E3B2F;
  --robbia-scuro: #7A2F24;
  --oro: #A98748;
  --inchiostro: #292521;
  --crema: #EFE6D4;
  --crema-60: rgba(239, 230, 212, .6);

  --font-display: "EB Garamond", "Times New Roman", serif;
  --font-body: "Archivo", "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .7s;

  --z-nav: 10;
  --z-menu: 20;
  --z-grain: 30;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--lana);
  color: var(--inchiostro);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--robbia); }

:focus-visible {
  outline: 2px solid var(--robbia);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { max-width: 62ch; text-wrap: pretty; }

/* Film grain — fixed, non-interactive */
.grain {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ——— Cimosa kilim (signature band) ——— */
.cimosa {
  height: 12px;
  background:
    repeating-linear-gradient(135deg,
      var(--robbia) 0 8px, var(--oro) 8px 10px,
      var(--oliva) 10px 18px, var(--oro) 18px 20px);
}
.js .cimosa { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .5s; }
.js .cimosa.in { transform: scaleX(1); }

/* ——— Header sull'hero ——— */
.top {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.5rem);
  color: var(--crema);
}
.wordmark { display: block; line-height: 0; }
.wordmark img {
  display: block;
  width: clamp(210px, 22vw, 310px);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.top nav { display: flex; gap: 2rem; align-items: center; }
.top nav a {
  color: var(--crema);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.top nav a:hover { border-color: var(--crema); }
.lang { display: flex; gap: .6rem; font-size: .85rem; }
.lang a, .lang span { color: var(--crema); text-decoration: none; opacity: .55; }
.lang [aria-current] { opacity: 1; border-bottom: 1px solid var(--oro); }
.lang a:hover { opacity: 1; }

/* Mini-nav fissa dopo l'hero */
.mini {
  position: fixed; top: 1rem; left: 50%;
  transform: translate(-50%, -150%);
  z-index: var(--z-nav);
  display: flex; align-items: center; gap: 1.6rem;
  padding: .65rem 1.5rem;
  border-radius: 99px;
  background: rgba(41, 37, 33, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .6s var(--ease);
  white-space: nowrap;
}
.mini.show { transform: translate(-50%, 0); }
.mini a { color: var(--crema); text-decoration: none; font-size: .9rem; }
.mini a:hover { color: var(--oro); }
.mini .wordmark img { width: 124px; filter: none; }

/* ——— Hero ——— */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  color: var(--crema);
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.js .hero-img { transform: scale(1.06); transition: transform 2.4s var(--ease); }
.js .loaded .hero-img { transform: scale(1); }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 26, 18, .55) 0%,
    rgba(30, 26, 18, .12) 40%,
    rgba(30, 26, 18, .78) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding: 0 clamp(1.2rem, 4vw, 3.5rem) clamp(3rem, 7vh, 5.5rem);
}
.hero-label {
  width: clamp(150px, 18vw, 220px);
  margin-bottom: 1.8rem;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  max-width: 15ch;
  color: var(--crema);
}
.hero h1 em { font-style: italic; font-weight: 400; color: #E8D9B8; }
.hero p.sotto {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(239, 230, 212, .85);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.hero-cta { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }

/* Righe del titolo: salgono con stagger */
.js .riga { display: block; overflow: hidden; }
.js .riga > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease); }
.js .loaded .riga > span { transform: translateY(0); }
.js .loaded .riga:nth-child(2) > span { transition-delay: .12s; }
.js .loaded .riga:nth-child(3) > span { transition-delay: .24s; }
.js .fade-hero { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s; }
.js .loaded .fade-hero { opacity: 1; transform: none; }

/* ——— Bottoni ——— */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .55rem .6rem .55rem 1.5rem;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn .cerchio {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: transform .35s var(--ease);
}
.btn:hover .cerchio { transform: translate(3px, -2px); }
.btn-pieno { background: var(--robbia); color: var(--crema); }
.btn-pieno:hover { background: var(--robbia-scuro); }
.btn-pieno .cerchio { background: rgba(239, 230, 212, .16); color: var(--crema); }
.btn-vuoto { border: 1px solid var(--crema-60); color: var(--crema); }
.btn-vuoto:hover { border-color: var(--crema); }
.btn-vuoto .cerchio { background: rgba(239, 230, 212, .1); color: var(--crema); }
.btn-scuro { border: 1px solid rgba(41, 37, 33, .35); color: var(--inchiostro); }
.btn-scuro:hover { border-color: var(--inchiostro); }
.btn-scuro .cerchio { background: rgba(41, 37, 33, .07); color: var(--inchiostro); }
.btn-wa, .sez-scura a.btn-wa { background: #128C46; color: #fff; }
.btn-wa:hover { background: #0E7038; }
.btn-wa .cerchio { background: rgba(255, 255, 255, .18); color: #fff; }
.sez-scura a.btn-vuoto { color: var(--crema); }

/* ——— Sezioni ——— */
section { padding: clamp(4.5rem, 11vh, 8.5rem) clamp(1.2rem, 4vw, 3.5rem); }

.statement { text-align: center; }
.statement blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.4vw, 2.8rem);
  line-height: 1.3;
  font-weight: 420;
  max-width: 26ch;
  margin: 0 auto;
}
.statement em { font-style: italic; color: var(--robbia); }
.statement .firma {
  margin: 2rem auto 0;
  font-size: .95rem;
  color: rgba(41, 37, 33, .65);
}

/* ——— Collezione (griglia asimmetrica) ——— */
.collezione h2, .sez-chiara h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  margin-bottom: .6rem;
}
.coll-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.coll-testa p { color: rgba(41, 37, 33, .7); }

/* Appendimento a salone: un pezzo eroe + satelliti, ogni tappeto intero
   alla sua proporzione reale, su passe-partout lana-2, colonne sfalsate */
.griglia {
  display: grid;
  grid-template-columns: 1.25fr 1fr .8fr;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: start;
}
.griglia .colonna {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-content: start;
}
.griglia .colonna:nth-child(2) { padding-top: clamp(2.2rem, 6vw, 6rem); }
.griglia .colonna:nth-child(3) { padding-top: clamp(3.5rem, 9.5vw, 10rem); }
.opera { text-decoration: none; color: inherit; }
.opera figure { position: relative; overflow: hidden; background: var(--lana-2); }
.griglia .opera figure { padding: clamp(.8rem, 1.6vw, 1.6rem); }
.opera img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 1.1s var(--ease);
}
.griglia .opera img { height: auto; aspect-ratio: auto; }
.opera:hover img { transform: scale(1.045); }

/* Il cartellino d'inventario (firma) */
.cartellino {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .8rem .1rem 0;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cartellino .num { color: var(--robbia); font-weight: 600; }
.cartellino .tipo { font-weight: 500; }
.cartellino .mis { margin-left: auto; color: rgba(41, 37, 33, .55); letter-spacing: .04em; }
.cartellino::before { content: none; }
.opera .filetto {
  height: 1px; background: var(--inchiostro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
  margin-top: .55rem; opacity: .35;
}
.opera:hover .filetto { transform: scaleX(1); }

.coll-piede { margin-top: 3.5rem; text-align: center; }

/* ——— Sezione scura (storia / visita) ——— */
.sez-scura {
  background: var(--oliva);
  color: var(--crema);
}
.sez-scura h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); color: var(--crema); }
.sez-scura p { color: rgba(239, 230, 212, .86); }
.sez-scura a { color: #C9A45E; }

.storia-griglia {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.storia-testo h2 { margin-bottom: 1.6rem; }
.storia-testo p + p { margin-top: 1.1rem; }
.storia-testo .anno {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15em;
  color: var(--oro);
}
.storia-foto { display: grid; gap: 1.4rem; }
.storia-foto figure { overflow: hidden; }
.storia-foto img { width: 100%; transition: transform 1.1s var(--ease); }
.storia-foto figure:hover img { transform: scale(1.03); }
.storia-foto figcaption {
  font-size: .82rem; letter-spacing: .06em;
  color: rgba(239, 230, 212, .55);
  padding-top: .6rem;
}
.storia-foto .insegna { max-width: 78%; justify-self: end; }

/* ——— Servizi ——— */
.servizi-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 3rem;
}
.servizio h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 1rem; }
.servizio p { color: rgba(41, 37, 33, .78); }
.servizio .prezzo {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(41, 37, 33, .18);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .95rem;
}
.servizio .prezzo strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 560; color: var(--robbia); white-space: nowrap; }

/* ——— Visita ——— */
.visita-griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.visita h2 { margin-bottom: 1.4rem; }
.visita .orari {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.45;
  color: var(--crema);
}
.visita .orari .orari-lun {
  display: inline-block;
  margin-top: .3rem;
  font-size: .58em;
  font-family: var(--font-body);
  letter-spacing: .04em;
  color: rgba(239, 230, 212, .68);
}
.visita address { font-style: normal; margin-top: 1.4rem; }
.visita .contatti-lista { list-style: none; margin-top: 1.6rem; display: grid; gap: .5rem; }
.visita .contatti-lista a { text-decoration: none; border-bottom: 1px solid rgba(169, 135, 72, .4); }
.visita .contatti-lista a:hover { border-color: var(--oro); }
.social-visita { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.social-visita a {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px;
  padding: .6rem 1.25rem;
  border: 1px solid rgba(169, 135, 72, .45);
  border-radius: 99px;
  color: var(--crema);
  text-decoration: none;
  font-size: .95rem;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.social-visita a:hover { border-color: var(--oro); background: rgba(169, 135, 72, .12); }
.social-visita svg { width: 1.2rem; height: 1.2rem; }
.visita-cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.visita-cta .nota { font-size: .9rem; color: rgba(239, 230, 212, .6); max-width: 34ch; }

/* ——— Footer ——— */
footer {
  background: var(--oliva);
  color: rgba(239, 230, 212, .6);
  padding: 2.2rem clamp(1.2rem, 4vw, 3.5rem);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: .88rem;
}
footer a { color: rgba(239, 230, 212, .85); text-decoration: none; }
footer a:hover { color: var(--oro); }
footer .social { display: flex; gap: 1.4rem; }

/* ——— Pagina catalogo ——— */
.pagina-testa {
  background: var(--oliva);
  color: var(--crema);
  padding: clamp(7rem, 18vh, 11rem) clamp(1.2rem, 4vw, 3.5rem) clamp(3rem, 7vh, 5rem);
}
.pagina-testa h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--crema); }
.pagina-testa p { margin-top: 1.2rem; color: rgba(239, 230, 212, .75); }

.avviso-disponibilita {
  background: var(--lana-2);
  border-bottom: 1px solid rgba(41, 37, 33, .12);
  padding: 1rem clamp(1.2rem, 4vw, 3.5rem);
  text-align: center;
  font-size: .95rem;
  color: var(--inchiostro);
}
.avviso-disponibilita a { color: var(--robbia); }

.catalogo-nav {
  position: sticky; top: 0;
  z-index: var(--z-nav);
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  padding: .9rem clamp(1.2rem, 4vw, 3.5rem);
  background: rgba(242, 234, 224, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(41, 37, 33, .1);
  font-size: .9rem;
}
.catalogo-nav a { color: var(--inchiostro); text-decoration: none; opacity: .65; white-space: nowrap; }
.catalogo-nav a:hover { opacity: 1; color: var(--robbia); }

.catalogo-categoria { padding-top: clamp(2.5rem, 6vh, 4rem); scroll-margin-top: 4rem; }
.catalogo-categoria + .catalogo-categoria { border-top: 1px solid rgba(41, 37, 33, .12); }
.catalogo-categoria h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin-bottom: .4rem;
}
.catalogo-categoria .conteggio { color: rgba(41, 37, 33, .55); font-size: .95rem; margin-bottom: 2rem; }

/* Parete di galleria: ogni tappeto si vede intero — file ad altezza
   uniforme, larghezza dalla proporzione reale del pezzo (width/height
   nell'HTML evitano salti di layout durante il lazy-load). */
.catalogo-griglia {
  --fila-h: clamp(230px, 36vh, 340px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.8rem, 3.2vw, 2.6rem) clamp(1rem, 2vw, 1.6rem);
  align-items: flex-start;
}
.catalogo-griglia .opera {
  display: block;
  min-width: 148px;
  max-width: 100%;
}
.catalogo-griglia .opera figure {
  height: var(--fila-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalogo-griglia .opera img {
  height: var(--fila-h);
  width: auto;
  max-width: min(88vw, calc(var(--fila-h) * 1.8));
  aspect-ratio: auto;
  object-fit: contain;
}
.catalogo-griglia .cartellino { flex-wrap: wrap; row-gap: .15rem; }
.catalogo-griglia .cartellino .num { white-space: nowrap; }
.catalogo-griglia .cartellino .mis { margin-left: 0; width: 100%; }
.catalogo-nota {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(41, 37, 33, .15);
  font-size: .92rem;
  color: rgba(41, 37, 33, .6);
}

/* ——— Reveal allo scroll ——— */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-img { clip-path: inset(0 0 14% 0); transition: clip-path 1.1s var(--ease); }
.js .reveal-img.in { clip-path: inset(0); }
.js [data-stagger] .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* ——— Entrate al caricamento (catalogo, dettaglio) ——— */
@keyframes alza { from { opacity: 0; translate: 0 20px; } }
@keyframes posa { from { opacity: 0; scale: 1.025; } }
.pagina-testa h1 { animation: alza .8s var(--ease) both; }
.pagina-testa p { animation: alza .8s var(--ease) .14s both; }
.dettaglio-foto img { animation: posa .9s var(--ease) both; }
.dettaglio-info { animation: alza .8s var(--ease) .15s both; }

/* ——— Cinematica scroll-driven (scrub, progressive enhancement) ———
   Le proprietà translate/scale compongono con i transform di hover
   e con i clip-path dei reveal: nessun conflitto. */
@supports (animation-timeline: view()) {

  /* Hero: l'immagine resta indietro, il contenuto recede (parallasse) */
  .hero { view-timeline: --hero block; }
  .hero-img {
    animation: hero-deriva linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  @keyframes hero-deriva { to { translate: 0 16%; } }
  .hero-inner {
    animation: hero-recede linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 70%;
  }
  @keyframes hero-recede { to { opacity: 0; translate: 0 -4%; } }

  /* Statement: messa a fuoco (blur → nitido) legata allo scroll */
  .js .statement .reveal { transition: none; transform: none; }
  .statement blockquote, .statement .firma {
    animation: fuoco linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 85%;
  }
  .statement .firma { animation-range: entry 35% entry 100%; }
  @keyframes fuoco {
    from { opacity: 0; translate: 0 26px; filter: blur(10px); }
    to   { opacity: 1; translate: 0 0;   filter: blur(0); }
  }

  /* Le foto della storia respirano dentro la cornice */
  .storia-foto img {
    animation: quadro linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes quadro {
    from { translate: 0 -6%; scale: 1.14; }
    to   { translate: 0 6%;  scale: 1.14; }
  }

  /* Catalogo: ogni opera sale mentre entra nel viewport,
     sfalsata dalla posizione di scroll — nessun JS per 592 tessere */
  .catalogo-griglia .opera {
    animation: opera-entra linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
  @keyframes opera-entra { from { opacity: 0; translate: 0 34px; scale: .985; } }
  .catalogo-categoria h2, .catalogo-categoria .conteggio {
    animation: alza-scrub linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes alza-scrub { from { opacity: 0; translate: 0 22px; } }

  /* Filo di lettura: avanzamento pagina sotto la nav del catalogo */
  .catalogo-nav::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--robbia);
    transform: scaleX(0); transform-origin: 0 50%;
    animation: filo linear both;
    animation-timeline: scroll(root);
  }
  @keyframes filo { to { transform: scaleX(1); } }
}

/* ——— Mobile ——— */
@media (max-width: 860px) {
  .top nav { display: none; }
  .griglia { grid-template-columns: 1fr 1fr; }
  .griglia .colonna { display: contents; }
  .storia-griglia, .servizi-griglia, .visita-griglia { grid-template-columns: 1fr; }
  .storia-foto .insegna { max-width: 100%; justify-self: stretch; }
  .mini { gap: 1rem; padding: .6rem 1.1rem; max-width: calc(100vw - 1.6rem); overflow-x: auto; }
}

@media (max-width: 560px) {
  .griglia { grid-template-columns: 1fr; }
  .cartellino { flex-wrap: wrap; gap: .5rem; }
  .cartellino .mis { margin-left: 0; width: 100%; }
}

/* Stampa e contesti senza scroll: tutto visibile */
@media print {
  .js .reveal, .js .reveal-img, .js .cimosa,
  .js .riga > span, .js .fade-hero {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  * { animation: none !important; }
}

/* ——— Reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .riga > span, .js .hero-img, .js .fade-hero,
  .js .reveal, .js .reveal-img, .js .cimosa {
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  .opera img, .storia-foto img, .btn, .btn .cerchio { transition: none !important; }
  * { animation: none !important; }
  .catalogo-nav::after { content: none; }
}

/* ——— Pagina di dettaglio tappeto ——— */
.dettaglio {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(1.2rem, 4vw, 3.5rem);
  max-width: 1400px;
  margin: 0 auto;
}
.dettaglio-foto {
  background: var(--lana-2);
  padding: clamp(1rem, 2.5vw, 2.2rem);
}
.dettaglio-foto img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
}
.briciole {
  padding: 1.4rem clamp(1.2rem, 4vw, 3.5rem) 0;
  max-width: 1400px;
  margin: 0 auto;
  font-size: .9rem;
}
.briciole a { color: rgba(41, 37, 33, .6); text-decoration: none; }
.briciole a:hover { color: var(--robbia); }
.dettaglio-info h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: .4rem;
}
.dettaglio-info .num-grande {
  color: var(--robbia);
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.scheda {
  margin: 1.8rem 0;
  border-top: 1px solid rgba(41, 37, 33, .15);
}
.scheda div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(41, 37, 33, .15);
  font-size: .95rem;
}
.scheda dt { color: rgba(41, 37, 33, .55); }
.scheda dd { font-weight: 500; text-align: right; }
.prezzo-riga {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 1.4rem 0;
}
.prezzo-riga .su-richiesta { font-style: italic; color: rgba(41, 37, 33, .75); }
.dettaglio-cta { display: flex; flex-direction: column; gap: .9rem; align-items: stretch; }
.dettaglio-cta .btn { justify-content: space-between; }
.btn-carrello { background: var(--oliva); color: var(--crema); }
.btn-carrello:hover { background: var(--oliva-2); }
.btn-carrello .cerchio { background: rgba(239, 230, 212, .14); color: var(--crema); }
.btn-carrello.nel-carrello { background: var(--lana-2); color: var(--inchiostro); cursor: default; }
.btn-carrello.nel-carrello .cerchio { background: rgba(41, 37, 33, .08); color: var(--inchiostro); }
.dettaglio-nota {
  margin-top: 1.6rem;
  font-size: .88rem;
  color: rgba(41, 37, 33, .6);
  max-width: 42ch;
}

/* ——— Carrello ——— */
.carrello-icona {
  position: relative;
  text-decoration: none;
}
.badge-carrello {
  display: none;
  position: absolute;
  top: -.55rem; right: -.85rem;
  background: var(--robbia);
  color: var(--crema);
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 600;
  min-width: 1.15rem; height: 1.15rem;
  line-height: 1.15rem;
  text-align: center;
  padding: 0 .25rem;
}
.badge-carrello.attivo { display: inline-block; }
.carrello-lista { list-style: none; display: grid; gap: 1rem; margin: 2rem 0; }
.carrello-riga {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.2rem;
  align-items: center;
  background: var(--lana-2);
  padding: .9rem;
}
.carrello-riga img { width: 90px; height: 68px; object-fit: cover; }
.carrello-riga .titolo { font-weight: 500; }
.carrello-riga .sotto-titolo { font-size: .85rem; color: rgba(41, 37, 33, .6); }
.carrello-riga button {
  background: none; border: none;
  color: var(--robbia);
  font-family: var(--font-body);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  padding: .4rem;
}
.carrello-vuoto { padding: 3rem 0; color: rgba(41, 37, 33, .6); }
.modulo-ordine { max-width: 560px; margin-top: 2.5rem; }
.modulo-ordine label { display: block; font-size: .9rem; margin: 1.1rem 0 .3rem; }
.modulo-ordine input, .modulo-ordine textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(41, 37, 33, .3);
  background: #FDFBF7;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--inchiostro);
}
.modulo-ordine input:focus, .modulo-ordine textarea:focus { outline: 2px solid var(--robbia); outline-offset: 1px; }
.ordine-azioni { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.pagamento-nota {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--lana-2);
  font-size: .9rem;
  color: rgba(41, 37, 33, .75);
  max-width: 62ch;
}

@media (max-width: 860px) {
  .dettaglio { grid-template-columns: 1fr; }
  .carrello-riga { grid-template-columns: 70px 1fr; }
  .carrello-riga button { grid-column: 2; justify-self: start; padding-left: 0; }
}

/* Header solido per pagine interne (dettaglio, carrello) */
.top-solida {
  position: static;
  background: var(--oliva);
}