/* BSA carrello nuovo (modulo bsacheckout). Caricato SOLO con BSAOPC_CART_MODE attivo per il
   visitatore. Design: tasks/2026-09-27-carrello-restyle-design.md.
   Stile: token e forme di bsa-checkout.css (crema, card, Poppins del tema, radius 12/999).
   Vincoli Safari: niente :has(), 100vw, gap nei flexbox, overflow:clip (gap nei grid ammesso).
   Ogni selettore e' prefissato con "body#cart" (Fix round 1, v. task-6-report.md): il file e'
   caricato "remote" dal 1.1.0 e con il CSS unico del tema attivo (PS_CSS_THEME_CACHE) arriva
   PRIMA del bundle del tema invece che dopo - qualunque regola che pareggiasse in specificita'
   con una regola del tema perdeva SOLO in quello stato. L'id su body vince a prescindere
   dall'ordine dei file, senza dover toccare i valori né aggiungere !important. */

body#cart {
  --bsa-ink: #14151A;
  --bsa-text: #2C2C2A;
  --bsa-muted: #6B6B66;
  --bsa-cream: #f2f1ec;
  --bsa-card: #F7F6F2;
  --bsa-line: #D6D4D4;
  --bsa-line-soft: #EDEBE4;
  --bsa-error: #B3261E;
  --bsa-ok: #2F6F63;
  --bsa-bar-h: 76px; /* 1.2.1: CTA a 54 px (come "Paga") + 10+10 di padding + bordo */
}

body#cart #wrapper { background: var(--bsa-cream); }

/* difetto preesistente del tema (non introdotto da questo modulo, presente anche a BSAOPC_CART_MODE
   off): il blocco newsletter del footer ha un .row Bootstrap a margini negativi senza un .container
   che li compensi, e sfora la larghezza a 768/1440. Fix minimo scoperto verificando lo scrollWidth
   della pagina reale, scoped a body#cart per restare nel perimetro del task. */
body#cart .block_newsletter .row { margin-left: 0; margin-right: 0; }
body#cart .block_newsletter .col-conditions,
body#cart .block_newsletter .col-form,
body#cart .block_newsletter .col-mesg { padding-left: 0; padding-right: 0; }
/* stesso difetto sulla riga a due colonne del footer (.links.block, es. "Our company") e sulla riga
   che avvolge #content-wrapper: qui NON si puo' usare overflow-x:hidden su un antenato (spezzerebbe
   la sticky del riepilogo desktop, che ha bisogno del vero scroll di pagina), quindi si azzera la
   coppia margine-riga/padding-colonna invece di far leva su un padding esterno che a 1440 e' 0 */
body#cart #wrapper > .row { margin-left: 0; margin-right: 0; }
body#cart #content-wrapper { padding-left: 0; padding-right: 0; }
body#cart .links.block .row { margin-left: 0; margin-right: 0; }
body#cart .links.block .col-md-6.wrapper { padding-left: 0; padding-right: 0; }

/* ---------- impianto ---------- */

body#cart .bsa-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--bsa-bar-h) + 24px + env(safe-area-inset-bottom));
  color: var(--bsa-text);
}

body#cart .bsa-cart__main,
body#cart .bsa-cart__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }

body#cart .bsa-cart .card {
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  margin: 0;
}

body#cart .bsa-cart__head { display: flex; align-items: baseline; justify-content: space-between; }
body#cart .bsa-cart__title { font-size: 22px; font-weight: 600; text-transform: none; margin: 0; color: var(--bsa-ink); }
body#cart .bsa-cart__count { font-size: 14px; color: var(--bsa-muted); margin-left: 12px; }

/* ---------- righe ---------- */

body#cart .bsa-cart .cart-items { list-style: none; margin: 0; padding: 4px 16px; }
body#cart .bsa-cart .cart-item { padding: 0; border-bottom: 1px solid var(--bsa-line-soft); }
body#cart .bsa-cart .cart-item:last-child { border-bottom: 0; }
body#cart .bsa-cart .no-items { display: block; padding: 24px 16px; color: var(--bsa-muted); }

body#cart .bsa-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 32px;
  gap: 12px;
  padding: 14px 0;
  align-items: start;
}
body#cart .bsa-line__img { overflow: hidden; border-radius: 8px; } /* argine se l'immagine del prodotto manca: niente alt-text che sfora dalla riga */
body#cart .bsa-line__img img { display: block; width: 72px; height: auto; border-radius: 8px; background: var(--bsa-card); }
body#cart .bsa-line__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 14px; border-radius: 999px; background: var(--bsa-card); color: var(--bsa-ok); }
/* deviazione dal brief: il link del nome (cart-line.tpl) porta anche la classe "label", presa dal
   markup core; il tema (theme.css) ha una regola "label, .label{text-align:right;color:#444;
   font-weight:600}" pensata per le label dei form, stessa specificita' (1 classe) e caricata dopo
   bsa-cart.css: senza contrasto il titolo del prodotto va a destra e cambia colore/peso. Non si
   tocca il template: ".bsa-cart" in piu' nel selettore basta a vincere. */
