/* ==========================================================================
   Treetalee: pagine negozio (home, catalogo, scheda prodotto) e checkout a cassetto.
   Si appoggia ai token e ai componenti di main.css. Prefissi: h- home, cat- catalogo,
   pd- scheda prodotto, co- checkout. Tema chiaro unico, raggio 2px.
   ========================================================================== */

/* Una sezione neutra che segue una sezione colorata riprende il suo respiro superiore. */
.section--stone + .section:not(.section--stone):not(.section--surface),
.section--surface + .section:not(.section--stone):not(.section--surface) { padding-top: var(--section); }

/* ---------- Quote: variante con linea ambra e quota verticale ---------- */
.dim--ruler { color: var(--ink-soft); }
.dim--ruler::before, .dim--ruler::after { color: var(--amber); }
.vdim { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--ink-soft); font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.vdim::before, .vdim::after { content: ""; flex: 1; width: 9px; color: var(--amber); background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }
.vdim::before { border-top: 1px solid currentColor; }
.vdim::after { border-bottom: 1px solid currentColor; }
.vdim span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

.icon-button:disabled { opacity: .35; cursor: default; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Hero ---------- */
.h-hero { padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 2.75rem); }
.h-hero__grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; }
.h-hero__title { font-size: clamp(2.2rem, 3.55vw, 3.3rem); font-stretch: 110%; line-height: 1.06; letter-spacing: -0.025em; margin-bottom: .55em; }
.h-hero__sub { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin-bottom: 2rem; }
.h-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.h-hero__media { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; column-gap: .9rem; row-gap: .7rem; }
.h-hero__frame { grid-column: 1; grid-row: 1; aspect-ratio: 5 / 4; max-height: calc(100dvh - var(--header-h) - 12rem); min-height: 280px; overflow: hidden; background: var(--stone); border-radius: var(--radius); }
.h-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.h-hero__vdim { grid-column: 2; grid-row: 1; }
.h-hero__hdim { grid-column: 1; grid-row: 2; }
.h-hero__caption { grid-column: 1; grid-row: 3; font-size: .88rem; color: var(--muted); }
.h-hero__caption a { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .h-hero__frame img { animation: h-settle 1.4s var(--ease) both; }
  @keyframes h-settle { from { transform: scale(1.04); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ---------- Fatti di servizio ---------- */
.h-facts { border-block: 1px solid var(--line); background: var(--surface); }
.h-facts__list { list-style: none; margin: 0 auto; padding-block: 1.15rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.h-facts__list li { display: flex; gap: .85rem; align-items: flex-start; padding: .35rem 1.25rem; border-left: 1px solid var(--line); font-size: .93rem; line-height: 1.4; color: var(--ink-soft); }
.h-facts__list li:first-child { border-left: 0; padding-left: 0; }
.h-facts__list strong { display: block; color: var(--ink); font-size: 1rem; }
.h-facts__list .icon { color: var(--forest); margin-top: .1rem; }

/* ---------- Categorie (griglia asimmetrica) ---------- */
.h-cats__title { max-width: 22ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.h-cats__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 1.25rem; }
.h-cat { display: grid; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s var(--ease); }
.h-cat:hover { border-color: var(--ink-soft); }
.h-cat--big { grid-row: span 2; grid-template-rows: minmax(360px, 1fr) auto; }
.h-cat:not(.h-cat--big) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.h-cat:nth-child(2) { background: var(--forest-tint); border-color: transparent; }
.h-cat:nth-child(3) { background: var(--stone); border-color: transparent; }
.h-cat__media { position: relative; overflow: hidden; background: var(--stone-deep); min-height: 230px; }
.h-cat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.h-cat:hover .h-cat__media img { transform: scale(1.035); }
.h-cat__body { padding: clamp(1.25rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .35rem; }
.h-cat__count { color: var(--forest); margin: 0; }
.h-cat__name { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin: 0; }
.h-cat__intro { color: var(--ink-soft); margin: .35rem 0 1rem; font-size: .98rem; }
.h-cat .link-arrow { margin-top: auto; }
.h-cat:hover .link-arrow { text-decoration: underline; }

/* ---------- Prodotti (scorrimento orizzontale) ---------- */
.h-products__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 2rem; }
.h-products__head h2 { margin: 0; max-width: 18ch; }
.h-products__nav { display: flex; align-items: center; gap: 1.5rem; }
.h-products__arrows { display: flex; gap: .5rem; }
.h-products__arrows .icon-button { width: 46px; height: 46px; background: var(--surface); border-color: var(--line-strong); }
.h-products__arrows .icon-button:not(:disabled):hover { border-color: var(--ink); }
.h-rail { --rail-pad: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.h-rail__list { list-style: none; margin: 0; padding: 0 var(--rail-pad) 1.5rem; display: flex; gap: 1.5rem; width: max-content; }
.h-rail__item { flex: none; width: clamp(250px, 23vw, 310px); scroll-snap-align: start; }

/* ---------- Lavorazione ---------- */
.h-process__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.h-process__head .lead { margin-bottom: 0; }
.h-process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-process__collage { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.h-process__img { overflow: hidden; border-radius: var(--radius); background: var(--stone); aspect-ratio: 4 / 5; }
.h-process__img--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.h-process__img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) and (min-height: 780px) {
  .h-process__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.h-steps { list-style: none; margin: 0; padding: 0; }
.h-step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; padding-bottom: 2.25rem; }
.h-step:last-child { padding-bottom: 0; }
.h-step::before { content: ""; position: absolute; left: calc(1.375rem - .5px); top: 2.75rem; bottom: 0; width: 1px; background: var(--line-strong); }
.h-step:last-child::before { display: none; }
.h-step__n { position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--bg); font-size: .85rem; }
.h-step h3 { margin: .45rem 0 .5rem; }
.h-step p { color: var(--ink-soft); margin-bottom: .6rem; }
.h-step .h-step__note { display: inline-block; margin: 0; font-size: .76rem; color: var(--forest); border-bottom: 1px solid var(--amber); padding-bottom: .15rem; }
.h-process__more { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* ---------- Essenze ---------- */
.h-woods .lead { margin-bottom: 2rem; }
.h-woods__photo { aspect-ratio: 21 / 8; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.h-woods__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.h-woods__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.h-wood::before { content: ""; display: block; height: 9px; margin-bottom: 1.25rem; border-inline: 1px solid var(--amber); background: linear-gradient(var(--amber), var(--amber)) center / 100% 1px no-repeat; }
.h-wood__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: center; margin-bottom: 1.1rem; }
.h-wood__swatch { grid-row: span 2; width: 1.6rem; height: 2.4rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(23, 33, 27, .12); }
.h-wood__head h3 { margin: 0; font-size: 1.3rem; }
.h-wood__origin { font-size: .72rem; color: var(--muted); }
.h-wood__dl { margin: 0; display: grid; gap: .95rem; }
.h-wood__dl dt { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.h-wood__dl dd { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--ink-soft); }
.h-wood__dl a { color: var(--forest); font-weight: 600; }

/* ---------- Su misura ---------- */
.h-custom__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.h-custom__media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.h-custom__media img { width: 100%; height: 100%; object-fit: cover; }
.h-custom__panel { grid-column: 8 / 13; grid-row: 1; position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.5rem, 3vw, 2.75rem); }
.h-custom__panel h2 { font-size: clamp(1.6rem, 2.5vw, 2.15rem); }
.h-custom__panel p { color: var(--ink-soft); }
.h-custom__dim { margin: 1.5rem 0 1.75rem; }

/* ---------- Consegna e garanzie ---------- */
.h-delivery__title { max-width: 21ch; }
.h-delivery__photo { margin-top: 2rem; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius); background: var(--stone-deep); }
.h-delivery__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.h-delivery__steps { position: relative; list-style: none; margin: calc(-1 * clamp(3rem, 7vw, 6rem)) clamp(0rem, 4vw, 3.5rem) 0; padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.h-delivery__steps li { display: flex; flex-direction: column; }
.h-delivery__steps .icon { color: var(--forest); margin-bottom: .9rem; }
.h-delivery__steps h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.h-delivery__steps p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.h-delivery__guarantee { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2.5rem; margin: 2.5rem clamp(0rem, 4vw, 3.5rem) 0; }
.h-delivery__guarantee p { margin: 0; max-width: 72ch; color: var(--ink-soft); }
.h-delivery__guarantee strong { color: var(--ink); }

/* ---------- Domande frequenti ---------- */
.h-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-faq__aside p { color: var(--ink-soft); max-width: 38ch; }
@media (min-width: 1024px) { .h-faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* ---------- Modulo di preventivo ---------- */
.h-lead__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.h-lead__aside p { color: var(--ink-soft); }
.h-lead__contacts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.15rem; }
.h-lead__contacts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .85rem; line-height: 1.45; }
.h-lead__contacts .icon { color: var(--forest); margin-top: 1.1rem; }
.h-lead__label { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.h-lead__contacts a { font-weight: 650; }
.h-lead__panel { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--forest); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 3.5vw, 2.75rem); }
.h-lead__panel .field input, .h-lead__panel .field select, .h-lead__panel .field textarea { background: #FFFFFD; }

/* ==========================================================================
   CATALOGO
   ========================================================================== */
.cat-head { border-bottom: 0; padding-bottom: 1rem; }
.cat-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; }
.cat-head .lead { max-width: 58ch; }
.cat-filter ul { list-style: none; margin: 0; padding: 4px; display: inline-flex; gap: 4px; background: var(--stone); border: 1px solid var(--line); border-radius: var(--radius); }
.cat-filter a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink-soft); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.cat-filter a:hover { background: var(--surface); color: var(--ink); }
.cat-filter a[aria-current="page"] { background: var(--forest); color: #F7F7F2; }
.cat-filter .mono { font-size: .72rem; opacity: .8; }

.cat-results { border-top: 1px solid var(--line); }
.cat-results__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.cat-results__title { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin: 0; }
.cat-results__count { margin: 0; color: var(--muted); }
.cat-results__intro { max-width: 70ch; color: var(--ink-soft); margin: -.75rem 0 2rem; }
.cat-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(1.25rem, 2.2vw, 2rem); }
.cat-card { gap: .8rem; }
.cat-card__dim { margin-top: -.1rem; }
.cat-card__lead { display: flex; align-items: center; gap: .45rem; margin: -.2rem 0 0; font-size: .88rem; color: var(--muted); }
.cat-card__lead .icon { color: var(--forest); }
.cat-note { grid-column: span var(--span3, 1); display: flex; flex-direction: column; align-self: start; padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--forest); border-radius: var(--radius); }
.cat-note .kicker { margin-bottom: .6rem; }
.cat-note__title { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin: 0 0 1.25rem; max-width: 22ch; }
.cat-note__steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.cat-note__steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--line); }
.cat-note__steps .mono { font-size: .8rem; color: var(--forest); }
.cat-note__steps p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; max-width: 52ch; }
.cat-note__links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: auto 0 0; }
.cat-note--row3 .cat-note__title { max-width: none; }
.cat-note--row3 .cat-note__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

