/* =====================================================================
 * BilanceOnline — product.css
 * Single product (scheda prodotto)
 *  - product-top (3 col: gallery, info, price-box)
 *  - features-strip (icone KERN)
 *  - tabs + spec card
 *  - variants table
 *  - accessori / correlati
 *  - reassurance
 * ===================================================================== */

/* Variabile extra: stato verde "in stock" */
:root{ --ok:#0E7C3F; }

/* ===== PRODUCT TOP ===== */
.product-top{padding:40px 0 56px}
.product-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 380px;
  gap:48px;
}

/* GALLERY */
.gallery-main{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;min-height:520px;
}
.gallery-main img{width:100%;height:100%;object-fit:contain;padding:32px;display:block}
.zoom-btn{
  position:absolute;bottom:18px;right:18px;
  background:#fff;border:1px solid var(--line);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.zoom-btn:hover{color:var(--bo-red);border-color:var(--bo-red)}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{flex:1;background:#fff;border:2px solid var(--line);border-radius:var(--radius);aspect-ratio:1/1;cursor:pointer;padding:0;overflow:hidden;max-width:110px}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.thumb:hover{border-color:var(--ink-3)}
.thumb[aria-current="true"]{border-color:var(--bo-red)}

/* INFO COLUMN */
.info-col .brand{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);padding:6px 12px;border-radius:20px;font-size:0.75rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px}
.info-col .brand strong{color:var(--bo-red);font-weight:700}
.info-col h1{font-weight:700;font-size:1.875rem;line-height:1.2;margin:0 0 18px;color:var(--ink);letter-spacing:-0.015em}
.product-meta-row{font-size:0.875rem;color:var(--ink-2);margin-bottom:8px}
.product-meta-row strong{color:var(--ink);font-weight:600}
.product-meta-row a{color:var(--bo-red);text-decoration:none;font-weight:600}
.product-meta-row a:hover{text-decoration:underline}
.short-desc{margin:22px 0 0;font-size:0.9375rem;line-height:1.7;color:var(--ink-2)}
.short-desc strong{color:var(--ink);font-weight:600}

