/*
 * Categoria e scheda prodotto con la logica della home (23/10/2026),
 * pubblicate il 23/10 sera: vedi `inc/anteprima-catalogo.php`.
 *
 * I pezzi sono quelli della home (`home-proposta.css`, caricato prima di
 * questo): il modulo delle misure, le schede, i tre fatti, «Visualizza
 * altro». Qui sta solo cio' che serve a metterli in queste due pagine.
 * Scritto per il telefono, si allarga da 900 px in su.
 */

body.st-n4 {
    --n3-r: var(--st-r-scheda, 20px);
    --n3-r-campo: var(--st-r-campo, 12px);
    --n3-crema: var(--st-p-crema, #FAF6F1);
    --n3-caldo: var(--st-surface-promo, #F1E8DF);
    --n3-testo-tenue: var(--st-p-grigio, #6F6A64);
}

/* Il nome nella scheda e' un titolo vero (h2 in griglia, h3 nei correlati):
   prende il carattere del testo, non quello dei titoli del tema. */
.st-n4 .n3-scheda__nome {
    margin: 2px 0 0;
    font-family: var(--st-font-body);
    letter-spacing: 0;
    text-transform: none;
}

/* -----------------------------------------------------------------------
 * CATEGORIA — la testata
 * --------------------------------------------------------------------- */

.n4-testa { padding: 12px 12px 0; background: var(--st-ivory); }
.n4-testa__foto {
    height: clamp(130px, 19svh, 190px);
    overflow: hidden;
    border-radius: var(--st-r-scheda, 20px);
    background: var(--n3-caldo);
}
.n4-testa__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.n4-testa__testo { padding: 14px 4px 28px; }
.n4-testa .st-breadcrumb { margin: 0 0 8px; font-size: var(--st-fs-micro); }
.n4-testa__titolo {
    margin: 0;
    font-family: var(--st-font-display);
    font-size: clamp(2.125rem, 8.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--st-p-inchiostro);
}
.n4-testa__sotto {
    margin: 8px 0 16px;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--st-text);
    text-wrap: pretty;
}
.n4-ancora { display: block; scroll-margin-top: 12px; }

/* Il filtro per misura della colonna fa ora la testata: due moduli uguali
   nella stessa pagina sarebbero una domanda fatta due volte. */
.st-n4-categoria .st-filters__misure { display: none; }

/* -----------------------------------------------------------------------
 * CATEGORIA — la griglia: le schede della home al posto di quelle di Blocksy
 * --------------------------------------------------------------------- */

body.st-n4-categoria ul.products.n4-griglia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Le schede di Blocksy sono riquadri bianchi da 28 px (`.archive ul.products
   > li.product`): qui la scheda e' quella della home, senza riquadro. */
body.st-n4-categoria ul.products.n4-griglia > li.n4-voce {
    position: relative;
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    text-align: left;
}
body.st-n4-categoria ul.products.n4-griglia > li.n4-voce::before,
body.st-n4-categoria ul.products.n4-griglia > li.n4-voce::after { display: none; }
.n4-voce .n3-scheda { position: relative; }
.n4-voce .n3-scheda__foto img { object-position: 50% 30%; }
.n4-voce .n4-cuore {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
}
.n4-voce .n3-scheda.is-calcolo strong { opacity: .35; }
.n4-voce .n3-scheda[data-n4-preventivo] strong { font-size: 1rem; }

/* «Visualizza altro» al posto delle pagine. */
.st-n4-categoria .ct-pagination { display: none; }
.n4-altro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 32px;
    text-align: center;
}
.n4-altro__conto { margin: 0; font-size: var(--st-fs-small); color: var(--n3-testo-tenue); }
.n4-altro .n3-altro { margin-top: 0; }
.n4-altro .n3-altro.is-calcolo { opacity: .6; cursor: progress; }

/* -----------------------------------------------------------------------
 * SCHEDA PRODOTTO — il riquadro d'acquisto
 * --------------------------------------------------------------------- */

.st-product__acquisto > .n4-acquisto { order: 2; }
.n4-acquisto__eti {
    margin: 0;
    font-size: var(--st-fs-small);
    font-weight: 600;
    color: var(--st-p-inchiostro);
}
.n4-acquisto__prezzo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--st-p-inchiostro);
}
.n4-acquisto__da { font-size: var(--st-fs-ui); color: var(--n3-testo-tenue); }
.n4-acquisto__da[hidden] { display: none; }
.n4-acquisto__prezzo strong {
    font-family: var(--st-font-body);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    transition: opacity .2s ease;
}
.n4-acquisto.is-calcolo .n4-acquisto__prezzo strong { opacity: .4; }
.n4-acquisto__per {
    margin: 2px 0 14px;
    min-height: 1.45em;
    font-size: var(--st-fs-small);
    line-height: 1.45;
    color: var(--n3-testo-tenue);
}
.n4-acquisto__misure .n3-misure__campo input { height: 50px; background: #fff; }
.n4-acquisto__misure .n3-misure__per { height: 50px; }
.n4-misure--una { grid-template-columns: minmax(0, 1fr); }
.n4-acquisto__azioni { display: grid; gap: 4px; margin-top: 14px; }
.n4-acquisto__vai {
    width: 100%;
    min-height: 54px;
    padding-inline: 14px;
    justify-content: center;
    gap: 10px;
    border-radius: var(--n3-r-campo);
    font-size: 1rem;
    white-space: nowrap;   /* «Configura 140 × 180 cm» su una riga anche nella colonna da 316 px */
}
.n4-acquisto__vai:active { transform: translateY(1px); }
.n4-acquisto__preventivo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: var(--st-fs-small);
    font-weight: 500;
    color: var(--st-copper-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.n4-acquisto .n3-misure__nota { margin-top: 4px; text-align: center; }
.n4-acquisto .n3-misure__nota a { white-space: nowrap; }

/* I tre fatti, uno per riga: la colonna d'acquisto e' stretta. */
.n4-fatti {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    list-style: none;
    border-top: 1px solid var(--st-border, #E4DDD2);
}
.n4-fatti li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--st-fs-small);
    font-weight: 500;
    color: var(--st-p-inchiostro);
}
.n4-fatti svg { flex: none; color: var(--st-copper-text); }

/* I correlati come le schede della home. */
.n4-correlati { margin-top: clamp(48px, 7vw, 88px); }
.n4-correlati .n3-titolo { margin-bottom: clamp(20px, 3vw, 32px); }

/* La barra in fondo: il prezzo per la misura con la misura sotto. */
.st-n4-scheda .st-azionebar__prezzo strong { font-weight: 600; }

/* -----------------------------------------------------------------------
 * DA 700 / 900 PX IN SU
 * --------------------------------------------------------------------- */

@media (min-width: 700px) {
    body.st-n4-categoria ul.products.n4-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}

@media (min-width: 900px) {
    .n4-testa {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: clamp(32px, 4.5vw, 72px);
        padding: 28px max(var(--st-container-margine, 24px), calc((100% - var(--st-container, 1336px)) / 2)) 44px;
    }
    .n4-testa__foto {
        order: 2;
        height: clamp(340px, 44svh, 460px);
        border-radius: var(--st-r-grande, 28px);
    }
    .n4-testa__testo { order: 1; padding: 0; }
    .n4-testa__testo > * { max-width: 32rem; }
    .n4-testa__titolo { font-size: clamp(2.75rem, 3.6vw, 3.375rem); }
    .n4-testa__sotto { margin: 12px 0 22px; font-size: var(--st-fs-lead); }
    .n4-testa .n3-misure__campo input { background: rgba(255, 255, 255, .94); }
    .n4-testa .n3-hero__fatti { gap: 16px; margin-top: 22px; padding-top: 18px; }
    .n4-testa .n3-hero__fatti li { flex-direction: row; align-items: flex-start; gap: 8px; font-size: var(--st-fs-small); text-align: left; text-wrap: pretty; }
    .n4-ancora { scroll-margin-top: 140px; }

    .st-n4-categoria .n4-altro { grid-area: pagine; align-items: center; }
    .n4-altro .n3-altro { display: inline-flex; padding-inline: 28px; }
}

@media (min-width: 1280px) {
    body.st-n4-categoria ul.products.n4-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .n4-acquisto__prezzo strong { transition: none; }
}