.cat-families__list { margin-top: 2rem; }
.cat-family { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); padding-block: 2rem; border-top: 1px solid var(--line); }
.cat-family__name { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: center; align-content: start; }
.cat-family__name .icon { grid-row: span 2; color: var(--forest); }
.cat-family__name h3 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.cat-family__name p { margin: 0; color: var(--muted); }
.cat-family__intro { margin: 0; color: var(--ink-soft); }
.cat-family__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; align-content: start; }
.cat-family__items a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem .8rem; background: var(--bg); border-radius: var(--radius); text-decoration: none; font-weight: 600; transition: background-color .2s var(--ease); }
.cat-family__items a:hover { background: var(--forest-tint); }
.cat-family__items .mono { color: var(--ink-soft); }

.cat-guide__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.cat-guide__tips { margin-top: 2rem; }
.cat-guide__tips p { color: var(--ink-soft); margin-bottom: 1.15rem; max-width: 64ch; }
.cat-guide__tips strong { color: var(--ink); }
.cat-guide__sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1024px) { .cat-guide__sheet { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.cat-measure { display: flex; flex-direction: column; gap: .8rem; padding: 1.5rem 1.25rem; border-radius: var(--radius); }
.cat-measure__value { margin: 0; font-family: var(--mono); font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1; letter-spacing: -0.02em; }
.cat-measure p:last-child { margin: 0; font-size: .9rem; line-height: 1.45; }
.cat-measure--a { background: var(--forest); color: #F1F0EA; }
.cat-measure--a .dim { color: #DDE6DC; }
.cat-measure--a p:last-child { color: #DDE6DC; }
.cat-measure--b { background-color: var(--surface); border: 1px solid var(--line); background-image: linear-gradient(rgba(169, 171, 158, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 171, 158, .22) 1px, transparent 1px); background-size: 16px 16px; }
.cat-measure--c { background: var(--stone); }
.cat-measure--d { background: var(--forest-tint); }
.cat-measure--b p:last-child, .cat-measure--c p:last-child, .cat-measure--d p:last-child { color: var(--ink-soft); }

.cat-cta__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cat-cta__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--stone-deep); }
.cat-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cat-cta__grid p { color: var(--ink-soft); max-width: 58ch; }
.cat-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }

/* ==========================================================================
   SCHEDA PRODOTTO
   ========================================================================== */
.pd-crumbs { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.pd-crumbs .crumbs ol { margin-bottom: 1.25rem; }
.pd-top { padding-bottom: clamp(3rem, 6vw, 5rem); }
.pd-top__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.pd-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumbs main" ". dim"; column-gap: 1rem; row-gap: .8rem; }
.pd-gallery__main { grid-area: main; position: relative; aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--header-h) - 7rem); min-height: 320px; overflow: hidden; background: var(--stone); border-radius: var(--radius); }
.pd-gallery__main--wide { aspect-ratio: 4 / 3; }
/* Foto orizzontale: miniature sotto l'immagine, che così occupa tutta la colonna. */
.pd-gallery--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "dim" "thumbs"; }
.pd-gallery--wide .pd-gallery__thumbs { flex-direction: row; }
.pd-gallery__slide { position: absolute; inset: 0; }
.pd-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .pd-gallery__slide:not([hidden]) img { animation: pd-fade .45s var(--ease); }
  @keyframes pd-fade { from { opacity: .3; } to { opacity: 1; } }
}
.pd-gallery__dim { grid-area: dim; transition: opacity .3s var(--ease); }
.pd-gallery__dim.is-muted { opacity: 0; visibility: hidden; }
.pd-gallery__thumbs { grid-area: thumbs; display: flex; flex-direction: column; gap: .6rem; }
.pd-thumb { width: 84px; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--stone); border: 1.5px solid transparent; border-radius: var(--radius); opacity: .72; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { opacity: 1; }
.pd-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--ink); }

