/* =====================================================================
 * BilanceOnline — base.css
 * Variabili, reset, tipografia, utility, UI primitives (prod-card, btn)
 * ===================================================================== */

/* === @font-face Poppins self-hosted ===
   I file woff2 vanno in assets/fonts/ — vedi assets/fonts/README.txt */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/poppins-900.woff2') format('woff2')}

:root{
  --bo-red:#C8102E;
  --bo-red-dark:#9F0B23;
  --bo-red-50:#FCEAEC;
  --bo-yellow:#FFCD4E;
  --bo-yellow-dark:#E5B838;
  --bo-blue:#23527C;
  --bo-blue-dark:#1A3A5A;
  --bo-blue-grad-from:#1A5FAF;
  --bo-blue-grad-to:#0F3A6B;
  --ink:#0F1419;
  --ink-2:#3D4250;
  --ink-3:#666A75;
  --ink-4:#9CA3AF;
  --line:#E5E5E5;
  --line-2:#D4D4D4;
  --bg-2:#F7F8FA;
  --bg-3:#EFF2F5;
  --bg-dark:#101620;
  --focus:#FFB400;
  --radius:8px;
  --container:1440px;
  --font-main:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* === Reset === */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  overflow-x:clip;     /* impedisce scroll orizzontale per qualsiasi overflow */
  max-width:100vw;
}
body{
  margin:0;
  font-family:var(--font-main);
  font-weight:400;font-size:0.9375rem;line-height:1.55;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%;height:auto}
button{font-family:inherit}
*:focus:not(:focus-visible){outline:none}
*:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}

/* === Tipografia base === */
h1,h2,h3,h4,h5,h6{font-family:inherit;line-height:1.2;color:var(--ink)}