body#cart .bsa-cart .bsa-line__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--bsa-ink); text-align: left;
}
body#cart .bsa-line__attrs { margin-top: 2px; font-size: 12px; color: var(--bsa-muted); }
body#cart .bsa-line__price { margin-top: 4px; font-size: 13px; }
body#cart .bsa-line__regular { color: var(--bsa-muted); text-decoration: line-through; margin-right: 6px; }
body#cart .bsa-line__badge { display: inline-block; padding: 1px 6px; margin-right: 6px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--bsa-error); border: 1px solid currentColor; }
body#cart .bsa-line__current { color: var(--bsa-text); }
body#cart .bsa-line__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
body#cart .bsa-line__total { font-size: 15px; font-weight: 600; color: var(--bsa-ink); }
body#cart .bsa-line--service .bsa-line__actions { justify-content: flex-end; }
body#cart .bsa-line__remove { text-align: right; }
body#cart .bsa-line__remove .remove-from-cart { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; color: var(--bsa-muted); }
body#cart .bsa-line__remove .remove-from-cart:hover { color: var(--bsa-error); }

/* stepper: touchspin del core (input + due pulsanti), messo in fila "- n +" */
body#cart .bsa-line__qty .bootstrap-touchspin {
  display: inline-flex; align-items: stretch; width: auto; height: 40px;
  border: 1px solid var(--bsa-line); border-radius: 999px; overflow: hidden; background: #fff;
}
body#cart .bsa-line__qty .bootstrap-touchspin .input-group-addon { display: none; }
/* deviazione dal brief: il tema (theme.css + bsa-merged.min.css, "PAGINA CARRELLO") ha regole di
   2-4 classi su questi stessi elementi (.cart-item .bootstrap-touchspin/.product-quantity
   .bootstrap-touchspin {width:80px}, #cart .cart-item .bootstrap-touchspin input.form-control,
   .cart-item .bootstrap-touchspin .input-group-btn-vertical...) che altrimenti vincono in cascata
   (bordo/radius sull'input, larghezza del contenitore, display:grid sul wrapper verticale invece
   del nostro "contents", larghezza/altezza dei pulsanti): prefisso body#cart su ogni selettore di
   questo blocco per vincere per specificita' a prescindere dall'ordine dei file (vale anche con
   bsa-cart.css caricato "remote", 1.1.0: senza il prefisso qui, a CCC on la larghezza 80px del
   tema tornava a vincere e lo stepper si schiacciava sotto i 40 px, v. CONTEXT-Modulo.md), senza
   !important, tranne il radius che il tema forza con !important */
body#cart .bsa-line__qty .bootstrap-touchspin input.js-cart-line-product-quantity {
  order: 2; width: 40px; height: 38px; padding: 0; border: 0; text-align: center;
  /* 16px, non 15px: sotto i 16px Safari iOS zooma la pagina al focus dell'input */
  font-size: 16px; font-weight: 600; background: transparent; -moz-appearance: textfield;
  border-radius: 0 !important; /* il tema forza border-radius:15px !important sullo stesso input */
}
body#cart .bsa-line__qty input::-webkit-outer-spin-button,
body#cart .bsa-line__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body#cart .bsa-line__qty .input-group-btn-vertical { display: contents; }
body#cart .bsa-line__qty .input-group-btn-vertical .btn {
  position: static; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--bsa-ink);
}
body#cart .bsa-line__qty .bootstrap-touchspin-down { order: 1; margin-top: 0; }
body#cart .bsa-line__qty .bootstrap-touchspin-up { order: 3; }
body#cart .bsa-line__qty .input-group-btn-vertical .btn i,
body#cart .bsa-line__qty .input-group-btn-vertical .btn .material-icons { display: none; }
body#cart .bsa-line__qty .bootstrap-touchspin-down::before { content: "\2212"; font-size: 18px; }
body#cart .bsa-line__qty .bootstrap-touchspin-up::before { content: "+"; font-size: 18px; }

/* ---------- servizi, dentro lo step (markup del modulo Prestaworld, non modificato) ----------
   1.2.2: ogni opzione e' una scheda da toccare (Giuseppe: "voci piu' visibili e non accordion
   chiusi, quasi dei pulsanti"), riferimento bike-room "Scegli la box di spedizione". Tutti i gruppi
   sempre visibili, il titolo del gruppo (h3.presta_block_headings) come piccola intestazione.
   bsa-cart.js (enhanceOptions) avvolge il testo in .bsa-svc-text (titolo + nota), aggiunge
   l'indicatore .bsa-svc-check dopo l'input e l'anello .bsa-svc-ring, e mette .bsa-svc-opt sulla
   label (.is-checked quando l'input e' spuntato: niente :has(), escluso per Safari). L'input vero
   resta nel DOM, focalizzabile e cliccabile, solo trasparente (Prestaworld legge :checked e ascolta
   i click sull'input). Senza JS: schede con la casella nativa a sinistra e il prezzo a destra. */