.pd-info__cat { margin: 0 0 .75rem; }
.pd-info__cat a { color: var(--forest); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }
.pd-info__cat a:hover { text-decoration: underline; }
.pd-info__title { font-size: clamp(2.2rem, 3.8vw, 3.3rem); margin-bottom: .3em; }
.pd-info__tagline { font-size: 1.12rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 0; }
.pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 1.5rem 0; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.pd-price__value { margin: 0; font-family: var(--mono); font-size: clamp(1.75rem, 2.6vw, 2.15rem); line-height: 1; letter-spacing: -0.02em; }
.pd-price__note { margin: 0; color: var(--muted); font-size: .92rem; }
.pd-facts { margin: 0 0 1.75rem; display: grid; gap: .9rem; }
.pd-facts > div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; }
.pd-facts dt { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-top: .25rem; }
.pd-facts dd { margin: 0; }
.pd-facts a { color: var(--forest); }
.pd-finishes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-finishes li { padding: .2rem .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
.pd-finishes .mono { color: #8A6420; font-size: .76rem; }
.pd-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.pd-actions .btn { flex: 1 1 200px; }
.pd-noscript { background: var(--forest-tint); padding: .8rem 1rem; border-radius: var(--radius); font-size: .92rem; }
.pd-assure { list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .85rem; }
.pd-assure li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .8rem; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.pd-assure .icon { color: var(--forest); }
.pd-assure strong { color: var(--ink); }

.pd-desc { border-top: 1px solid var(--line); }
.pd-desc__summary { font-family: var(--display); font-stretch: 108%; font-weight: 500; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.3; letter-spacing: -0.012em; max-width: 36ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); text-wrap: pretty; }
.pd-desc__cols { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4.5rem); max-width: 1040px; margin-left: auto; color: var(--ink-soft); }
.pd-desc__cols p { break-inside: avoid; }

