/*
 * Scheda tecnica stampabile (/shop/scheda-tecnica/<id>).
 *
 * Pagina a sé, fuori dal layout del sito e dai bundle: si carica solo
 * qui. Due fogli A4 (.cs-page): il primo riassuntivo (foto, dati chiave,
 * dettagli, descrizione), il secondo con tutte le caratteristiche. Ogni
 * foglio ha il suo piede in fondo; a schermo stanno uno sotto l'altro su
 * fondo grigio, in stampa ognuno è una pagina.
 */
:root {
    --cs-green: #079C39;
    --cs-green-dark: #05722A;
    --cs-green-soft: #E8F5EC;
    --cs-ink: #383838;
    --cs-muted: #6B6B6B;
    --cs-line: #E3E3E3;
    --cs-zebra: #F6F7F6;
}
@page { size: A4; margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #D9DCDA;
    color: var(--cs-ink);
    font-family: "Poppins", Arial, sans-serif;
    font-size: 9pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Barra solo a schermo */
.cs-toolbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; align-items: center;
    padding: 10px 16px; background: var(--cs-ink); color: #fff; font-size: 10pt;
}
.cs-toolbar button, .cs-toolbar a {
    font: inherit; font-weight: 500; border: 0; border-radius: 4px; cursor: pointer;
    padding: 8px 18px; text-decoration: none;
}
.cs-toolbar button { background: var(--cs-green); color: #fff; }
.cs-toolbar a { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }

/* Fogli A4: un filo sotto i 297 mm, così l'arrotondamento del browser
   non fa nascere una pagina bianca in più */
.cs-page {
    position: relative;
    width: 210mm; height: 296.5mm;
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
    overflow: hidden;
}
/* Anche la seconda pagina è un foglio fisso: così non può mai nascerne una
   terza. Se il contenuto è troppo, lo script lo rimpicciolisce (zoom). */
.cs-page-body { padding-bottom: 33mm; }
/* Pagina 1: la descrizione prende lo spazio che resta e non va oltre.
   Lo script toglie dal fondo i paragrafi/punti che non ci stanno; se JS
   non gira, il testo in più resta comunque nascosto (overflow). */
.cs-page-1 .cs-page-body { height: 100%; display: flex; flex-direction: column; }
.cs-page-1 .cs-page-body > * { flex: 0 0 auto; }
.cs-page-1 .cs-section-desc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cs-section-desc .cs-desc { flex: 1 1 auto; min-height: 0; overflow: hidden; column-fill: auto; position: relative; }


/* Testata: fascia con la nebulosa del catalogo */
.cs-top {
    position: relative;
    color: #fff;
    background: #04140A url("../img/spec_sheet_nebula_head.jpg") center 40% / cover no-repeat;
    border-bottom: 1.2mm solid var(--cs-green);
}
.cs-top::before {
    /* velo scuro: testo leggibile e meno inchiostro dove c'è scritto */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(3, 14, 7, .35) 0%, rgba(3, 14, 7, .55) 45%, rgba(3, 14, 7, .82) 100%);
}
.cs-top > * { position: relative; }
.cs-head {
    display: flex; justify-content: space-between; align-items: center; gap: 6mm;
    padding: 8mm 14mm 0;
}
/* logo outline del catalogo (bianco su trasparente), grande in prima pagina */
.cs-head img { height: 22mm; width: auto; }
.cs-head-doc { text-align: right; }
.cs-head-doc strong {
    display: block; font-size: 12pt; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase;
}
.cs-head-doc span { font-size: 7.5pt; color: rgba(255, 255, 255, .75); }
.cs-top-body {
    display: grid; grid-template-columns: 74mm 1fr; gap: 9mm;
    padding: 7mm 14mm 7mm;
}
.cs-eyebrow {
    font-size: 8pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: #8FE3A9;
}
.cs-title { font-size: 27pt; font-weight: 700; line-height: 1.05; margin: 1mm 0 4mm; }
.cs-variant { display: flex; flex-wrap: wrap; gap: 2mm; }
.cs-variant div {
    display: flex; flex-direction: column;
    padding: 1.6mm 3.5mm; border-radius: 2mm;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
}
.cs-variant small { font-size: 6.5pt; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .08em; }
.cs-variant b { font-size: 10.5pt; font-weight: 600; }

/* Foto (sporge sotto la fascia) e numeri chiave */
.cs-hero {
    display: grid; grid-template-columns: 74mm 1fr; gap: 9mm;
    padding: 0 14mm 2mm;
}
.cs-photo {
    height: 100mm; margin-top: -40mm; position: relative;
    border-radius: 3mm; padding: 3mm;
    display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 2mm 6mm rgba(0, 0, 0, .18);
}
.cs-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-hero-side { padding-top: 6mm; }