body#cart .bsa-step__services > .card { padding: 4px 20px 20px; margin: 0 !important; border: 0; border-radius: 12px; background: #fff; box-shadow: none; } /* il modulo mette margin-top:20px inline: unico modo di batterlo */
body#cart .bsa-step__services .card-block { padding: 18px 0 2px; }
body#cart .bsa-step__services h1.h1 {
  font-size: 17px; font-weight: 600; line-height: 1.3; text-transform: none; margin: 0; color: var(--bsa-ink);
}
body#cart .bsa-step__services hr.separator,
body#cart .bsa-step__services .presta_original_product_price { display: none; }
/* il modulo mette padding 20px inline: unico modo di batterlo */
body#cart .bsa-step__services .clearfix[style] { padding: 0 !important; }
body#cart .bsa-step__services .presta_block { float: none; width: auto; padding: 0; }
body#cart .bsa-step__services .presta_block_headings {
  margin: 20px 0 10px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bsa-muted);
}
body#cart .bsa-step__services .presta_field_heading { display: none; } /* "Assicurazione", "Confezione": ripetono il titolo del gruppo */
body#cart .bsa-step__services .list-attribute-custom { margin: 0; padding: 0; }
body#cart .bsa-step__services .presta_custom_field { margin: 0; padding: 0; border: 0; }
body#cart .bsa-step__services .presta_custom_field + .presta_custom_field { margin-top: 10px; }

/* scheda (anche senza JS). Tema globale align-right label a >=992px: text-align:left lo neutralizza */
body#cart .bsa-step__services .presta_custom_field label {
  position: relative; display: block; min-height: 64px; margin: 0; padding: 14px 104px 14px 50px;
  border: 1px solid var(--bsa-line); border-radius: 12px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--bsa-ink); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body#cart .bsa-step__services .presta_custom_field input[type="checkbox"],
body#cart .bsa-step__services .presta_custom_field input[type="radio"] {
  position: absolute; left: 16px; top: 20px; width: 22px; height: 22px; margin: 0; accent-color: var(--bsa-ink);
}
body#cart .bsa-step__services .presta_custom_field .product-price {
  position: absolute; right: 16px; top: 21px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
body#cart .bsa-step__services .formatted-price { color: var(--bsa-ink); }
body#cart .bsa-step__services .bsa-svc-title { display: block; }
body#cart .bsa-step__services .bsa-svc-note { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--bsa-muted); }

/* scheda con JS: flex (niente gap: margini), indicatore disegnato, input trasparente sopra */
body#cart .bsa-step__services .presta_custom_field label.bsa-svc-opt {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; padding: 14px 16px;
}
body#cart .bsa-step__services .presta_custom_field .bsa-svc-opt input[type="checkbox"],
body#cart .bsa-step__services .presta_custom_field .bsa-svc-opt input[type="radio"] {
  top: 50%; left: 16px; width: 24px; height: 24px; margin: -12px 0 0; padding: 0;
  opacity: 0; z-index: 1; cursor: pointer; -webkit-appearance: none; appearance: none;
}
body#cart .bsa-step__services .bsa-svc-check {
  position: relative; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 24px; height: 24px; margin: 0 14px 0 0;
  border: 1.5px solid #8A8882; border-radius: 7px; background: #fff; box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease;
}
body#cart .bsa-step__services .bsa-svc-opt--radio .bsa-svc-check { border-radius: 50%; }
body#cart .bsa-step__services .bsa-svc-text { display: block; -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
body#cart .bsa-step__services .presta_custom_field .bsa-svc-opt .product-price {
  position: static; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 12px; text-align: right;
}
body#cart .bsa-step__services .bsa-svc-ring {
  position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: 12px; pointer-events: none;
}
body#cart .bsa-step__services .bsa-svc-opt input:focus-visible ~ .bsa-svc-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bsa-ink); }

