/* I caratteri: indirizzi assoluti su /assets/fonts/, non relativi. Il foglio
   di un tema sta in /themes/<chiave>/, quindi un "../fonts/" punterebbe a
   /themes/fonts/ e non troverebbe niente (successo il 5/9/26). Un tema che
   porta caratteri suoi li mette nella propria cartella e li chiama
   /themes/<chiave>/fonts/... */

/* ============================================================
   I NOMI VECCHI, COLLEGATI AI TOKEN DEL TEMA
   ============================================================
   Le regole ereditate qui sotto chiamano ancora i nomi del vecchio foglio
   (--red, --dark, i caratteri Saira...). Qui quei nomi vengono ridefiniti
   sopra i token del tema: così tutto — banner cookie, pannello accessibilità,
   avvisi, moduli — segue il tema e le scelte fatte dal pannello, invece di
   restare col colore del progetto di partenza.
   Un tema nuovo ridefinisce i propri --bt-* e si tira dietro anche queste.

   ⚠️ QUESTE RIGHE STAVANO SU `:root`, E NON FUNZIONAVANO. I token --bt-* sono
   dichiarati più in basso su `body.bt-theme, .bt-page`, non su :root: quindi
   qui `var(--bt-accent)` non trovava niente, --red restava non valido, e al
   suo posto comandava l'arancione scritto nel foglio di base. Su Bento non si
   vedeva — il suo accento È arancione — e si è visto solo il giorno in cui un
   tema figlio ha messo il verde: il pulsante «Invia la richiesta» è rimasto
   arancione (Euromarmi, 15/9/26). Dichiarate dove stanno i token, funzionano.
   ============================================================ */
body.bt-theme, .bt-page {
  --red:            var(--bt-accent);
  --red-dark:       var(--bt-accent-2, var(--bt-ink-2));
  --dark:           var(--bt-ink);
  --text:           var(--bt-body-ink);
  --muted:          var(--bt-muted);
  --border:         var(--bt-line);
  --line:           var(--bt-line);
  --line-strong:    var(--bt-line-btn);
  --bg:             var(--bt-ground);
  --page-bg:        var(--bt-card);
  --white:          var(--bt-card);
  --radius:         var(--bt-r-sm);
  --shadow:         var(--bt-shadow);
  --shadow-sm:      var(--bt-shadow);
  --container-max:  var(--bt-max);
  --font-display:   var(--bt-font-display);
  --font-body-home: var(--bt-font-body);
  /* --brass, --brass-soft, --petrol: colori decorativi del progetto di
     partenza, senza un token corrispondente. Restano quelli finché le poche
     regole che li usano non passano ai token del tema. */
}

/* ============================================================
   EREDITATE DAL VECCHIO FOGLIO — l'aspetto che stava in style.css
   ============================================================
   Colori, caratteri, bordi, ombre e spaziatura del testo che prima stavano
   nella base comune. Stanno in testa al tema, prima delle sue regole vere:
   così il tema continua a vincere su di esse, esattamente come prima.
   Da riassorbire man mano nel tema vero, che comincia più sotto.
   ============================================================ */

html { font-size: 112%; }

@font-face { font-family: Saira; font-style: normal; font-weight: 300 800; font-display: optional; src: url("/assets/fonts/saira-variable.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: optional; src: url("/assets/fonts/ibm-plex-mono.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url("/assets/fonts/plex-mono-600.woff2") format("woff2"); }

@font-face { font-family: "Saira Condensed Disp"; font-style: normal; font-weight: 800; font-display: optional; src: url("/assets/fonts/saira-condensed-disp-800.woff2") format("woff2"); }

@font-face { font-family: "Saira Condensed Disp"; font-style: normal; font-weight: 900; font-display: optional; src: url("/assets/fonts/saira-condensed-disp-900.woff2") format("woff2"); }

@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400 600; font-display: optional; src: url("/assets/fonts/plex-sans.woff2") format("woff2"); }
body { font-family: Saira, sans-serif; background: var(--page-bg); color: var(--text); font-size: 16px; line-height: 1.6; }
.skip-link { background: var(--red); color: var(--bt-accent-ink); border-radius: 0px 0px 8px; font-weight: 700; text-decoration: none; }
.header { background: var(--dark); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 12px; }
.logo-dot { border-radius: 50%; background: linear-gradient(135deg, var(--red), #e74c3c); }
.logo-text { color: rgb(255, 255, 255); font-size: 1.55rem; letter-spacing: -0.3px; }
.header-nav-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.15s, opacity 0.15s; border-bottom: 1.5px solid transparent; }
.header-nav-toggle { background: none; border-width: medium; border-style: none; border-color: currentcolor; color: rgb(255, 255, 255); border-radius: 5px; font-size: 1.15em; }
.account-login-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); border-radius: 5px; font-family: inherit; font-size: 1.15rem; transition: border-color 0.15s, background 0.15s; }
.account-trigger { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); border-radius: 5px; font-family: inherit; font-size: 0.85rem; transition: background 0.15s; }
.account-dot { border-radius: 50%; background: rgb(34, 197, 94); }
.account-dropdown { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.account-dropdown button { text-align: left; background: none; border-width: medium; border-style: none; border-color: currentcolor; font-family: inherit; font-size: 0.88rem; color: var(--text); transition: background 0.15s; }
.account-dropdown button + button { border-top: 1px solid var(--border); }
.access-balloon { background: var(--dark); color: rgb(255, 255, 255); font-family: inherit; font-weight: 600; font-size: 0.76rem; letter-spacing: 0.02em; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.45) 0px 10px 26px -6px; opacity: 0; }
/* Il verde di prima (#22c55e) è chiaro: la spunta bianca ci stava sopra a
   2,28. Il verde del tema (--bt-ok) è quello giusto per una cosa che porta
   qualcosa di bianco addosso: 5,35. Gli altri pallini verdi restano quelli —
   sopra non ci va nessun disegno. */