/* PRICE BOX */
.price-box{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px;position:sticky;top:20px;
  height:fit-content;box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.price-label{font-size:0.8125rem;color:var(--ink-3);font-weight:500;margin-bottom:6px}
.price-amount{font-size:2.25rem;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1}
.price-vat{font-size:0.875rem;color:var(--ink-3);margin-left:6px;font-weight:500}
/* Badge sconto: leggermente più scuro del rosso brand per uscire dall'ambiguità
   di alcuni tool a11y che segnano AAA-strict su #fff/#C8102E (5.88:1, AA pass).
   #9F0B23 vs #fff = 8.25:1 (AAA pass). */
.price-discount{display:inline-block;background:var(--bo-red-dark);color:#fff;font-size:0.75rem;font-weight:700;padding:3px 9px;border-radius:3px;margin-left:8px;vertical-align:6px}
.price-old{text-decoration:line-through;color:var(--ink-3);font-size:0.9375rem;margin-top:6px;display:block}
.price-incl{font-size:0.84rem;color:var(--ink-2);margin-top:10px}
.price-incl strong{color:var(--ink);font-weight:600}
.availability{display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-size:0.875rem;font-weight:600;margin:14px 0 20px}
.availability.out{color:var(--bo-red)}
.availability i{font-size:1.125rem}

.price-cta{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.phone-cta{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-top:4px;
  background:var(--bg-2);border-radius:var(--radius);
  text-decoration:none;color:var(--ink);
  transition:background .15s;
}
.phone-cta:hover{background:var(--bg-3)}
.phone-cta i{font-size:1.625rem;color:var(--bo-red);flex-shrink:0}
.phone-cta small{display:block;font-size:0.75rem;color:var(--ink-3);line-height:1.3}
.phone-cta strong{display:block;font-size:1.125rem;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.2}

/* Btn variant produzione (override più "forte" di base) */
.bo-product .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:0.9375rem;cursor:pointer;text-decoration:none;
  border-radius:var(--radius);padding:14px 20px;min-height:50px;
}
.bo-product .btn-primary{background:var(--bo-red);color:#fff;border:2px solid var(--bo-red)}
.bo-product .btn-primary:hover{background:var(--bo-red-dark);border-color:var(--bo-red-dark)}
.bo-product .btn-outline{background:#fff;color:var(--bo-red);border:2px solid var(--bo-red)}
.bo-product .btn-outline:hover{background:var(--bo-red-50)}

.info-rows{border-top:1px solid var(--line);padding-top:16px;font-size:0.84rem}
.info-rows .row{display:flex;gap:12px;padding:10px 0;align-items:flex-start}
.info-rows .row + .row{border-top:1px solid var(--line)}
.info-rows i{font-size:1.375rem;color:var(--bo-red);flex-shrink:0;margin-top:1px}
.info-rows strong{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;font-size:0.875rem}
.info-rows span{color:var(--ink-3);font-size:0.8125rem;line-height:1.5}

/* ===== FEATURES STRIP (icone KERN) ===== */
.features-strip{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.features-strip h3{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-3);margin:0 0 14px}
.features-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.feat-icon{
  width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;cursor:help;padding:2px;
  transition:transform .15s;
}
.feat-icon img{width:100%;height:100%;object-fit:contain;display:block}
.feat-icon:hover{transform:scale(1.08)}

/* ===== Pittogrammi (helper bo_render_pictograms) =====
   Disposti in flexbox orizzontale, NON impilati verticalmente.
   Nessuno sfondo / bordo: solo l'immagine. */
.pictograms{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:14px 0;
}
.pictograms .pictogram{
  width:48px;height:48px;
  object-fit:contain;display:block;
  cursor:help;
  transition:transform .15s;
}
.pictograms .pictogram:hover{transform:scale(1.15)}

/* Sezione "Configurazioni di fabbrica" — separata visivamente dalle altre */
.features-strip--factory{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.features-strip--factory h3{margin:0 0 12px;text-align:left}
.features-strip--options h3{color:var(--bo-red)}

/* ===== TABS + SPECS ===== */
.tabs-section{padding:48px 0;border-top:1px solid var(--line);background:var(--bg-2)}
.tabs-layout{display:grid;grid-template-columns:minmax(0,1.6fr) 360px;gap:48px}
.tablist{
  display:flex;gap:0;border-bottom:1.5px solid var(--line);
  margin-bottom:24px;background:#fff;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:0 8px;
}
.tab{
  background:none;border:none;
  padding:16px 22px;font-size:0.9375rem;font-weight:600;
  color:var(--ink-3);cursor:pointer;font-family:inherit;
  border-bottom:3px solid transparent;margin-bottom:-1.5px;
}
.tab[aria-selected="true"]{color:var(--bo-red);border-bottom-color:var(--bo-red)}
.tab:hover:not([aria-selected="true"]){color:var(--ink)}

.tab-content{
  background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  border-top:none;padding:32px;
}
.tab-panel{display:none}
.tab-panel.active{display:block}
.long-desc{font-size:0.9375rem;line-height:1.6;color:var(--ink-2)}
.long-desc h2{font-size:1.375rem;font-weight:700;margin:0 0 14px;letter-spacing:-0.01em;color:var(--ink);line-height:1.25}
.long-desc h3{font-size:1.0625rem;font-weight:700;margin:28px 0 10px;color:var(--ink);line-height:1.3}
.long-desc p{margin:0 0 14px;font-size:inherit;line-height:inherit;color:inherit}
.long-desc ul{margin:0 0 14px;padding-left:0;list-style:none}
.long-desc ul li{padding:6px 0 6px 24px;position:relative;font-size:inherit;line-height:inherit;color:inherit}
.long-desc ul li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:2px;background:var(--bo-red)}

/* SPEC CARD */
.spec-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:sticky;top:20px;height:fit-content;
}
.spec-card h3{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink);margin:0 0 16px}
.spec-card dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:0}
.spec-card dt{color:var(--ink-3);font-size:0.84rem;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-card dd{margin:0;color:var(--ink);font-weight:600;font-size:0.84rem;padding:11px 0;border-bottom:1px solid var(--line);text-align:right}
.spec-card dt:last-of-type,.spec-card dd:last-of-type{border-bottom:none}
.pdf-row{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg-2);border-radius:var(--radius);text-decoration:none;color:var(--ink)}
.pdf-row:hover{background:var(--bg-3)}
.pdf-row i{font-size:2rem;color:var(--bo-red)}
.pdf-row strong{display:block;font-size:0.875rem;font-weight:600}
.pdf-row small{font-size:0.75rem;color:var(--ink-3)}
.pdf-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pdf-list-title{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-3);margin:0 0 4px}