.pd-high__title { margin-bottom: 2rem; }
.pd-high__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.pd-hl { grid-column: span 6; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); }
.pd-hl:nth-child(1), .pd-hl:nth-child(4) { grid-column: span 7; }
.pd-hl:nth-child(2), .pd-hl:nth-child(3) { grid-column: span 5; }
.pd-hl__n { grid-row: span 2; padding-top: .35rem; font-size: .85rem; }
.pd-hl h3 { margin: 0 0 .5rem; }
.pd-hl p { margin: 0; color: var(--ink-soft); }
.pd-hl--forest { background: var(--forest); color: #F1F0EA; }
.pd-hl--forest p { color: #DDE6DC; }
.pd-hl--forest .pd-hl__n { color: var(--amber); }
.pd-hl--surface { background-color: var(--surface); border: 1px solid var(--line); background-image: linear-gradient(rgba(169, 171, 158, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 171, 158, .2) 1px, transparent 1px); background-size: 18px 18px; }
.pd-hl--amber { background: var(--forest-tint); }
.pd-hl--stone { background: var(--stone); }

.pd-specs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: 2rem; }
.pd-draw { margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); background-image: linear-gradient(rgba(169, 171, 158, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 171, 158, .2) 1px, transparent 1px); background-size: 20px 20px; }
.pd-draw__col { --dh: 250px; width: calc(var(--dh) * var(--w) / var(--h) + 2.5rem); max-width: 100%; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 1.75rem; column-gap: .75rem; row-gap: .6rem; }
.pd-draw__box { grid-column: 1; grid-row: 1; position: relative; aspect-ratio: var(--w) / var(--h); border: 1.5px solid var(--ink); background: rgba(229, 228, 219, .7); }
.pd-draw__box::after { content: ""; position: absolute; left: 50%; top: -10px; bottom: -10px; border-left: 1px dashed var(--line-strong); }
.pd-draw__seat { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink-soft); }
.pd-draw__seat span { position: absolute; z-index: 1; left: .35rem; top: .3rem; font-size: .68rem; color: var(--ink-soft); background: rgba(250, 250, 246, .9); padding: 0 .25rem; white-space: nowrap; }
.pd-draw__v { grid-column: 2; grid-row: 1; }
.pd-draw__h { grid-column: 1; grid-row: 2; }
.pd-draw figcaption { margin-top: 1.5rem; font-size: .88rem; color: var(--muted); text-align: center; }
.pd-specs__groups { display: grid; gap: 2rem; }
.pd-spec__title { display: flex; align-items: center; gap: .6rem; font-size: 1.12rem; margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1.5px solid var(--ink); }
.pd-spec__title .icon { color: var(--forest); }
.pd-spec dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.pd-spec dt { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.pd-spec dd { margin: 0; font-weight: 550; line-height: 1.45; }

.pd-care__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pd-care__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.pd-care__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-care__text .lead { color: var(--ink-soft); }
.pd-care__text h3 { font-size: 1.1rem; margin: 2rem 0 1rem; }
.pd-care__rules { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.pd-care__rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .8rem; color: var(--ink-soft); line-height: 1.5; }
.pd-care__rules .icon { color: var(--forest); margin-top: .15rem; }

.pd-ship__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pd-ship__grid > div > p { color: var(--ink-soft); }
.pd-ship__links { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; margin-top: 1.5rem; }
.pd-ship__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.pd-ship__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1rem; }
.pd-ship__list .icon { color: var(--forest); margin-top: .15rem; }
.pd-ship__list h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.pd-ship__list p { margin: 0; color: var(--ink-soft); }

.pd-related__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.pd-related__head h2 { margin: 0; }
.pd-related__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(1.25rem, 2.2vw, 2rem); align-items: start; }

/* ==========================================================================
   CHECKOUT A CASSETTO
   ========================================================================== */
body.checkout-open { overflow: hidden; }
.checkout { position: fixed; inset: 0; z-index: 70; }
.checkout[hidden], .checkout [hidden], .h-products__arrows[hidden] { display: none !important; }
.checkout__backdrop { position: absolute; inset: 0; background: rgba(23, 33, 27, .5); opacity: 0; transition: opacity .35s var(--ease); }
.checkout__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1000px, 100%); display: flex; flex-direction: column; background: var(--bg); box-shadow: -24px 0 60px -30px rgba(23, 33, 27, .5); transform: translateX(100%); transition: transform .42s var(--ease); }
.checkout.is-open .checkout__backdrop { opacity: 1; }
.checkout.is-open .checkout__panel { transform: none; }
.checkout.is-instant .checkout__backdrop, .checkout.is-instant .checkout__panel { transition: none; }