/* scelta: bordo inchiostro da 2 px (1 px + ombra interna, niente salto di layout) e fondo crema */
body#cart .bsa-step__services .presta_custom_field label.is-checked {
  border-color: var(--bsa-ink); box-shadow: inset 0 0 0 1px var(--bsa-ink); background: var(--bsa-card);
}
body#cart .bsa-step__services .is-checked .bsa-svc-check { border-color: var(--bsa-ink); background: var(--bsa-ink); }
body#cart .bsa-step__services .is-checked .bsa-svc-check::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
body#cart .bsa-step__services .bsa-svc-opt--radio.is-checked .bsa-svc-check { background: #fff; }
body#cart .bsa-step__services .bsa-svc-opt--radio.is-checked .bsa-svc-check::after {
  left: 5px; top: 5px; width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--bsa-ink); -webkit-transform: none; transform: none;
}
body#cart .bsa-step__services .presta_custom_field label.is-disabled { opacity: .5; cursor: not-allowed; }
/* hover solo con un puntatore vero: su touch resterebbe "acceso" dopo il tap */
@media (hover: hover) {
  body#cart .bsa-step__services .presta_custom_field label.bsa-svc-opt:hover { border-color: #8A8882; }
  body#cart .bsa-step__services .presta_custom_field label.bsa-svc-opt.is-checked:hover { border-color: var(--bsa-ink); }
  body#cart .bsa-step__services .bsa-svc-opt:hover .bsa-svc-check { border-color: var(--bsa-ink); }
}
body#cart .bsa-step__services .presta_custom_field label.bsa-svc-opt:active { background: var(--bsa-card); }

body#cart .bsa-step__services .presta_error_code:empty { display: none; }
body#cart .bsa-step__services .presta_error_code { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--bsa-error); }

/* ---------- riepilogo ---------- */

body#cart .bsa-cart__summary { padding: 8px 16px 16px; border: 0; }
body#cart .bsa-cart .cart-grid-right .cart-summary,
body#cart .bsa-cart__summary.cart-summary { border: 0; border-radius: 12px; } /* il tema: bordo nero 20px */
/* stessa specificita' (2 classi) della regola del tema: senza body#cart vince lei per ordine di
   caricamento (bsa-merged.min.css e' incluso dopo bsa-cart.css) e "Il tuo Carrello" resta visibile */
body#cart .bsa-cart__summary .cart-detailed-totals::before { content: none; } /* il tema scrive "Il tuo Carrello" */
body#cart .bsa-cart__summary .card-block { padding: 8px 0; }
body#cart .bsa-cart__summary .cart-summary-line { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 6px 0; font-size: 14px; }
/* la riga spedizione del core porta un <div><small class="value"></small></div> extra (di norma
   vuoto): con flex-wrap va a capo invece di rompere lo spazio tra le prime due colonne */
body#cart .bsa-cart__summary .cart-summary-line > div { flex-basis: 100%; order: 3; }
body#cart .bsa-cart__summary .cart-summary-line::after { content: none; }
body#cart .bsa-cart__summary .cart-total { padding-top: 10px; border-top: 1px solid var(--bsa-line-soft); font-size: 17px; font-weight: 600; color: var(--bsa-ink); }
body#cart .bsa-cart__summary .cart-detailed-actions { padding: 12px 0 0; }

/* ---------- CTA principali (1.2.1) ----------
   "Vai alla cassa" del riepilogo (<button> nel form GET) e della barra fissa (<a>), "Continua"
   dello step (<a>): stesso pulsante del "Paga" del one-page (bsa-checkout.css,
   #bsa-opc-payment #payment-confirmation button[type="submit"]: inchiostro, testo bianco, 54 px,
   pillola, 16 px 700 maiuscolo, spaziatura .5px) al posto del giallo del tema. Contro cosa vince:
   ".checkout.cart-detailed-actions.card-block .btn" + :hover/:focus (custom.css e bsa-merged: giallo,
   4-5 classi) e ".btn-outline:hover/:focus/:active" (theme.css, #000): tutti senza id, quindi
   "body#cart ..." li batte per specificita' in qualunque ordine di file (CCC acceso o spento). Gli
   stati (:hover, :focus, :active) si ridichiarano qui sotto perche' quelle regole del tema cambiano
   lo sfondo proprio in quegli stati. Il contorno di focus e' un box-shadow: il tema ha
   ".btn:focus { outline: none !important }" (theme.css), che nessun selettore nostro senza
   !important puo' battere. Flex (niente gap) + min-height: con un testo lungo (inglese, schermi da
   360 px) va a capo invece di uscire dal pulsante. */
body#cart .bsa-cart__summary .cart-detailed-actions .btn,
body#cart .bsa-cart__bar-cta,
body#cart .bsa-step__continue {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  width: 100%; min-height: 54px; height: auto; margin: 0; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--bsa-ink); color: #fff;
  font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: .5px; text-transform: uppercase;
  text-align: center; text-decoration: none; white-space: normal;
  opacity: 1; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}