.access-balloon .ab-tick { border-radius: 50%; background: var(--bt-ok); }
.steps-nav { background: var(--paper-2, var(--bg)); border-bottom: 1px solid var(--border); }
.step-item { font-family: var(--font-body-home); font-size: 0.85rem; font-weight: 500; color: var(--text); }
.step-num { border-radius: 50%; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; border: 1.5px solid var(--border); color: var(--text); background: var(--white); transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.step-sep { background: var(--border); }
.step-section.active { animation: 0.25s ease 0s 1 normal none running fadeIn; }
.step-title { font-size: 1.4rem; font-weight: 700; }
.step-sub { color: var(--muted); font-size: 0.9rem; }
#step2 .step-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; text-transform: uppercase; }
#step2 .step-sub { font-family: var(--font-body-home); opacity: 0.85; font-size: 0.94rem; }
#step2 .step-panel { background: var(--white); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
#step2 .cfg-main > .step-panel { transition: border-color 0.15s, background-color 0.15s; }
.featured-arrow { border-radius: 50%; border: 1.5px solid var(--border); background: var(--white); color: var(--text); font-size: 1.1rem; transition: border-color 0.15s, color 0.15s, opacity 0.15s; }
.featured-arrow:disabled { opacity: 0.35; }
.featured-track { scrollbar-width: none; }
.featured-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s, transform 0.15s; }
.featured-card-link { text-decoration: none; color: inherit; }
.featured-card-title { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.featured-card-price { font-family: var(--font-mono); font-weight: 500; font-size: 1.02rem; color: var(--red-dark); }
.back-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; color: var(--text); font-family: var(--font-body-home); font-size: 0.85rem; font-weight: 500; opacity: 0.75; transition: opacity 0.15s, color 0.15s; }
.selected-color-card { background: var(--white); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.sc-badge { border-radius: 50%; background: var(--dark); color: var(--brass-soft); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0px; text-align: center; }
.sc-brand { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.sc-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.sc-code { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.75; }
.sc-change { font-size: 0.82rem; text-decoration: none; color: var(--red); font-weight: 600; background: none; border-width: medium; border-style: none; border-color: currentcolor; font-family: inherit; }
.qty-label { font-weight: 600; font-size: 0.82rem; opacity: 0.85; }
#step2 .qty-control { border: 1.5px solid var(--border); border-radius: 5px; }
#step2 .qty-btn { background: var(--bg); border-width: medium; border-style: none; border-color: currentcolor; font-size: 1.4rem; color: var(--text); font-family: inherit; transition: background 0.15s; }
#step2 .qty-input { border-top-width: medium; border-bottom-width: medium; border-top-style: none; border-bottom-style: none; border-top-color: currentcolor; border-bottom-color: currentcolor; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; background: var(--white); color: var(--text); outline: none; }
.price-summary { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.price-row { font-size: 0.88rem; color: var(--text); border-bottom: 1px solid var(--border); font-family: var(--font-body-home); }
.price-row span:last-child { font-family: var(--font-mono); font-weight: 600; }
.price-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.total-row { font-weight: 700; font-size: 1.05rem; }
#step2 .btn-primary { border-radius: 5px; font-size: 1.05rem; font-weight: 600; }
.btn-primary { background: var(--red); color: var(--bt-accent-ink); border-width: medium; border-style: none; border-color: currentcolor; border-radius: 5px; font-family: inherit; font-size: 1rem; font-weight: 600; transition: background 0.15s; }
.btn-primary:disabled { background: rgb(229, 231, 235); color: rgb(156, 163, 175); }
.btn-secondary { background: transparent; color: var(--text); border: 2px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 0.9rem; font-weight: 500; transition: border-color 0.15s; }
.order-recap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.88rem; color: var(--text); }
.cart-page-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.cart-page-panel .order-recap, .cart-page-summary .order-recap { background: none; border-width: medium; border-style: none; border-color: currentcolor; font-size: inherit; color: inherit; }
.payment-opt input[type="radio"] { accent-color: var(--red); }
.payment-card { border-radius: 6px; }
.payment-info strong { font-size: 0.94rem; }
.payment-info span { font-size: 0.82rem; }
.cart-page-summary { background: var(--dark); color: var(--brass-soft); border-radius: 6px; box-shadow: var(--shadow); }
.cart-summary-heading { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; opacity: 0.75; color: rgba(243, 238, 224, 0.85); }
.cart-page-summary .discount-code-wrap input { background: rgba(243, 238, 224, 0.06); border-color: rgba(243, 238, 224, 0.25); color: rgb(243, 238, 224); }
.cart-page-summary .withdrawal-link { color: var(--brass-soft); }
.cart-page-summary .privacy-check { background: rgba(243, 238, 224, 0.08); border-color: rgba(243, 238, 224, 0.2); }
.cart-page-summary .privacy-label { color: rgba(243, 238, 224, 0.9); }
.cart-page-summary .privacy-label a { color: var(--brass-soft); }
.form-group label { font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.form-group input, .form-group textarea { border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.15s; color: var(--text); background: var(--white); }
.payment-card { border: 2px solid var(--border); border-radius: var(--radius); background: var(--white); transition: border-color 0.15s; }
.payment-opt input:checked + .payment-card { border-color: var(--red); background: rgb(254, 242, 242); }
.payment-logo { font-size: 1.5rem; }
.payment-info strong { font-size: 0.9rem; }
.payment-info span { font-size: 0.78rem; color: var(--muted); }
.confirm-icon { font-size: 3.4rem; color: var(--red); }
.confirm-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); text-transform: uppercase; font-weight: 800; }
.confirm-sub { color: var(--muted); }
.discount-code-wrap input { border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.15s; color: var(--text); background: var(--white); }
.discount-msg { font-size: 0.82rem; }
.pickup-info-box { background: rgb(240, 253, 244); border: 1px solid rgb(134, 239, 172); border-radius: var(--radius); font-size: 0.88rem; line-height: 1.7; }
.footer { background: var(--dark); color: rgba(255, 255, 255, 0.5); font-size: 0.78rem; text-align: center; }
.footer-grid { text-align: left; }
.footer-brand .logo-text { font-size: 1.2rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); opacity: 0.9; }
.footer-col a { font-size: 0.87rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); text-align: left; }
.pay-badge { background: var(--white); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
.footer a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.cfg-summary { background: var(--dark); color: var(--brass-soft); border-radius: 6px; box-shadow: var(--shadow); }
.product-type-card, .base-card, .speed-card { text-align: left; background: var(--white); border: 1.5px solid var(--border); border-radius: 6px; transition: border-color 0.15s, background-color 0.15s, transform 0.1s; }
.product-type-card .check, .base-card .check, .speed-card .check { border-radius: 50%; background: var(--red); color: var(--bt-accent-ink); opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.pt-icon, .base-icon, .speed-icon { color: var(--red); }
.pt-name, .base-name { font-family: var(--font-body-home); font-weight: 700; font-size: 1.02rem; }
.pt-desc, .base-desc { font-size: 0.85rem; opacity: 0.8; }
.unit-qty-info { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; font-weight: 500; }
.withdrawal-link { color: var(--red); font-weight: 600; text-decoration: underline dotted; }
.privacy-check { background: rgb(248, 249, 250); border: 1.5px solid var(--border); border-radius: 8px; }
.privacy-label { font-size: 0.85rem; line-height: 1.5; }
.privacy-label input { accent-color: var(--red); }
.privacy-label a { color: var(--red); }
.checkout-auth-banner { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; color: var(--text); }
.checkout-register-toggle { background: var(--bt-ground); border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }   /* era #F8F9FA scritto a mano: il pannello non poteva cambiarlo (4/10/26) */
.modal-overlay { background: rgba(23, 22, 28, 0.55); }
.modal { background: var(--white); border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.modal-close { border-width: medium; border-style: none; border-color: currentcolor; background: var(--bg); border-radius: 50%; font-size: 1.2rem; color: var(--muted); opacity: 0.6; line-height: 1; transition: background 0.15s, opacity 0.15s; }
.modal-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; }
.auth-err { color: rgb(239, 68, 68); font-size: 0.82rem; }
.auth-modal-links { border-top: 1px solid var(--border); font-size: 0.85rem; }
.auth-modal-links a { color: var(--red); text-decoration: none; }
.auth-divider { color: var(--muted); font-size: 0.8rem; }
.account-type-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.account-type-card { border: 2px solid var(--border); border-radius: var(--radius); background: var(--white); text-align: center; transition: 0.15s; }
.account-type-card input { opacity: 0; }
.account-type-card.active { border-color: var(--red); background: rgb(254, 242, 242); }
.atc-icon { font-size: 1.6rem; color: var(--red); }
.atc-label { font-weight: 700; font-size: 0.95rem; }
.edit-mode-banner { border: 2px solid var(--red); border-radius: var(--radius); background: rgb(254, 242, 242); font-weight: 700; font-size: 0.88rem; line-height: 1.4; color: var(--text); }
.account-company-fields { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.account-hint { font-size: 0.76rem; color: var(--muted); }
.account-shipping-fields { background: var(--white); border: 1px solid var(--border); border-radius: 8px; }
.account-logout-btn { background: none; border: 1.5px solid var(--border); border-radius: 5px; color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 600; transition: border-color 0.15s, color 0.15s; }
.account-title { font-size: 1.6rem; }
.account-subtitle { color: var(--muted); font-size: 0.9rem; }
.account-nav-item { text-align: left; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text); background: none; border-width: medium medium medium 3px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor transparent; border-radius: 8px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.account-nav-item svg { opacity: 0.65; }
.account-nav-item.active { color: var(--red-dark); background: var(--paper-2); border-left-color: var(--red); }
.account-nav-item.active svg { opacity: 1; }
.account-nav-item-danger { color: var(--red-dark); }
.account-nav-item-danger svg { color: var(--red-dark); }
.account-nav-sep { background: var(--border); }
.account-pane-subtitle { font-size: 1.05rem; }
.save-confirm { color: rgb(22, 163, 74); font-size: 0.85rem; }
.account-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.account-stat-lbl { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.account-stat-num { font-family: var(--font-mono); font-weight: 600; font-size: 1.5rem; }
.account-stat-num-sm { font-family: inherit; font-size: 1rem; }
.account-stat-icon { color: var(--brass); }
.danger-zone { border: 1.5px solid var(--red); border-radius: var(--radius); }
.danger-zone-title { color: var(--text); }
.danger-zone-text { color: var(--text); font-size: 0.88rem; line-height: 1.5; }
.btn-danger-outline { border-color: rgb(239, 68, 68); color: rgb(239, 68, 68); }
.btn-danger-solid { background: rgb(239, 68, 68); }
#deleteReasonOtherWrap textarea { font-family: inherit; font-size: 0.9rem; border: 1px solid var(--border); border-radius: 8px; }
.account-orders-empty { color: var(--muted); font-size: 0.9rem; }
.global-notice { text-align: center; font-size: 0.88rem; font-weight: 500; }
.register-success { text-align: center; }
.register-success .confirm-icon { color: rgb(22, 163, 74); }
.cart-icon-btn { border-radius: 5px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); font-size: 1.25rem; transition: background 0.15s; }
/* Niente anello attorno al contatore (7/9/26, richiesta di Marco): quei
   `2px solid` scuri servivano a staccarlo da un'intestazione scura, e su
   fondo chiaro si vedono come un bordo nero addosso al numero. */
.cart-badge { border-radius: 5px; background: var(--red); color: var(--bt-accent-ink); font-size: 0.8rem; font-weight: 700; line-height: 1; border: 0; }
.cart-sidebar-overlay { background: rgba(23, 22, 28, 0.55); }
.cart-sidebar { background: var(--white); box-shadow: var(--shadow); border-left: 1px solid var(--border); }
.cart-sidebar-header { border-bottom: 1px solid var(--border); }
.cart-sidebar-header span { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.cart-empty { text-align: center; color: var(--muted); font-size: 0.88rem; }
.cart-dropdown-footer { border-top: 1px solid var(--border); background: var(--bg); }
/* «Subtotale» scritto normale (12/10/26): questa regola vecchia vale per ogni tema, e lo metteva in maiuscolo spaziato */
.cart-subtotal-row { font-size: 0.82rem; color: var(--muted); }
.cart-subtotal-row strong { font-family: var(--font-mono); font-size: 1.25rem; color: var(--text); text-transform: none; letter-spacing: 0px; }
.cart-cross-sell { border-top: 1px solid var(--border); }
.cart-cross-sell-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); }
.confirm-modal { text-align: center; }
.confirm-modal-msg { font-size: 0.95rem; color: var(--text); line-height: 1.5; }
.cross-sell-peek-hint { font-size: 0.8rem; font-weight: 600; color: var(--text); transition: opacity 0.2s; }
.cross-sell-offers { scrollbar-width: none; }
.cs-nav-btn { border-radius: 50%; border: 1.5px solid var(--border); background: var(--white); color: var(--text); box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 8px; transition: opacity 0.15s, background 0.15s; }
.cross-sell-modal .btn-primary, .cross-sell-modal .btn-secondary { border-radius: 5px; }
.btn-sm { font-size: 0.85rem; }
body.pd-page { background: var(--white); }
.page-banner { text-align: center; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.page-banner-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: rgb(255, 255, 255); font-size: 2.2rem; }
.page-banner-subtitle { color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; line-height: 1.5; }
.page-banner-breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.page-banner-breadcrumb a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.page-banner-breadcrumb span { color: rgb(255, 255, 255); }
.product-title { font-size: 1.9rem; }
.product-short-desc { color: var(--text); font-size: 1rem; line-height: 1.5; }
.product-price { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; }
.product-price-final { color: var(--red-dark); }
.product-info .product-title { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; color: var(--dark); }
.product-buy-row .qty-control { border: 1.5px solid var(--border); border-radius: 5px; }
.product-buy-row .qty-btn { background: var(--bg); border-width: medium; border-style: none; border-color: currentcolor; font-size: 1.4rem; color: var(--text); font-family: inherit; transition: background 0.15s; }
.product-buy-row .qty-input { border-top-width: medium; border-bottom-width: medium; border-top-style: none; border-bottom-style: none; border-top-color: currentcolor; border-bottom-color: currentcolor; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); text-align: center; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; background: var(--white); color: var(--text); outline: none; }
.product-description-body { line-height: 1.7; font-size: 0.95rem; }
.product-description-body a { color: var(--red); }
.product-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); transition: box-shadow 0.15s; }
.product-contact-link { font-size: 0.83rem; color: var(--red); font-weight: 600; text-decoration: underline; }
.lightbox-overlay { background: rgba(17, 24, 39, 0.92); }
.lightbox-img { border-radius: 6px; }
.lightbox-close { background: none; border-width: medium; border-style: none; border-color: currentcolor; color: rgb(255, 255, 255); font-size: 2rem; line-height: 1; }
.lightbox-nav { background: rgba(255, 255, 255, 0.12); border-width: medium; border-style: none; border-color: currentcolor; color: rgb(255, 255, 255); border-radius: 50%; font-size: 1.8rem; line-height: 1; }
.shop-filters { background: var(--white); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.filter-group { border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.filter-group-label { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass); }
.filter-group input[type="text"], .filter-group input[type="number"], .filter-select { border: 1.5px solid var(--line-strong); border-radius: 4px; font-size: 0.92rem; font-family: inherit; color: var(--text); background: var(--white); }
.filter-apply-btn { border-radius: 5px; }
.shop-view-toggle { background: var(--paper-2); border-radius: 5px; }
.view-toggle-btn { border-width: medium; border-style: none; border-color: currentcolor; border-radius: 5px; background: none; color: var(--text); opacity: 0.55; }
.whatsapp-float { border-radius: 50%; background: rgb(37, 211, 102); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 20px; transition: transform 0.15s, background 0.15s; }
.mobile-tabbar { background: var(--dark); box-shadow: rgba(0, 0, 0, 0.28) 0px -2px 18px; }
.tabbar-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; text-decoration: none; color: rgba(255, 255, 255, 0.62); font-family: inherit; }
.tabbar-icon { font-size: 1.32rem; line-height: 1; }
.tabbar-label { font-size: 0.66rem; font-weight: 600; }
.tabbar-btn.is-active { color: rgb(255, 255, 255); }
.tabbar-badge { background: var(--red); color: var(--bt-accent-ink); font-size: 0.68rem; font-weight: 700; border-radius: 4px; border: 0; }
.tabbar-whatsapp .tabbar-icon { color: rgb(37, 211, 102); }
.tabbar-account-dot { border-radius: 50%; background: rgb(34, 197, 94); border: 2px solid var(--dark); }
.tc-consent-banner { background: var(--dark); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px -4px 24px; transition: transform 0.3s; }
.tc-consent-close { border-radius: 50%; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; color: rgba(255, 255, 255, 0.75); transition: background 0.15s, color 0.15s; }
.tc-consent-text { font-size: 0.87rem; line-height: 1.5; color: rgb(255, 255, 255); }
.tc-consent-btn { border-radius: 5px; font-family: inherit; font-size: 0.9rem; font-weight: 600; transition: opacity 0.15s, transform 0.1s; }
/* la scritta sull'accento del tema, non il bianco (12/10/26: «Accetta» e «Vai al contenuto» erano a 3,1 sull'arancio) */
.tc-consent-btn-accept { background: var(--red); color: var(--bt-accent-ink); border: 2px solid var(--red); }
.tc-consent-btn-reject { background: transparent; color: rgb(255, 255, 255); border: 2px solid rgba(255, 255, 255, 0.5); }
.tc-consent-btn-customize { background: transparent; color: rgb(255, 255, 255); border: 2px solid transparent; text-decoration: underline; }
.tc-consent-prefs-btn { border-radius: 50%; background: var(--dark); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 20px; transition: transform 0.15s; }
.tc-a11y-btn { border-radius: 50%; background: var(--dark); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 20px; transition: transform 0.15s; }
.back-to-top { border-radius: 50%; background: var(--dark); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 20px; transition: transform 0.15s; }
.tc-a11y-feature-list { border: 1px solid var(--border); border-radius: var(--radius); }
.tc-a11y-feature-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.tc-a11y-feature-icon { border-radius: 8px; background: var(--bg); color: var(--text); }
.tc-a11y-feature-text strong { font-size: 0.9rem; }
.tc-a11y-feature-text span { font-size: 0.78rem; color: var(--text); }
.tc-a11y-statement-link { font-size: 0.82rem; text-align: center; }
.tc-a11y-statement-link a { color: var(--red); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }

}
.tc-consent-modal-desc { font-size: 0.87rem; line-height: 1.55; color: var(--text); }
.tc-consent-cat-list { border: 1px solid var(--border); border-radius: var(--radius); }
.tc-consent-cat-row { background: var(--bg); }
.tc-consent-cat-list > .tc-consent-cat-row:not(:first-child) { border-top: 1px solid var(--border); }
.tc-consent-cat-label { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.tc-consent-cat-locked { font-size: 0.8rem; font-weight: 700; color: rgb(22, 101, 52); }
.tc-consent-cat-chevron { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; color: var(--text); transition: transform 0.15s; }
.tc-consent-cat-detail { background: var(--bg); }
.tc-consent-cat-detail-empty { font-size: 0.82rem; color: var(--text); }
.tc-consent-service-name { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.tc-consent-service-purpose { font-size: 0.8rem; line-height: 1.5; color: var(--text); }
.tc-consent-service-meta { font-size: 0.74rem; color: var(--text); }
.tc-consent-switch input { opacity: 0; }
.tc-consent-switch-slider { background: rgb(203, 213, 225); border-radius: 999px; transition: background 0.15s; }
.tc-consent-modal-actions .tc-consent-btn-reject, .tc-consent-modal-actions .tc-consent-btn-save { background: var(--bg); color: var(--text); border: 2px solid var(--border); }
.tc-consent-modal-footer { border-top: 1px solid var(--border); text-align: center; font-size: 0.82rem; }
.tc-consent-modal-footer a { color: var(--red); text-decoration: none; }

@media (max-width: 768px) {
html { font-size: 100%; }
.page-banner-title { font-size: 1.5rem; }
.page-banner-subtitle { font-size: 0.92rem; }
.product-info .product-title { font-size: 1.5rem; }
.header-nav { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; background: var(--dark); box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 24px; }
.shop-filters-toggle { border: 1px solid var(--border); border-radius: 5px; background: var(--white); color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 600; }
.shop-filters-overlay { background: rgba(17, 24, 39, 0.5); }
.shop-filters { border-radius: 0px; transition: transform 0.2s; }

}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
.header-nav { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; background: var(--dark); box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 24px; }

}

@media (min-width: 769px) and (max-width: 1366px) and (pointer: coarse) {
.shop-filters-toggle { border: 1px solid var(--border); border-radius: 5px; background: var(--white); color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 600; }
.shop-filters-overlay { background: rgba(17, 24, 39, 0.5); }
.shop-filters { border-radius: 0px; transition: transform 0.2s; }

}

@media (max-width: 600px) {
input, select, textarea { font-size: 16px; }
.logo-text { font-size: 1.2rem; }
.account-login-btn { font-size: 1.05rem; }
.account-register-btn { font-size: 0.78rem; }
.cart-icon-btn { font-size: 1.1rem; }
.lightbox-nav { font-size: 1.4rem; }
.account-title { font-size: 1.3rem; }
.account-logout-btn { font-size: 0.78rem; }
.account-nav-item { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-bottom: 3px solid transparent; border-radius: 8px 8px 0px 0px; }
.account-nav-item.active { border-left-color: transparent; border-bottom-color: var(--red); }
.account-stat-num { font-size: 1.2rem; }
.cross-sell-modal { border-radius: 0px; }
.auth-modal { border-radius: 0px; }
.step-label { font-size: 0.67rem; }
.steps-nav .container { scrollbar-width: none; }
.step-sep { font-size: 0.85rem; }
.step-num { font-size: 0.7rem; }
.featured-arrow { font-size: 1rem; }
.featured-card-title { font-size: 0.84rem; }
.featured-card-price { font-size: 0.92rem; }
#step2 .step-title { font-size: 1.35rem; }
#step2 .step-sub { font-size: 0.85rem; }
.sc-badge { font-size: 0.6rem; }
.sc-name { font-size: 1.1rem; }
.sc-change { font-size: 0.78rem; }
.price-row { font-size: 0.85rem; }
.total-row { font-size: 0.95rem; }
.btn-primary { font-size: 0.95rem; }
.order-recap { font-size: 0.85rem; }
.form-group label { font-size: 0.82rem; }
.payment-logo { font-size: 1.2rem; }
.payment-info strong { font-size: 0.85rem; }
.payment-info span { font-size: 0.73rem; }
.confirm-icon { font-size: 3rem; }
.confirm-title { font-size: 1.3rem; }
.privacy-label { font-size: 0.83rem; }

}

@media (max-width: 375px) {
.back-btn { font-size: 0.8rem; }

}

/* ============================================================
   TEMA BENTO — da qui in giù il tema vero
   ============================================================ */

/* ============================================================
   addiplatform — TEMA BENTO
   Foglio di stile del sito pubblico. Nasce pulito: non dipende
   da style.css e non lo estende.

   Riproduce la bozza approvata (bozze/tema-bento/Main.dc.html):
   le misure qui dentro sono quelle della bozza, non arrotondate.

   COME SI VESTE UN CLIENTE
   Si copia questo file, si cambiano SOLO i valori nel blocco
   :root qui sotto e si lascia stare tutto il resto.

   NOMI DELLE CLASSI
   Tutte prefissate "bt-", finché convivono le pagine non ancora
   convertite. Quando l'ultima sarà passata, style.css si cancella.
   ============================================================ */

/* @font-face generati da Google Fonts e serviti da noi: niente richieste a
   fonts.gstatic.com (il sito ha banner cookie e registro consensi, un font
   remoto sarebbe un dato trasferito a terzi senza consenso). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/BricolageGrotesque-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/BricolageGrotesque-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/BricolageGrotesque-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/BricolageGrotesque-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- I VALORI DA CAMBIARE PER OGNI CLIENTE ---- */
  --bt-accent:       #FF5A1F;
  /* la scritta sui pulsanti d'accento: il nero del tema (12/10/26, Marco: «vai con il nero»). Bianco sull'arancio
     faceva 3,1 a 1 (serve 4,5): «Conferma ordine», «Vai al carrello» si leggevano male. Nero: 6,1 */
  --bt-accent-ink:   #0F1115;
  --bt-accent-wash:  #FFEDE5;
  /* i link del piè di pagina (che è scuro) col mouse sopra: l'accento finché si legge sullo scuro. Un tema con l'accento
     scuro lo dichiara chiaro (5/10/26: su Euromarmi, accento nero, i link sparivano; su esempio-cliente verde su nero) */
  --bt-piede-sopra:  var(--bt-accent);
  --bt-ground:       #F4F5F7;
  --bt-card:         #FFFFFF;
  --bt-ink:          #0F1115;
  --bt-r-lg:         26px;
  --bt-r:            22px;
  --bt-r-sm:         14px;
  --bt-font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --bt-font-body:    'Onest', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ---- IL RESTO: si tocca solo se serve davvero ---- */
  --bt-body-ink:   #3A3F49;
  --bt-muted:      #6B7280;
  --bt-line:       #E3E5E9;
  --bt-line-btn:   #DDE0E5;
  --bt-line-soft:  #EDEFF2;
  --bt-ink-2:      #191C21;
  --bt-on-dark:    #A8ADB6;
  --bt-ok:         #1E7A44;
  --bt-danger:     #B4341F;
  --bt-pill:       99px;
  --bt-pad:        40px;
  --bt-gap:        14px;
  --bt-row:        132px;
  --bt-shadow:     0 4px 20px rgba(15, 17, 21, .07);

  /* Segnaposto immagine: gli stessi della bozza. Un'immagine che manca deve
     restare un bel riquadro colorato, non un rettangolo grigio a righe. */
  --bt-ph-1: radial-gradient(120% 100% at 20% 10%, #FFE4D6 0%, #FFC7A8 45%, #F09A6E 100%);
  --bt-ph-2: radial-gradient(120% 100% at 80% 20%, #DCE4F5 0%, #B9C7E8 55%, #8FA3D4 100%);
  --bt-ph-3: radial-gradient(120% 120% at 30% 80%, #E4EFE2 0%, #C0D8BC 50%, #98BC93 100%);
  --bt-ph-4: radial-gradient(120% 120% at 70% 30%, #F3E6F7 0%, #DCC8E6 55%, #BFA3CE 100%);
  --bt-ph-5: radial-gradient(120% 120% at 40% 20%, #FFF0D6 0%, #F7DDA8 55%, #E5BF72 100%);
}

/* ---------- reset, solo dentro il tema ---------- */
.bt-page, .bt-page * { box-sizing: border-box; }
.bt-page {
  margin: 0;
  background: var(--bt-ground);
  color: var(--bt-ink);
  font-family: var(--bt-font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 64px;
  -webkit-font-smoothing: antialiased;
}
.bt-page h1, .bt-page h2, .bt-page h3,
.bt-page p, .bt-page figure, .bt-page blockquote { margin: 0; }
.bt-page a { color: inherit; text-decoration: none; }
.bt-page img { max-width: 100%; display: block; }
/* Il reset dei pulsanti nudi NON tocca quelli già vestiti (7/9/26).
   `.bt-page button` pesa 0,1,1 e `.bt-btn` 0,1,0: il reset vinceva sempre, e
   ogni <button class="bt-btn"> restava senza fianchi e senza bordo — mentre lo
   stesso pulsante scritto come <a> stava benissimo. Si vedeva su «Crea un
   account» e su «Filtri». Non era la prima volta: «Applica filtri» e il
   pulsante dello sconto erano già stati rattoppati uno per uno
   (`.bt-page .filter-apply-btn`, `.bt-page .bt-discount .bt-btn`), che è il
   modo di non accorgersi mai della causa. */
.bt-page button:not(.bt-btn) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Un pulsante vestito prende dal reset solo quello che .bt-btn non dichiara:
   la famiglia del carattere (.bt-btn dice la misura e il peso, non il nome) e
   la manina. Tutto il resto è suo. */
.bt-page button.bt-btn, .bt-card button.bt-btn { font-family: inherit; cursor: pointer; }
.bt-page :focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; border-radius: 4px; }
.bt-hidden { display: none !important; }

/* I fondi segnaposto stanno dopo .bt-box apposta: devono coprirne il bianco. */
.bt-page .bt-ph-1, .bt-card-media.bt-ph-1 { background: var(--bt-ph-1); }
.bt-page .bt-ph-2, .bt-card-media.bt-ph-2 { background: var(--bt-ph-2); }
.bt-page .bt-ph-3, .bt-card-media.bt-ph-3 { background: var(--bt-ph-3); }
.bt-page .bt-ph-4, .bt-card-media.bt-ph-4 { background: var(--bt-ph-4); }
.bt-page .bt-ph-5, .bt-card-media.bt-ph-5 { background: var(--bt-ph-5); }

/* ---------- pezzi comuni ---------- */
.bt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 30px; border-radius: var(--bt-pill);
  font-size: 16px; font-weight: 700; white-space: nowrap;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.bt-btn:active { transform: translateY(1px); }
.bt-btn--primary { background: var(--bt-accent); color: var(--bt-accent-ink); }
/* sotto il mouse: l'accento del tema scurito (12/10/26). Era l'arancio di Bento scritto a mano, e su Euromarmi (nero) e su
   esempio-cliente (verde) il pulsante diventava arancione appena ci passava il mouse. Un tema che ha il suo colore lo dà
   con --bt-accent-2 (Euromarmi). */
.bt-btn--primary:hover { background: var(--bt-accent-2, color-mix(in srgb, var(--bt-accent) 88%, var(--bt-ink))); }
.bt-btn--ghost { border: 1.5px solid var(--bt-line-btn); }
.bt-btn--ghost:hover { border-color: var(--bt-ink); }
.bt-btn--onDarkGhost { border: 1.5px solid rgba(255, 255, 255, .28); color: #FFF; }
.bt-btn--onDarkGhost:hover { border-color: rgba(255, 255, 255, .55); }

.bt-pill {
  align-self: flex-start;
  /* la scritta è l'accento scurito con l'inchiostro (5/10/26): l'arancione puro sul fondo pesca faceva 2,75 di
     contrasto, una scritta ne vuole 4,5 (così 5,6 su Bento) — e vale anche per i temi figli coi loro colori */
  background: var(--bt-accent-wash); color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink));
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--bt-pill);
}

/* ---------- griglia bento ---------- */
.bt-bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--bt-row); gap: var(--bt-gap);
  padding: 8px var(--bt-pad) 0;
}
.bt-box { border-radius: var(--bt-r-lg); background: var(--bt-card); overflow: hidden; }
.bt-box--dark { background: var(--bt-ink); color: #FFF; }

.bt-hero {
  grid-column: span 7; grid-row: span 3; padding: 44px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bt-hero-top { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bt-hero h1 {
  font-family: var(--bt-font-display);
  font-size: 62px; font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  max-width: 15ch; text-wrap: balance;
}
.bt-hero p { font-size: 17.5px; line-height: 1.55; max-width: 46ch; color: var(--bt-body-ink); }
.bt-hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.bt-hero-img { grid-column: span 5; grid-row: span 3; }
.bt-hero-img img { width: 100%; height: 100%; object-fit: cover; }

.bt-tile { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.bt-tile--3 { grid-column: span 3; grid-row: span 2; }
.bt-tile--4 { grid-column: span 4; grid-row: span 2; }
.bt-tile--5 { grid-column: span 5; grid-row: span 2; }
.bt-tile > svg { width: 26px; height: 26px; flex-shrink: 0; }
.bt-tile-num {
  font-family: var(--bt-font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px;
}
.bt-tile-txt { font-size: 14.5px; line-height: 1.45; }
.bt-box--dark .bt-tile-txt { color: var(--bt-on-dark); }
.bt-tile-label { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bt-muted); }

/* categorie dentro il bento */
.bt-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-grow: 1; min-height: 0; }
.bt-cat {
  position: relative; overflow: hidden; border-radius: 16px;
  display: flex; align-items: flex-end; padding: 12px;
  font-size: 14.5px; font-weight: 700; min-height: 0;
}
.bt-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-cat span { position: relative; z-index: 2; }
/* Il velo chiaro serve solo quando c'è una foto vera: tiene leggibile il nome
   in scuro senza cambiargli colore, come nella bozza. Sui segnaposto colorati
   non c'è foto e non serve. */
.bt-cat:has(img)::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.88) 100%);
}
.bt-cat--all {
  background: var(--bt-ground);
  align-items: center; justify-content: center; gap: 6px;
}
.bt-cat--all svg { width: 15px; height: 15px; }

/* Quando la recensione non c'è (non ancora scritta dal pannello) le categorie
   prendono il suo posto: altrimenti la seconda riga resta mezza vuota, che è
   proprio il caso di un'installazione appena fatta. */
.bt-bento:has(#testimonialSection.bt-hidden) .bt-tile--4 { grid-column: span 9; }
.bt-bento:has(#testimonialSection.bt-hidden) .bt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bt-bento:has(#testimonialSection.bt-hidden):has(#btCategoriesTile.bt-hidden) .bt-tile--3 { grid-column: span 12; }

/* recensione */
.bt-quote { justify-content: space-between; }
.bt-stars { display: flex; gap: 2px; }
.bt-stars svg { width: 17px; height: 17px; }
.bt-quote blockquote {
  font-family: var(--bt-font-display);
  font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em;
}
.bt-quote cite { font-size: 14.5px; font-weight: 700; font-style: normal; color: var(--bt-muted); }

/* ---------- sezioni sotto il bento ---------- */
.bt-section { padding: 52px var(--bt-pad) 0; }
.bt-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.bt-section-head h2 {
  font-family: var(--bt-font-display);
  font-size: 38px; font-weight: 800; letter-spacing: -.03em;
}
.bt-arrows { display: flex; gap: 10px; }
.bt-arrow {
  width: 46px; height: 46px; border-radius: var(--bt-pill);
  background: var(--bt-card); border: 1px solid var(--bt-line);
  display: flex; align-items: center; justify-content: center;
}
.bt-arrow svg { width: 18px; height: 18px; }
.bt-arrow--dark { background: var(--bt-ink); border-color: var(--bt-ink); color: #FFF; }
.bt-page .featured-arrow {
  width: 46px; height: 46px; border-radius: var(--bt-pill);
  background: var(--bt-card); border: 1px solid var(--bt-line); color: var(--bt-ink);
  display: flex; align-items: center; justify-content: center; font-size: 0;
}
.bt-page .featured-arrow.bt-arrow--dark { background: var(--bt-ink); border-color: var(--bt-ink); color: #FFF; }
.bt-arrow:disabled { opacity: .35; cursor: default; }

/* schede prodotto */
.bt-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* ---------- fascia finale ---------- */
.bt-cta {
  background: var(--bt-ink); color: #FFF; border-radius: 30px; padding: 52px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
}
.bt-cta-copy { display: flex; flex-direction: column; gap: 16px; }
.bt-cta h2 {
  font-family: var(--bt-font-display);
  font-size: 42px; font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance;
}
.bt-cta p { color: var(--bt-on-dark); font-size: 17px; line-height: 1.55; max-width: 44ch; }
.bt-cta-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.bt-cta-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bt-cta-tile { background: var(--bt-ink-2); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.bt-cta-tile b { font-family: var(--bt-font-display); font-size: 27px; font-weight: 800; }
.bt-cta-tile span { color: var(--bt-on-dark); font-size: 13.5px; }
.bt-cta-tile--accent { background: var(--bt-accent); }
/* la scritta piena sull'accento (5/10/26): all'85% di bianco sull'arancione faceva 2,62 di contrasto; piena 3,1 */
.bt-cta-tile--accent span { color: var(--bt-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .bt-page *, .bt-page *::before, .bt-page *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   CONVIVENZA COL VECCHIO style.css
   Esiste solo finché ci sono pagine non ancora convertite.
   Quando l'ultima sarà passata, style.css si cancella e questo
   blocco con lui.
   ============================================================ */

/* La home sta dentro <main class="main"><div class="container">, che le darebbe
   una larghezza massima e un padding: il bento invece è a piena larghezza. */
.bt-page { width: 100vw; margin-left: calc(50% - 50vw); }
body.bt-theme:has(#step1.active) .main { padding-top: 0; }
body.bt-theme .main { background: var(--bt-ground); }

/* ---------- barra in alto (partials/header.php) ----------
   Rivestita, non riscritta: l'HTML e il JS di carrello, login e menu account
   restano quelli di prima. Qui si ricompone come nella bozza: logo, menu,
   ricerca, account tondo, carrello scuro. */
body.bt-theme .header {
  background: var(--bt-ground);
  border-bottom: 0; box-shadow: none;
  padding: 20px 0;
  font-family: var(--bt-font-body);
}
body.bt-theme .header .container {
  max-width: none; padding: 0 var(--bt-pad);
  display: flex; align-items: center; gap: 28px;
}
body.bt-theme .logo { order: 1; gap: 11px; flex-shrink: 0; }
body.bt-theme .logo-text {
  font-family: var(--bt-font-display);
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--bt-ink);
}
body.bt-theme .logo-dot { width: 32px; height: 32px; border-radius: 10px; background: var(--bt-ink); }
body.bt-theme .site-logo-img { max-height: 38px; width: auto; }

/* Il menu è riempito da JS con le voci del backoffice: nella bozza sta subito
   dopo il logo. */
body.bt-theme .header-nav {
  order: 2; display: flex; gap: 26px; margin-left: 14px;
  position: static; background: none; box-shadow: none; padding: 0; border: 0;
  max-height: none; overflow: visible; width: auto;
}
body.bt-theme .header-nav a {
  font-size: 15px; font-weight: 500; color: var(--bt-ink);
  padding: 0; border: 0; background: none;
}
body.bt-theme .header-nav a:hover { color: var(--bt-accent); }

body.bt-theme .bt-header-search {
  order: 3; margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  height: 44px; width: 260px; padding: 0 18px;
  background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: var(--bt-pill);
  color: var(--bt-muted);
}
body.bt-theme .bt-header-search input {
  border: 0; background: none; outline: none; width: 100%;
  font: inherit; font-size: 14.5px; color: var(--bt-ink);
}
body.bt-theme .bt-header-search input::placeholder { color: var(--bt-muted); }
/* ⚠️ LO SCAMBIA-LINGUA VUOLE IL SUO POSTO NELLA FILA. Senza `order` prendeva
   quello di partenza (0) e finiva PRIMA del logo: sul telefono si vedeva
   «burger, IT/EN, logo», col logo a destra (Marco, 15/9/26). Qui sta con gli
   altri comandi, a destra. */
body.bt-theme .bt-lingue { order: 4; }
body.bt-theme .header-right { order: 5; margin-left: 0; gap: 10px; }

/* "Registrati" non è nella barra della bozza: l'invito a creare un account sta
   nella fascia finale, dove ha più forza. Resta nel DOM per il JS. */
body.bt-theme .account-register-btn { display: none; }

/* Accedi diventa l'icona tonda della bozza: stesso bottone, stesso handler. */
body.bt-theme .account-login-btn {
  width: 44px; height: 44px; padding: 0; border-radius: var(--bt-pill);
  background: var(--bt-card); border: 1px solid var(--bt-line); color: var(--bt-ink);
  display: flex; align-items: center; justify-content: center;
}
body.bt-theme .account-login-btn span { display: none; }
body.bt-theme .account-login-btn svg { width: 19px; height: 19px; }
body.bt-theme .account-login-btn:hover { border-color: var(--bt-ink); }

body.bt-theme .account-trigger {
  height: 44px; padding: 0 18px; border-radius: var(--bt-pill);
  background: var(--bt-card); border: 1px solid var(--bt-line); color: var(--bt-ink);
  font-family: var(--bt-font-body); font-size: 14.5px; font-weight: 700;
}
body.bt-theme .cart-icon-btn {
  height: 44px; min-width: 44px; padding: 0 20px; border-radius: var(--bt-pill);
  background: var(--bt-ink); border: 0; color: #FFF;
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700;
}
body.bt-theme .cart-icon-btn svg { width: 19px; height: 19px; font-size: 19px; flex-shrink: 0; }
body.bt-theme .cart-badge {
  position: static; background: none; color: #FFF; padding: 0; min-width: 0;
  font-family: var(--bt-font-body); font-size: 14.5px; font-weight: 700;
}
body.bt-theme .header-nav-toggle { order: 0; display: none; color: var(--bt-ink); }

/* ---------- schede prodotto generate da app.js ----------
   renderFeaturedSlider() produce .featured-card e figli: stesso markup della
   bozza, vestito qui. */
.bt-page .featured-card {
  /* width:auto e flex:1 annullano i 200px fissi di style.css (schede strette
     con immagini lunghe, segnalato). */
  position: relative; width: auto; flex: 1 1 auto; min-width: 0;
  background: var(--bt-card); border: 0; border-radius: var(--bt-r);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* style.css mette display:contents sul link: qui il link è la colonna vera. */
.bt-page .featured-card-link { display: flex; flex-direction: column; gap: 12px; color: inherit; }
.bt-page .featured-card:hover { transform: translateY(-2px); box-shadow: var(--bt-shadow); }
.bt-page .featured-card-media {
  position: relative; height: 230px; border-radius: var(--bt-r-sm); overflow: hidden;
}
.bt-page .featured-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bt-page .featured-card-body { display: flex; flex-direction: column; gap: 3px; padding: 0 6px 6px; }
.bt-page .featured-card-title { font-size: 16.5px; font-weight: 700; color: var(--bt-ink); }
.bt-page .featured-card-cat { font-size: 14px; color: var(--bt-muted); }
.bt-page .featured-card-price {
  font-family: var(--bt-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px;
  color: var(--bt-ink);
}
.bt-page .featured-card-price-old { font-size: 15px; color: var(--bt-muted); text-decoration: line-through; }
.bt-page .featured-card-prices { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.bt-page .featured-card-prices .featured-card-price { margin-top: 0; }
.bt-page .featured-card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--bt-ink); color: #FFF; border-radius: var(--bt-pill);
  padding: 6px 11px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.bt-page .featured-card-badge--accent { background: var(--bt-accent); color: var(--bt-accent-ink); }
.bt-page .featured-card-add {
  position: absolute; right: 20px; bottom: 18px;
  width: 40px; height: 40px; border-radius: var(--bt-pill);
  background: var(--bt-ink); color: #FFF; border: 0;
  display: flex; align-items: center; justify-content: center;
}
.bt-page .featured-card-add svg { width: 17px; height: 17px; }
.bt-page .featured-card-add:hover { background: var(--bt-accent); }

/* ---------- piè di pagina (partials/footer.php) ---------- */
body.bt-theme .footer { background: var(--bt-ink); font-family: var(--bt-font-body); }
body.bt-theme .footer a:hover { color: var(--bt-piede-sopra); }

/* ============================================================
   SCHERMI STRETTI
   ============================================================ */

@media (max-width: 1240px) {
  :root { --bt-pad: 28px; }
  .bt-hero h1 { font-size: 52px; }
  .bt-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-grid-4 > *:nth-child(4) { display: none; }
}

@media (max-width: 1024px) {
  .bt-hero { grid-column: span 12; grid-row: span 3; }
  .bt-hero-img { grid-column: span 12; grid-row: span 2; }
  .bt-tile--3 { grid-column: span 4; }
  .bt-tile--4 { grid-column: span 8; }
  .bt-tile--5 { grid-column: span 12; }
  .bt-cta { grid-template-columns: 1fr; }
  body.bt-theme .header-nav, body.bt-theme .bt-header-search { display: none; }
  /* Il logo a sinistra, tutto il resto a destra. Lo spazio lo prende il logo
     con `margin-right:auto`, e non un `margin-left:auto` sui comandi: quelli
     sono due o tre elementi, e due margini automatici si spartirebbero lo
     spazio lasciando lo scambia-lingua in mezzo alla barra.
     Il burger è l'ultimo, sul bordo, dove sta il pollice. */
  body.bt-theme .header .container { gap: 12px; }
  body.bt-theme .logo { margin-right: auto; }
  /* Il quadrato che si tocca resta 44px (padding 9px attorno all'icona), ma
     quei 9px si mangiano dal margine: sennò l'icona finisce 29px dentro
     mentre il logo comincia a 20, e la barra si vede storta. Il bottone esce
     di 9px nel bordo della pagina, non fuori dallo schermo. */
  body.bt-theme .header-nav-toggle { order: 6; display: inline-flex; margin-right: -9px; }
  body.bt-theme .header-right { margin-left: 0; }
}

@media (max-width: 780px) {
  :root { --bt-pad: 20px; --bt-gap: 12px; }
  .bt-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bt-hero, .bt-hero-img, .bt-tile--3, .bt-tile--4, .bt-tile--5 { grid-column: auto; grid-row: auto; }
  /* ⚠️ E ANCHE QUANDO LE SEZIONI VUOTE SONO NASCOSTE. Più su ci sono tre
     regole che allargano i riquadri rimasti quando la testimonianza o le
     categorie non ci sono (`.bt-bento:has(...)`): quel `:has()` pesa più del
     selettore semplice qui sopra, e sul telefono restava in piedi. Con una
     colonna sola e un figlio che ne occupa 9, la griglia se le inventa: sulla
     home di Euromarmi appena installata (niente testimonianza, niente
     categorie) il riquadro grande usciva largo 48 pixel, con il titolo a una
     lettera per riga (visto il 15/9/26 a 390×844). Su un sito pieno non si
     vedeva: quelle sezioni ci sono, e le regole non si accendevano. */
  .bt-bento:has(#testimonialSection.bt-hidden) .bt-tile--4,
  .bt-bento:has(#testimonialSection.bt-hidden):has(#btCategoriesTile.bt-hidden) .bt-tile--3 {
    grid-column: auto;
  }
  .bt-bento:has(#testimonialSection.bt-hidden) .bt-cats { grid-template-columns: 1fr 1fr; }
  .bt-hero { padding: 32px 24px; gap: 26px; }
  .bt-hero h1 { font-size: 38px; max-width: none; }
  .bt-hero p { font-size: 16.5px; }
  .bt-hero-actions { flex-direction: column; align-items: stretch; }
  .bt-hero-img { aspect-ratio: 4 / 3; }
  .bt-quote, .bt-tile--3, .bt-tile--4 { min-height: 220px; }
  .bt-section { padding-top: 36px; }
  .bt-section-head h2 { font-size: 30px; }
  .bt-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bt-grid-4 > *:nth-child(4) { display: flex; }
  .bt-page .featured-card-media { height: 170px; }
  .bt-cta { padding: 34px 26px; border-radius: var(--bt-r-lg); gap: 28px; }
  .bt-cta h2 { font-size: 30px; }
  .bt-cta-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  body.bt-theme .header { padding: 14px 0; }
  body.bt-theme .header .container { gap: 12px; }
  body.bt-theme .logo-text { font-size: 17px; }
  body.bt-theme .cart-icon-btn { padding: 0 14px; }
  .bt-tile { padding: 22px; }
  .bt-quote blockquote { font-size: 18px; }
  .bt-section-head h2 { font-size: 26px; }
  .bt-cta-tiles { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINE INTERNE — catalogo, scheda prodotto, carrello
   Stesse misure delle bozze Shop / Prodotto / Carrello.
   ============================================================ */

.bt-inner { padding: 14px var(--bt-pad) 64px; }
/* il percorso: il grigio del tema faceva 4,4 sul fondo della pagina; scurito con l'inchiostro si legge (12/10/26) */
.bt-crumbs { display: flex; align-items: center; gap: 9px; font-size: 14px; color: color-mix(in srgb, var(--bt-muted) 75%, var(--bt-ink)); flex-wrap: wrap; }
.bt-crumbs a { color: inherit; text-decoration: none; }   /* anche fuori da .bt-page: la conferma d'ordine non ci sta dentro */
.cart-page-main > .bt-crumbs { margin-bottom: 18px; }
.bt-crumbs a:hover { color: var(--bt-accent); }
.bt-crumbs b { color: var(--bt-ink); font-weight: 500; }

.bt-card-lg { background: var(--bt-card); border-radius: var(--bt-r); padding: 24px; }
.bt-card-lg--dark { background: var(--bt-ink); color: #FFF; }
.bt-btn--sm { padding: 12px 22px; font-size: 14.5px; }
.bt-btn--lg { padding: 18px 24px; font-size: 17px; }
.bt-btn--block { width: 100%; }
.bt-btn--grow { flex-grow: 1; }
.bt-btn--onDark { background: var(--bt-card); color: var(--bt-ink); }
.bt-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bt-link-muted { font-size: 14px; font-weight: 700; color: var(--bt-muted); }
.bt-link-muted:hover { color: var(--bt-danger); }
.bt-link-inline { text-decoration: underline; cursor: pointer; }
.bt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bt-accent); display: inline-block; margin-left: 2px; }

/* ---------- catalogo ---------- */
.bt-shop { display: grid; grid-template-columns: 272px 1fr; gap: 22px; align-items: start; padding-top: 18px; }
.bt-shop-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
/* il negozio ancora vuoto (4/10/26): niente filtri, conteggio, ordinamento né vista, solo il riquadro .bt-shop-empty.
   Nascosti e non tolti: modules/catalogo/prodotti.js cerca il modulo dei filtri appena parte. */
.bt-shop--vuoto { grid-template-columns: minmax(0, 1fr); }
.bt-shop--vuoto .bt-shop-side, .bt-shop--vuoto .bt-results-tools, .bt-shop--vuoto .bt-results-count { display: none; }
.bt-shop-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.bt-filters { display: flex; flex-direction: column; gap: 22px; }
.bt-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bt-filters-title { font-family: var(--bt-font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.bt-filters-reset { font-size: 13.5px; font-weight: 700; color: var(--bt-accent); margin-left: auto; }
.bt-filters-close { display: none; width: 36px; height: 36px; border-radius: var(--bt-pill); align-items: center; justify-content: center; }
.bt-filters-close svg { width: 16px; height: 16px; }
.bt-filters-form { display: flex; flex-direction: column; gap: 22px; }
.bt-page .filter-group { display: flex; flex-direction: column; gap: 13px; padding-top: 22px; border-top: 1px solid var(--bt-line-soft); }
.bt-page .filter-group:first-child { padding-top: 0; border-top: 0; }
.bt-page .filter-group-label { font-size: 15.5px; font-weight: 700; margin: 0; }
.bt-page .filter-check {
  display: flex; align-items: center; gap: 11px; font-size: 15px; cursor: pointer; margin: 0;
}
.bt-page .filter-check input { appearance: none; -webkit-appearance: none; width: 21px; height: 21px; margin: 0;
  border-radius: 7px; border: 1.5px solid var(--bt-line-btn); background: var(--bt-card); flex-shrink: 0; cursor: pointer;
  display: grid; place-items: center; }
.bt-page .filter-check input:checked { background: var(--bt-accent); border-color: var(--bt-accent); }
.bt-page .filter-check input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--bt-accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bt-page .filter-count { margin-left: auto; font-size: 13.5px; color: var(--bt-muted); }
.bt-page .filter-value-extra { display: none; }
.bt-page .filter-values-expanded .filter-value-extra { display: flex; }
.bt-page .filter-more-btn { align-self: flex-start; font-size: 13.5px; font-weight: 700; color: var(--bt-accent); }
.bt-page .filter-swatch-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-price-range { display: flex; align-items: center; gap: 10px; color: var(--bt-muted); }
.bt-price-range input { flex: 1; min-width: 0; background: var(--bt-ground); border: 0; border-radius: 12px;
  padding: 11px 14px; font: inherit; font-size: 14.5px; color: var(--bt-ink); }
.bt-help { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bt-help > svg { width: 24px; height: 24px; }
.bt-help-title { font-family: var(--bt-font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.bt-help-text { font-size: 14.5px; line-height: 1.5; color: var(--bt-on-dark); }
.bt-help .bt-btn { margin-top: 6px; }

.bt-results-head { padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bt-results-title { display: flex; flex-direction: column; gap: 6px; }
.bt-results-title h1 { font-family: var(--bt-font-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.bt-results-count { font-size: 15px; color: var(--bt-muted); }
.bt-results-count b { color: var(--bt-ink); }
.bt-results-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-results-tools .shop-filters-toggle { display: none; }
.bt-sort { position: relative; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--bt-muted); }
.bt-sort select { appearance: none; -webkit-appearance: none; border: 1px solid var(--bt-line); border-radius: var(--bt-pill);
  padding: 12px 40px 12px 18px; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--bt-ink); background: var(--bt-card); cursor: pointer; }
.bt-sort > svg { position: absolute; right: 16px; pointer-events: none; }
/* LA FRECCIA DELL'ORDINAMENTO È QUELLA DI TUTTE LE TENDINE (3/10/26, base-pubblico.css): questa
   disegnata a parte si sovrapponeva alla nuova — sul telefono due frecce e «Più recent» tagliato.
   Si nasconde, e la comune sta dal bordo quanto il testo (rientro 18 + il pixel della lettera). */
.bt-sort > svg { display: none; }
.bt-sort select { --tendina-dentro: 19px; }
.bt-view { display: flex; gap: 4px; background: var(--bt-ground); border-radius: var(--bt-pill); padding: 4px; }
.bt-view .view-toggle-btn { width: 38px; height: 38px; border-radius: var(--bt-pill); display: flex; align-items: center; justify-content: center; color: var(--bt-muted); background: none; border: 0; }
.bt-view .view-toggle-btn svg { width: 17px; height: 17px; }
.bt-view .view-toggle-btn.active { background: var(--bt-ink); color: #FFF; }

.bt-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bt-chips-label { font-size: 14px; color: var(--bt-muted); }
.bt-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bt-card); border: 1px solid var(--bt-line);
  border-radius: var(--bt-pill); padding: 9px 15px; font-size: 14px; font-weight: 500; }
.bt-chip svg { width: 13px; height: 13px; color: var(--bt-muted); }
.bt-chip:hover { border-color: var(--bt-ink); }

.bt-grid { display: grid; gap: 16px; }
.bt-grid.cols-3, .bt-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-grid.cols-1 { grid-template-columns: 1fr; }
.bt-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bt-card { display: flex; flex-direction: column; gap: 12px; background: var(--bt-card); border-radius: var(--bt-r); padding: 14px;
  transition: transform .15s ease, box-shadow .15s ease; color: inherit; }
.bt-card:hover { transform: translateY(-2px); box-shadow: var(--bt-shadow); }
/* La scheda col pulsante «Aggiungi al carrello» sotto (blocco Prodotti del
   Builder): il link avvolge foto e testo e prende tutto lo spazio, il pulsante
   sta in fondo e non eredita niente da un link. */
.bt-card-link { display: flex; flex-direction: column; gap: 12px; flex: 1; color: inherit; text-decoration: none; }
.bt-card > .bt-btn { margin-top: auto; }
.bt-card-media { position: relative; height: 250px; border-radius: var(--bt-r-sm); overflow: hidden; background: var(--bt-line-soft); }
.bt-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-card-body { display: flex; flex-direction: column; gap: 3px; padding: 0 6px 6px; }
.bt-card-name { font-size: 16.5px; font-weight: 700; }
.bt-card-cat { font-size: 14px; color: var(--bt-muted); min-height: 1.4em; }
.bt-price { font-family: var(--bt-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.bt-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.bt-price-row .bt-price { margin-top: 0; }
.bt-price-old { font-size: 15px; color: var(--bt-muted); text-decoration: line-through; }
/* il bollino («Sconto», «Kit», «Esaurito») sul fondo d'inchiostro, con la scritta del colore della carta: la coppia del
   tema. Era «#FFF» scritto a mano, e su Cultura (inchiostro chiaro) faceva bianco su quasi bianco, 1,1 (12/10/26) */
.bt-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--bt-ink); color: var(--bt-card); border-radius: var(--bt-pill);
  padding: 6px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bt-badge--accent { background: var(--bt-accent); color: var(--bt-accent-ink); }
.bt-badge--soft { background: var(--bt-ground); color: var(--bt-muted); }
.bt-badge--right { left: auto; right: 12px; }
.bt-badge--lg { top: 18px; left: 18px; font-size: 12px; padding: 7px 13px; }
.bt-grid.cols-1 .bt-card { flex-direction: row; align-items: center; gap: 20px; }
.bt-grid.cols-1 .bt-card-media { width: 180px; height: 150px; flex-shrink: 0; }
.bt-grid.cols-1 .bt-card-body { flex-grow: 1; }
.bt-empty { display: flex; flex-direction: column; gap: 6px; padding: 40px; text-align: center; font-size: 16px; }
.bt-empty a { color: var(--bt-accent); font-weight: 700; }

.bt-pages { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 14px; }
.bt-page-btn { width: 44px; height: 44px; border-radius: var(--bt-pill); background: var(--bt-card); border: 1px solid var(--bt-line);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
.bt-page-btn svg { width: 17px; height: 17px; }
.bt-page-btn.is-on { background: var(--bt-ink); border-color: var(--bt-ink); color: #FFF; font-weight: 700; }
.bt-page-btn.is-off { color: #C3C7CE; }
.bt-page-btn:not(.is-on):not(.is-off):hover { border-color: var(--bt-ink); }
.bt-page-gap { padding: 0 6px; color: var(--bt-muted); }

/* ---------- scheda prodotto ---------- */
.bt-pd { display: grid; grid-template-columns: 1fr 480px; gap: 22px; align-items: start; padding-top: 18px; }
.bt-pd-gallery { display: grid; grid-template-columns: 96px 1fr; gap: 14px; position: sticky; top: 14px; }
.bt-pd-gallery:not(:has(.bt-pd-thumbs)) { grid-template-columns: 1fr; }
.bt-pd-thumbs { display: flex; flex-direction: column; gap: 10px; }
.bt-pd-thumb { height: 96px; border-radius: var(--bt-r-sm); overflow: hidden; border: 2px solid transparent; background: var(--bt-line-soft); }
.bt-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-pd-thumb.is-on { border-color: var(--bt-accent); }
.bt-pd-main { position: relative; height: 560px; border-radius: var(--bt-r-lg); overflow: hidden; background: var(--bt-card); }
.bt-pd-main img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; background: var(--bt-card); }
.bt-pd-zoom { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: var(--bt-pill); background: var(--bt-card);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--bt-shadow); }
.bt-pd-zoom svg { width: 20px; height: 20px; }
.bt-pd-side { display: flex; flex-direction: column; gap: 14px; }
.bt-pd-buy { border-radius: var(--bt-r-lg); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.bt-pd-head { display: flex; flex-direction: column; gap: 10px; }
.bt-pd-cat { font-size: 14px; color: var(--bt-muted); font-weight: 500; }
.bt-page .product-title { font-family: var(--bt-font-display); font-size: 38px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin: 0; }
.bt-pd-short { font-size: 15.5px; line-height: 1.55; color: var(--bt-body-ink); margin: 0; }
.bt-pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bt-page .product-price-final { font-family: var(--bt-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--bt-ink); }
.bt-page .product-price-full { font-size: 17px; color: var(--bt-muted); }
.bt-pd-vat { font-size: 14.5px; color: var(--bt-muted); }
.bt-pd-label, .bt-page .variant-attr-label { font-size: 15px; font-weight: 700; margin: 0 0 12px; display: block; }
.bt-page .variant-attr-group { margin: 0 0 18px; }
.bt-page .variant-attr-options { display: flex; flex-wrap: wrap; gap: 9px; }
/* ⚠️ button.variant-pill e non .variant-pill (4/10/26): «.bt-page button:not(.bt-btn)» azzera i pulsanti con
   una forza più alta, e le taglie uscivano testo nudo — «S M L XL XXL» senza bordo, non si capiva che si cliccano. */
.bt-page button.variant-pill { border: 1.5px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 13px 20px; font-size: 15px; font-weight: 500;
  background: var(--bt-card); color: var(--bt-ink); cursor: pointer; }
.bt-page button.variant-pill.selected, .bt-page button.variant-pill.active, .bt-page button.variant-pill[aria-pressed="true"] { border-color: var(--bt-accent); background: var(--bt-accent-wash); font-weight: 700; }
.bt-page button.variant-pill:disabled, .bt-page button.variant-pill.unavailable { border-color: var(--bt-line-soft); color: var(--bt-muted); text-decoration: line-through; }
.bt-page button.variant-swatch { width: 44px; height: 44px; border-radius: var(--bt-r-sm); border: 1.5px solid var(--bt-line); cursor: pointer; }
.bt-page button.variant-swatch.selected, .bt-page button.variant-swatch.active { border: 2.5px solid var(--bt-ink); }
.bt-page .variant-notice { font-size: 14px; color: var(--bt-muted); margin: 8px 0 0; }
.bt-pd-stock { display: flex; align-items: center; gap: 9px; border-radius: var(--bt-r-sm); padding: 13px 16px; font-size: 14.5px; font-weight: 500; margin: 0; }
.bt-pd-stock svg { width: 19px; height: 19px; flex-shrink: 0; }
.bt-pd-stock.is-in { background: #EFF7F0; color: var(--bt-ok); }
.bt-pd-stock.is-out { background: #FBEDEA; color: var(--bt-danger); }
.bt-pd-buyrow { display: flex; gap: 12px; align-items: center; }
.bt-qty { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-pill); padding: 5px; flex-shrink: 0; }
.bt-qty .qty-btn { width: 40px; height: 40px; border-radius: var(--bt-pill); display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--bt-ink); font-size: 0; }
.bt-qty .qty-btn svg { width: 17px; height: 17px; }
.bt-qty .qty-btn:hover { background: var(--bt-ground); }
.bt-qty .qty-btn:disabled { color: #C3C7CE; }
.bt-qty .qty-input { width: 44px; text-align: center; border: 0; background: none; font: inherit; font-size: 16.5px; font-weight: 700; color: var(--bt-ink);
  -moz-appearance: textfield; appearance: textfield; }
.bt-qty .qty-input::-webkit-outer-spin-button, .bt-qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bt-pd-kit { display: flex; flex-direction: column; gap: 10px; }
.bt-pd-kit-row { display: flex; flex-direction: column; gap: 8px; }
.bt-page .kit-component-link { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; }
.bt-page .kit-component-link img, .bt-pd-kit-noimg { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; display: block; }
.bt-pd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-tag { background: var(--bt-ground); border-radius: var(--bt-pill); padding: 7px 13px; font-size: 13.5px; font-weight: 500; }
.bt-pd-ask { font-size: 14.5px; font-weight: 700; color: var(--bt-accent); align-self: flex-start; }
.bt-pd-perks { border-radius: var(--bt-r-lg); padding: 14px 32px; display: flex; flex-direction: column; }
.bt-perk { display: flex; align-items: center; gap: 13px; padding: 12px 0; font-size: 15px; border-top: 1px solid var(--bt-line-soft); line-height: 1.45; }
.bt-perk:first-child { border-top: 0; }
.bt-perk > svg { width: 21px; height: 21px; flex-shrink: 0; }
.bt-perk-logo { height: 20px; width: auto; }
.bt-pd-lower { display: grid; grid-template-columns: 1fr 480px; gap: 22px; align-items: start; padding-top: 22px; }
.bt-pd-desc, .bt-pd-specs { border-radius: var(--bt-r-lg); padding: 34px; display: flex; flex-direction: column; gap: 20px; }
.bt-pd-specs { gap: 0; }
.bt-pd-h2 { font-family: var(--bt-font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.bt-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--bt-line-soft); }
.bt-tab { font-size: 17px; color: var(--bt-muted); padding-bottom: 14px; margin-bottom: -1px; border-bottom: 2.5px solid transparent; }
.bt-tab.active { font-family: var(--bt-font-display); font-weight: 800; color: var(--bt-ink); border-bottom-color: var(--bt-accent); }
.bt-prose { font-size: 16.5px; line-height: 1.7; max-width: 70ch; }
.bt-prose p { margin: 0 0 1em; }
.bt-prose p:last-child { margin-bottom: 0; }
.bt-prose ul, .bt-prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.bt-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.bt-prose th, .bt-prose td { padding: 11px 0; border-bottom: 1px solid var(--bt-line-soft); text-align: left; vertical-align: top; }
.bt-prose th { color: var(--bt-muted); font-weight: 500; width: 40%; }
.bt-spec { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--bt-line-soft); font-size: 15px; }
.bt-spec:last-child { border-bottom: 0; }
.bt-spec > span { color: var(--bt-muted); }
.bt-section--tight { padding-top: 40px; padding-left: 0; padding-right: 0; }
.bt-section--tight .bt-section-head h2 { font-size: 32px; }

/* ---------- carrello / checkout ---------- */
.bt-steps-bar { list-style: none; margin: 0; padding: 6px 0 0; display: flex; align-items: center; gap: 12px; }
.bt-steps-bar li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--bt-muted); }
.bt-steps-bar li span { width: 30px; height: 30px; border-radius: var(--bt-pill); background: var(--bt-line); color: var(--bt-muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.bt-steps-bar li.is-on { color: var(--bt-ink); font-weight: 700; }
.bt-steps-bar li.is-on span { background: var(--bt-ink); color: var(--bt-card); }
.bt-steps-bar li + li::before { content: ""; width: 40px; height: 1.5px; background: var(--bt-line-btn); margin-right: 2px; }
.bt-cart { display: grid; grid-template-columns: 1fr 420px; gap: 22px; align-items: start; padding-top: 18px; }
.bt-cart-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bt-cart-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }
/* il titolo e «Svuota carrello»: se non stanno sulla stessa riga (un carattere più largo, il telefono) il link va sotto,
   intero, invece di andare a capo lui (12/10/26, la prova del tema nuovo) */
.bt-cart-title { border-radius: var(--bt-r-lg); padding: 30px 32px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.bt-cart-title .bt-link-muted { white-space: nowrap; }
.bt-cart-title h1 { font-family: var(--bt-font-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.bt-cart-rows { border-radius: var(--bt-r-lg); padding: 10px 32px; }
.bt-cart-back { padding: 0 8px; }
.bt-cart-panel { border-radius: var(--bt-r-lg); padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.bt-cart-h2 { font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.bt-page .cart-item-row { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--bt-line-soft); }
.bt-page .cart-item-rows-wrap .cart-item-row:last-child { border-bottom: 0; }
.bt-page .cart-item-thumb { width: 104px; height: 104px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--bt-line-soft); }
.bt-page .cart-item-info { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 0; }
.bt-page .cart-item-color { font-size: 17.5px; font-weight: 700; }
.bt-page .cart-item-desc, .bt-page .cart-item-color-meta { font-size: 14.5px; color: var(--bt-muted); }
.bt-page .cart-item-kit-tag { font-size: 12px; font-weight: 700; background: var(--bt-ground); border-radius: var(--bt-pill); padding: 3px 9px; margin-left: 6px; vertical-align: middle; }
.bt-page .cart-item-kit-view, .bt-page .cart-item-edit-link { font-size: 13.5px; font-weight: 700; color: var(--bt-accent); background: none; border: 0; padding: 0; align-self: flex-start; cursor: pointer; }
.bt-page .qty-control.mini { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-pill); padding: 4px; flex-shrink: 0; }
.bt-page .qty-control.mini .qty-btn, .bt-page .qty-control.mini button { width: 34px; height: 34px; border-radius: var(--bt-pill); background: none; border: 0; color: var(--bt-ink); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-page .qty-control.mini span, .bt-page .qty-control.mini .qty-value { min-width: 24px; text-align: center; font-size: 16px; font-weight: 700; }
.bt-page .cart-item-qty-fixed { font-size: 15px; color: var(--bt-muted); }
.bt-page .cart-item-price { font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; min-width: 96px; text-align: right; }
.bt-page .cart-item-price-full { font-family: var(--bt-font-body); font-size: 14px; color: var(--bt-muted); font-weight: 400; display: block; }
.bt-page .cart-item-remove { width: 38px; height: 38px; border-radius: var(--bt-pill); display: flex; align-items: center; justify-content: center; color: #9AA0A9; font-size: 22px; background: none; border: 0; cursor: pointer; flex-shrink: 0; }
.bt-page .cart-item-remove:hover { background: #FBEDEA; color: var(--bt-danger); }
.bt-page .recap-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--bt-accent); background: none; border: 0; padding: 12px 0; cursor: pointer; }
.bt-page .recap-toggle svg { width: 14px; height: 14px; }
.bt-page .cart-item-rows-wrap + .cr, .bt-page .recap-toggle + .cr { border-top: 1px solid var(--bt-line-soft); }
.bt-page .cr { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15.5px; padding: 8px 0; }
.bt-page .cr span { color: var(--bt-muted); }
.bt-page .cr strong { font-weight: 700; }
.bt-cart-rows .cr { padding: 18px 0 14px; }
.bt-summary-lines .cr:last-child { padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--bt-line-soft); align-items: baseline; }
.bt-summary-lines .cr:last-child span { color: var(--bt-ink); font-size: 17px; font-weight: 700; }
.bt-summary-lines .cr:last-child strong { font-family: var(--bt-font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.bt-page .order-recap-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; padding-bottom: 6px; }
.bt-page .order-recap-count em { font-style: normal; color: var(--bt-muted); }
.bt-page .order-recap-detail-link { font-size: 13.5px; font-weight: 700; color: var(--bt-accent); background: none; border: 0; cursor: pointer; }
.bt-summary-lines .cart-item-row { padding: 14px 0; gap: 12px; }
.bt-summary-lines .cart-item-thumb { width: 56px; height: 56px; border-radius: 10px; }
.bt-summary-lines .cart-item-color { font-size: 14.5px; }
.bt-summary-lines .cart-item-price { font-size: 16px; min-width: 0; }
.bt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bt-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.bt-field--full, .bt-field-pair { grid-column: 1 / -1; }
.bt-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bt-page .bt-field label, .bt-page .form-group label { font-size: 14px; font-weight: 700; color: var(--bt-ink); margin: 0; }
.bt-page .bt-field input, .bt-page .bt-field textarea, .bt-page .form-group input:not([type=checkbox]):not([type=radio]), .bt-page .form-group textarea, .bt-page .form-group select {
  width: 100%; background: var(--bt-ground); border: 1.5px solid transparent; border-radius: var(--bt-r-sm); padding: 14px 16px;
  font: inherit; font-size: 15px; color: var(--bt-ink); }
.bt-page .bt-field input:focus, .bt-page .bt-field textarea:focus, .bt-page .form-group input:focus, .bt-page .form-group textarea:focus { outline: none; border-color: var(--bt-ink); background: var(--bt-card); }
/* i segnaposto dei campi («Mario Rossi», «Codice sconto»): il grigio scritto a mano (#9AA0A9) faceva 2,3 sul fondo del campo.
   Il grigio del tema scurito con l'inchiostro: si legge (oltre 4,5) e resta più chiaro di quello che si scrive (12/10/26) */
.bt-page .bt-field input::placeholder, .bt-page .bt-field textarea::placeholder, .bt-page .bt-discount input::placeholder { color: color-mix(in srgb, var(--bt-muted) 75%, var(--bt-ink)); opacity: 1; }
.bt-page .form-group { margin: 0; }
.bt-check { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; cursor: pointer; margin: 0; }
/* caselle, spunte e passi coi colori del tema (12/10/26, la prova del tema nuovo scuro: il bianco e il grigio scritti a mano
   facevano sparire la spunta e il numero del passo acceso, inchiostro chiaro con la scritta bianca, 1,1) */
.bt-check input { appearance: none; -webkit-appearance: none; width: 21px; height: 21px; margin: 2px 0 0; border-radius: 7px; border: 1.5px solid var(--bt-line-btn); background: var(--bt-card); flex-shrink: 0; cursor: pointer; display: grid; place-items: center; }
.bt-check input:checked { background: var(--bt-accent); border-color: var(--bt-accent); }
.bt-check input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--bt-accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bt-check a { color: var(--bt-accent); font-weight: 700; }
.bt-check--small { font-size: 13.5px; color: var(--bt-muted); }
.bt-register { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--bt-line-soft); }
.bt-page .checkout-auth-banner { background: var(--bt-accent-wash); border-radius: var(--bt-r-sm); padding: 14px 16px; font-size: 14.5px; }
.bt-page .checkout-auth-banner a, .bt-page .checkout-auth-banner button { color: var(--bt-accent); font-weight: 700; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.bt-page .auth-err { font-size: 14px; color: var(--bt-danger); }
/* ⚠️ IL CAMPO SBAGLIATO SI VEDE (12/10/26, voce 265 compito 10). La cassa (checkout-page.js, cassaErrore) scrive la frase
   sotto il campo e gli mette aria-invalid; prima la classe «error» non la vestiva nessun tema e «Conferma ordine» taceva.
   Coi nomi del tema, così vale su ogni tema che sta sopra Bento. Il bordo con !important: i temi danno ai campi della
   cassa regole più pesanti (Euromarmi, Cultura, anche sotto il cursore) e un campo sbagliato resta rosso finché non è giusto.
   Legate a #checkoutForm e non a .bt-page: la cornice di un tema (Cultura) non mette le classi di Bento sulla pagina. */
.campo-errore { margin: 6px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--bt-danger); text-wrap: balance; }
#checkoutForm [aria-invalid="true"]:not([type=checkbox]):not([type=radio]) { border-color: var(--bt-danger) !important; }
#checkoutForm input[type=checkbox][aria-invalid="true"] { outline: 2px solid var(--bt-danger); outline-offset: 2px; }
/* I campi dell'account dalla cassa, uno sotto l'altro col respiro dei campi di sopra (16px, come .bt-form-grid). Prima
   Password e Conferma password si toccavano (0px su Cultura) e i consensi stavano attaccati alla conferma; i pezzi
   vuoti (la verifica anti-robot spenta, nessuna frase) non lasciano buchi. */
#checkoutRegisterFields:not(.hidden), #checkoutRegisterFields [data-campi-in-pagina] { display: flex; flex-direction: column; gap: 16px; }
#checkoutRegisterFields .form-row, #checkoutRegisterFields .form-group, #checkoutRegisterFields .scelta-gruppo,
#checkoutRegisterFields .iscr-caselle, #checkoutRegisterErr { margin: 0; }
#checkoutCaptcha:empty, #checkoutRegisterErr:empty, #checkoutAccountTypeFields:empty { display: none; }
/* «Entra» sotto la frase dell'account che non nasce (email già registrata): alto 40 per il dito, coi colori del testo */
#checkoutRegisterErr button { display: flex; align-items: center; min-height: 40px; margin-top: 4px; background: none; border: 0; padding: 0;
  font: inherit; font-weight: 700; color: var(--bt-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bt-options { display: flex; flex-direction: column; gap: 10px; }
.bt-page .payment-opt { display: block; margin: 0; cursor: pointer; }
.bt-page .payment-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bt-page .payment-card { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 14px 16px; }
.bt-page .payment-opt input:checked + .payment-card { border-color: var(--bt-accent); background: var(--bt-accent-wash); }
.bt-page .payment-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--bt-ground); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bt-page .payment-logo svg, .bt-page .payment-logo img { width: 22px; height: 22px; }
.bt-page .payment-info { display: flex; flex-direction: column; gap: 2px; }
.bt-page .payment-info strong { font-size: 15.5px; }
.bt-page .payment-info span { font-size: 14px; color: var(--bt-muted); }
.bt-page .bonifico-box, .bt-page .pickup-info-box { background: var(--bt-ground); border-radius: var(--bt-r-sm); padding: 16px 18px; font-size: 14.5px; line-height: 1.55; }
.bt-page .bonifico-box strong { display: block; margin-bottom: 4px; }
.bt-page .payment-area:empty { display: none; }
.bt-summary { border-radius: var(--bt-r-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.bt-summary-title { font-family: var(--bt-font-display); font-size: 23px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.bt-discount { display: flex; gap: 10px; }
.bt-discount input { flex-grow: 1; min-width: 0; background: var(--bt-ground); border: 1.5px solid transparent; border-radius: var(--bt-r-sm); padding: 14px 16px; font: inherit; font-size: 14.5px; }
.bt-discount input:focus { outline: none; border-color: var(--bt-ink); }
.bt-discount .bt-btn { border-radius: var(--bt-r-sm); }
.bt-discount-msg { font-size: 13.5px; color: var(--bt-ok); margin: -12px 0 0; min-height: 0; }
.bt-discount-msg:empty { display: none; }
.bt-summary-lines { display: flex; flex-direction: column; gap: 5px; }
.bt-secure { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13.5px; color: var(--bt-muted); }
.bt-secure svg { width: 16px; height: 16px; }

/* ---------- pezzi condivisi generati dal JS ---------- */
body.bt-theme .modal-overlay { background: rgba(15, 17, 21, .55); backdrop-filter: blur(4px); }
body.bt-theme .modal { background: var(--bt-card); border-radius: var(--bt-r-lg); padding: 32px; border: 0; box-shadow: 0 24px 60px rgba(15,17,21,.25);
  font-family: var(--bt-font-body); color: var(--bt-ink); max-width: 440px; width: calc(100% - 32px); }
body.bt-theme .modal-title { font-family: var(--bt-font-display); font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--bt-ink); margin: 0 0 18px; }
body.bt-theme .modal-close { top: 16px; right: 16px; width: 40px; height: 40px; border-radius: var(--bt-pill); background: var(--bt-ground); color: var(--bt-ink); font-size: 22px; border: 0; }
body.bt-theme .auth-form { display: flex; flex-direction: column; gap: 14px; }
body.bt-theme .auth-form .form-group { display: flex; flex-direction: column; gap: 7px; margin: 0; }
body.bt-theme .auth-form label { font-size: 14px; font-weight: 700; color: var(--bt-ink); }
/* Le caselle di un modulo: quelle di testo, quelle lunghe e le tendine vestite
   uguali. Prima la regola prendeva solo <input>: il messaggio (una textarea)
   usciva col bordo del browser, e una casella di spunta avrebbe preso
   larghezza 100% e 14px di imbottitura. */
/* Le misure di un campo, in un posto solo: chi le cambia le cambia qui. */
body.bt-theme .auth-form { --campo-riga: 1.45; --campo-alto-rientro: 14px; --campo-bordo: 1.5px; }
body.bt-theme .auth-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
body.bt-theme .auth-form textarea,
body.bt-theme .auth-form select { width: 100%; background-color: var(--bt-ground); border: 1.5px solid transparent; border-radius: var(--bt-r-sm);
  /* I due rientri passano da due variabili: un campo che porta un'icona li
     allarga dichiarando le variabili, senza dover battere questa riga in una
     gara di specificità (questo selettore, coi suoi tre `:not`, vince su
     quasi tutto — il 10/9/26 l'icona compariva e il testo ci finiva sopra). */
  padding: var(--campo-alto-rientro) var(--campo-rientro-dx, 16px) var(--campo-alto-rientro) var(--campo-rientro-sx, 16px);
  /* `font: inherit` prende TUTTO dal genitore, grassetto compreso: i pezzi di
     un campo composto stanno dentro la loro etichetta (che è in grassetto) e
     scrivevano in nero pieno mentre i vicini erano grigi (10/9/26). Il peso si
     dichiara qui, dopo. */
  font: inherit; font-size: 15px; font-weight: 400; color: var(--bt-ink); line-height: var(--campo-riga);
  /* L'ALTEZZA DICHIARATA, non lasciata al contenuto. Un campo data VUOTO non
     ha niente dentro e si accorcia rispetto ai vicini: appenderla a un pezzo
     interno di sistema (`::-webkit-datetime-edit`) funzionava dove quel pezzo
     esiste e non dove non esiste. Così invece i campi sono alti uguali per
     costruzione, in qualunque browser — ed è la stessa somma che fa il
     riquadro: una riga di testo più i due rientri più i due bordi. */
  min-height: calc(var(--campo-riga) * 1em + var(--campo-alto-rientro) * 2 + var(--campo-bordo) * 2);
  /* L'altezza dichiarata, non lasciata al contenuto: un campo data ha dentro
     dei pezzi suoi e senza questa riga viene 4px più alto dei vicini, con le
     righe che non si allineano più (misurato il 10/9/26). */
  line-height: 1.45; }
body.bt-theme .auth-form input:focus, body.bt-theme .auth-form textarea:focus, body.bt-theme .auth-form select:focus { outline: none; border-color: var(--bt-ink); background-color: var(--bt-card); }
/* Il testo dentro il campo prima di scrivere: lo stesso grigio per tutti, in
   ogni browser (`opacity:1` perché Firefox lo sbiadisce di suo). */
body.bt-theme .auth-form input::placeholder, body.bt-theme .auth-form textarea::placeholder { color: var(--bt-muted); opacity: 1; font-weight: 400; }
/* `background-color` e non `background`: la forma breve cancellerebbe l'icona
   che il campo si porta dalla riga qui sotto, e le icone sparirebbero al primo
   tocco (successo il 10/9/26 con la forma breve anche nella regola di sopra).

   LE ICONE DEI CAMPI CHE APRONO UN SELETTORE. Stanno nel tema perché sono
   vestito, come i colori: un tema che si veste in un altro modo mette i suoi.
   Sono disegni scritti dentro il foglio, nessun file da scaricare. */
body.bt-theme .auth-form input[type="date"],
body.bt-theme .auth-form input[type="datetime-local"],
body.bt-theme .auth-form input[type="month"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 15px center, right 14px center;
  background-size: 18px 18px, 16px 16px;
  --campo-rientro-sx: 45px; --campo-rientro-dx: 38px;
}
body.bt-theme .auth-form input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 15px center, right 14px center;
  background-size: 18px 18px, 16px 16px;
  --campo-rientro-sx: 45px; --campo-rientro-dx: 38px;
}
body.bt-theme .auth-form textarea { min-height: 128px; resize: vertical; }
/* La finestra del modulo: la voce su fondo tenue, le etichette dei gruppi
   come le altre, i pezzi di un campo composto con l'etichetta piccola e grigia
   (sono sotto-etichette, non devono pesare come «Nome e cognome»). */
body.bt-theme .mod-req-voce { background: var(--bt-ground); }
body.bt-theme .mod-req-voce-testo b { color: var(--bt-ink); }
body.bt-theme .mod-req-voce-eti, body.bt-theme .mod-req-descr, body.bt-theme .mod-req-aiuto, body.bt-theme .mod-req-limiti, body.bt-theme .mod-req-pezzo > span { color: var(--bt-muted); }
body.bt-theme .auth-form .mod-req-eti { font-size: 14px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .auth-form .mod-req-pezzo > span { font-size: 12.5px; font-weight: 600; }
body.bt-theme .mod-req-sezione { font-family: var(--bt-font-display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--bt-ink); }
body.bt-theme .mod-req-zona { background: var(--bt-ground); border-color: var(--bt-line); }
body.bt-theme .mod-req-pulsante { background: var(--bt-ground); border-color: transparent; font-weight: 600; }
body.bt-theme .mod-req-pulsante:has(input:checked) { background: var(--bt-ink); color: var(--bt-card); }
body.bt-theme .modal .btn-primary, body.bt-theme .cart-dropdown-footer .btn-primary, body.bt-theme .confirm-modal-actions .btn-primary {
  background: var(--bt-accent); color: var(--bt-accent-ink); border: 0; border-radius: var(--bt-pill); padding: 16px 28px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }
body.bt-theme .modal .btn-secondary, body.bt-theme .cart-dropdown-footer .btn-secondary, body.bt-theme .confirm-modal-actions .btn-secondary {
  background: var(--bt-card); color: var(--bt-ink); border: 1.5px solid var(--bt-line-btn); border-radius: var(--bt-pill); padding: 16px 28px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }
body.bt-theme .auth-modal-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
body.bt-theme .auth-modal-links a { color: var(--bt-accent); font-weight: 700; }
body.bt-theme .auth-divider { color: var(--bt-muted); font-size: 13px; margin: 14px 0; }
body.bt-theme .auth-err { color: var(--bt-danger); font-size: 14px; }
body.bt-theme .confirm-modal-msg { font-size: 16px; line-height: 1.55; margin: 0 0 20px; color: var(--bt-ink); }
body.bt-theme .confirm-modal-actions { display: flex; gap: 10px; }

body.bt-theme .cart-sidebar { background: var(--bt-card); font-family: var(--bt-font-body); color: var(--bt-ink); box-shadow: -20px 0 60px rgba(15,17,21,.18); border: 0; }
body.bt-theme .cart-sidebar-overlay { background: rgba(15,17,21,.45); }
body.bt-theme .cart-sidebar-header { padding: 22px 24px; border-bottom: 1px solid var(--bt-line-soft); font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
body.bt-theme .cart-sidebar-header button, body.bt-theme .cart-sidebar-header .modal-close { position: static; width: 38px; height: 38px; border-radius: var(--bt-pill); background: var(--bt-ground); color: var(--bt-ink); border: 0; }
body.bt-theme .cart-scrollzone { padding: 0 24px; }
body.bt-theme .cart-sidebar .cart-item-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bt-line-soft); }
body.bt-theme .cart-sidebar .cart-item-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--bt-line-soft); }
body.bt-theme .cart-sidebar .cart-item-info { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
body.bt-theme .cart-sidebar .cart-item-color { font-size: 15px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .cart-sidebar .cart-item-desc { font-size: 13.5px; color: var(--bt-muted); }
body.bt-theme .cart-sidebar .cart-item-price { font-family: var(--bt-font-display); font-size: 16px; font-weight: 800; color: var(--bt-ink); }
body.bt-theme .cart-sidebar .cart-item-remove { width: 34px; height: 34px; border-radius: var(--bt-pill); background: none; border: 0; color: #9AA0A9; font-size: 20px; cursor: pointer; }
body.bt-theme .cart-sidebar .qty-control.mini { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-pill); padding: 3px; }
body.bt-theme .cart-sidebar .qty-control.mini button { width: 28px; height: 28px; border-radius: var(--bt-pill); background: none; border: 0; color: var(--bt-ink); font-weight: 700; cursor: pointer; }
body.bt-theme .cart-sidebar .qty-control.mini span { min-width: 22px; text-align: center; font-size: 14.5px; font-weight: 700; }
body.bt-theme .cart-empty { padding: 40px 0; text-align: center; color: var(--bt-muted); font-size: 15px; }
body.bt-theme .shipping-progress { background: var(--bt-ground); border-radius: var(--bt-r-sm); padding: 14px 16px; margin: 16px 0; font-size: 14px; }
body.bt-theme .shipping-progress .bar, body.bt-theme .shipping-progress-bar { background: var(--bt-line); border-radius: var(--bt-pill); }
body.bt-theme .shipping-progress .fill, body.bt-theme .shipping-progress-fill { background: var(--bt-accent); border-radius: var(--bt-pill); }
body.bt-theme .cart-cross-sell-title { font-family: var(--bt-font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 12px; }
body.bt-theme .cart-cross-sell-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--bt-line); border-radius: 16px; padding: 10px; margin-bottom: 10px; }
body.bt-theme .cart-cross-sell-media, body.bt-theme .cart-cross-sell-noimg { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bt-line-soft); }
body.bt-theme .cart-cross-sell-title { font-size: 14.5px; }
body.bt-theme .cart-cross-sell-item .cart-cross-sell-title { margin: 0; font-family: var(--bt-font-body); font-weight: 700; font-size: 14.5px; }
body.bt-theme .cart-cross-sell-price { font-family: var(--bt-font-display); font-size: 16px; font-weight: 800; }
body.bt-theme .cart-cross-sell-add { width: 36px; height: 36px; border-radius: 11px; background: var(--bt-ink); color: #FFF; border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
body.bt-theme .cart-dropdown-footer { padding: 20px 24px; border-top: 1px solid var(--bt-line-soft); display: flex; flex-direction: column; gap: 10px; background: var(--bt-card); }
body.bt-theme .cart-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--bt-muted); margin-bottom: 6px; }
body.bt-theme .cart-subtotal-row strong, body.bt-theme #cartSubtotal { font-family: var(--bt-font-display); font-size: 24px; font-weight: 800; color: var(--bt-ink); letter-spacing: -.02em; }

body.bt-theme .global-notice { background: var(--bt-ink); color: #FFF; border-radius: var(--bt-r-sm); padding: 14px 18px; font-family: var(--bt-font-body); font-size: 15px; font-weight: 500; box-shadow: var(--bt-shadow); border: 0; }
body.bt-theme .global-notice.notice-success { background: var(--bt-ok); }
body.bt-theme .global-notice.notice-error { background: var(--bt-danger); }
body.bt-theme .tc-a11y-btn, body.bt-theme .back-to-top, body.bt-theme .tc-consent-prefs-btn { width: 46px; height: 46px; border-radius: var(--bt-pill); background: var(--bt-card); color: var(--bt-ink); border: 1px solid var(--bt-line); box-shadow: var(--bt-shadow); }
body.bt-theme .tc-a11y-btn.active { background: var(--bt-accent); color: var(--bt-accent-ink); border-color: var(--bt-accent); }
body.bt-theme .whatsapp-float { border-radius: var(--bt-pill); box-shadow: var(--bt-shadow); }

/* barra fissa del telefono */
body.bt-theme .mobile-tabbar { background: var(--bt-card); border-top: 1px solid var(--bt-line); font-family: var(--bt-font-body); box-shadow: 0 -8px 30px rgba(15,17,21,.08); }
body.bt-theme .tabbar-btn { color: var(--bt-muted); background: none; border: 0; }
body.bt-theme .tabbar-btn.is-active { color: var(--bt-ink); }
body.bt-theme .tabbar-label { font-size: 11.5px; font-weight: 700; }
body.bt-theme .tabbar-badge { background: var(--bt-accent); color: var(--bt-accent-ink); border-radius: var(--bt-pill); font-weight: 700; font-size: 11.5px; border: 0; }
body.bt-theme .header-nav.header-nav-open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--bt-card); padding: 12px 20px 18px; gap: 4px; border-bottom: 1px solid var(--bt-line); box-shadow: var(--bt-shadow); z-index: 60; margin: 0; }
body.bt-theme .header-nav.header-nav-open a { padding: 12px 6px; font-size: 16px; border-bottom: 1px solid var(--bt-line-soft); }
body.bt-theme .header { position: relative; }

/* piè di pagina */
body.bt-theme .footer { background: var(--bt-ink); color: #FFF; padding: 48px 0 32px; font-family: var(--bt-font-body); margin-top: 0; }
body.bt-theme .footer .container { max-width: none; padding: 0 var(--bt-pad); }
body.bt-theme .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
body.bt-theme .footer-brand { display: flex; flex-direction: column; gap: 12px; }
body.bt-theme .footer .logo-text { color: #FFF; }
body.bt-theme .footer .logo-dot { background: var(--bt-ink-2); }
body.bt-theme .footer-col { display: flex; flex-direction: column; gap: 11px; }
body.bt-theme .footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bt-on-dark); margin: 0; }
body.bt-theme .footer-col a { font-size: 15px; color: #FFF; }
body.bt-theme .footer-col a:hover { color: var(--bt-piede-sopra); }
body.bt-theme .footer-bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--bt-on-dark); }
body.bt-theme .footer-bottom p { margin: 0; }
body.bt-theme .payment-badges img, body.bt-theme .payment-badge { height: 24px; opacity: .85; }

/* ---------- schermi stretti, pagine interne ---------- */
@media (max-width: 1240px) {
  .bt-pd, .bt-pd-lower { grid-template-columns: 1fr 420px; }
  .bt-cart { grid-template-columns: 1fr 380px; }
  .bt-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-grid--4 > *:nth-child(4) { display: none; }
}
@media (max-width: 1024px) {
  .bt-shop { grid-template-columns: 1fr; }
  /* livelli come gli altri pannelli laterali del core (carrello, ricerca: velo 290, pannello 300), sopra testata e barra
     in basso: a 80 la testata copriva il titolo e la X del pannello, la barra il fondo (5/10/26) */
  .bt-shop-side { position: fixed; inset: 0 auto 0 0; width: min(360px, 92vw); z-index: 300; overflow-y: auto; padding: 16px; background: var(--bt-ground);
    transform: translateX(-100%); transition: transform .25s ease; top: 0; }
  /* aperto: il copione del catalogo (prodotti.js) mette .shop-filters-open sul pannello. Il foglio aspettava .open e
     al telefono il pannello non entrava mai, restava solo il velo (5/10/26) */
  .bt-shop-side.open, .bt-shop-side.shop-filters-open, body.shop-filters-open .bt-shop-side { transform: none; }
  .bt-page .shop-filters-overlay { position: fixed; inset: 0; background: rgba(15,17,21,.45); z-index: 290; }
  .bt-filters-close { display: inline-flex; }
  .bt-results-tools .shop-filters-toggle { display: inline-flex; }
  .bt-pd, .bt-pd-lower { grid-template-columns: 1fr; }
  .bt-pd-gallery { position: static; }
  .bt-pd-main { height: 440px; }
  .bt-cart { grid-template-columns: 1fr; }
  .bt-cart-side { position: static; }
  body.bt-theme .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .bt-inner { padding-bottom: 96px; }
  .bt-grid.cols-3, .bt-grid.cols-4, .bt-grid.cols-2, .bt-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bt-grid--4 > *:nth-child(4) { display: flex; }
  .bt-card-media { height: 170px; }
  .bt-results-head { padding: 20px; }
  .bt-results-title h1 { font-size: 28px; }
  .bt-pd-gallery { grid-template-columns: 1fr; }
  .bt-pd-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .bt-pd-thumb { width: 72px; height: 72px; flex-shrink: 0; }
  .bt-pd-main { height: 360px; }
  .bt-pd-buy { padding: 22px; }
  .bt-page .product-title { font-size: 28px; }
  .bt-page .product-price-final { font-size: 32px; }
  .bt-pd-desc, .bt-pd-specs, .bt-summary, .bt-cart-panel, .bt-cart-title { padding: 22px; }
  .bt-cart-title h1 { font-size: 28px; }
  .bt-cart-rows { padding: 4px 18px; }
  .bt-page .cart-item-row { flex-wrap: wrap; gap: 12px; }
  .bt-page .cart-item-thumb { width: 72px; height: 72px; }
  .bt-page .cart-item-price { min-width: 0; margin-left: auto; }
  .bt-form-grid, .bt-field-pair { grid-template-columns: 1fr; }
  .bt-steps-bar li:not(.is-on) { display: none; }
  .bt-steps-bar li + li::before { display: none; }
  body.bt-theme .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .bt-grid.cols-3, .bt-grid.cols-4, .bt-grid.cols-2, .bt-grid--4 { grid-template-columns: 1fr; }

  /* La barra del catalogo su una riga sola (7/9/26, richiesta di Marco):
     prima Filtri, ordinamento e vista finivano su TRE righe, e la pagina si
     apriva su un mucchio di comandi invece che sui prodotti. `nowrap` e un
     posto fisso per ciascuno: i due comandi ai lati non si stringono, quello
     che avanza va alla tendina. L'etichetta «Ordina per» sparisce: la tendina
     dice già «Più recenti», e su 390px quelle due parole valgono metà riga. */
  .bt-results-tools { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .bt-results-tools .shop-filters-toggle { flex: 0 0 auto; padding: 10px 14px; }
  .bt-sort { flex: 1 1 auto; min-width: 0; gap: 0; }
  .bt-sort > span { display: none; }
  .bt-sort select { width: 100%; min-width: 0; padding: 10px 34px 10px 14px; font-size: 14px; --tendina-dentro: 15px; }
  .bt-sort > svg { right: 12px; }
  .bt-view { flex: 0 0 auto; padding: 3px; gap: 2px; }
  .bt-view .view-toggle-btn { width: 34px; height: 34px; }

  /* Accedi, Registrati e Password dimenticata a tutto schermo, come la
     ricerca e il carrello: su un telefono sono pagine, non finestrelle. Le
     finestre di conferma no — quelle restano finestre. */
  .modal-overlay#authModal, .modal-overlay#forgotPasswordModal, .modal-overlay#resetPasswordModal { padding: 0; }
  .modal-overlay#authModal > .modal,
  .modal-overlay#forgotPasswordModal > .modal,
  .modal-overlay#resetPasswordModal > .modal {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
}

/* Le pagine interne hanno <main> figlio diretto del body: niente da cui
   uscire, quindi niente full-bleed (che con la barra di scorrimento farebbe
   sforare di qualche pixel a destra). */
.bt-inner { width: auto; margin-left: 0; }
body.bt-theme { background: var(--bt-ground); color: var(--bt-ink); font-family: var(--bt-font-body); }
/* Pagine di testo non ancora convertite (privacy, cookie, pagine libere):
   almeno carattere, misura e respiro del tema. */
body.bt-theme main.container:not(.bt-page):not(.pg-blocchi) { max-width: 880px; padding: 32px 20px 80px; font-size: 16.5px; line-height: 1.7; }
body.bt-theme main.container:not(.bt-page):not(.pg-blocchi) h1 { font-family: var(--bt-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; margin: 0 0 24px; }
body.bt-theme main.container:not(.bt-page):not(.pg-blocchi) h2 { font-family: var(--bt-font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 32px 0 10px; }

/* ---------- dove il vecchio style.css vinceva ancora ----------
   Regole con la specificità alzata apposta. Da cancellare insieme a style.css. */
.bt-page .filter-group-label { color: var(--bt-ink); text-transform: none; letter-spacing: 0; font-family: var(--bt-font-body); font-size: 15.5px; }
.bt-page .bt-btn--primary, body.bt-theme .bt-btn--primary { background: var(--bt-accent); color: var(--bt-accent-ink); border: 0; border-radius: var(--bt-pill); font-family: var(--bt-font-body); }
.bt-page .bt-btn--primary:hover { background: var(--bt-accent-2, color-mix(in srgb, var(--bt-accent) 88%, var(--bt-ink))); }
.bt-page .bt-btn--onDark, body.bt-theme .bt-btn--onDark { background: var(--bt-card); color: var(--bt-ink); }
.bt-page .bt-btn--ghost { background: var(--bt-card); color: var(--bt-ink); }
.bt-page .filter-apply-btn { margin-top: 0; padding: 16px 30px; }
.bt-page .product-title, body.bt-theme .product-title { text-transform: none; letter-spacing: -.03em; }
.bt-page .product-addcart-btn { padding: 16px 24px; }
.bt-page .cart-page-summary, .bt-page .bt-cart-side { background: none; color: var(--bt-ink); padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.bt-page .bt-summary, .bt-page .bt-summary *:not(.bt-btn--primary):not(.bt-btn--primary *) { color: var(--bt-ink); }
.bt-page .bt-summary .cr span, .bt-page .bt-summary .order-recap-count em, .bt-page .bt-secure, .bt-page .bt-check--small { color: var(--bt-muted); }
.bt-page .bt-summary .cr:last-child span { color: var(--bt-ink); }
.bt-page .bt-summary .order-recap-detail-link, .bt-page .bt-summary .recap-toggle, .bt-page .bt-check a { color: var(--bt-accent); }
.bt-page .bt-summary .bt-discount input { color: var(--bt-ink); }
.bt-page .cart-summary-heading { font-family: var(--bt-font-display); text-transform: none; letter-spacing: -.025em; color: var(--bt-ink); }
.bt-page .cart-item-price, .bt-page .cr strong, .bt-page .cart-item-color { color: var(--bt-ink); font-family: var(--bt-font-display); }
.bt-page .cart-item-color { font-family: var(--bt-font-body); }
.bt-page .cart-item-price-full { font-family: var(--bt-font-body); color: var(--bt-muted); }
.bt-page .qty-control.mini .qty-btn, .bt-page .qty-control.mini button { font-family: var(--bt-font-body); background: none; border: 0; }
.bt-page .step-title { font-family: var(--bt-font-display); text-transform: none; letter-spacing: -.02em; color: var(--bt-ink); }
body.bt-theme .modal-title, body.bt-theme .cart-sidebar-header, body.bt-theme .cart-sidebar-header h3 { text-transform: none; font-family: var(--bt-font-display); letter-spacing: -.02em; color: var(--bt-ink); }
body.bt-theme .cart-sidebar-header h3 { font-size: 21px; font-weight: 800; margin: 0; }
body.bt-theme .modal .btn-primary { border-radius: var(--bt-pill); }

/* Pagine di testo con la fascia in cima (privacy, cookie, accessibilità):
   la fascia diventa un'intestazione del tema. */
body.bt-theme .page-banner { background: var(--bt-ground); color: var(--bt-ink); padding: 14px var(--bt-pad) 0; margin: 0; }
body.bt-theme .page-banner-inner { max-width: 880px; margin: 0; padding: 0; }
body.bt-theme .page-banner-breadcrumb { font-size: 14px; color: var(--bt-muted); margin-bottom: 18px; }
body.bt-theme .page-banner-breadcrumb a { color: var(--bt-muted); }
/* l'ultimo pezzo del percorso (5/10/26): una regola vecchia lo faceva bianco, sulla fascia chiara spariva (1,09 di contrasto,
   online su prova ed Euromarmi). Le fasce scure di una pagina libera lo rifanno bianco con .page-banner--scuro. */
body.bt-theme .page-banner-breadcrumb span { color: var(--bt-ink); }
body.bt-theme .page-banner-title { font-family: var(--bt-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; color: var(--bt-ink); text-transform: none; margin: 0 0 8px; }
body.bt-theme .page-banner-subtitle { font-size: 17px; color: var(--bt-body-ink); margin: 0; }
body.bt-theme main.container:not(.bt-page):not(.pg-blocchi) { margin-left: var(--bt-pad); background: var(--bt-card); border-radius: var(--bt-r-lg); padding: 34px; margin-top: 22px; margin-bottom: 64px; }
/* Una pagina a blocchi del Builder non si incarta: ogni blocco ha il suo
   sfondo. Prende gli stessi margini delle pagine del tema (.bt-inner). */
body.bt-theme main.container.pg-blocchi { background: transparent; border-radius: 0; padding: 14px var(--bt-pad) 64px; margin: 0 auto; }

/* Riepilogo del carrello: style.css lo tingeva di beige con selettori lunghi. */
.bt-page .bt-summary .order-recap .cr span { color: var(--bt-muted); font-size: 15.5px; text-transform: none; letter-spacing: 0; opacity: 1; }
.bt-page .bt-summary .order-recap .cr strong { color: var(--bt-ink); font-size: 15.5px; font-family: var(--bt-font-body); }
.bt-page .bt-summary .order-recap .cr:last-child { border-top: 1px solid var(--bt-line-soft); border-bottom: 0; padding-top: 16px; margin-top: 8px; }
.bt-page .bt-summary .order-recap .cr:last-child span { color: var(--bt-ink); font-size: 17px; font-weight: 700; }
.bt-page .bt-summary .order-recap .cr:last-child strong { color: var(--bt-ink); font-family: var(--bt-font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.bt-page .bt-summary input, .bt-page .bt-summary .bt-discount input { color: var(--bt-ink); background: var(--bt-ground); }
.bt-page .bt-summary input::placeholder { color: color-mix(in srgb, var(--bt-muted) 75%, var(--bt-ink)); }
.bt-page .withdrawal-link, .bt-page .cart-page-summary .withdrawal-link { color: var(--bt-accent); font-weight: 700; text-decoration: underline; text-decoration-style: solid; cursor: pointer; }
.bt-page .bt-btn:disabled { opacity: .55; }
body.bt-theme .cart-sidebar-header > span { font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--bt-ink); }
body.bt-theme .modal-title, body.bt-theme .modal h2, body.bt-theme .modal h3 { text-transform: none; }
.bt-page .cart-item-row .cart-item-price { font-family: var(--bt-font-display); font-variant-numeric: normal; letter-spacing: -.02em; }
.bt-page .bt-discount .bt-btn, .bt-page .discount-code-wrap .bt-btn { border: 1.5px solid var(--bt-line-btn); background: var(--bt-card); color: var(--bt-ink); padding: 12px 18px; border-radius: var(--bt-r-sm); font-size: 14.5px; font-weight: 700; width: auto; }
.bt-page .bonifico-box, .bt-page .pickup-info-box { border: 0; }
/* !important solo qui: style.css arriva a 5 livelli di selettore sul prezzo di
   riga. Sparisce con lui. */
.bt-page .cart-item-row .cart-item-price, .bt-page .order-recap .cart-item-price { font-family: var(--bt-font-display) !important; color: var(--bt-ink) !important; }

/* ---------- carrello: stato vuoto, miniature segnaposto ---------- */
.bt-cart-empty, .bt-shop-empty { border-radius: var(--bt-r-lg); padding: 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: 18px; }
.bt-cart-empty svg, .bt-shop-empty svg { width: 44px; height: 44px; color: var(--bt-muted); margin-bottom: 8px; }
.bt-cart-empty h1, .bt-shop-empty h2 { font-family: var(--bt-font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.bt-cart-empty p, .bt-shop-empty p { font-size: 16px; color: var(--bt-body-ink); }
.bt-cart-empty .bt-btn, .bt-shop-empty .bt-btn { margin-top: 10px; }
.bt-page .cart-item-thumb--empty, body.bt-theme .cart-item-thumb--empty { display: block; }
body.bt-theme .cart-sidebar .cart-item-remove::after { content: none; }
body.bt-theme .cart-sidebar .cart-item-row { flex-wrap: nowrap; }
body.bt-theme .cart-sidebar .cart-item-price { min-width: 0; white-space: nowrap; }
body.bt-theme .shipping-progress-msg strong { color: var(--bt-accent); }

/* ---------- pagina non trovata del core (partials/non-trovata-corpo.php, 4/10/26) ---------- */
body.bt-theme .non-trovata .non-trovata-codice { font-family: var(--bt-font-display); font-size: 72px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--bt-accent); }
body.bt-theme .non-trovata h1 { font-family: var(--bt-font-display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--bt-ink); }
body.bt-theme .non-trovata p { font-size: 16.5px; line-height: 1.55; color: var(--bt-body-ink); }

/* ---------- conferma ordine (modules/vendita/partials/conferma-corpo.php, 4/10/26) ----------
   Rifatta per tutti i temi: grazie col nome, numero, dati del bonifico da copiare, cosa succede adesso, l'ordine a lato.
   Solo i nomi di Bento: un tema che li ridipinge (Euromarmi) se la ritrova coi suoi colori. */
body.bt-theme .confirm-icon { width: 56px; height: 56px; border-radius: var(--bt-pill); background: var(--bt-accent-wash); color: var(--bt-accent); display: flex; align-items: center; justify-content: center; font-size: 26px; }
body.bt-theme .confirm-title { font-family: var(--bt-font-display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-transform: none; color: var(--bt-ink); text-wrap: balance; }
/* il nome nel titolo: l'accento scurito con l'inchiostro (5/10/26), puro sul fondo chiaro faceva 2,86 */
body.bt-theme .confirm-title em { font-style: normal; color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); }
body.bt-theme .confirm-sub { font-size: 16.5px; line-height: 1.55; color: var(--bt-body-ink); }
body.bt-theme .confirm-sub b { color: var(--bt-ink); }
body.bt-theme .conf-numero { font-size: 14px; font-weight: 700; color: var(--bt-muted); }
body.bt-theme .conf-numero strong { color: var(--bt-ink); font-size: 15px; letter-spacing: .02em; margin-left: 4px; }
body.bt-theme .conf-h2 { font-family: var(--bt-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--bt-ink); margin: 0 0 8px; text-transform: none; }
body.bt-theme .conf-bonifico, body.bt-theme .conf-ordine { background: var(--bt-card); border-radius: var(--bt-r); padding: 22px 24px; box-shadow: var(--bt-shadow); }
body.bt-theme .conf-bonifico > p { color: var(--bt-body-ink); font-size: 15px; line-height: 1.55; }
/* il riquadro del bonifico: titolo, frase e dati uno sotto l'altro senza margini (10 e 8 fra i primi, 0 fra le righe dei
   dati, che hanno il filetto): lo spazio sta dentro i pezzi (12/10/26) */
body.bt-theme .conf-bonifico > .conf-h2 { margin: 0; padding-bottom: 8px; }
body.bt-theme .conf-bonifico > p { margin: 0; padding-bottom: 12px; }
body.bt-theme .conf-dato { padding: 12px 0; border-top: 1px solid var(--bt-line); }
body.bt-theme .conf-dato span { font-size: 14px; font-weight: 700; color: var(--bt-muted); }
body.bt-theme .conf-dato b { font-size: 16px; color: var(--bt-ink); }
body.bt-theme .conf-copia { border: 1px solid var(--bt-line-btn); background: var(--bt-card); color: var(--bt-ink); border-radius: var(--bt-pill); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
body.bt-theme .conf-copia:hover, body.bt-theme .conf-copia.fatto { border-color: var(--bt-accent); color: var(--bt-accent); }
body.bt-theme .conf-poi ol { border-top: 1px solid var(--bt-line); }
body.bt-theme .conf-poi li { padding: 14px 0; border-bottom: 1px solid var(--bt-line); font-size: 15px; line-height: 1.5; color: var(--bt-body-ink); }
body.bt-theme .conf-poi li b { color: var(--bt-ink); }
body.bt-theme .conf-poi li::before { border-radius: var(--bt-pill); background: var(--bt-ground); color: var(--bt-ink); font-weight: 800; font-size: 13px; }
body.bt-theme .conf-azioni .btn-primary, body.bt-theme .conf-azioni .btn-secondary, body.bt-theme .conf-account .btn-secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bt-pill); padding: 14px 26px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; width: auto; margin: 0; }
body.bt-theme .conf-azioni .btn-primary { background: var(--bt-accent); color: var(--bt-accent-ink); border: 0; }
body.bt-theme .conf-azioni .btn-secondary, body.bt-theme .conf-account .btn-secondary { background: var(--bt-card); color: var(--bt-ink); border: 1px solid var(--bt-line-btn); }
body.bt-theme .conf-account .btn-secondary { justify-self: start; padding: 11px 20px; font-size: 14px; }
body.bt-theme .conf-righe .cart-item-row { padding: 10px 0; border-bottom: 1px solid var(--bt-line); }
body.bt-theme .conf-righe .cart-item-thumb { border-radius: var(--bt-r-sm); background: var(--bt-ground); }
body.bt-theme .conf-righe .cart-item-color { font-weight: 700; color: var(--bt-ink); font-size: 14.5px; }
body.bt-theme .conf-righe .cart-item-desc { font-size: 13px; color: var(--bt-muted); }
body.bt-theme .conf-righe .cart-item-price { font-weight: 800; color: var(--bt-ink); white-space: nowrap; }
body.bt-theme .conf-per { font-weight: 600; color: var(--bt-muted); }
body.bt-theme .conf-conto { border: 0; padding: 0; margin: 0; }
body.bt-theme .conf-conto .cr { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bt-line); font-size: 15px; color: var(--bt-body-ink); }
body.bt-theme .conf-conto .cr strong { color: var(--bt-ink); }
body.bt-theme .conf-conto .conf-totale { border-bottom: 0; padding-top: 14px; align-items: baseline; }
body.bt-theme .conf-conto .conf-totale strong { font-family: var(--bt-font-display); font-size: 26px; font-weight: 800; }
body.bt-theme .conf-gratis { color: var(--bt-ok) !important; }
body.bt-theme .conf-account { background: var(--bt-ground); border-radius: var(--bt-r); padding: 20px 22px; }
body.bt-theme .conf-account b { font-family: var(--bt-font-display); font-size: 17px; color: var(--bt-ink); }
body.bt-theme .conf-account span { font-size: 14.5px; color: var(--bt-body-ink); line-height: 1.5; }
body.bt-theme .product-breadcrumb { font-size: 14px; color: var(--bt-muted); padding: 14px var(--bt-pad) 0; max-width: none; }

/* ---------- area cliente e registrazione (index.php, SPA) ---------- */
body.bt-theme .account-view { max-width: 1100px; margin: 0 auto; padding: 24px 0 64px; font-family: var(--bt-font-body); color: var(--bt-ink); }
body.bt-theme .account-view .back-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--bt-muted); background: none; border: 0; padding: 0; margin-bottom: 18px; cursor: pointer; }
body.bt-theme .account-view .back-btn:hover { color: var(--bt-accent); }
body.bt-theme .account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
body.bt-theme .account-title { font-family: var(--bt-font-display); font-size: 38px; font-weight: 800; letter-spacing: -.03em; text-transform: none; color: var(--bt-ink); margin: 0; }
body.bt-theme .account-subtitle { font-size: 16.5px; color: var(--bt-body-ink); margin: -10px 0 24px; max-width: 60ch; }
body.bt-theme .account-logout-btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--bt-line-btn); background: var(--bt-card); color: var(--bt-ink); border-radius: var(--bt-pill); padding: 12px 20px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
body.bt-theme .account-logout-btn:hover { border-color: var(--bt-ink); }
body.bt-theme .account-shell { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
body.bt-theme .account-nav { background: var(--bt-card); border-radius: var(--bt-r); padding: 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 14px; }
body.bt-theme .account-nav-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; font: inherit; font-size: 15px; font-weight: 500; color: var(--bt-ink); background: none; border: 0; text-align: left; cursor: pointer; }
body.bt-theme .account-nav-item svg { width: 19px; height: 19px; color: var(--bt-muted); flex-shrink: 0; }
body.bt-theme .account-nav-item:hover { background: var(--bt-ground); }
body.bt-theme .account-nav-item.active { background: var(--bt-ink); color: #FFF; font-weight: 700; }
body.bt-theme .account-nav-item.active svg { color: var(--bt-accent); }
body.bt-theme .account-nav-sep { height: 1px; background: var(--bt-line-soft); margin: 8px 6px; }
body.bt-theme .account-nav-item-danger { color: var(--bt-danger); }
body.bt-theme .account-nav-item-danger svg { color: var(--bt-danger); }
body.bt-theme .account-panes { min-width: 0; }
body.bt-theme .account-pane { background: var(--bt-card); border-radius: var(--bt-r); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
body.bt-theme .account-pane-subtitle { font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 0; color: var(--bt-ink); }
body.bt-theme .account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.bt-theme .account-stat { background: var(--bt-ground); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; border: 0; }
body.bt-theme .account-stat-lbl { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bt-muted); }
body.bt-theme .account-stat-num { font-family: var(--bt-font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--bt-ink); }
body.bt-theme .account-stat-num-sm { font-size: 19px; }
body.bt-theme .account-stat-icon { display: none; }
body.bt-theme .account-orders-empty { font-size: 15px; color: var(--bt-muted); margin: 0; }
body.bt-theme .account-orders-list { display: flex; flex-direction: column; gap: 12px; }
body.bt-theme .acct-order-card { border: 1px solid var(--bt-line); border-radius: 18px; padding: 18px 20px; background: var(--bt-card); }
body.bt-theme .acct-order-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
body.bt-theme .acct-order-num { font-family: var(--bt-font-display); font-size: 17px; font-weight: 800; }
body.bt-theme .acct-order-date { font-size: 14px; color: var(--bt-muted); }
body.bt-theme .acct-order-total { font-family: var(--bt-font-display); font-size: 19px; font-weight: 800; }
body.bt-theme .acct-order-toggle { font-size: 14px; font-weight: 700; color: var(--bt-accent); background: none; border: 0; padding: 0; cursor: pointer; }
body.bt-theme .acct-order-item-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bt-line-soft); font-size: 14.5px; }
body.bt-theme .acct-order-item-price { margin-left: auto; font-weight: 700; }
body.bt-theme .acct-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bt-line-soft); }
body.bt-theme .acct-tstep-dot { background: var(--bt-line); }
body.bt-theme .acct-tstep-dot.done, body.bt-theme .acct-tstep-dot.active { background: var(--bt-accent); }
body.bt-theme .account-view .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
body.bt-theme .account-view .form-group { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; }
body.bt-theme .account-view label { font-size: 14px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .account-view input:not([type=checkbox]):not([type=radio]), body.bt-theme .account-view select, body.bt-theme .account-view textarea { width: 100%; background: var(--bt-ground); border: 1.5px solid transparent; border-radius: var(--bt-r-sm); padding: 14px 16px; font: inherit; font-size: 15px; color: var(--bt-ink); }
body.bt-theme .account-view input:focus, body.bt-theme .account-view select:focus, body.bt-theme .account-view textarea:focus { outline: none; border-color: var(--bt-ink); background: var(--bt-card); }
body.bt-theme .account-view .btn-primary, body.bt-theme .account-view .btn-secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bt-pill); padding: 15px 28px; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; width: auto; }
/* la scritta sull'accento è quella del tema, mai il bianco scritto a mano (12/10/26: sull'arancio faceva 3,1) */
body.bt-theme .account-view .btn-primary { background: var(--bt-accent); color: var(--bt-accent-ink); border: 0; }
body.bt-theme .account-view .btn-secondary { background: var(--bt-card); color: var(--bt-ink); border: 1.5px solid var(--bt-line-btn); }
body.bt-theme .account-view .btn-danger-outline { color: var(--bt-danger); border-color: var(--bt-danger); }
body.bt-theme .account-view .save-confirm { font-size: 14px; color: var(--bt-ok); font-weight: 700; margin-left: 12px; }
body.bt-theme .account-view .auth-err { color: var(--bt-danger); font-size: 14px; }
body.bt-theme .account-type-cards { display: flex; gap: 10px; }
body.bt-theme .account-type-card { flex: 1; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-r-sm); padding: 14px 16px; cursor: pointer; font-size: 15px; font-weight: 500; }
body.bt-theme .account-type-card.active { border-color: var(--bt-accent); background: var(--bt-accent-wash); font-weight: 700; }
body.bt-theme .account-type-card input { display: none; }
body.bt-theme .atc-icon svg { width: 20px; height: 20px; }
/* La scheda scelta si tinge di pesca (--bt-accent-wash): l'icona arancione
   sopra faceva 2,75, cioè spariva. Sul chiaro va la coppia che il tema usa
   già per il colore su fondo tenue (--red-dark). */
body.bt-theme .account-type-card.active .atc-icon { color: var(--red-dark); }
/* il riquadro rosso è il colore degli errori del tema in trasparenza (5/10/26): erano due rosa scritti a mano */
body.bt-theme .danger-zone { border: 1.5px solid color-mix(in srgb, var(--bt-danger) 30%, transparent); background: color-mix(in srgb, var(--bt-danger) 8%, transparent); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
body.bt-theme .danger-zone-title { font-family: var(--bt-font-display); font-size: 19px; font-weight: 800; color: var(--bt-danger); margin: 0; }
body.bt-theme .danger-zone-text { font-size: 15px; line-height: 1.55; color: var(--bt-body-ink); margin: 0; max-width: 64ch; }
body.bt-theme #viewRegister { max-width: 560px; }
body.bt-theme #viewRegister .auth-form { background: var(--bt-card); border-radius: var(--bt-r); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
body.bt-theme #viewRegister .auth-form .form-group { margin: 0; }
/* LO SPAZIO FRA I CAMPI (5/10/26, visto nelle foto): 14px fra un campo e l'etichetta sotto, dappertutto.
   · Iscrizione: i campi arrivano dentro un contenitore loro (#registerFieldsPage) e lo spazio del modulo (gap 14px)
     valeva solo fuori: dentro, le righe stavano attaccate e l'etichetta toccava il campo sopra.
   · Schermate dell'area: lì lo spazio lo dà il margine sotto ogni campo; al telefono le due metà di una riga vanno una
     sotto l'altra e lo spazio della griglia si sommava al margine (30px invece di 14). */
body.bt-theme #registerFieldsPage { display: flex; flex-direction: column; gap: 14px; }
body.bt-theme #viewRegister .form-row { row-gap: 14px; }
body.bt-theme .account-pane .form-row { row-gap: 0; }
body.bt-theme #viewRegister .auth-form .btn-primary { width: 100%; }
body.bt-theme .register-success { background: var(--bt-card); border-radius: var(--bt-r); padding: 40px; text-align: center; }
@media (max-width: 900px) {
  body.bt-theme .account-shell { grid-template-columns: 1fr; }
  /* la colonna dell'area sul telefono non è più una fila di linguette: è la barra laterale del core (30/9/26) */
  body.bt-theme .account-stats { grid-template-columns: 1fr; }
  body.bt-theme .account-view .form-row { grid-template-columns: 1fr; }
  body.bt-theme .account-pane { padding: 20px; }
  body.bt-theme .account-title { font-size: 30px; }
}
/* La miniatura segnaposto delle righe carrello deve vincere sul grigio di
   .cart-item-thumb, dichiarato dopo i fondi colorati. */
.bt-page .cart-item-thumb--empty.bt-ph-1, body.bt-theme .cart-item-thumb--empty.bt-ph-1 { background: var(--bt-ph-1); }
.bt-page .cart-item-thumb--empty.bt-ph-2, body.bt-theme .cart-item-thumb--empty.bt-ph-2 { background: var(--bt-ph-2); }
.bt-page .cart-item-thumb--empty.bt-ph-3, body.bt-theme .cart-item-thumb--empty.bt-ph-3 { background: var(--bt-ph-3); }
.bt-page .cart-item-thumb--empty.bt-ph-4, body.bt-theme .cart-item-thumb--empty.bt-ph-4 { background: var(--bt-ph-4); }
.bt-page .cart-item-thumb--empty.bt-ph-5, body.bt-theme .cart-item-thumb--empty.bt-ph-5 { background: var(--bt-ph-5); }
body.bt-theme .acct-order-total, body.bt-theme .acct-order-item-price { color: var(--bt-ink); font-family: var(--bt-font-display); }
body.bt-theme .account-view #registerCaptcha:empty, body.bt-theme .account-view #checkoutCaptcha:empty { display: none; }
body.bt-theme .access-balloon { background: var(--bt-ok); color: #FFF; border-radius: var(--bt-pill); font-family: var(--bt-font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* Righe del carrello sugli schermi stretti: il nome andava in "Ca… por…"
   (ellissi del vecchio CSS su una riga sola). Miniatura e nome sulla prima
   riga, quantità/prezzo/rimuovi sulla seconda. */
@media (max-width: 780px) {
  body.bt-theme .cart-item-row { flex-wrap: wrap; row-gap: 10px; }
  body.bt-theme .cart-item-info { flex: 1 1 calc(100% - 90px); min-width: 0; }
  body.bt-theme .cart-item-color, body.bt-theme .cart-item-desc { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
  body.bt-theme .cart-sidebar .cart-item-thumb, .bt-page .cart-item-thumb { width: 64px; height: 64px; }
  body.bt-theme .qty-control.mini { margin-left: 0; }
  body.bt-theme .cart-item-price { margin-left: auto; }
}

/* Schermi stretti: la riga del carrello diventa una griglia — miniatura a
   sinistra, poi nome / prezzo / quantità+rimuovi impilati a destra. Vale sia
   nel pannello laterale sia nella pagina carrello. */
@media (max-width: 780px) {
  body.bt-theme .cart-sidebar .cart-item-row,
  body.bt-theme .bt-page .cart-item-row {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "thumb info info" "thumb price price" "thumb qty remove";
    column-gap: 12px; row-gap: 6px; align-items: center; flex-wrap: nowrap;
  }
  body.bt-theme .cart-sidebar .cart-item-thumb, body.bt-theme .bt-page .cart-item-thumb { grid-area: thumb; width: 64px; height: 64px; align-self: start; }
  body.bt-theme .cart-sidebar .cart-item-info, body.bt-theme .bt-page .cart-item-info { grid-area: info; flex: none; }
  body.bt-theme .cart-sidebar .cart-item-color, body.bt-theme .bt-page .cart-item-color { white-space: normal; overflow: visible; display: block; font-size: 15px; }
  body.bt-theme .cart-sidebar .cart-item-price, body.bt-theme .bt-page .cart-item-price { grid-area: price; justify-self: start; margin-left: 0; text-align: left; min-width: 0; font-size: 17px; }
  body.bt-theme .cart-sidebar .qty-control.mini, body.bt-theme .bt-page .qty-control.mini,
  body.bt-theme .cart-sidebar .cart-item-qty-fixed, body.bt-theme .bt-page .cart-item-qty-fixed { grid-area: qty; justify-self: start; }
  body.bt-theme .cart-sidebar .cart-item-remove, body.bt-theme .bt-page .cart-item-remove { grid-area: remove; justify-self: end; width: 38px; height: 38px; padding: 0; font-size: 22px; border-radius: var(--bt-pill); }
}

/* ---------- larghezza massima: la bozza è a 1440, oltre non si stira ---------- */
/* UNA larghezza per tutta la piattaforma: 1480px, centrata. Header, piè di
   pagina e contenuto di ogni pagina si fermano allo stesso bordo. Su schermi
   più stretti scendono insieme. */
:root { --bt-max: 1480px; }
body.bt-theme .header .container, body.bt-theme .footer .container,
.bt-inner, .bt-page > .bt-bento, .bt-page > .bt-section, .bt-page > .bt-cta,
body.bt-theme .page-banner-inner, body.bt-theme main.container:not(.bt-page):not(.pg-blocchi),
body.bt-theme .steps-nav .container, body.bt-theme .main > .container, body.bt-theme .account-view {
  max-width: var(--bt-max); margin-left: auto; margin-right: auto; width: auto;
}
body.bt-theme .main > .container { padding-left: var(--bt-pad); padding-right: var(--bt-pad); }
/* l'area riservata ha i suoi margini (5/10/26): li prendeva da un contenitore che dal 21/9, con la cornice, non c'è più */
body.bt-theme .account-view { padding-left: var(--bt-pad); padding-right: var(--bt-pad); }

/* ---------- carrello nell'header: pastiglia con icona e numero ----------
   style.css gli imponeva 46px fissi: il numero finiva a 4px di larghezza,
   sopra l'icona. */
body.bt-theme .header-cart .cart-icon-btn { width: auto !important; min-width: 44px; height: 44px; padding: 0 18px 0 16px; border-radius: var(--bt-pill); gap: 9px; }
body.bt-theme .header-cart .cart-icon-btn:has(.cart-badge.hidden) { padding: 0; width: 44px !important; }
body.bt-theme .header-cart .cart-badge {
  position: static !important; width: auto !important; min-width: 0; height: auto; line-height: 1;
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-family: var(--bt-font-body); font-size: 14.5px; font-weight: 700; color: #FFF;
}

/* ---------- pulsante "Aggiungi al carrello" e quantità: stessa altezza ---------- */
.bt-pd-buyrow { align-items: stretch; }
.bt-page .bt-qty, .bt-pd-buyrow .qty-control { height: 54px; padding: 4px; gap: 2px; box-sizing: border-box; }
.bt-page .bt-qty .qty-btn { width: 42px; height: 42px; }
.bt-page .bt-qty .qty-input { width: 40px; height: 42px; border: 0 !important; background: none !important; padding: 0; }
.bt-pd-buyrow .bt-btn { height: 54px; padding: 0 24px; font-size: 16.5px; }
.bt-page .qty-control.mini span, body.bt-theme .qty-control.mini span { border: 0 !important; background: none !important; }
/* La quantità era un riquadro (raggio 5px di style.css) e il testo del
   pulsante perdeva il grassetto: forzati come in bozza. */
.bt-page .bt-qty, .bt-pd-buyrow .qty-control, .bt-page .qty-control.mini { border-radius: var(--bt-pill) !important; border: 1.5px solid var(--bt-line) !important; background: var(--bt-card); }
.bt-pd-buyrow .bt-btn, .bt-page .product-addcart-btn { font-weight: 700 !important; font-family: var(--bt-font-body) !important; }
.bt-page .bt-qty .qty-btn { border-radius: var(--bt-pill); }

/* Conferma ordine e casella privacy nello stato ATTIVO (segnalato con
   screenshot: testo sottile, casella spuntata che restava chiara). Regole
   con l'id perché style.css usa `.btn-primary#btnSubmitOrder`. */
body.bt-theme #btnSubmitOrder, body.bt-theme #btnSubmitOrder:not(:disabled) {
  background: var(--bt-accent) !important; color: var(--bt-accent-ink) !important;
  font-family: var(--bt-font-body) !important; font-weight: 700 !important; font-size: 17px;
  border: 0 !important; border-radius: var(--bt-pill) !important; filter: none !important; box-shadow: none !important;
  opacity: 1; transform: none;
}
body.bt-theme #btnSubmitOrder:not(:disabled):hover { background: var(--bt-accent-2, color-mix(in srgb, var(--bt-accent) 88%, var(--bt-ink))) !important; }
body.bt-theme #btnSubmitOrder:disabled { opacity: .5; cursor: not-allowed; }
body.bt-theme .bt-summary input[type="checkbox"], body.bt-theme #privacyCheck {
  appearance: none !important; -webkit-appearance: none !important; width: 21px !important; height: 21px !important;
  margin: 2px 0 0 !important; border-radius: 7px !important; border: 1.5px solid var(--bt-line-btn) !important; background: var(--bt-card) !important;
  padding: 0 !important; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
body.bt-theme .bt-summary input[type="checkbox"]:checked, body.bt-theme #privacyCheck:checked {
  background: var(--bt-accent) !important; border-color: var(--bt-accent) !important;
}
body.bt-theme #privacyCheck:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--bt-accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
/* Altezza del "Conferma ordine": style.css lo schiacciava a ~30px. Stessa
   misura del pulsante grande della bozza (18px sopra e sotto, testo 17). */
body.bt-theme #btnSubmitOrder { height: 58px !important; min-height: 58px; padding: 0 24px !important; line-height: 1 !important; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; }

/* ============================================================
   L'aspetto delle regole rimesse il 7/9/26
   ============================================================
   Compagne di quelle in base-pubblico.css: lì c'è dove sta un pezzo e quanto
   è grande, qui che colore ha. Erano sparite tutte insieme perché
   l'estrattore del foglio teneva solo le regole che agganciavano un nodo, e
   uno pseudo-elemento non è un nodo.
   ============================================================ */

/* L'interruttore del consenso: grigio da spento, colore del marchio da
   acceso. Senza queste due righe la pillola non cambiava mai. */
.tc-consent-switch-slider::before { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.tc-consent-switch input:checked + .tc-consent-switch-slider { background: var(--red); }
.tc-consent-switch input:focus-visible + .tc-consent-switch-slider { outline: 2px solid var(--red); outline-offset: 2px; }
.tc-consent-service-item + .tc-consent-service-item { border-top: 1px solid var(--border); }

.auth-divider::before, .auth-divider::after { background: var(--border); }
.access-balloon--below::after { border-bottom-color: var(--dark); }
.access-balloon--above::after { border-top-color: var(--dark); }
.confirm-modal::before { background-color: rgba(192, 57, 43, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3C/svg%3E"); }
.tabbar-btn.is-active .tabbar-icon::after { background: var(--red); }
.tc-a11y-btn.active::before { border-top-color: #39ff14; border-right-color: #39ff14; }
.cart-page-summary .discount-code-wrap input::placeholder { color: #F3EEE0; opacity: .5; }

/* La finestra del consenso respira: `body.bt-theme .modal` la stringeva a
   440px con più peso di `.tc-consent-modal` (0,2,1 contro 0,1,0), e le tre
   categorie stavano appiccicate. Il velo del fumetto resta quello del tema. */
body.bt-theme .tc-consent-modal { max-width: 580px; }
body.bt-theme .tc-a11y-modal { max-width: 520px; }

/* ---------- telefono: la quantità ACCANTO al pulsante, non sopra ----------
   Marco: «ma il selettore delle quantità riusciamo ad affiancarlo ad aggiungi
   al carrello anche su mobile?».

   Non era un `flex-wrap` che mandava a capo: sotto i 600px base-pubblico.css
   gira la riga in colonna (`flex-direction: column`) e allarga il pulsante al
   100%. È una regola che vale per tutti i temi, quindi non si tocca lì: si
   rimette in fila qui, dove abita il tema.

   Per stare insieme davvero servono tre cose, non una sola:
     · la riga torna in fila;
     · la quantità si stringe (bottoni 34px invece di 42, niente spazi interni)
       ma resta alta 54, perché il dito preme lì;
     · il pulsante deve poter RESTRINGERSI: senza `min-width: 0` un elemento
       flessibile non scende sotto la larghezza del suo testo, e spinge fuori
       la riga. È questa la riga che fa il lavoro.
   Più i 12px che si guadagnano stringendo i fianchi della scheda d'acquisto,
   che a 22px per parte su un telefono sono soldi buttati.

   Sotto i 360px «Aggiungi al carrello» non ci sta comunque (misurato: mancano
   4px a 340), e lì resta la colonna — che a quelle larghezze è la cosa giusta.
   Misurato in WebKit a 320/359/360/375/390/412/430/599 il 10/9/26. */
@media (min-width: 360px) and (max-width: 600px) {
  .bt-page .bt-pd-buy { padding-left: 16px; padding-right: 16px; }
  .bt-page .bt-pd-buyrow { flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
  .bt-page .bt-pd-buyrow .qty-control { flex-shrink: 0; padding: 4px; gap: 0; }
  .bt-page .bt-pd-buyrow .qty-control .qty-btn { width: 34px; height: 44px; }
  .bt-page .bt-pd-buyrow .qty-control .qty-input { width: 26px; height: 44px; }
  /* `width: auto` toglie il 100% di base-pubblico; il testo non va mai a capo
     (un pulsante su due righe si deforma), e il corpo si adatta alla larghezza
     dello schermo invece di restare fisso a 16,5. */
  .bt-page .bt-pd-buyrow .bt-btn {
    width: auto; flex: 1 1 auto; min-width: 0;
    padding: 0 10px; font-size: clamp(15px, 3.4vw, 16.5px); white-space: nowrap;
  }
}

/* IL MENU DELL'AREA SUL TELEFONO (30/9/26): la struttura è del core
   (assets/css/base-pubblico.css, «IL MENU DELL'AREA SUL TELEFONO»), qui il vestito. */
body.bt-theme .area-menu-bt { background: var(--bt-card); color: var(--bt-ink); border: 0; border-radius: var(--bt-r); font-size: 15px; font-weight: 700; }
body.bt-theme .area-menu-bt svg { color: var(--bt-accent); }
body.bt-theme .area-menu-testa b { font-family: var(--bt-font-display); font-size: 18px; font-weight: 800; color: var(--bt-ink); }
body.bt-theme .area-menu-chiudi { background: var(--bt-ground); color: var(--bt-ink); border: 0; border-radius: var(--bt-r-sm); }
body.bt-theme .area-menu-velo { background: rgba(15, 18, 30, .45); }

/* la versione semplice delle pagine della Rivista (modules/rivista/partials/semplice/, 5/10/26): la ricerca come i
   campi e i pulsanti del tema, non quelli di serie del browser */
body.bt-theme .rivista-semplice form { display: flex; gap: 10px; max-width: 560px; margin: 4px 0 18px; }
body.bt-theme .rivista-semplice input[type=search] { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1.5px solid transparent; border-radius: var(--bt-pill); background: var(--bt-ground); font: inherit; font-size: 16px; color: var(--bt-ink); }
body.bt-theme .rivista-semplice input[type=search]:focus { outline: none; border-color: var(--bt-ink); background: var(--bt-card); }
body.bt-theme .rivista-semplice button[type=submit] { height: 48px; padding: 0 22px; border: 0; border-radius: var(--bt-pill); background: var(--bt-accent); color: var(--bt-accent-ink); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- l'area riservata del core: i pezzi che vestiva solo Cultura (5/10/26) ----------
   Dal 21/9 l'area riservata è del core (partials/area-corpo.php) e passa dalla cornice del tema, con classi nuove
   (area-*, scelta-*, iscr-*, campo-aiuto) vestite solo nel foglio di Cultura. Su Bento — online su prova ed
   Euromarmi — il modulo d'accesso andava da bordo a bordo coi link come pulsanti grezzi del browser, e «I miei
   ascolti» della Rivista usciva a parole attaccate («Tempo di ascolto0s»). Qui lo stesso disegno di Cultura, con le
   sue misure, nei nomi e nella forma di Bento. */
body.bt-theme .area-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
body.bt-theme .area-testa .account-subtitle { flex: 1 1 100%; margin: 0; }
body.bt-theme #viewEntra, body.bt-theme #viewRegister { max-width: calc(560px + 2 * var(--bt-pad)); }
body.bt-theme #viewEntra .auth-form { background: var(--bt-card); border-radius: var(--bt-r); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
body.bt-theme #viewEntra .auth-form .form-group { margin: 0; }
body.bt-theme #viewEntra .auth-form .btn-primary { width: 100%; }
body.bt-theme .area-rimandi { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 15px; color: var(--bt-body-ink); }
body.bt-theme .area-sep { color: var(--bt-muted); }
body.bt-theme .area-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--bt-ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bt-accent); text-underline-offset: 3px; }
body.bt-theme .area-link:hover { color: color-mix(in srgb, var(--bt-accent) 70%, var(--bt-ink)); }
body.bt-theme .campo-aiuto { font-size: 13.5px; color: var(--bt-body-ink); }
/* «Chi sei»: un campo «Pulsanti (una scelta)» del modulo di registrazione — tre riquadri, uno solo acceso */
body.bt-theme .scelta-gruppo { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
body.bt-theme .scelta-gruppo legend { padding: 0; margin-bottom: 7px; font-size: 14px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .scelta-pulsanti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.bt-theme .scelta-pulsante { position: relative; display: block; cursor: pointer; margin: 0; }
body.bt-theme .scelta-pulsante input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
body.bt-theme .scelta-pulsante span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 8px; background: var(--bt-ground); border: 1.5px solid transparent; border-radius: var(--bt-r-sm); color: var(--bt-ink); font-weight: 700; font-size: 15px; text-align: center; transition: border-color .15s, background .15s; }
body.bt-theme .scelta-pulsante:hover span { border-color: var(--bt-line-btn); }
body.bt-theme .scelta-pulsante input:checked + span { border-color: var(--bt-accent); background: var(--bt-accent-wash); }
body.bt-theme .scelta-pulsante input:focus-visible + span { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
/* i consensi (le stesse classi del modulo d'iscrizione alla newsletter) */
body.bt-theme .iscr-caselle { display: flex; flex-direction: column; gap: 10px; }
body.bt-theme .iscr-spunta { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--bt-body-ink); cursor: pointer; text-align: left; }
body.bt-theme .iscr-spunta input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--bt-accent); cursor: pointer; }
body.bt-theme .iscr-spunta a { color: var(--bt-ink); text-decoration: underline; text-underline-offset: 2px; }
body.bt-theme .auth-form .area-caselle { margin: 2px 0 4px; }
body.bt-theme .area-vuoto { color: var(--bt-body-ink); border: 1.5px dashed var(--bt-line-btn); border-radius: var(--bt-r-sm); padding: 22px 24px; margin: 0; }

/* «I miei ascolti» della Rivista (modules/rivista/ascolti.js): tre numeri, l'ultima puntata grande con la mappa di cosa
   si è sentito, le altre iniziate, le finite. Il colore della parte sentita è --ma-sentito, che il copione chiede. */
body.bt-theme { --ma-sentito: var(--bt-accent); }
body.bt-theme .ma { display: grid; gap: 32px; }
body.bt-theme .ma > *, body.bt-theme .ma-sez > *, body.bt-theme .ma-eroe-dx > *, body.bt-theme .ma h3, body.bt-theme .ma h4 { margin: 0; }
body.bt-theme .ma-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.bt-theme .ma-num { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: var(--bt-r-sm); background: var(--bt-ground); min-width: 0; }
body.bt-theme .ma-num-lbl { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bt-muted); }
body.bt-theme .ma-num-val { font-family: var(--bt-font-display); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--bt-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.bt-theme .ma-num-val small { font-size: .5em; font-weight: 700; letter-spacing: 0; margin: 0 .5em 0 .15em; }
body.bt-theme .ma-num-val small:last-child { margin-right: 0; }
body.bt-theme .ma-num-val.parole { font-size: 20px; letter-spacing: -.01em; white-space: normal; padding-block: .3em .15em; }
body.bt-theme .ma-num-sotto { font-size: 14px; line-height: 1.45; color: var(--bt-body-ink); }
body.bt-theme .ma-sez { display: grid; gap: 14px; }
body.bt-theme .ma-sez-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
body.bt-theme .ma-sez-tit { font-family: var(--bt-font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--bt-ink); }
body.bt-theme .ma-leggenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--bt-body-ink); }
body.bt-theme .ma-leggenda span { display: inline-flex; align-items: center; gap: 7px; }
body.bt-theme .ma-leggenda i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; background: var(--ma-sentito); }
body.bt-theme .ma-leggenda i.no { background: var(--bt-line); }
body.bt-theme .ma-leggenda i.qui { width: 2px; height: 14px; border-radius: 0; background: var(--bt-ink); }
body.bt-theme .ma-mappa { position: relative; height: 10px; border-radius: 5px; background: var(--bt-line); }
body.bt-theme .ma-mappa-piena { position: absolute; inset: 0; border-radius: 5px; }
body.bt-theme .ma-mappa-qui { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--bt-ink); box-shadow: 0 0 0 2px var(--bt-card); }
body.bt-theme .ma-riga .ma-mappa { height: 6px; }
body.bt-theme .ma-riga .ma-mappa-qui { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; }
body.bt-theme .ma-dati { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; color: var(--bt-body-ink); font-variant-numeric: tabular-nums; }
body.bt-theme .ma-dati b { color: var(--bt-ink); font-weight: 700; }
body.bt-theme .ma-eroe { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 24px; padding: 22px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-r); background: var(--bt-card); }
body.bt-theme .ma-eroe.suona, body.bt-theme .ma-riga.suona { border-color: var(--bt-accent); }
body.bt-theme .ma-cop { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--bt-r-sm); background: var(--bt-line-soft); }
body.bt-theme .ma-eroe-dx { display: grid; gap: 14px; align-content: start; min-width: 0; }
body.bt-theme .ma-eroe-testa { display: grid; gap: 10px; }
body.bt-theme .ma-eti { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bt-muted); }
body.bt-theme .ma-eroe-tit { font-family: var(--bt-font-display); font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
body.bt-theme .ma-eroe-tit a, body.bt-theme .ma-riga-tit a, body.bt-theme .ma-finita-tit a { color: var(--bt-ink); text-decoration: none; }
body.bt-theme .ma-eroe-tit a:hover, body.bt-theme .ma-riga-tit a:hover, body.bt-theme .ma-finita-tit a:hover { text-decoration: underline; text-decoration-color: var(--bt-accent); text-underline-offset: 3px; }
body.bt-theme .ma-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.bt-theme .ma-azioni .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; margin: 0; padding: 12px 22px; border: 0; border-radius: var(--bt-pill); background: var(--bt-accent); color: var(--bt-accent-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
body.bt-theme .ma-azioni .btn-primary svg { width: 14px; height: 14px; fill: currentColor; }
body.bt-theme .ma-azioni .banda-azioni a { font-weight: 700; color: var(--bt-ink); }
body.bt-theme .ma-lista { display: grid; gap: 10px; }
body.bt-theme .ma-riga { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--bt-line); border-radius: var(--bt-r-sm); background: var(--bt-card); }
body.bt-theme .ma-riga .ma-cop { width: 64px; }
body.bt-theme .ma-riga-dx { display: grid; gap: 9px; min-width: 0; }
body.bt-theme .ma-riga-tit { font-size: 16px; font-weight: 700; line-height: 1.35; }
body.bt-theme .ma-riga-tit .ma-eti { margin-right: 8px; }
body.bt-theme .ma-play { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--bt-pill); background: var(--bt-accent); color: var(--bt-accent-ink); cursor: pointer; }
body.bt-theme .ma-play svg { width: 16px; height: 16px; fill: currentColor; }
body.bt-theme .ma-play:focus-visible, body.bt-theme .ma-azioni .btn-primary:focus-visible { outline: 2px solid var(--bt-ink); outline-offset: 3px; }
body.bt-theme .ma-finite { display: grid; border-top: 1px solid var(--bt-line); }
body.bt-theme .ma-finita { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--bt-line); }
body.bt-theme .ma-finita > svg { width: 22px; height: 22px; color: var(--bt-ok); }
body.bt-theme .ma-finita-tit { font-size: 15px; font-weight: 700; line-height: 1.35; min-width: 0; }
body.bt-theme .ma-finita-tit small { display: block; font-size: 13px; font-weight: 500; color: var(--bt-body-ink); margin-top: 3px; }
body.bt-theme .ma-finita .ma-riascolta { font: inherit; font-size: 14px; font-weight: 700; color: var(--bt-ink); background: var(--bt-card); border: 1.5px solid var(--bt-line-btn); border-radius: var(--bt-pill); padding: 8px 16px; cursor: pointer; white-space: nowrap; }
body.bt-theme .ma-finita .ma-riascolta:hover { border-color: var(--bt-ink); }
@media (max-width: 820px) {
  body.bt-theme .ma { gap: 26px; }
  body.bt-theme .ma-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bt-theme .ma-num:first-child { grid-column: 1 / -1; }
  body.bt-theme .ma-eroe { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; }
  body.bt-theme .ma-eroe-tit { font-size: 18px; }
  body.bt-theme .ma-eroe .ma-mappa, body.bt-theme .ma-eroe .ma-dati, body.bt-theme .ma-eroe .ma-azioni { grid-column: 1 / -1; }
  body.bt-theme .ma-eroe-dx { display: contents; }
  body.bt-theme .ma-eroe-testa { align-content: center; min-width: 0; }
  body.bt-theme .ma-azioni { flex-direction: column; align-items: stretch; }
  body.bt-theme .ma-riga { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 12px; padding: 12px; }
  body.bt-theme .ma-riga .ma-cop { width: 52px; }
  body.bt-theme .ma-riga-tit { font-size: 15px; }
}
@media (max-width: 520px) { body.bt-theme .scelta-pulsanti { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) {
  body.bt-theme #viewAccount .account-nav { background: var(--bt-card); border-radius: 0; box-shadow: 0 0 40px rgba(15, 18, 30, .18); }
}

/* ---------- IL CARRELLO E LA CASSA, IL GIRO DA CLIENTE (11/10/26) ----------
   Marco, dopo la freccia gigante nella cassa di Cultura: «Guarda bene quali sono le problematiche, soprattutto
   nell'e-commerce». Il giro del negozio a 1440 e a 390, stato per stato: qui quello che su Bento (e sui suoi figli,
   Euromarmi ed esempio-cliente) usciva sbagliato. Le scritte nel colore dell'accento sono l'accento scurito con
   l'inchiostro, come il nome nel titolo della conferma: l'arancio puro sul chiaro fa 2,9. */
/* «Mostra altri 2 prodotti», «Nascondi prodotti», «Vedi il dettaglio», «Nascondi dettaglio»: link. «.bt-page
   button:not(.bt-btn)» e il colore d'inchiostro del riepilogo li azzeravano, e restava testo nudo che non sembrava
   cliccabile. Alti 40 per il dito. */
.bt-page .bt-cart-rows button.recap-toggle,
.bt-page .bt-summary .order-recap button.recap-toggle,
.bt-page .bt-summary .order-recap button.order-recap-detail-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; background: none; border: 0;
  font: inherit; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); cursor: pointer; }
.bt-page .bt-cart-rows button.recap-toggle svg, .bt-page .bt-summary .order-recap button.recap-toggle svg { width: 14px; height: 14px; flex: none; }
.bt-page .bt-cart-rows button.recap-toggle:hover, .bt-page .bt-summary .order-recap button:is(.recap-toggle, .order-recap-detail-link):hover { text-decoration: underline; text-underline-offset: 3px; }
/* il codice sconto: sbagliato nel rosso degli errori, giusto nel verde (il colore d'inchiostro del riepilogo li faceva
   uguali, tutti e due neri). Per id: dopo «Applica» checkout-page.js riscrive la classe (msg.className = 'discount-msg')
   e .bt-discount-msg sparisce col suo vestito, e tornavano i 22px di margine di serie del core sotto la frase. */
.bt-page .bt-summary p#discountMsg { margin: 0; min-height: 0; font-size: 13.5px; text-wrap: balance; }
.bt-page .bt-summary p#discountMsg:empty { display: none; }
.bt-page .bt-summary p#discountMsg.discount-msg-error { color: var(--bt-danger); }
.bt-page .bt-summary p#discountMsg.discount-msg-success { color: var(--bt-ok); }
/* «Codice sconto» è l'unica scritta del campo: col grigio scritto a mano (#9AA0A9) sul grigio del campo faceva 2,3 e
   quasi non si vedeva */
.bt-page .bt-summary .bt-discount input::placeholder { color: color-mix(in srgb, var(--bt-muted) 75%, var(--bt-ink)); opacity: 1; }
/* lo spazio fra i pezzi del riepilogo lo dà il riepilogo (20): i margini di serie del core sotto il codice sconto (6) e
   sopra la casella della privacy (16) si sommavano, 26 e 36 contro 20 */
.bt-page .bt-summary .bt-discount, .bt-page .bt-summary .privacy-check { margin-top: 0; margin-bottom: 0; }
/* la riga del carrello laterale al computer: un nome lungo spingeva il prezzo sotto la × («16,0⊗ €»). Quantità, prezzo
   e × hanno la loro misura e il nome prende il resto; il prezzo pieno barrato sta sopra quello scontato, piccolo, come
   nella pagina del carrello */
body.bt-theme .cart-sidebar .cart-item-row > :not(.cart-item-info) { flex-shrink: 0; }
body.bt-theme .cart-sidebar .cart-item-info { flex: 1 1 0; }
body.bt-theme .cart-sidebar .cart-item-price-full { display: block; font-family: var(--bt-font-body); font-size: 12.5px; font-weight: 400; color: var(--bt-muted); }
/* lo stesso nella pagina del carrello al computer: col nome lungo il prezzo si stringeva fino ad andare a capo («16,00 /
   €»). Al telefono la riga è una griglia (più giù, 780px) e questo non serve. */
@media (min-width: 781px) {
  .bt-page .cart-item-row > :not(.cart-item-info) { flex-shrink: 0; }
  .bt-page .cart-item-row .cart-item-info { flex: 1 1 0; }
  .bt-page .cart-item-row .cart-item-price { white-space: nowrap; }
}
/* «Mostra dettagli» di un ordine in «I miei ordini» e il numero dell'ordine nella conferma: l'arancio puro e il grigio
   attenuato sul fondo facevano 3,1 e 4,4 */
body.bt-theme .acct-order-toggle { color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); }
body.bt-theme .conf-numero { color: var(--bt-body-ink); }
/* i gruppi dei filtri del catalogo: il filetto sotto ogni gruppo (regola vecchia, in cima a questo foglio) e quello sopra
   il gruppo dopo facevano due righe vicine fra un gruppo e l'altro. Resta quello sopra. */
.bt-page .filter-group { border-bottom: 0; }
/* «Riepilogo» nella cassa: una regola vecchia in cima a questo foglio (l'intestazione del riepilogo scuro di prima) gli
   lascia l'opacità a 0,75, su Bento, sui suoi figli e su Cultura. Pieno, come gli altri titoli. */
.cart-summary-heading { opacity: 1; }
/* «Potrebbe interessarti anche» nel carrello laterale: righe come quelle del carrello, foto, nome e prezzo, «+ Aggiungi».
   Le regole di Bento cercavano nomi che il copione non usa (.cart-cross-sell-media), e restava la foto grande quanto il
   file a riempire il carrello; il titolo era ancora quello vecchio, in maiuscolo e color ottone. */
body.bt-theme .cart-cross-sell { padding: 18px 0 0; border-top: 1px solid var(--bt-line-soft); }
body.bt-theme .cart-cross-sell-title { margin: 0 0 12px; font-family: var(--bt-font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--bt-ink); }
body.bt-theme .cart-cross-sell-items { display: grid; gap: 10px; overflow: visible; padding-bottom: 18px; }
body.bt-theme .cart-cross-sell-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 10px; border: 1px solid var(--bt-line); border-radius: var(--bt-r-sm); }
body.bt-theme .cart-cross-sell-item img, body.bt-theme .cart-cross-sell-noimg { width: 56px; height: 56px; border-radius: 10px; background: var(--bt-line-soft); }
body.bt-theme .cart-cross-sell-item-link { display: grid; gap: 2px; min-width: 0; }
body.bt-theme .cart-cross-sell-item-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .cart-cross-sell-item-price { margin: 0; font-family: var(--bt-font-display); font-size: 15px; font-weight: 800; color: var(--bt-ink); }
body.bt-theme .cart-cross-sell-add { width: auto; min-height: 40px; margin: 0; padding: 0 14px; border: 1.5px solid var(--bt-line-btn); border-radius: var(--bt-pill); background: var(--bt-card); color: var(--bt-ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
body.bt-theme .cart-cross-sell-add:hover { border-color: var(--bt-ink); }
/* il kit nel carrello laterale (nella pagina del carrello Bento li veste già, dentro .bt-page): l'etichetta «Kit» e «Vedi
   kit», e la sua finestra */
body.bt-theme .cart-sidebar .cart-item-kit-tag { margin-left: 6px; padding: 3px 9px; border-radius: var(--bt-pill); background: var(--bt-ground); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--bt-ink); }
body.bt-theme .cart-sidebar .cart-item-kit-view, .bt-page button.cart-item-kit-view { min-height: 32px; background: none; border: 0; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); text-align: left; }
body.bt-theme .kit-contents-modal-image img, body.bt-theme .kit-contents-modal-row img, body.bt-theme .kit-contents-modal-row-noimg { border-radius: var(--bt-r-sm); background: var(--bt-ground); }
body.bt-theme .kit-contents-modal-header { font-size: 14px; font-weight: 700; color: var(--bt-body-ink); border-bottom: 1px solid var(--bt-line); }
body.bt-theme .kit-contents-modal-row + .kit-contents-modal-row { border-top: 1px solid var(--bt-line-soft); }
body.bt-theme .kit-contents-modal-row-title { font-size: 15px; font-weight: 600; color: var(--bt-ink); }
/* «I miei ordini» (collaudo da cliente, 11/10/26): della scheda di un ordine erano vestiti il numero e il totale, il resto
   no. Lo stato era testo semplice, la strada dell'ordine quattro parole una sotto l'altra (le regole dei pallini cercavano
   .acct-tstep-dot.done, ma la classe sta sul passo), «1 articolo» staccato dalle foto. Qui la scheda: in testa numero e
   totale, sotto lo stato in una pastiglia, le foto con quanti articoli accanto, «Mostra dettagli», e aperto il dettaglio
   con la strada dell'ordine (in fila al computer, in colonna al telefono, come su Cultura). */
body.bt-theme .acct-order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
body.bt-theme .acct-order-card > :is(.acct-order-head, .acct-order-status-pill, .acct-order-toggle, .acct-order-detail) { grid-column: 1 / -1; }
body.bt-theme .acct-order-status-pill { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--bt-pill); background: var(--bt-ground); font-size: 13px; font-weight: 700; color: var(--bt-ink); }
body.bt-theme .acct-order-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-accent); }
body.bt-theme .acct-order-status-pill.status-delivered .dot { background: var(--bt-ok); }
body.bt-theme .acct-order-status-pill.status-cancelled .dot { background: var(--bt-danger); }
body.bt-theme .acct-order-summary-line { font-size: 14px; color: var(--bt-body-ink); }
body.bt-theme .acct-order-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
body.bt-theme .acct-order-detail.open { border-top: 1px solid var(--bt-line-soft); }
body.bt-theme .acct-order-item-info { flex: 1; min-width: 0; }
body.bt-theme .acct-order-item-name { font-weight: 700; color: var(--bt-ink); }
body.bt-theme .acct-order-item-meta { font-size: 13.5px; color: var(--bt-muted); }
body.bt-theme .acct-order-item-qty { font-size: 14px; color: var(--bt-body-ink); white-space: nowrap; }
body.bt-theme .acct-order-item-price { white-space: nowrap; }
body.bt-theme .acct-tracker-v { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
body.bt-theme .acct-tstep { display: grid; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--bt-body-ink); }
body.bt-theme .acct-tstep-rail { display: flex; align-items: center; }
body.bt-theme .acct-tstep-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--bt-line); }
body.bt-theme .acct-tstep-line { flex: 1; height: 2px; background: var(--bt-line); }
body.bt-theme .acct-tstep:last-child .acct-tstep-line { display: none; }
body.bt-theme .acct-tstep:is(.active, .done) { color: var(--bt-ink); }
body.bt-theme .acct-tstep:is(.active, .done) .acct-tstep-dot, body.bt-theme .acct-tstep.done .acct-tstep-line { background: var(--bt-accent); }
body.bt-theme .acct-order-cancelled-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; color: var(--bt-danger); }
body.bt-theme .acct-order-cancelled-note svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  body.bt-theme .acct-tracker-v { grid-template-columns: minmax(0, 1fr); }
  body.bt-theme .acct-tstep { grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: stretch; }
  body.bt-theme .acct-tstep-rail { flex-direction: column; padding-top: 4px; }
  body.bt-theme .acct-tstep-line { width: 2px; height: auto; min-height: 18px; }
  body.bt-theme .acct-tstep-label { padding-bottom: 14px; }
  body.bt-theme .acct-tstep:last-child .acct-tstep-label { padding-bottom: 0; }
}
/* il nome di una riga del carrello (laterale, pagina, riepilogo, conferma) al massimo su due righe, poi i puntini: uno di
   110 lettere andava su quattro */
body.bt-theme :is(.cart-sidebar, .bt-page) .cart-item-row .cart-item-color { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* la × per togliere una riga: il grigio scritto a mano faceva 2,6 sul bianco */
body.bt-theme .cart-sidebar .cart-item-remove, body.bt-theme .bt-page .cart-item-remove { color: var(--bt-muted); }
body.bt-theme .cart-sidebar .cart-item-remove:hover, body.bt-theme .bt-page .cart-item-remove:hover { color: var(--bt-danger); }
/* quanto manca alla spedizione gratuita, nel carrello laterale: la barra non aveva un'altezza e non si vedeva mai; la
   cifra in arancio puro faceva 2,9 */
body.bt-theme .shipping-progress-bar { height: 6px; margin-top: 10px; overflow: hidden; }
body.bt-theme .shipping-progress-fill { height: 100%; transition: width .4s ease; }
body.bt-theme .shipping-progress-msg { text-wrap: balance; }
body.bt-theme .shipping-progress-msg strong { color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); }
/* lo spazio nei riquadri della cassa lo dà il riquadro (colonna con 18 fra i pezzi): i margini di serie dei pezzi del
   core si sommavano, 55px fra le scelte della consegna e l'indirizzo del ritiro, 40 in fondo ai riquadri */
.bt-page .bt-cart-panel :is(.payment-methods, .payment-area, .pickup-info-box, .checkout-register-toggle, .checkout-auth-banner) { margin-top: 0; margin-bottom: 0; }
.bt-page .bt-register.checkout-register-toggle { padding: 16px 18px; }
/* i due campi della password dentro il riquadro grigio di «Crea un account»: grigi sul grigio, non si vedevano */
.bt-page .bt-register .form-group input:not([type=checkbox]):not([type=radio]), .bt-page .bt-register .form-group select { background: var(--bt-card); }
/* niente da pagare (un premio in regalo, un codice del 100%): la riga che lo dice, come le istruzioni del bonifico */
.bt-page .cassa-zero { margin: 0; padding: 16px 18px; background: var(--bt-ground); border-radius: var(--bt-r-sm); font-size: 14.5px; line-height: 1.55; color: var(--bt-ink); }
.bt-page .pickup-info-box strong { display: block; margin-bottom: 4px; }
/* i passi spenti (2 e 3) e la frase sotto un metodo scelto: il grigio attenuato faceva 3,8 sul cerchio e 4,3 sul fondo
   tinto della scelta */
.bt-steps-bar li:not(.is-on), .bt-steps-bar li:not(.is-on) span { color: var(--bt-body-ink); }
.bt-page .payment-opt input:checked + .payment-card .payment-info span { color: var(--bt-body-ink); }
.bt-page .withdrawal-link, .bt-page .cart-page-summary .withdrawal-link { color: color-mix(in srgb, var(--bt-accent) 62%, var(--bt-ink)); }
/* col dito, al telefono: i comandi del carrello e della cassa alti almeno 40 (erano 23, 24, 28, 34, 38) */
@media (max-width: 780px) {
  body.bt-theme .cart-sidebar-header .modal-close, body.bt-theme .cart-sidebar .cart-item-remove, body.bt-theme .bt-page .cart-item-remove { width: 40px; height: 40px; }
  body.bt-theme .cart-sidebar .qty-control.mini button { width: 36px; height: 40px; }
  .bt-page .qty-control.mini .qty-btn, .bt-page .qty-control.mini button { height: 40px; }
  .bt-page button.bt-link-muted { display: inline-flex; align-items: center; min-height: 40px; }
  /* «Il tuo carrello» e «Svuota carrello» al centro, non sulla riga di base: il link alto 40 per il dito scendeva sotto il
     titolo e il riquadro restava con 30px sopra e 52 sotto */
  .bt-page .bt-cart-title { align-items: center; }
  body.bt-theme .conf-copia { min-height: 40px; }
  .bt-page .bt-tab { padding-top: 10px; }
  body.bt-theme .acct-order-toggle { display: inline-flex; align-items: center; min-height: 40px; }
  body.bt-theme .cart-sidebar .cart-item-kit-view, .bt-page button.cart-item-kit-view { min-height: 40px; }
  /* i campi della cassa a 16px col dito: a 15 (e il codice a 14,5) il telefono ingrandisce la pagina quando ci si scrive */
  .bt-page .bt-field input, .bt-page .bt-field textarea, .bt-page .form-group input:not([type=checkbox]):not([type=radio]), .bt-page .form-group textarea, .bt-page .bt-discount input { font-size: 16px; }
  /* anche le tendine (12/10/26): «Chi sei» dell'account dalla cassa era a 15 e il telefono ingrandiva la pagina */
  .bt-page .form-group select { font-size: 16px; }
}