/* ===== VARIANTI TABLE ===== */
.variants-section{padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.section-title{font-size:1.625rem;font-weight:700;margin:0 0 6px;letter-spacing:-0.01em}
.section-lede{color:var(--ink-3);margin:0 0 24px;font-size:0.9375rem}
.variants-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.variants-table{width:100%;border-collapse:collapse;font-size:0.875rem}
table.variants-table thead{background:var(--bg-3)}
table.variants-table th{text-align:left;font-weight:700;padding:14px 16px;color:var(--ink);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--line)}
table.variants-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
table.variants-table tr:last-child td{border-bottom:none}
table.variants-table tr:hover{background:var(--bg-2)}
.variant-thumb{width:56px;height:56px;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.variant-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.row-code{font-weight:700;color:var(--ink);display:block;margin-bottom:3px}
.row-pdf{display:inline-flex;align-items:center;gap:4px;font-size:0.72rem;color:var(--bo-red);text-decoration:none;font-weight:600}
.row-pdf:hover{text-decoration:underline}
.row-pdf i{font-size:0.8125rem}
.row-price{font-weight:700;color:var(--ink);white-space:nowrap;font-size:0.9375rem}
.row-price small{display:block;font-weight:400;font-size:0.75rem;color:var(--ink-3)}
.dot-avail{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--ok)}
.dot-avail.late{background:#F5A623}
.btn-buy-sm{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bo-red);color:#fff;text-decoration:none;
  font-size:0.84rem;font-weight:600;
  padding:9px 18px;border-radius:24px;
  border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
}
.btn-buy-sm:hover{background:var(--bo-red-dark)}
.btn-buy-sm i{font-size:0.9375rem}