body#cart .bsa-cart__summary .cart-detailed-actions .btn:focus,
body#cart .bsa-cart__bar-cta:focus,
body#cart .bsa-step__continue:focus,
body#cart .bsa-cart__summary .cart-detailed-actions .btn:visited,
body#cart .bsa-cart__bar-cta:visited,
body#cart .bsa-step__continue:visited { background: var(--bsa-ink); color: #fff; text-decoration: none; }
/* hover solo con un puntatore vero: su touch resterebbe "acceso" dopo il tap */
@media (hover: hover) {
  body#cart .bsa-cart__summary .cart-detailed-actions .btn:hover,
  body#cart .bsa-cart__bar-cta:hover,
  body#cart .bsa-step__continue:hover { background: #2E2F36; color: #fff; text-decoration: none; }
}
body#cart .bsa-cart__summary .cart-detailed-actions .btn:active,
body#cart .bsa-cart__bar-cta:active,
body#cart .bsa-step__continue:active { background: #000; color: #fff; }
body#cart .bsa-cart__summary .cart-detailed-actions .btn:focus-visible,
body#cart .bsa-cart__bar-cta:focus-visible,
body#cart .bsa-step__continue:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bsa-ink); }
/* carrello sotto il minimo / vuoto: il tema rende lo stesso .btn disabilitato (cart-detailed-actions.tpl),
   stesso trattamento del "Paga" non ancora attivo (opacity .45) */
body#cart .bsa-cart__summary .cart-detailed-actions .btn.disabled,
body#cart .bsa-cart__summary .cart-detailed-actions .btn[disabled],
body#cart .bsa-cart__summary .cart-detailed-actions .btn.disabled:hover,
body#cart .bsa-cart__summary .cart-detailed-actions .btn[disabled]:hover {
  background: var(--bsa-ink); color: #fff; opacity: .45; cursor: not-allowed;
}
/* fix finale 1.2.0 (I4): l'apertura del riepilogo e' un <form> attorno al bottone (non piu' un
   <a>, v. cart-detailed-actions.tpl): azzera il margine di default del form cosi' il bottone resta
   pieno-larghezza esattamente come prima, senza spazio in piu' sopra/sotto. */
body#cart .bsa-cart__open-step-form { display: block; width: 100%; margin: 0; }

body#cart .bsa-cart__continue { display: block; text-align: center; font-size: 14px; color: var(--bsa-ink); text-decoration: underline; }

/* ---------- codice sconto nel riepilogo (1.2.1) ----------
   Markup del tema (cart-voucher.tpl, non toccato): form flex con input.promo-input + button. Sul
   live il pulsante usciva dalla card a destra: il tema da' all'input "flex: 1 1 0%" ma non
   min-width:0, e in Poppins 16 px la sua larghezza intrinseca (size=20) e' 349 px contro 266 di
   form a 390: un elemento flex non scende sotto quella misura. Qui: input che si stringe
   (min-width:0), pulsante largo quanto il testo, 8 px fra i due (margine, niente gap nei flexbox
   per Safari), altezze 48 come i campi del one-page, 16 px sul campo (sotto, iOS zooma la pagina).
   L'etichetta "Add" (stringa del tema senza traduzione) diventa "Applica"/"Apply" in bsa-cart.js. */
body#cart .bsa-cart__summary .block-promo .promo-code { padding: 12px 0 4px; background: none; border: 0; }
body#cart .bsa-cart__summary .block-promo .promo-code form {
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch;
  width: 100%; margin: 0;
}
body#cart .bsa-cart__summary .block-promo .promo-code .promo-input {
  -webkit-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid var(--bsa-line); border-radius: 10px; background: #fff; color: var(--bsa-ink);
  font-size: 16px; line-height: normal; box-shadow: none; outline: 0; -webkit-appearance: none; appearance: none;
}
body#cart .bsa-cart__summary .block-promo .promo-code .promo-input:focus { border-color: var(--bsa-ink); box-shadow: 0 0 0 1px var(--bsa-ink); }
body#cart .bsa-cart__summary .block-promo .promo-code form .btn {
  -webkit-flex: 0 0 auto; flex: 0 0 auto; width: auto; height: 48px; margin: 0 0 0 8px; padding: 0 18px;
  border: 1px solid var(--bsa-ink); border-radius: 999px; background: #fff; color: var(--bsa-ink);
  font-size: 14px; font-weight: 600; line-height: 46px; letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: none; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  body#cart .bsa-cart__summary .block-promo .promo-code form .btn:hover { background: var(--bsa-ink); color: #fff; }
}
body#cart .bsa-cart__summary .block-promo .promo-code form .btn:focus { background: #fff; color: var(--bsa-ink); }
body#cart .bsa-cart__summary .block-promo .promo-code form .btn:active { background: var(--bsa-ink); color: #fff; }
body#cart .bsa-cart__summary .block-promo .promo-code form .btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bsa-ink); }
body#cart .bsa-cart__summary .block-promo .promo-code form .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- fascia "spedizione gratuita" vuota (1.2.1) ----------
   Il modulo sidecart (Codeurweb) stampa nel riepilogo (displayShoppingCart) un .free-shipping con
   padding, fondo grigio e bordo. A soglia raggiunta ("is_reached") il tema nasconde il messaggio e
   "message-reached" e' vuoto: restava una fascia grigia di 11 px senza testo in cima alla card.
   bsa-cart.js (tidySummary) mette data-bsa-empty sulla fascia quando non mostra testo; col
   messaggio "Mancano solo ..." resta com'e'. :empty copre il contenitore stampato senza nulla. */
