/* ===================================================================
   Carrello nella grafica nuova (Configurazione → Carrello e cassa,
   dalla 1.2.518): pages/carrello/_nuovo.twig e i passi dell'acquisto
   (partials/_passi_acquisto.twig, anche per la cassa).
   Colore del catalogo: --ke-cat-colore; pulsanti: --color-cta.
   =================================================================== */

/* ── Passi dell'acquisto ── */
.ke-passi-acquisto { display: flex; justify-content: center; gap: 0; max-width: 760px; margin: 4px auto 28px; padding: 0; list-style: none; }
.ke-passi-acquisto li { display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; color: #6b7280; font-size: .95rem; }
.ke-passi-acquisto li + li::before { content: ''; flex: 1 1 auto; min-width: 16px; height: 2px; margin: 0 6px 0 10px; border-radius: 2px; background: #e5e7eb; }
.ke-passi-acquisto li.is-attivo + li::before, .ke-passi-acquisto li.is-fatto + li::before { background: linear-gradient(90deg, var(--ke-cat-colore, var(--color-primary, #dc2626)) 50%, #e5e7eb 50%); }
.ke-passi-acquisto li.is-fatto + li.is-fatto::before, .ke-passi-acquisto li.is-fatto + li.is-attivo::before { background: var(--ke-cat-colore, var(--color-primary, #dc2626)); }
.ke-passi-numero { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid #e5e7eb; border-radius: 50%; background: #fff; color: #6b7280; font-weight: 700; }
.ke-passi-acquisto li.is-attivo .ke-passi-numero { border-color: var(--ke-cat-colore, var(--color-primary, #dc2626)); background: var(--ke-cat-colore, var(--color-primary, #dc2626)); color: #fff; }
.ke-passi-acquisto li.is-fatto .ke-passi-numero { border-color: var(--ke-cat-colore, var(--color-primary, #dc2626)); background: #fff; color: var(--ke-cat-colore, var(--color-primary, #dc2626)); }
.ke-passi-acquisto li.is-attivo .ke-passi-nome { color: var(--ke-cat-colore, var(--color-primary, #dc2626)); font-weight: 700; }
.ke-passi-nome { white-space: nowrap; }
@media (max-width: 640px) {
    .ke-passi-acquisto li { flex-direction: column; gap: 4px; font-size: .75rem; text-align: center; }
    .ke-passi-acquisto li + li::before { display: none; }
    .ke-passi-numero { width: 32px; height: 32px; }
    .ke-passi-nome { white-space: normal; }
}

/* ── Testata e griglia ── */
.ke-carr { max-width: 1240px; }
.ke-carr-titolo { margin: 0; color: #111827; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; }
.ke-carr-sotto { margin: 6px 0 22px; color: #6b7280; font-size: 1.05rem; }
.ke-carr-vuoto { color: #6b7280; font-size: 1.1rem; }
.ke-carr-griglia { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
@media (max-width: 1023px) { .ke-carr-griglia { grid-template-columns: minmax(0, 1fr); } }

/* ── Le righe a schede ── */
.ke-carr-righe { display: grid; gap: 16px; }
.ke-carr-riga { display: grid; grid-template-columns: 150px minmax(0, 1fr) 250px; gap: 18px 22px; padding: 20px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ke-carr-foto { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; overflow: hidden; border-radius: 12px; background: #f3f4f6; }
.ke-carr-foto img { width: 100%; height: 100%; object-fit: contain; }
.ke-carr-info { min-width: 0; }
.ke-carr-marca { margin: 0 0 2px; color: #374151; font-size: 1rem; }
.ke-carr-nome { margin: 0; color: #111827; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.ke-carr-nome a { color: inherit; text-decoration: none; }
.ke-carr-nome a:hover { text-decoration: underline; }
.ke-carr-misura { display: block; }
.ke-carr-pastiglie { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ke-carr-pastiglie li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: .85rem; }
.ke-carr-pastiglie .ke-icona { width: 18px; height: 18px; }
.ke-carr-pastiglia--estiva { background: #fef3c7 !important; color: #92400e !important; }
.ke-carr-pastiglia--invernale { background: #dbeafe !important; color: #1e40af !important; }
.ke-carr-colore { display: inline-block; width: 14px; height: 14px; border: 1px solid #d1d5db; border-radius: 3px; }
.ke-carr-coppie { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ke-cat-colore, var(--color-primary, #dc2626)) 8%, #fff); }
.ke-carr-coppie .ke-icona { flex: none; width: 34px; height: 34px; color: #374151; }
.ke-carr-coppie strong { display: block; color: #111827; font-size: .98rem; }
.ke-carr-coppie small { display: block; color: #4b5563; font-size: .82rem; }

.ke-carr-conto { padding-left: 22px; border-left: 1px solid #e5e7eb; }
.ke-carr-prezzi { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.ke-carr-prezzi > span + span { padding-left: 14px; border-left: 1px solid #e5e7eb; }
.ke-carr-prezzi small { display: block; color: #6b7280; font-size: .8rem; }
.ke-carr-prezzi strong { display: block; color: #111827; font-size: 1.15rem; font-weight: 600; }
.ke-carr-prezzi .subtotale-cell { font-weight: 800; }
.ke-carr-qta-etichetta { display: block; margin-bottom: 6px; color: #374151; font-size: .82rem; }
.ke-carr-qta { display: inline-flex; align-items: stretch; gap: 8px; }
.ke-carr-qta .qty-btn { width: 44px; height: 44px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font-size: 1.2rem; }
.ke-carr-qta .qty-btn:hover { background: #f9fafb; }
.ke-carr-qta .qty-input { width: 64px; height: 44px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1.05rem; text-align: center; }
.ke-carr-qta-nota { margin: 6px 0 0; color: #6b7280; font-size: .78rem; }

.ke-carr-azioni { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.ke-carr-modifica { display: inline-flex; align-items: center; gap: 6px; color: var(--ke-cat-colore, var(--color-primary, #dc2626)); font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ke-carr-rimuovi { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0; border: 0; background: none; color: #374151; font-size: .88rem; cursor: pointer; }
.ke-carr-rimuovi:hover { color: #b91c1c; }

@media (max-width: 760px) {
    /* Dal telefono una colonna: la foto sopra, poi nome, pastiglie, coppie e conto */
    .ke-carr-riga { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
    .ke-carr-foto { width: 100%; height: 170px; }
    .ke-carr-nome { font-size: 1.2rem; }
    .ke-carr-conto { padding-top: 14px; padding-left: 0; border-top: 1px solid #f1f5f9; border-left: 0; }
}

/* ── Aiuto e fondo ── */
.ke-carr-aiuto { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; padding: 18px 20px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; }
.ke-carr-aiuto-icona { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--ke-cat-colore, var(--color-primary, #dc2626)) 12%, #fff); color: var(--ke-cat-colore, var(--color-primary, #dc2626)); }
.ke-carr-aiuto-icona .ke-icona { width: 28px; height: 28px; }
.ke-carr-aiuto-testi { flex: 1 1 240px; min-width: 0; }
.ke-carr-aiuto-testi strong { display: block; color: #111827; font-size: 1.05rem; }
.ke-carr-aiuto-testi p { margin: 4px 0 0; color: #4b5563; font-size: .88rem; }
.ke-carr-aiuto-pulsante { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid var(--ke-cat-colore, var(--color-primary, #dc2626)); border-radius: 10px; color: #111827; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ke-carr-aiuto-pulsante:hover { background: color-mix(in srgb, var(--ke-cat-colore, var(--color-primary, #dc2626)) 8%, #fff); }
.ke-carr-fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.ke-carr-continua { color: var(--ke-cat-colore, var(--color-primary, #dc2626)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Riepilogo ── */
.ke-carr-riepilogo { position: sticky; top: 110px; padding: 26px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ke-carr-riepilogo h2 { margin: 0 0 14px; color: #111827; font-size: 1.6rem; font-weight: 800; }
.ke-carr-sum { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; color: #374151; font-size: 1rem; }
.ke-carr-sum span:last-child { color: #111827; font-weight: 600; text-align: right; }
.ke-carr-sum.is-piccola span:last-child { color: #6b7280; font-weight: 400; font-size: .9rem; }
.ke-carr-sum.is-sconto span { color: #15803d; }
.ke-carr-totale { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 0 6px; color: #111827; font-size: 1.35rem; font-weight: 800; }
.ke-carr-totale span:last-child { text-align: right; }
.ke-carr-totale strong { display: block; font-size: 1.6rem; }
.ke-carr-totale small { display: block; color: #6b7280; font-size: .8rem; font-weight: 400; }
.ke-carr-procedi { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 18px 16px; border-radius: 12px; background: var(--color-cta, #16a34a); color: #fff; font-size: 1.08rem; font-weight: 700; text-align: center; text-decoration: none; }
.ke-carr-procedi:hover { filter: brightness(.94); color: #fff; }
.ke-carr-procedi.is-stretto { display: inline-flex; padding: 12px 22px; }
.ke-carr-fiducia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; text-align: center; }
.ke-carr-fiducia li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ke-carr-fiducia li + li { border-left: 1px solid #f1f5f9; }
.ke-carr-fiducia-icona { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ke-cat-colore, var(--color-primary, #dc2626)) 10%, #fff); color: var(--ke-cat-colore, var(--color-primary, #dc2626)); }
.ke-carr-fiducia-icona .ke-icona { width: 22px; height: 22px; }
.ke-carr-fiducia strong { color: #111827; font-size: .82rem; line-height: 1.25; }
.ke-carr-fiducia small { color: #6b7280; font-size: .74rem; line-height: 1.3; }
@media (max-width: 1023px) { .ke-carr-riepilogo { position: static; } }