/* ===== ACCESSORI (correlati) ===== */
.accessories-section{padding:48px 0;border-top:1px solid var(--line);background:var(--bg-2)}
.accessories-section .products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
}
.product-card:hover{border-color:var(--bo-red);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.product-card .img{background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.product-card .img img{width:100%;height:100%;object-fit:contain;padding:18px}
.product-card .body{padding:14px 16px;flex:1;display:flex;flex-direction:column}
.product-card .cat{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.product-card h3{font-size:0.9rem;font-weight:600;line-height:1.4;margin:0 0 10px;color:var(--ink)}
.product-card .price-sm{margin-top:auto;font-weight:700;color:var(--bo-red);font-size:1rem}
.product-card .price-sm small{font-weight:400;color:var(--ink-3);font-size:0.75rem;margin-left:4px}

/* ===== REASSURANCE (variante scheda) ===== */
.bo-product .reassurance{padding:40px 0;border-top:1px solid var(--line);background:#fff}
.bo-product .reassurance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bo-product .reassurance-item{display:flex;gap:16px;align-items:flex-start;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.bo-product .reassurance-item i{font-size:2rem;color:var(--bo-red);flex-shrink:0}
.bo-product .reassurance-item strong{display:block;font-size:0.9375rem;font-weight:700;margin-bottom:5px;color:var(--ink)}
.bo-product .reassurance-item span{font-size:0.8125rem;color:var(--ink-3);line-height:1.5}

/* ===== RESPONSIVE ===== */
@media (max-width:1280px){
  .product-grid{grid-template-columns:1fr 1fr;gap:32px}
  .product-grid > .price-box{grid-column:1/-1;position:static}
  .tabs-layout{grid-template-columns:1fr;gap:24px}
  .spec-card{position:static}
  .accessories-section .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .product-top{padding:24px 0 36px}
  .product-grid{grid-template-columns:1fr;gap:24px}
  .accessories-section .products-grid{grid-template-columns:repeat(2,1fr)}
  .bo-product .reassurance-grid{grid-template-columns:1fr 1fr}
  .info-col h1{font-size:1.5rem;margin-bottom:14px}
  .price-amount{font-size:1.875rem}
  /* Gallery: niente più min-height fisso che spreca verticale */
  .gallery-main{min-height:0;aspect-ratio:1/1}
  .gallery-main img{padding:18px}
  .zoom-btn{bottom:12px;right:12px;width:40px;height:40px}
  .gallery-thumbs{gap:8px}
  .thumb{max-width:80px}
  /* Price box compatto su mobile */
  .price-box{padding:18px 16px}
  /* Tabella varianti: padding/font ridotti, scroll orizzontale già attivo */
  table.variants-table{font-size:0.8125rem}
  table.variants-table th,
  table.variants-table td{padding:10px 12px}
  .bo-variants{padding:32px 0}
  .bo-variants .section-title{font-size:1.25rem}
  /* TABS + SPECS — risolve "tab e riepilogo tecnico tagliati" su mobile */
  .tabs-section{padding:32px 0}
  .tablist{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;white-space:nowrap;
    padding:0;scrollbar-width:thin;
  }
  .tab{padding:14px 16px;font-size:0.875rem;flex-shrink:0}
  .tab-content{padding:20px 16px}
  .long-desc h2{font-size:1.125rem}
  .long-desc h3{font-size:1rem}
  .spec-card{padding:18px 16px}
  .spec-card dt,.spec-card dd{font-size:0.8125rem;padding:10px 0}
}
@media (max-width:480px){
  .product-top{padding:16px 0 28px}
  .accessories-section .products-grid{grid-template-columns:1fr}
  .bo-product .reassurance-grid{grid-template-columns:1fr}
  .info-col h1{font-size:1.25rem;letter-spacing:-0.01em}
  .price-amount{font-size:1.625rem}
  .price-vat{font-size:0.75rem}
  .gallery-main img{padding:12px}
  .gallery-thumbs{gap:6px}
  .thumb{max-width:64px}
  .price-box{padding:16px 14px}
  /* CTA piene su mobile per target size SC 2.5.5 */
  .bo-product .btn{width:100%;justify-content:center;min-height:48px;padding:12px 18px;font-size:0.9375rem}
  .phone-cta{padding:10px 12px}
  .phone-cta strong{font-size:1rem}
  /* Varianti: tabella ancora più compatta */
  table.variants-table{font-size:0.75rem}
  table.variants-table th,
  table.variants-table td{padding:8px 10px}
  .variant-thumb img{width:48px;height:48px}
  /* Tab + spec-card ultra-compatti */
  .tab{padding:12px 14px;font-size:0.8125rem}
  .tab-content{padding:18px 14px}
  /* Spec-card stacked (dt sopra label, dd sotto valore) per evitare schiacciamento */
  .spec-card dl{grid-template-columns:1fr;gap:0}
  .spec-card dt{padding:10px 0 2px;color:var(--ink-2);font-weight:500;border-bottom:none}
  .spec-card dd{padding:0 0 10px;text-align:left;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
  .spec-card dd:last-of-type{border-bottom:none}
}

/* ===== SEZIONE VARIANTI / CONFIGURAZIONI (stesso pa_serie) ===== */
html{scroll-behavior:smooth}
.bo-variants{padding:48px 0;border-top:1px solid var(--line)}
.bo-variants .section-title{font-size:1.5rem;font-weight:800;letter-spacing:-0.015em;margin:0 0 8px;line-height:1.2;color:var(--ink)}
.bo-variants .section-lede{color:var(--ink-3);margin:0 0 24px;font-size:0.9rem;line-height:1.55}

.bo-variants-table-wrap{overflow-x:auto;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.bo-variants-table{
  width:100%;border-collapse:collapse;background:#fff;
  min-width:880px;
}
.bo-variants-table th{
  background:var(--bg-2);text-align:left;padding:14px 16px;
  font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--ink-2);border-bottom:1px solid var(--line);
  line-height:1.4;
}
.bo-variants-table td{
  padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:0.875rem;vertical-align:middle;line-height:1.45;
}
.bo-variants-table tr:last-child td{border-bottom:0}
.bo-variants-table tr.is-current{background:#FDE8EB}
.bo-variants-table tr.is-current td{font-weight:600}

/* Thumb piccola — senza bordo/sfondo */
.bo-variants-table .variant-thumb{
  display:block;width:60px;height:60px;
  overflow:hidden;text-decoration:none;
}
.bo-variants-table .variant-thumb img{width:100%;height:100%;object-fit:contain}

/* Codice + PDF */
.bo-variants-table .row-code{
  display:inline-block;font-weight:800;color:var(--ink);
  text-decoration:none;font-size:0.875rem;
}
.bo-variants-table .row-code:hover{color:var(--bo-red)}
.bo-variants-table .row-pdf{
  display:flex;align-items:center;gap:4px;
  margin-top:4px;font-size:0.72rem;font-weight:600;
  color:var(--ink-3);text-decoration:none;
}
.bo-variants-table .row-pdf:hover{color:var(--bo-red)}
.bo-variants-table .row-pdf i{font-size:14px;color:#D32F2F}

/* Prezzo */
.bo-variants-table .row-price strong{font-size:1rem;color:var(--ink);font-weight:800;display:inline}
.bo-variants-table .row-price .bo-price-vat{font-size:0.72rem;color:var(--ink-3);margin-left:4px;font-weight:600}
.bo-variants-table .row-price small{display:block;font-size:0.6875rem;color:var(--ink-3);margin-top:4px;font-weight:500}
.bo-variants-table .row-price .bo-price-from{font-size:0.78rem;color:var(--ink-3);font-style:italic;font-weight:600}

/* Disponibilità — pallini colorati */
.bo-variants-table .row-stock{text-align:center}
.dot-avail{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  background:#0e7c3f;
  border:2px solid #0e7c3f;
  cursor:help;
}
.dot-avail.late{background:#E5B838;border-color:#E5B838}
.dot-avail.out{background:#9F0B23;border-color:#9F0B23}

/* Bottone Acquista */
.bo-variants-table .row-action{text-align:right}
.btn-buy-sm{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;background:#C8102E;color:#fff;
  border-radius:20px;text-decoration:none;border:0;
  font-weight:700;font-size:0.8125rem;line-height:1.3;
  cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.btn-buy-sm:hover,
.btn-buy-sm:focus-visible{background:#9F0B23;color:#fff}
.btn-buy-sm i{font-size:16px;color:#fff}

/* Mobile: trasforma in cards stack */
@media (max-width:768px){
  .bo-variants-table{min-width:0}
  .bo-variants-table thead{display:none}
  .bo-variants-table tr{
    display:block;padding:14px;border-bottom:1px solid var(--line);
    position:relative;
  }
  .bo-variants-table td{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 0;border:0;
  }
  .bo-variants-table td:first-child{margin-bottom:8px}
  .bo-variants-table td::before{
    content:attr(data-label);font-weight:600;color:var(--ink-3);
    font-size:0.78rem;margin-right:12px;
  }
}