.co-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem clamp(1rem, 3vw, 2rem); background: var(--surface); border-bottom: 1px solid var(--line); }
.co-head__eyebrow { display: flex; align-items: center; gap: .4rem; margin: 0 0 .15rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.co-head__title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.co-close { width: 44px; height: 44px; flex: none; }

.co-progress { list-style: none; margin: 0; padding: .85rem clamp(1rem, 3vw, 2rem); display: flex; gap: .6rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.co-progress__item { display: flex; align-items: center; gap: .55rem; flex: 1 1 0; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--muted); }
.co-progress__item:last-child { flex: 0 0 auto; }
.co-progress__item:not(:last-child)::after { content: ""; flex: 1; min-width: .75rem; height: 1px; background: var(--line-strong); }
.co-progress__item.is-done:not(:last-child)::after { background: var(--forest); }
.co-progress__n { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .8rem; }
.co-progress__n > * { grid-area: 1 / 1; }
.co-progress__check { display: none; }
.co-progress__label { white-space: nowrap; }
.co-progress__item[aria-current="step"] { color: var(--ink); }
.co-progress__item[aria-current="step"] .co-progress__n { background: var(--forest); border-color: var(--forest); color: #F7F7F2; }
.co-progress__item.is-done { color: var(--ink-soft); }
.co-progress__item.is-done .co-progress__n { background: var(--forest-tint); border-color: var(--forest); color: var(--forest); }
.co-progress__item.is-done .co-progress__num { visibility: hidden; }
.co-progress__item.is-done .co-progress__check { display: block; }

.co-form { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr) auto; }
.co-main { grid-column: 1; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.25rem, 3vw, 2rem); }
.co-main .form-alert:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.co-summary { grid-column: 2; grid-row: 1 / span 2; overflow-y: auto; padding: 1.5rem; background: var(--surface); border-left: 1px solid var(--line); }
.co-actions { grid-column: 1; grid-row: 2; padding: .9rem clamp(1.25rem, 3vw, 2rem) calc(.9rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.co-actions__row { display: flex; gap: .75rem; justify-content: flex-end; }
.co-actions__row [data-co-back] { margin-right: auto; }
.co-actions__note { margin: .65rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }

.co-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.co-step__title { padding: 0; margin-bottom: 1.25rem; font-family: var(--display); font-stretch: 110%; font-weight: 650; font-size: 1.3rem; letter-spacing: -0.01em; }
.co-step__title:focus { outline: none; }
.co-step > .field + .field { margin-top: 1.6rem; }
.co-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.co-note { display: flex; gap: .7rem; align-items: flex-start; margin: 1.75rem 0 0; padding: .9rem 1rem; background: var(--forest-tint); border-radius: var(--radius); font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.co-note .icon { flex: none; color: var(--forest); margin-top: .1rem; }
.co-note strong { color: var(--ink); }

.co-options { display: grid; gap: .5rem; }
.co-option, .co-method__option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; cursor: pointer; }
.co-option { padding: .85rem 1rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-weight: 550; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.co-option:hover { border-color: var(--ink-soft); }
.co-option input, .co-method__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.co-option__mark { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--ink-soft); border-radius: 50%; background: var(--surface); }
.co-option input:checked + .co-option__mark, .co-method__option input:checked + .co-option__mark { border-color: var(--forest); }
.co-option input:checked + .co-option__mark::after, .co-method__option input:checked + .co-option__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--forest); }
.co-option:has(input:checked) { border-color: var(--forest); background: var(--forest-tint); }
.co-option:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.co-option:has(input[aria-invalid="true"]) { border-color: var(--error); }
.co-option__price { font-size: .8rem; color: var(--ink-soft); }

.co-qty { display: inline-flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); width: max-content; }
.co-qty__btn { display: grid; place-items: center; width: 48px; min-height: 48px; background: none; border: 0; color: var(--ink); }
.co-qty__btn:hover { background: var(--stone); }
.field .co-qty input { width: 3.75rem; min-height: 48px; padding: 0; text-align: center; font-family: var(--mono); font-size: 1rem; border: 0; border-inline: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.field .co-qty input:focus { box-shadow: inset 0 0 0 2px var(--forest); }

.co-grid { gap: 1rem; }
.co-grid__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, .8fr); gap: 1rem; }
.co-grid .field textarea { min-height: 90px; }