body#cart .bsa-cart__summary .sidecart-page .free-shipping[data-bsa-empty],
body#cart .bsa-cart__summary .sidecart-page:empty { display: none; }

body#cart .bsa-cart__more { min-width: 0; }

/* ---------- barra fissa (mobile e tablet) ---------- */

body#cart .bsa-cart__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center;
  min-height: var(--bsa-bar-h);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--bsa-line);
  box-shadow: 0 -6px 18px rgba(20, 21, 26, .08);
  transition: transform .2s ease;
}
body#cart .bsa-cart__bar.is-hidden { transform: translateY(110%); }
body#cart .bsa-cart__bar-total { flex: 0 0 auto; margin-right: 12px; }
body#cart .bsa-cart__bar-label { display: block; font-size: 11px; color: var(--bsa-muted); }
body#cart .bsa-cart__bar-value { font-size: 17px; color: var(--bsa-ink); }
body#cart .bsa-cart__bar .cart-detailed-actions { flex: 1 1 auto; padding: 0; }
/* il "Vai alla cassa" della barra: dalla 1.2.1 stesso pulsante del riepilogo (v. "CTA principali"
   sopra), non piu' il giallo del tema replicato qui */

/* Bolla della chat (modulo bsachat, NON modificato) sopra la barra fissa: il bottone `.lancia`
   vive nello shadow root di #bsa-chat con `bottom: var(--bsa-basso, 20px)`. Una regola qui su
   #bsa-chat non serve a nulla (verificato): bsachat scrive quella stessa custom property con
   uno stile INLINE su un nodo interno al suo shadow root, e un valore specificato su un
   elemento blocca sempre l'eredita' da un antenato esterno, qualunque sia il CSS qui fuori.
   L'unico segnale che il widget legge davvero e' #mobile-sticky-bar.visible (la barra
   "Aggiungi al carrello" della pagina prodotto, creata da assets/js/add-to-cart-fixed.js: su
   questa pagina non esiste mai da solo). bsa-cart.js crea quel nodo e gli da' la classe
   "visible" in sincrono con la nostra barra; qui gli si da' la stessa altezza della barra,
   nascondendo tutto il resto (il tema lo renderebbe come una barra bianca visibile) - vedi
   CONTEXT-Modulo.md, "Bolla chat e barra fissa". */
body#cart #mobile-sticky-bar {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: calc(var(--bsa-bar-h) + env(safe-area-inset-bottom));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* Overlay di terze parti sopra la barra fissa (fix 2026-09-29, v1.1.1). Verificato sul live
   (iPhone 13, /it/carrello?action=show&bsaopc=1, 2026-09-28): due elementi restano fixed in basso
   a prescindere dalla nostra barra e, quando questa e' visibile, ne coprono il totale.
   Soluzione vera in corso da Giuseppe: escludere /carrello, /cart, /ordine, /order dal targeting
   del form Klaviyo (il pop-up non dovrebbe comparire li' affatto). Queste regole sono solo una
   rete di sicurezza, non sostituiscono quell'esclusione.
   - Klaviyo ("Ottieni 5€ di sconto", form id UKRHNP): markup in DOM normale (non shadow), quindi
     raggiungibile da qui. [class*="kl-private-reset-css"] e' l'unico selettore stabile: il resto
     della classe e' un hash che cambia ad ogni pubblicazione del form lato Klaviyo (fragile per
     natura: se Klaviyo smette di usare quel prefisso la regola smette di far presa, senza errori
     visibili). Il pop-up non si e' ripresentato dal vivo in questa sessione di verifica (vedi
     tasks/../v111-report.md per i tentativi: consenso accettato/rifiutato, fino a 40s di attesa
     con scroll) - selettore/posizione presi dalla segnalazione originale, DA RICONFERMARE alla
     prossima occasione utile. Klaviyo riposiziona il pop-up con stile INLINE (il suo motore di
     layout lo riscrive a resize/scroll): senza !important questa regola perde sempre.
   - LegalBlink (icona "Impostazioni cookie", persistente dopo la chiusura del banner): vive dentro
     lo SHADOW ROOT aperto di <lb-cookie-banner>, con lo stesso limite gia' incontrato con la bolla
     di bsachat (CONTEXT-Modulo.md, "Bolla chat e barra fissa") - nessuna regola qui puo'
     raggiungerla, lo shadow DOM incapsula lo stile e il widget non espone ne' ::part ne' una
     custom property per la posizione. Spostata da bsa-cart.js (syncLegalBlink), non da qui. */
body#cart.bsa-cart-bar-on div.needsclick[class*="kl-private-reset-css"] {
  bottom: calc(var(--bsa-bar-h) + 12px + env(safe-area-inset-bottom)) !important;
}