.cs-keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm; }
.cs-key { border: 1px solid var(--cs-line); border-top: 1mm solid var(--cs-green); border-radius: 2mm; padding: 3mm 4mm; }
.cs-key small { display: block; font-size: 7.5pt; line-height: 1.25; color: var(--cs-muted); }
.cs-key b { font-size: 20pt; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cs-key b span { font-size: 10pt; font-weight: 500; color: var(--cs-muted); margin-left: 1mm; }

.cs-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 2mm; margin-top: 5mm; }
.cs-badges-label {
    font-size: 7pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--cs-muted); margin-right: 1mm;
}
.cs-badge {
    font-size: 7.5pt; font-weight: 600; padding: 1mm 3mm; border-radius: 10mm;
    border: 1px solid var(--cs-green); color: var(--cs-green-dark); background: var(--cs-green-soft);
}

/* Foto di dettaglio */
.cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.cs-gallery-1 { grid-template-columns: 1fr 2fr; }
.cs-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.cs-gallery-item {
    height: 54mm; overflow: hidden; border-radius: 2.5mm; padding: 2mm;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--cs-line); border-bottom: 1mm solid var(--cs-green); background: #fff;
}
/* intere, non ritagliate: sono foto di dettaglio, il soggetto è spesso al bordo */
.cs-gallery-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Pagina 2: fascia sottile con nome e codice */
.cs-strip {
    position: relative; color: #fff;
    display: flex; align-items: center; gap: 8mm;
    padding: 6mm 14mm;
    background:
        linear-gradient(90deg, rgba(3, 14, 7, .55) 0%, rgba(3, 14, 7, .85) 100%),
        #04140A url("../img/spec_sheet_nebula_foot.jpg") center / cover no-repeat;
    border-bottom: 1.2mm solid var(--cs-green);
}
.cs-strip .cs-logo { height: 11mm; width: auto; }
.cs-strip-title { flex: 1; display: flex; flex-direction: column; }
.cs-strip-title small {
    font-size: 7.5pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8FE3A9;
}
.cs-strip-title strong { font-size: 14pt; font-weight: 700; line-height: 1.2; }
.cs-strip-code { text-align: right; display: flex; flex-direction: column; }
.cs-strip-code small { font-size: 6.5pt; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .08em; }
.cs-strip-code b { font-size: 12pt; font-weight: 600; }

/* Documenti scaricabili: anteprima della prima pagina + dati del file */
.cs-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm 9mm; }
.cs-doc {
    display: flex; gap: 4mm; align-items: stretch;
    padding: 3mm; border: 1px solid var(--cs-line); border-radius: 2.5mm;
    color: inherit; text-decoration: none; break-inside: avoid;
}
.cs-doc-thumb {
    flex: 0 0 24mm; height: 34mm; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--cs-zebra); border: 1px solid var(--cs-line); border-radius: 1mm;
    box-shadow: 0 .6mm 1.5mm rgba(0, 0, 0, .12);
}
.cs-doc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cs-doc-icon {
    font-size: 8pt; font-weight: 700; letter-spacing: .06em; color: #fff;
    background: var(--cs-green); padding: 1mm 2mm; border-radius: 1mm;
}
.cs-doc-text { display: flex; flex-direction: column; justify-content: center; gap: .8mm; min-width: 0; }
.cs-doc-text strong { font-size: 9.5pt; font-weight: 600; }
.cs-doc-name { font-size: 7pt; color: var(--cs-muted); overflow-wrap: anywhere; line-height: 1.3; }
.cs-doc-text small { font-size: 7pt; color: var(--cs-muted); }
.cs-doc-link { font-size: 7.5pt; font-weight: 600; color: var(--cs-green-dark); margin-top: 1mm; }
.cs-doc-link::after { content: " \2192"; }