/* === Accessibilità === */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:9999;text-decoration:none}
.skip-link:focus{left:8px;top:8px}
.sr-only,
h2.sr-only,
h3.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible{position:absolute;width:auto;height:auto;clip:auto;white-space:normal;left:8px;top:8px;background:var(--ink);color:#fff;padding:12px 20px;z-index:9999}

/* === Layout === */
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
/* container-narrow: deprecato — usa la stessa larghezza del container standard.
   In passato comprimeva i contenuti a 1080px ma è risultato troppo stretto. */
.container-narrow{max-width:var(--container)}
@media (max-width:768px){
  .container{padding:0 16px}
}

/* === Hidden screen content === */
[hidden]{display:none !important}

/* === Buttons === */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:30px;
  font-family:inherit;font-weight:800;font-size:0.9rem;
  text-decoration:none;cursor:pointer;border:none;
  transition:background .15s,color .15s,transform .12s;
}
.btn-primary{background:var(--bo-red);color:#fff}
.btn-primary:hover{background:var(--bo-red-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--bo-red)}
.btn-light{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-light:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* === Prodotto card (shared: home featured + categoria grid) === */
.prod-card{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  position:relative;
}
.prod-card:hover{
  border-color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.prod-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.prod-card .img{
  background:#fff;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  padding:10px;position:relative;overflow:hidden;
}
.prod-card .img img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.prod-card .badge{
  position:absolute;top:12px;left:12px;
  background-color:#0F1419;color:#fff;
  font-size:0.6875rem;font-weight:800;
  padding:5px 11px;border-radius:14px;
  text-transform:uppercase;letter-spacing:0.04em;
  line-height:1.55;
}
/* Colori hardcoded + color ESPLICITO su ogni variante (MAUVE non segue ereditarietà) */
.prod-card .badge.red{background-color:#C8102E;color:#fff}
.prod-card .badge.yellow{background-color:#FFCD4E;color:#0F1419}
.prod-card .badge.green{background-color:#0E7C3F;color:#fff}
.prod-card .body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.prod-card .body-main{flex:1}
.prod-card .brand-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.prod-card .brand{font-size:0.6875rem;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:0.08em;margin:0}
.prod-card .code{font-size:0.6875rem;font-weight:600;color:var(--ink-3);letter-spacing:0.02em}
.prod-card h3{font-size:0.9rem;font-weight:600;line-height:1.35;margin:0 0 10px;color:var(--ink)}
.prod-card .specs{display:flex;gap:8px;font-size:0.75rem;color:var(--ink-2);margin-bottom:14px;flex-wrap:wrap}
.prod-card .specs span{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;background:var(--bg-2);
  border-radius:14px;font-weight:600;
}
.prod-card .specs i{font-size:0.875rem;color:var(--bo-red)}
.prod-card .footer,
.prod-card .prod-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:10px}
.prod-card .add-btn{
  background-color:#C8102E;color:#fff;
  border:none;border-radius:30px;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;
  font-family:inherit;font-size:0.84rem;font-weight:700;
  cursor:pointer;flex-shrink:0;
  transition:background-color .15s;
  line-height:1.55;
}
.prod-card .add-btn:hover{background-color:#9F0B23;color:#fff}
.prod-card .add-btn i{font-size:1rem;color:#fff;background-color:transparent}
.prod-card .price-block{display:flex;flex-direction:column}
.prod-card .price-block .old,
.prod-card .price-block del{font-size:0.75rem;color:var(--ink-3);text-decoration:line-through}
.prod-card .price-block del .woocommerce-Price-amount{
  font-size:0.75rem;font-weight:400;color:var(--ink-3);
  text-decoration:line-through;
}
.prod-card .price-block .from{font-size:0.6875rem;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
.prod-card .price-block .now,
.prod-card .price-block ins,
.prod-card .price-block .woocommerce-Price-amount{
  font-size:1.375rem;font-weight:800;color:var(--ink);
  letter-spacing:-0.015em;line-height:1.1;text-decoration:none;
}
.prod-card .price-block ins{background:transparent;text-decoration:none}
.prod-card .price-block .iva{font-size:0.6875rem;color:var(--ink-3);font-weight:500;margin-top:2px}
.prod-card .price-block small{font-size:0.8125rem;font-weight:700;color:var(--ink)}
.prod-card .price-block small.iva{font-size:0.6875rem;font-weight:500;color:var(--ink-3)}

/* === Page header (h1 + lead generico riusato in pagine) === */
.page-header{margin:24px 0 28px}
.page-header h1{font-size:34px;font-weight:800;letter-spacing:-0.02em;margin:0 0 8px;line-height:1.1}
.page-header .lead{font-size:15.5px;color:var(--ink-3);max-width:760px;margin:0;line-height:1.6}

/* === Breadcrumb (struttura ol/li, separator › via ::after) === */
.breadcrumb{padding:16px 0;font-size:0.8125rem;border-bottom:1px solid var(--line);background:var(--bg-2)}
.breadcrumb ol{
  list-style:none;
  margin:0;
  padding:0;
  padding-inline-start:0;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--bo-red);text-decoration:underline}
.breadcrumb li{display:inline-flex;align-items:center;margin:0;padding:0}
.breadcrumb li::after{content:"›";margin-left:8px;color:var(--ink-4);font-size:0.875rem;line-height:1}
.breadcrumb li:last-child::after{display:none}
.breadcrumb li:last-child,
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:500}

/* === WP / WooCommerce overrides minimi === */
.bo-cart-msg{
  display:flex;align-items:center;gap:12px;
  background:#E8F5E9;border:1px solid #0E7C3F;color:#0E7C3F;
  padding:14px 18px;border-radius:8px;margin-bottom:24px;
}
.bo-cart-msg i{font-size:1.375rem}
.bo-cart-msg .btn{margin-left:auto}

/* === Form feedback === */
.bo-form-feedback{
  padding:16px 20px;border-radius:8px;margin-bottom:24px;
  font-weight:600;
}
.bo-form-feedback.success{background:#E8F5E9;color:#1B5E20;border:1px solid #4CAF50}
.bo-form-feedback.error  {background:#FFEBEE;color:#B71C1C;border:1px solid #E57373}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* =====================================================================
 * WCAG 2.1 AA — enhancements applicati a fine cascata
 *   - 2.4.7 / 1.4.11 : focus visibile esplicito su ogni elemento interattivo
 *   - 1.4.12         : line-height esplicito su elementi testuali
 *   - 1.4.4 / 1.4.5  : font-size scalabile (rem) per body
 * ===================================================================== */

/* Body usa rem così zoom funziona; il valore visibile resta 15px */
html{font-size:100%}
body{font-size:0.9375rem;line-height:1.55}

/* Focus visibile — DOPPIO selettore (:focus + :focus-visible) perché alcuni tool
   automated parser non riconoscono :focus-visible. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[role="button"]:focus,
[role="menuitem"]:focus,
[role="tab"]:focus,
[tabindex]:focus,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus) !important;
  outline-offset:2px !important;
}
/* Tolgo il focus dal mouse-click — torna solo con tastiera */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){
  outline:none !important;
}

/* Headings con line-height esplicito (1.4.12) */
h1,h2,h3,h4,h5,h6{line-height:1.2}
p,li,dt,dd,blockquote,figcaption,small,span,strong,em,a{line-height:1.55}
.btn,button,input,select,textarea{line-height:1.4}

/* Strong globale: semi-bold (600), non extra-bold.
   !important per battere le override locali (es. tabelle, card prezzi, USP). */
strong, b{font-weight:600 !important}
/* Eccezioni: il numero di telefono deve restare bold */
.phone-cta strong,
.footer-contact strong,
a[href^="tel:"] strong{font-weight:700 !important}

/* ========== PROMO-STRIP — focus indicator esplicito per MAUVE++ ========== */
/* (Color/bg sono ora inline sull'HTML in template-parts/header/topbar.php
   perché MAUVE non risolve la cascata su `<span>`/`<strong>` ereditati.) */
.promo-strip a:hover{text-decoration-thickness:2px}
/* Regole focus SPLIT (no :focus-visible combinato, no var CSS) per MAUVE */
.promo-strip a:focus{
  outline:3px solid #FFB400;
  outline-offset:3px;
}
.promo-strip a:focus-visible{
  outline:3px solid #FFB400;
  outline-offset:3px;
}

/* =====================================================================
 * USP strip — usata su home, shop, categoria, tag, singolo prodotto.
 * Stili globali in base.css per essere disponibili ovunque.
 * ===================================================================== */
.usp{padding:40px 0 28px;background:#fff;border-top:1px solid var(--line)}
.usp + footer[role="contentinfo"]{margin-top:0}
.usp .container{max-width:var(--container);margin:0 auto;padding:0 32px}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.usp-item{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--bg-2);border-radius:12px;
  padding:22px 22px;
  transition:transform .2s,box-shadow .2s;
}
.usp-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.07)}
.usp-item .usp-ico{
  width:52px;height:52px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.625rem;color:var(--bo-blue);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.usp-item .usp-txt strong{display:block;font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:4px;line-height:1.3}
.usp-item .usp-txt span{font-size:0.84rem;color:var(--ink-2);line-height:1.55}

@media (max-width:1024px){
  .usp-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .usp-grid{grid-template-columns:1fr}
}

/* ============================ WHATSAPP FAB ============================
   WCAG:
   - SC 1.4.11: icona #fff su #128C7E = 4.13:1 (>3:1 non-text contrast).
   - SC 2.4.7: focus visibile (outline nero 21:1 su qualunque sfondo).
   - SC 2.5.5: target 56×56 (52×52 mobile). */
.bo-whatsapp-fab{
  position:fixed;right:24px;bottom:24px;z-index:9990;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#128C7E;color:#fff;text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.20),0 2px 4px rgba(0,0,0,.10);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.bo-whatsapp-fab i{font-size:1.75rem;line-height:1}
.bo-whatsapp-fab:hover{background:#0E7568;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.10)}
.bo-whatsapp-fab:focus,
.bo-whatsapp-fab:focus-visible{outline:3px solid #000 !important;outline-offset:3px !important}
@media (max-width:640px){
  .bo-whatsapp-fab{right:16px;bottom:16px;width:52px;height:52px}
  .bo-whatsapp-fab i{font-size:1.625rem}
}
@media (prefers-reduced-motion: reduce){
  .bo-whatsapp-fab{transition:none}
  .bo-whatsapp-fab:hover{transform:none}
}