/* ---------- step "Completa il tuo ordine" (#bsa-step, cart-step.tpl) ----------
   Strato fisso a tutta pagina sopra il carrello (mobile e desktop): testata, corpo con scroll
   interno, barra in fondo con totale + Continua. Contenuto largo al massimo 720px, centrato; testata
   e barra a tutta larghezza (fondo bianco) con il contenuto allineato alla stessa colonna.
   bsa-cart.js lo sposta come figlio diretto di body (nessun antenato del tema con transform puo'
   intrappolare il fixed) e lo apre/chiude con .is-open (gia' messa dal server con ?bsastep=1). */

body#cart .bsa-step { display: none; }
body#cart .bsa-step.is-open {
  --bsa-step-gutter: max(16px, calc((100% - 720px) / 2));
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* non "inset": Safari < 14.1 */
  z-index: 2000; /* sopra testata sticky, barra del carrello (1000) e pop-up del tema; sotto chat/CMP */
  display: flex; flex-direction: column;
  background: var(--bsa-cream); color: var(--bsa-text);
}
body#cart .bsa-step__inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }

body#cart .bsa-step__head {
  flex: 0 0 auto;
  padding: 6px var(--bsa-step-gutter) 14px;
  background: #fff; border-bottom: 1px solid var(--bsa-line-soft);
}
body#cart .bsa-step__back {
  display: inline-flex; align-items: center; min-height: 40px; margin-left: -4px; padding: 0 4px;
  font-size: 14px; font-weight: 500; color: var(--bsa-muted); text-decoration: none;
}
body#cart .bsa-step__back span { margin-right: 8px; font-size: 18px; line-height: 1; }
body#cart .bsa-step__back:hover, body#cart .bsa-step__back:focus { color: var(--bsa-ink); }
body#cart .bsa-step__title {
  margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--bsa-ink);
}
body#cart .bsa-step__title:focus { outline: none; } /* focus programmatico (tabindex=-1), non interattivo */

body#cart .bsa-step__body {
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  /* 1.2.2: in fondo almeno barra + area sicura + 24 px, a ogni larghezza: l'ultima fila dei
     correlati (pulsanti "Aggiungi") non finisce mai sotto la barra dello step */
  padding: 16px var(--bsa-step-gutter) calc(var(--bsa-bar-h) + env(safe-area-inset-bottom) + 24px);
}
body#cart .bsa-step__body > * + * { margin-top: 16px; }

/* upsell sidecart ("Ti potrebbe piacere anche"): stesso hook dei servizi e riepilogo; nel carrello
   nuovo lo sostituiscono i correlati dello step */
body#cart .sidecart-page .upsell { display: none; }

/* correlati */
/* correlati direttamente sul crema (schede bianche): su mobile il carosello arriva ai bordi dello
   schermo, cosi' la scheda successiva si intravede e dice "scorri" */
body#cart .bsa-step__related { padding: 8px 0 0; }
body#cart .bsa-step__related-title {
  margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--bsa-ink);
}
body#cart .bsa-step__notice {
  display: flex; align-items: center; margin: 0 0 14px; padding: 12px 16px;
  border-radius: 12px; background: #E7F0EE; color: var(--bsa-ok); font-size: 14px; font-weight: 600;
}
body#cart .bsa-step__notice::before {
  content: "\2713"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; margin-right: 10px; border-radius: 999px; background: var(--bsa-ok); color: #fff; font-size: 13px;
}
/* mobile/tablet: carosello orizzontale a scatto, schede da 160px (grid: gap ammesso) */
body#cart .bsa-step__related-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 12px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--bsa-step-gutter);
  /* margin negativo = gutter (non 16px fisso): a 768px il gutter e' 24px, un valore fisso
     lascerebbe un bordo di 8px e il carosello non arriverebbe piu' ai margini dello schermo */
  margin: 0 calc(-1 * var(--bsa-step-gutter)); padding: 0 var(--bsa-step-gutter) 4px; scrollbar-width: none;
}
body#cart .bsa-step__related-list::-webkit-scrollbar { display: none; }
body#cart .bsa-step__card {
  display: flex; flex-direction: column; min-width: 0; scroll-snap-align: start;
  padding: 10px; border-radius: 12px; background: #fff;
}
/* 1.2.2: box 4:5 come le immagini home_default del tema (400x500) e fondo bianco come le foto
   prodotto: l'immagine riempie la larghezza, niente fasce laterali grigie (screenshot del 28/9) */