/* Accessori: miniatura + nome + codice, tre per riga */
.cs-accs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 4mm; }
.cs-acc {
    display: flex; gap: 3mm; align-items: center;
    padding: 2.5mm; border: 1px solid var(--cs-line); border-radius: 2.5mm;
    color: inherit; text-decoration: none; break-inside: avoid;
}
.cs-acc-img {
    flex: 0 0 17mm; height: 17mm; border-radius: 1.5mm; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cs-acc-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cs-acc-text { display: flex; flex-direction: column; gap: .5mm; min-width: 0; }
.cs-acc-text strong { font-size: 8.3pt; font-weight: 600; line-height: 1.25; }
.cs-acc-text small { font-size: 7pt; color: var(--cs-muted); }
.cs-acc-text .cs-doc-link { margin-top: .5mm; }

/* Sezioni */
.cs-section { padding: 5mm 14mm 0; }
.cs-section-specs { padding-top: 8mm; }
.cs-h2 {
    display: flex; align-items: center; gap: 3mm;
    font-size: 10.5pt; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 2.5mm;
}
.cs-h2::before { content: ""; width: 5mm; height: 1.2mm; background: var(--cs-green); border-radius: 1mm; }
.cs-h2::after { content: ""; flex: 1; height: 1px; background: var(--cs-line); }

.cs-desc { columns: 2; column-gap: 9mm; font-size: 8.5pt; line-height: 1.45; color: #4A4A4A; }
.cs-desc p, .cs-desc div { margin: 0 0 2mm; }
.cs-desc ul, .cs-desc ol { margin: 0 0 2mm; padding-left: 4.5mm; }
.cs-desc li { margin: 0 0 .3mm; break-inside: avoid; }
.cs-desc li::marker { color: var(--cs-green); }
.cs-desc img { display: none; }

.cs-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 9mm; align-items: start; }
.cs-group { break-inside: avoid; margin: 0 0 5mm; }
.cs-group.cs-group-long { break-inside: auto; }
.cs-group h3 {
    font-size: 8.5pt; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: #fff; background: var(--cs-ink); border-left: 1.2mm solid var(--cs-green); margin: 0; padding: 2mm 3mm;
    border-radius: 1.5mm 1.5mm 0 0;
}
.cs-group h3 .cs-continued { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }
.cs-group table { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
.cs-group tr { break-inside: avoid; }
.cs-group td { padding: 1.6mm 3mm; border-bottom: 1px solid var(--cs-line); vertical-align: top; }
.cs-group tr:nth-child(even) td { background: var(--cs-zebra); }
.cs-group td:first-child { color: var(--cs-muted); padding-right: 2mm; }
/* valore su una riga; solo i valori lunghi (classe dal template) vanno a capo */
.cs-group td:last-child { font-weight: 600; text-align: right; white-space: nowrap; }
.cs-group td.cs-wrap { white-space: normal; }
.cs-group tr.cs-hl td:last-child { color: var(--cs-green-dark); }

/* Piede */
.cs-foot {
    position: absolute; left: 0; right: 0; bottom: 0; height: 24mm;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6mm;
    padding: 0 14mm; color: #fff; font-size: 7.5pt;
    background:
        linear-gradient(90deg, rgba(3, 14, 7, .88) 0%, rgba(3, 14, 7, .7) 60%, rgba(3, 14, 7, .45) 100%),
        #04140A url("../img/spec_sheet_nebula_foot.jpg") center / cover no-repeat;
    border-top: 1.2mm solid var(--cs-green);
}
.cs-foot strong { font-size: 9pt; font-weight: 600; }
.cs-foot a { color: #fff; text-decoration: none; }
/* avvertenza sui dati, centrata appena sopra il piede */
.cs-disclaimer {
    position: absolute; left: 14mm; right: 14mm; bottom: 27mm; margin: 0;
    text-align: center; font-size: 7pt; font-style: italic; color: var(--cs-muted);
}
.cs-qr { display: flex; align-items: center; gap: 3mm; text-align: right; }
.cs-qr img { width: 17mm; height: 17mm; background: #fff; padding: 1mm; border-radius: 1mm; }
.cs-qr span { font-size: 6.5pt; color: rgba(255, 255, 255, .7); max-width: 28mm; }

@media print {
    body { background: #fff; }
    .cs-toolbar { display: none; }
    .cs-page { margin: 0; box-shadow: none; break-after: page; }
    .cs-page:last-child { break-after: auto; }
}

/* Finestra stretta o telefono: lo stesso foglio A4, rimpicciolito in
   proporzione (lo zoom lo calcola lo script in --cs-screen-zoom). Niente
   layout diverso a schermo: quello che lo script misura deve essere
   identico a quello che va in stampa, altrimenti da una finestra stretta
   la pagina 2 sforava in una terza. */
@media screen {
    .cs-page { zoom: var(--cs-screen-zoom, 1); }
}
@media screen and (max-width: 820px) {
    .cs-page { margin: 8px auto; }
    .cs-toolbar { font-size: 9pt; }
    .cs-toolbar span { display: none; }
}