.co-pay-box { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.co-method { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .85rem 1.1rem; background: var(--forest-tint); border-bottom: 1px solid var(--line); }
.co-method__option { grid-template-columns: auto auto minmax(0, 1fr); font-weight: 650; cursor: default; }
.co-method__option .icon { color: var(--forest); }
.co-secure { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .74rem; color: var(--forest); }
.co-brands { list-style: none; margin: 0; padding: .95rem 1.1rem 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.co-brands { gap: .5rem; }
.co-brands li { display: block; line-height: 0; border-radius: 5px; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s var(--ease), outline-color .2s var(--ease), transform .2s var(--ease); }
.co-brands li img { width: 48px; height: 32px; display: block; }
.co-brands.has-active li:not(.is-active) { opacity: .35; }
.co-brands li.is-active { outline-color: var(--forest); transform: translateY(-1px); }
.co-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.1rem 1.25rem; }
.co-card__full { grid-column: 1 / -1; }
.co-card [data-card="number"], .co-card [data-card="expiry"], .co-card [data-card="cvc"] { font-family: var(--mono); letter-spacing: .04em; }
.co-cc { position: relative; }
.field .co-cc input { padding-right: 9.5rem; }
.co-cc__brand { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: .74rem; color: var(--forest); pointer-events: none; }
.co-consents { display: grid; gap: 1rem; margin-top: 1.5rem; }
.co-consents label a { color: var(--forest); }

.co-sum__product { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.co-sum__thumb { aspect-ratio: 1; overflow: hidden; background: var(--stone); border-radius: var(--radius); }
.co-sum__thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-sum__name { margin: 0 0 .15rem; font-family: var(--display); font-stretch: 110%; font-weight: 650; font-size: 1.05rem; line-height: 1.2; }
.co-sum__meta { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.co-sum__rows { margin: 1rem 0; display: grid; gap: .55rem; }
.co-sum__rows div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.co-sum__rows dt { color: var(--ink-soft); }
.co-sum__rows dd { margin: 0; }
.co-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1.25rem; padding-top: 1rem; border-top: 1.5px solid var(--ink); font-weight: 650; }
.co-sum__total small { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
.co-sum__total strong { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.co-sum__lead { display: flex; gap: .55rem; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.co-sum__lead .icon { flex: none; color: var(--forest); }

.co-pay { min-width: 14.5rem; }
.co-pay.is-loading { opacity: 1; pointer-events: none; background: var(--forest-dark); }
.co-pay__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(247, 247, 242, .35); border-top-color: #F7F7F2; border-radius: 50%; }
.co-pay.is-loading .co-pay__spinner { display: inline-block; }
.co-pay.is-loading .co-pay__lock { display: none; }
.co-loadbar { display: none; height: 3px; margin-top: .75rem; overflow: hidden; background: var(--line); border-radius: var(--radius); }
.co-loadbar span { display: block; height: 100%; background: var(--forest); transform-origin: left; transform: scaleX(1); }
.checkout.is-busy .co-loadbar { display: block; }
.checkout.is-busy .co-main { opacity: .6; pointer-events: none; transition: opacity .3s; }
@media (prefers-reduced-motion: no-preference) {
  .co-pay.is-loading .co-pay__spinner { animation: co-spin .8s linear infinite; }
  .checkout.is-busy .co-loadbar span { animation: co-load 1.2s var(--ease) both; }
  @keyframes co-spin { to { transform: rotate(360deg); } }
  @keyframes co-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .checkout__backdrop, .checkout__panel { transition: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .h-woods__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.25rem; padding-bottom: 1rem; scrollbar-width: thin; }
  .h-wood { flex: none; width: min(260px, 72vw); scroll-snap-align: start; }
  .h-delivery__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-note { grid-column: span var(--span2, 1); }
  .cat-note--row3 .cat-note__steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cat-note--row2 .cat-note__title { max-width: none; }
  .cat-note--row2 .cat-note__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .cat-head__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 900px) {
  .h-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .h-hero__frame { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
}

@media (max-width: 1023px) {
  .h-process__grid, .h-faq__grid, .h-lead__grid, .cat-guide__grid, .pd-specs__grid, .pd-ship__grid { grid-template-columns: minmax(0, 1fr); }
  .h-process__collage { grid-template-columns: 2fr 1fr 1fr; }
  .h-process__img--wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .h-process__img { aspect-ratio: auto; }
  .h-custom__media { grid-column: 1 / -1; }
  .h-custom__panel { grid-column: 2 / -2; grid-row: 2; margin-top: -4rem; }
  .cat-family { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .cat-family__items { grid-column: 2; }
  .pd-top__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery__main { max-height: none; min-height: 0; }
  .pd-draw { max-width: 640px; }
  .pd-care__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-care__media { aspect-ratio: 16 / 9; }
  .co-form { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* Tablet: fatti su due colonne, categoria grande in orizzontale e le altre due affiancate. */
@media (min-width: 768px) and (max-width: 1023px) {
  .h-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .75rem; }
  .h-facts__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .h-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .h-cat--big { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .h-cat--big .h-cat__media { min-height: 340px; }
  .h-cat:not(.h-cat--big) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .h-cat:not(.h-cat--big) .h-cat__media { min-height: 0; aspect-ratio: 16 / 10; }
  .pd-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-related .pcard__row { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

@media (max-width: 767px) {
  .h-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .5rem; }
  .h-facts__list li { border-left: 0; padding-left: 0; padding-right: .5rem; }
  .h-cats__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .h-cat--big { grid-row: auto; grid-template-rows: auto auto; }
  .h-cat:not(.h-cat--big) { grid-template-columns: minmax(0, 1fr); }
  .h-cat__media { min-height: 0; aspect-ratio: 16 / 10; }
  .h-cat--big .h-cat__media { aspect-ratio: 4 / 4.2; }
  .h-rail__item { width: 72vw; }
  .h-process__collage { grid-template-columns: 1fr 1fr; }
  .h-process__img--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .h-process__img { aspect-ratio: 4 / 5; }
  .h-woods__photo { aspect-ratio: 16 / 9; }
  .h-custom__panel { grid-column: 1 / -1; margin: -2.5rem .75rem 0; }
  .h-delivery__photo { aspect-ratio: 4 / 3; }
  .h-delivery__steps { grid-template-columns: minmax(0, 1fr); margin: -2.5rem .75rem 0; gap: 1.5rem; }
  .h-delivery__guarantee { margin-inline: 0; }
  .cat-filter { margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; }
  .cat-filter ul { display: flex; width: max-content; }
  .cat-family { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cat-family__items { grid-column: auto; }
  .cat-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "dim" "thumbs"; }
  .pd-gallery__thumbs { flex-direction: row; }
  .pd-thumb { width: 72px; }
  .pd-high__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-hl, .pd-hl:nth-child(n) { grid-column: auto; }
  .pd-care__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-care__media { aspect-ratio: 16 / 10; }
  .pd-related__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-related__grid li:nth-child(n + 2) .pcard__media { aspect-ratio: 4 / 3; }

  .checkout__panel { width: 100%; }
  .co-head { padding: .7rem 1rem; }
  .co-progress { padding: .7rem 1rem; gap: .4rem; }
  .co-progress__item { font-size: .82rem; gap: .4rem; }
  .co-progress__item:not(:last-child)::after { min-width: .4rem; }
  .co-form { display: flex; flex-direction: column; }
  .checkout .co-summary { order: -1; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem 1rem; overflow: visible; border-left: 0; border-bottom: 1px solid var(--line); }
  .checkout .co-sum__product { grid-template-columns: 44px minmax(0, 1fr); gap: .7rem; padding: 0; border: 0; }
  .checkout .co-sum__name { font-size: .95rem; }
  .checkout .co-sum__meta { font-size: .82rem; }
  .checkout .co-sum__rows, .checkout .co-sum__lead { display: none; }
  .checkout .co-sum__total { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; border: 0; text-align: right; }
  .checkout .co-sum__total > span { font-size: .78rem; font-weight: 600; }
  .checkout .co-sum__total small { display: inline; }
  .checkout .co-sum__total strong { font-size: 1.05rem; }
  .co-main { flex: 1; min-height: 0; padding: 1.25rem 1rem; }
  .co-actions { flex: none; padding-inline: 1rem; }
  .co-actions__row .btn { flex: 1 1 auto; min-height: 50px; padding-inline: 1rem; }
  .co-actions__row [data-co-back] { flex: 0 0 auto; margin-right: 0; }
  .co-pay { min-width: 0; }
  .co-grid__row { grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; gap: .75rem; }
  .field .co-cc input { padding-right: .9rem; }
  .co-cc__brand { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 520px) {
  .cat-filter .icon { display: none; }
  .cat-filter a { padding-inline: .7rem; gap: .35rem; }
  .h-facts__list { grid-template-columns: minmax(0, 1fr); }
  .h-hero__ctas .btn { flex: 1 1 100%; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-note { grid-column: auto; }
  .cat-note--row2 .cat-note__steps { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .cat-guide__sheet { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .cat-measure { padding: 1.1rem .9rem; }
  .pd-facts > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .pd-spec dl { grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
  .co-card { padding-inline: .85rem; }
  .co-method, .co-brands { padding-inline: .85rem; }
}

/* ==========================================================================
   CARRELLO: blocco d'acquisto della scheda, «Aggiungi» sulle card,
   pagina /carrello/ (cart-) e pagina /checkout/ (ck-).
   ========================================================================== */

/* ---------- Scheda prodotto: finitura, quantità, totale ---------- */
.pd-buy { margin-bottom: 1.25rem; }
.pd-buy__label { display: block; padding: 0; margin: 0 0 .55rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pd-buy__finish { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.pd-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pd-chip { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .55rem .9rem; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); font-size: .95rem; font-weight: 550; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pd-chip:hover { border-color: var(--ink-soft); }
.pd-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pd-chip__price { font-size: .74rem; color: #7A5716; }
.pd-chip:has(input:checked) { border-color: var(--forest); background: var(--forest-tint); box-shadow: inset 0 0 0 1px var(--forest); }
.pd-chip:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.pd-buy__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.pd-buy .co-qty input, .cart-line .co-qty input { width: 3.5rem; min-height: 46px; padding: 0; text-align: center; font-family: var(--mono); font-size: 1rem; background: var(--surface); border: 0; border-inline: 1px solid var(--line); border-radius: 0; color: var(--ink); }
.pd-buy .co-qty input:focus, .cart-line .co-qty input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--forest); }
.pd-buy .co-qty__btn, .cart-line .co-qty__btn { width: 46px; min-height: 46px; }
.pd-buy__total { margin: 0; text-align: right; }
.pd-buy__total strong { display: block; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.pd-buy__each { display: block; min-height: 1.3em; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.pd-buy__hint { margin: .7rem 0 0; font-size: .88rem; color: var(--muted); }
.pd-buy__hint a { color: var(--forest); }
.pd-actions__add.is-added { background: var(--forest-tint); border-color: var(--forest); color: var(--ink); }
.pd-ask { margin: -.4rem 0 1.5rem; font-size: .95rem; }

/* ---------- «Aggiungi» sulle card prodotto (fuori dal link, sopra l'angolo della foto) ---------- */
.pcard-item { position: relative; }
.pcard-add { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: flex-end; padding: .75rem; pointer-events: none; }
.pcard-add__btn { pointer-events: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .45rem .85rem; background: rgba(250, 250, 246, .95); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 6px 18px -10px rgba(23, 33, 27, .45); font-weight: 650; font-size: .9rem; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.pcard-add__btn:hover, .pcard-add__btn.is-added { background: var(--forest); border-color: var(--forest); color: #F7F7F2; }

/* ---------- Pagina carrello ---------- */
.cart-page, .ck { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--section); }
.cart-head, .ck-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.cart-head h1, .ck-head h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.cart-head h1:focus { outline: none; }
.cart-head__count { margin: 0; color: var(--muted); }
.cart-page .notice, .ck .notice { max-width: 760px; }

.cart-layout, .ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.cart-lines { list-style: none; margin: 0 0 1.75rem; padding: 0; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 104px minmax(0, 1fr) 210px auto; grid-template-areas: "thumb info controls end"; gap: 1.25rem 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.cart-line__thumb { grid-area: thumb; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); border-radius: var(--radius); }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { grid-area: info; min-width: 0; }
.cart-line__name { margin: 0 0 .2rem; font-size: 1.2rem; }
.cart-line__name a { text-decoration: none; }
.cart-line__name a:hover { text-decoration: underline; }
.cart-line__wood { margin: 0 0 .6rem; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.cart-line__unit { margin: 0; color: var(--ink-soft); }
.cart-line__controls { grid-area: controls; display: grid; gap: .9rem; align-content: start; }
.cart-line__label { display: block; margin-bottom: .35rem; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cart-line__select { width: 100%; min-height: 46px; padding: .5rem 2.2rem .5rem .75rem; background-color: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; font-size: .95rem; }
.cart-line__select:hover { border-color: var(--ink-soft); }
.cart-line__select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 22%, transparent); }
.cart-line__end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 1rem; min-width: 7.5rem; }
.cart-line__total { margin: 0; font-size: 1.05rem; font-weight: 500; white-space: nowrap; }
.cart-line__remove { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .25rem 0; background: none; border: 0; color: var(--ink-soft); font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
.cart-line__remove:hover { color: var(--error); text-decoration-color: currentColor; }
.cart-main__back { margin-top: .25rem; }

.cart-summary, .ck-summary { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--forest); border-radius: var(--radius); }
.cart-summary__title { margin: 0 0 .5rem; font-size: 1.25rem; }
.cart-summary .co-sum__lead { margin-bottom: 1.25rem; }
.cart-summary__note { margin: .9rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }

/* Carrello vuoto */
.cart-empty__box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; max-width: 860px; padding: clamp(1.5rem, 4vw, 2.5rem); background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); background-image: linear-gradient(rgba(169, 171, 158, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 171, 158, .18) 1px, transparent 1px); background-size: 18px 18px; }
.cart-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; background: var(--forest-tint); color: var(--forest); border-radius: var(--radius); }
.cart-empty__title { margin: .2rem 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cart-empty__box p { color: var(--ink-soft); max-width: 58ch; margin-bottom: 1.4rem; }
.cart-empty__sub { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.cart-suggest .pcard__media, .cart-suggest .pcard-add { aspect-ratio: 1; }
.cart-suggest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 2.2vw, 2rem); }

/* ---------- Pagina checkout ---------- */
.ck-head { display: block; }
.ck-head__eyebrow { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.ck-main { min-width: 0; max-width: 760px; }
.ck-main .form-alert:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.ck-section + .ck-section { margin-top: 2.75rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.ck-section__title { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.ck-section__n { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; background: var(--forest); color: #F7F7F2; border-radius: var(--radius); font-size: .85rem; }
.ck-submit { margin-top: 1.75rem; }
.ck-submit .co-pay { width: 100%; }
.ck-submit .co-actions__note { font-size: .85rem; }
.ck-layout.is-busy .co-loadbar { display: block; }
.ck-layout.is-busy .co-grid, .ck-layout.is-busy .co-pay-box, .ck-layout.is-busy .co-consents { opacity: .6; pointer-events: none; transition: opacity .3s; }
@media (prefers-reduced-motion: no-preference) {
  .ck-layout.is-busy .co-loadbar span { animation: co-load 1.2s var(--ease) both; }
}
.ck-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.ck-summary__title { margin: 0; font-size: 1.25rem; }
.ck-summary__edit { color: var(--forest); font-weight: 600; font-size: .92rem; }
.ck-lines { list-style: none; margin: 0; padding: 0 0 1.1rem; display: grid; gap: 1rem; border-bottom: 1px solid var(--line); }
.ck-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.ck-line__thumb { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--stone); border-radius: var(--radius); }
.ck-line__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.ck-line__qty { position: absolute; top: -7px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 0 0 2px var(--surface); font-size: .68rem; }
.ck-line__name { display: block; font-weight: 650; line-height: 1.3; }
.ck-line__meta { display: block; font-size: .85rem; line-height: 1.4; color: var(--ink-soft); }
.ck-line__price { font-size: .9rem; white-space: nowrap; }

@media (max-width: 1100px) {
  .cart-line { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "thumb info end" "thumb controls end"; }
  .cart-line__controls { grid-template-columns: minmax(0, 1fr) auto; align-items: end; max-width: 440px; }
}
@media (max-width: 1023px) {
  .cart-layout, .ck-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-summary, .ck-summary { position: static; }
  .cart-summary { max-width: 560px; }
  .ck-summary { order: -1; }
  .ck-main { max-width: none; }
}
@media (max-width: 767px) {
  .cart-suggest { grid-template-columns: minmax(0, 1fr); }
  .cart-suggest .pcard__media { aspect-ratio: 4 / 3; }
  .cart-suggest .pcard-add { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .cart-line { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "thumb info" "controls controls" "end end"; gap: 1rem; }
  .cart-line__controls { max-width: none; }
  .cart-line__end { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
  .cart-empty__box { grid-template-columns: minmax(0, 1fr); }
  .cart-empty__icon { width: 56px; height: 56px; }
  .ck-summary { padding: 1.15rem; }
}
/* Riepilogo del checkout molto lungo: resta nella finestra e scorre al suo interno. */
@media (min-width: 1024px) {
  .ck-summary { max-height: calc(100dvh - var(--header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; }
}