body#cart .bsa-step__card-img {
  position: relative; display: block; padding-top: 125%; overflow: hidden;
  border-radius: 8px; background: #fff;
}
body#cart .bsa-step__card-img img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;
  color: transparent; font-size: 0; /* immagine mancante: niente alt-text che sfora */
}
body#cart .bsa-step__card-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em; margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--bsa-ink); text-decoration: none;
}
body#cart .bsa-step__card-price { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; }
body#cart .bsa-step__card-regular { color: var(--bsa-muted); text-decoration: line-through; margin-right: 4px; }
body#cart .bsa-step__card-badge {
  display: inline-block; padding: 0 5px; margin-right: 4px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--bsa-error); border: 1px solid currentColor;
}
body#cart .bsa-step__card-current { display: block; font-size: 15px; font-weight: 600; color: var(--bsa-ink); }
body#cart .bsa-step__card-combo {
  display: block; width: 100%; height: 40px; margin: -2px 0 10px; padding: 0 28px 0 10px;
  font-size: 16px; /* sotto i 16px Safari iOS zooma al focus */
  color: var(--bsa-ink); background: #fff; border: 1px solid var(--bsa-line); border-radius: 8px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bsa-ink) 50%), linear-gradient(135deg, var(--bsa-ink) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
body#cart .bsa-step__card.has-error .bsa-step__card-combo { border-color: var(--bsa-error); }
body#cart .bsa-step__card-msg { margin: -4px 0 10px; font-size: 12px; line-height: 1.35; color: var(--bsa-error); }
body#cart .bsa-step__card-msg[hidden] { display: none; }
body#cart .bsa-step__card-add {
  display: block; width: 100%; height: 40px; margin-top: auto; padding: 0 12px; /* in fondo alla scheda: pulsanti allineati */
  border: 1px solid var(--bsa-ink); border-radius: 999px; background: #fff; color: var(--bsa-ink);
  font-size: 14px; font-weight: 600; line-height: 38px; text-transform: none; letter-spacing: 0;
}
/* hover solo con un puntatore vero: su touch resterebbe "acceso" dopo il tap */
@media (hover: hover) {
  body#cart .bsa-step__card-add:hover { background: var(--bsa-ink); color: #fff; }
}
body#cart .bsa-step__card-add:focus-visible { outline: 2px solid var(--bsa-ink); outline-offset: 2px; }
body#cart .bsa-step__card-add.is-loading { opacity: .6; cursor: progress; }

/* barra dello step: sempre visibile in fondo, mobile e desktop */
body#cart .bsa-step__bar {
  flex: 0 0 auto; display: flex; align-items: center;
  min-height: var(--bsa-bar-h);
  padding: 10px var(--bsa-step-gutter) calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--bsa-line);
  box-shadow: 0 -6px 18px rgba(20, 21, 26, .08);
}
body#cart .bsa-step__bar-total { flex: 0 0 auto; margin-right: 16px; }
body#cart .bsa-step__bar-label { display: block; font-size: 11px; color: var(--bsa-muted); }
body#cart .bsa-step__bar-total strong { font-size: 17px; font-weight: 600; color: var(--bsa-ink); white-space: nowrap; }
body#cart .bsa-step__bar .cart-detailed-actions { flex: 1 1 auto; padding: 0; margin: 0; }
/* "Continua": stesso pulsante del "Vai alla cassa" (v. "CTA principali" sopra, 1.2.1) */

/* pagina sotto lo strato bloccata (bsa-cart.js: top = -scrollY, ripristinato alla chiusura):
   overflow:hidden da solo non ferma lo scroll della pagina su iOS Safari */
body#cart.bsa-step-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ---------- desktop ---------- */

@media (min-width: 992px) {
  body#cart .bsa-cart {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "main side" "more more";
    gap: 24px;
    padding-bottom: 48px;
  }
  body#cart .bsa-cart__main { grid-area: main; }
  /* align-self:start (non lo stretch di default dei grid item): altrimenti .bsa-cart__side viene
     allungato alla stessa altezza di .bsa-cart__main e la sticky si stacca quasi subito, senza
     spazio residuo in cui restare agganciata */
  body#cart .bsa-cart__side { grid-area: side; align-self: start; position: -webkit-sticky; position: sticky; top: 16px; }
  body#cart .bsa-cart__more { grid-area: more; }
  body#cart .bsa-cart__bar { display: none; }
  body#cart .bsa-line { grid-template-columns: 96px minmax(0, 1fr) 32px; }
  body#cart .bsa-line__img img { width: 96px; }

  body#cart .bsa-step__head { padding-top: 12px; padding-bottom: 18px; }
  body#cart .bsa-step__title { font-size: 26px; }
  body#cart .bsa-step__body { padding-top: 24px; }
  body#cart .bsa-step__related { padding-top: 12px; }
  body#cart .bsa-step__related-title { font-size: 18px; margin-bottom: 16px; }
  body#cart .bsa-step__related-list {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  }
  body#cart .bsa-step__card { padding: 12px; }
  body#cart .bsa-step__services > .card { padding: 4px 24px 18px; }
  body#cart .bsa-step__bar { padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body#cart .bsa-step__bar .cart-detailed-actions { flex: 0 0 auto; width: 320px; margin-left: auto; }
}