/* =============================================================================
   QQ · Checkout stylesheet
   Copre: layout-checkout, stepper, form fields di summary, area Payment Element,
   pagine success/failed. Dipende da tokens.css.
   ========================================================================== */

/* --- Body & main ---------------------------------------------------------- */
.qq-checkout-body {
    background: var(--qq-cream);
    color: var(--qq-ink);
    font-family: var(--qq-font-sans);
    font-size: var(--qq-fs-body);
    line-height: var(--qq-lh-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Anti-overflow globale: nessun figlio deve propagare uno sforo
       orizzontale oltre il viewport (letter-spacing brand ampio, meta line
       con nbsp, prezzi lunghi, ecc.). Su mobile stretto capitava che la
       .qq-cart-line spingesse la card oltre 100vw, tagliando la fine del
       testo alla destra. Doppio anello (body + html) perché sui browser
       che non supportano `clip` fallback su `hidden` senza creare un
       nested scroll context al 100vw. */
    overflow-x: clip;
    max-width: 100vw;
}
html:has(> body.qq-checkout-body) {
    overflow-x: clip;
    max-width: 100%;
}

/* Separatore soft nelle meta line (spazio + · + spazio) — sostituisce
   il pattern  ·  che rendeva la riga non-wrappabile. */
.qq-cart-line__meta-sep {
    display: inline-block;
    margin: 0 4px;
    color: var(--qq-muted);
    opacity: 0.6;
}
.qq-cart-line__meta-item {
    /* Segmento singolo (es. "Taglia 3M"): resta nowrap così l'etichetta
       e il valore non si spezzano tra due righe. Il wrap avviene tra i
       segmenti (spazio breakable tra </span> e il separatore). */
    display: inline-block;
    white-space: nowrap;
}

.qq-checkout-main {
    flex: 1 0 auto;
    padding: var(--qq-space-5) 0 var(--qq-space-9);
}

/* --- Header minimal ------------------------------------------------------- */
.qq-checkout-header {
    background: var(--qq-white);
    border-bottom: 1px solid var(--qq-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.qq-checkout-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--qq-space-4) var(--qq-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qq-space-4);
}

.qq-checkout-header__logo img {
    max-width: 200px;
    height: auto;
}

@media (max-width: 640px) {
    .qq-checkout-header__logo img { max-width: 160px; }
}

.qq-checkout-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--qq-space-2);
    color: var(--qq-ink);
    font-weight: var(--qq-fw-semi);
    font-size: var(--qq-fs-small);
    text-decoration: none;
    white-space: nowrap;
}
.qq-checkout-header__phone:hover { color: #000; text-decoration: none; }
.qq-checkout-header__phone-label {
    display: inline-block;
}
@media (max-width: 480px) {
    .qq-checkout-header__phone-label { display: none; }
}

/* --- Stepper ------------------------------------------------------------- */
.qq-stepper {
    background: var(--qq-cream-warm);
    border-top: 1px solid var(--qq-line);
}
.qq-stepper__list {
    list-style: none;
    margin: 0;
    padding: var(--qq-space-3) var(--qq-space-5);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--qq-space-4);
    counter-reset: qq-step;
}
.qq-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: var(--qq-space-2);
    color: var(--qq-muted);
    font-size: var(--qq-fs-small);
    font-weight: var(--qq-fw-medium);
    position: relative;
}
.qq-stepper__item + .qq-stepper__item::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--qq-line);
    margin-right: var(--qq-space-2);
}
.qq-stepper__dot {
    width: 24px;
    height: 24px;
    border-radius: var(--qq-radius-pill);
    background: var(--qq-white);
    border: 1px solid var(--qq-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-bold);
    color: var(--qq-muted);
}
.qq-stepper__item.is-current .qq-stepper__dot {
    background: var(--qq-ink);
    color: var(--qq-white);
    border-color: var(--qq-ink);
}
.qq-stepper__item.is-current { color: var(--qq-ink); }
.qq-stepper__item.is-done .qq-stepper__dot {
    background: var(--qq-canary);
    color: var(--qq-ink);
    border-color: var(--qq-canary);
}
.qq-stepper__item.is-done { color: var(--qq-ink-soft); }

@media (max-width: 520px) {
    .qq-stepper__list { gap: var(--qq-space-2); }
    .qq-stepper__item + .qq-stepper__item::before { width: 16px; }
    .qq-stepper__label { display: none; }
    .qq-stepper__item.is-current .qq-stepper__label { display: inline; }
}

/* --- Footer -------------------------------------------------------------- */
.qq-checkout-footer {
    background: var(--qq-ink);
    color: var(--qq-white);
    padding: var(--qq-space-6) var(--qq-space-5);
    text-align: center;
    font-size: var(--qq-fs-small);
    margin-top: auto;
}
.qq-checkout-footer__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--qq-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--qq-space-3);
}
.qq-checkout-footer__lock i { color: var(--qq-canary); margin-right: 4px; }
.qq-checkout-footer__sep { color: var(--qq-muted); opacity: 0.6; }
.qq-checkout-footer__legal {
    font-size: var(--qq-fs-micro);
    color: var(--qq-muted);
}
.qq-checkout-footer__legal a {
    color: var(--qq-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.qq-checkout-footer__legal a:hover { color: var(--qq-canary); }

/* --- Contenitore centrato ------------------------------------------------ */
.qq-checkout-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--qq-space-5);
}
.qq-checkout-container--narrow {
    max-width: 640px;
}

/* --- Grid checkout (mobile-first: 1 col; desktop: 2 col con sidebar) ----- */
.qq-checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--qq-space-6);
}
/* Anti-overflow: senza `min-width: 0` sui grid item, la min-content-size
   dei children (bottone qq-btn con `white-space: nowrap`, testi lunghi,
   etc.) espande la cella del grid, che a sua volta trascina il layout
   oltre il viewport in mobile (evidenziato nella card "Totale carrello"
   della sidebar del summary). */
.qq-checkout-grid > * { min-width: 0; }
@media (min-width: 900px) {
    .qq-checkout-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--qq-space-8);
        align-items: start;
    }
}

/* --- Card (riquadri riepilogo/dati) -------------------------------------- */
.qq-card {
    background: var(--qq-white);
    border: 1px solid var(--qq-line);
    border-radius: var(--qq-radius-md);
    padding: var(--qq-space-5);
}
.qq-card + .qq-card { margin-top: var(--qq-space-4); }
.qq-card__title {
    font-family: var(--qq-font-serif);
    font-weight: var(--qq-fw-medium);
    font-size: var(--qq-fs-h3);
    line-height: var(--qq-lh-heading);
    margin: 0 0 var(--qq-space-4);
    color: var(--qq-ink);
}
.qq-card__title em { font-style: italic; }
.qq-card__section + .qq-card__section {
    border-top: 1px solid var(--qq-line);
    padding-top: var(--qq-space-4);
    margin-top: var(--qq-space-4);
}

/* --- Sidebar riepilogo (sticky su desktop) ------------------------------- */
.qq-checkout-summary {
    position: sticky;
    top: 96px; /* header + stepper */
}
@media (max-width: 899px) {
    .qq-checkout-summary { position: static; }
}

/* --- Titolo pagina editoriale ------------------------------------------- */
.qq-checkout-hero {
    padding: var(--qq-space-6) 0 var(--qq-space-4);
}
.qq-checkout-title {
    font-family: var(--qq-font-serif);
    font-weight: var(--qq-fw-medium);
    font-size: var(--qq-fs-h1);
    line-height: var(--qq-lh-heading);
    letter-spacing: var(--qq-ls-tight);
    margin: 0 0 var(--qq-space-2);
    color: var(--qq-ink);
    overflow-wrap: anywhere;
}
.qq-checkout-title em { font-style: italic; }
.qq-checkout-kicker {
    font-family: var(--qq-font-sans);
    font-size: var(--qq-fs-kicker);
    font-weight: var(--qq-fw-semi);
    letter-spacing: var(--qq-ls-kicker);
    text-transform: uppercase;
    color: var(--qq-muted);
    margin: 0 0 var(--qq-space-2);
}

/* --- Cart line item ------------------------------------------------------ */
/* Compattato ~30% rispetto alla prima iterazione: media 72px (era 88), padding
   verticale ridotto, name a fs-body-strong (era h3=20px), meta con margin
   inferiore. L'utente aveva segnalato "troppi spazi bianchi". */
.qq-cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--qq-space-3);
    align-items: start;
    padding: var(--qq-space-3) 0;
    border-bottom: 1px solid var(--qq-line);
}
.qq-cart-line:last-child { border-bottom: 0; }
.qq-cart-line__media {
    width: 72px;
    aspect-ratio: 3 / 4;
    background: var(--qq-sand);
    border-radius: var(--qq-radius-xs);
    overflow: hidden;
}
.qq-cart-line__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.qq-cart-line__brand {
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-semi);
    letter-spacing: var(--qq-ls-brand);
    text-transform: uppercase;
    color: var(--qq-muted);
    margin: 0 0 2px;
}
.qq-cart-line__name {
    font-family: var(--qq-font-serif);
    font-weight: var(--qq-fw-medium);
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--qq-ink);
}
.qq-cart-line__meta {
    font-size: var(--qq-fs-small);
    color: var(--qq-muted);
    margin: 0 0 6px;
    line-height: 1.4;
}
.qq-cart-line__meta strong { color: var(--qq-ink); font-weight: var(--qq-fw-medium); }

/* Stock warning ("Ultima disponibile" etc.): inline-flex row per tenere
   icona + testo sulla stessa riga. Non usiamo `.qq-cart-line__meta` perché
   in mobile è flex-column e spezzerebbe l'icona dal testo. */
.qq-cart-line__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--qq-danger);
    font-weight: var(--qq-fw-semi);
    font-size: var(--qq-fs-small);
    line-height: 1.2;
    margin: 4px 0 6px;
    padding: 3px 8px;
    background: #FDE9E5;
    border-radius: var(--qq-radius-xs);
}
.qq-cart-line__stock i {
    font-size: 11px;
    color: var(--qq-danger);
    line-height: 1;
}
.qq-cart-line__price {
    font-weight: var(--qq-fw-bold);
    font-size: var(--qq-fs-body);
    color: var(--qq-ink);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.qq-cart-line__price-old {
    display: block;
    font-weight: var(--qq-fw-regular);
    font-size: var(--qq-fs-small);
    color: var(--qq-muted);
    text-decoration: line-through;
}
.qq-cart-line__qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--qq-line);
    border-radius: var(--qq-radius-xs);
    overflow: hidden;
    margin-top: 4px;
}
.qq-cart-line__qty button {
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--qq-ink);
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qq-cart-line__qty button:hover:not(:disabled) { background: var(--qq-cream-warm); }
.qq-cart-line__qty button:disabled { opacity: 0.4; cursor: default; }
.qq-cart-line__qty input {
    width: 36px;
    text-align: center;
    border: 0;
    border-left: 1px solid var(--qq-line);
    border-right: 1px solid var(--qq-line);
    padding: 4px 0;
    font-size: var(--qq-fs-small);
    font-weight: var(--qq-fw-medium);
    color: var(--qq-ink);
    background: transparent;
}
/* Icon-only trash button: era testo "Rimuovi" con letter-spacing esteso che
   allargava la cella "auto" del grid e in mobile faceva sforare a destra. */
.qq-cart-line__remove {
    background: transparent;
    border: 1px solid transparent;
    color: var(--qq-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--qq-radius-xs);
    transition: color var(--qq-t-fast), background var(--qq-t-fast), border-color var(--qq-t-fast);
    text-decoration: none;
}
.qq-cart-line__remove:hover,
.qq-cart-line__remove:focus-visible {
    color: var(--qq-danger);
    background: rgba(215, 90, 79, 0.08);
    border-color: rgba(215, 90, 79, 0.25);
    outline: none;
}

/* --- Mobile S → tablet portrait (fino a 640px): riduciamo padding, media,
   font-size e letter-spacing dell'elenco prodotti. Manteniamo il grid a 3
   colonne (media | body | prezzo+trash a destra) — l'alternativa a 2
   colonne col prezzo sotto la body lasciava vuoti verticali e nascondeva
   la trash. La stessa media query compatta anche gli step della /cassa. -- */
@media (max-width: 640px) {
    .qq-card { padding: var(--qq-space-3); }
    /* Layout 3 colonne (media | body | prezzo+trash) mantenuto anche in
       mobile: prima avevamo tentato una versione a 2 colonne col prezzo
       riposizionato in row 2, ma questo lasciava un vuoto sotto la body
       e nascondeva la trash (v. iterazione precedente). Ora prezzo e
       trash restano allineati a destra come nel desktop, solo più stretti. */
    .qq-cart-line {
        grid-template-columns: 64px 1fr auto;
        grid-template-rows: auto;
        gap: 10px;
        padding: 10px 0;
    }
    .qq-cart-line__media { width: 64px; }
    .qq-cart-line__body  { min-width: 0; }
    .qq-cart-line__price {
        gap: 4px;
        font-size: var(--qq-fs-small);
    }
    .qq-cart-line__brand {
        letter-spacing: 0.4px;
        word-spacing: normal;
        margin-bottom: 1px;
    }
    .qq-cart-line__name { font-size: 14px; margin-bottom: 2px; line-height: 1.2; }
    /* Meta line: in mobile diventa una colonna (una riga per attributo,
       "Taglia 3M" / "Colore Azul" / "Qtà 1") — nasconde i separatori
       che a questa larghezza sono rumore visivo e fonte di sforo. */
    .qq-cart-line__meta {
        font-size: 11px;
        margin-bottom: 2px;
        display: flex;
        flex-direction: column;
        gap: 1px;
        align-items: flex-start;
        line-height: 1.35;
    }
    .qq-cart-line__meta-sep { display: none; }
    .qq-cart-line__meta-item { white-space: nowrap; }
    .qq-cart-line__meta strong { white-space: nowrap; }
    .qq-cart-line__price-old { display: block; font-size: 11px; }
    .qq-cart-line__stock {
        font-size: 10px;
        padding: 2px 6px;
        gap: 4px;
        margin: 3px 0 4px;
    }
    .qq-cart-line__stock i { font-size: 9px; }
    .qq-cart-line__remove { width: 26px; height: 26px; font-size: 13px; }
    .qq-cart-line__qty { margin-top: 4px; }
    .qq-cart-line__qty button { width: 26px; height: 26px; font-size: 14px; }
    .qq-cart-line__qty input { width: 30px; font-size: 12px; }

    /* Compatta lo spacing verticale tra card e blocchi contigui. */
    .qq-card + .qq-card { margin-top: var(--qq-space-3); }
    .qq-checkout-grid { gap: var(--qq-space-3); }
    .qq-cart-list .qq-cart-line + .qq-cart-line { border-top: 1px solid var(--qq-line); }

    /* /cassa — summary: hero compatto (l'utente ha segnalato "testi troppo
       grandi, troppi spazi bianchi" sulla schermata di mobile portrait). */
    .qq-checkout-hero { padding: var(--qq-space-4) 0 var(--qq-space-3); }
    .qq-checkout-title { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
    .qq-checkout-kicker { font-size: 10px; margin-bottom: 4px; }
    .qq-checkout-body { padding: 0; }
    .qq-checkout-main { padding: var(--qq-space-3) 0 var(--qq-space-6); }

    /* Card title interno ("Il tuo ordine", "Il tuo carrello"): default 20px
       serif italic → in mobile scala a 15px per non dominare la card. */
    .qq-card__title { font-size: 15px; margin-bottom: var(--qq-space-3); }

    /* Radio card (metodo consegna, spedizione, pagamento): padding ridotto,
       font piu' piccolo, gap stretto. Layout resta flex ma piu' denso. */
    .qq-radio-card {
        padding: 10px 12px;
        gap: 10px;
        border-radius: 8px;
    }
    .qq-radio-card__title { font-size: 13px; line-height: 1.25; }
    .qq-radio-card__title i { margin-right: 4px; }
    .qq-radio-card__meta  { font-size: 11px; margin-top: 1px; line-height: 1.3; }
    .qq-radio-card__price { font-size: 13px; }

    /* Totali sidebar (card "4 Totale carrello"): font ridotto, gap tighter,
       header senza separator inutile, riga "Totale da pagare" contenuta
       (era serif h3 = fastidiosa in mobile). L'utente ha segnalato
       "troppo spazio, troppe linee". */
    .qq-totals { gap: 2px; font-size: 13px; }
    .qq-totals__row { padding: 2px 0; }
    .qq-totals__row--muted { font-size: 11px; }
    .qq-totals__row--total {
        padding-top: 6px;
        margin-top: 4px;
        font-size: 14px;
        font-family: var(--qq-font-sans);
        font-weight: var(--qq-fw-semi);
    }
    .qq-totals__row--total strong { font-size: 15px; font-weight: var(--qq-fw-bold); }
    .qq-totals__saved { font-size: 11px; }

    /* Card totale carrello: elimina l'aria vuota tra header e body. */
    .qq-totals-card .qq-step__head { margin-bottom: 8px; }
    .qq-totals-card .qq-step__body { padding-top: 0 !important; }

    /* Neutralizza override legacy custom.css:2403-2411 che in mobile
       forza `.grand-totall-title span` a font 20px rosa (#D94A86) e
       aggiunge border-top 2px + padding-top 14px (visualmente = doppia
       linea + aria eccessiva sopra il totale). Sostituiamo con lo stile
       QQ pulito: ink color, sans, 1px border, padding compatto. */
    .qq-totals-card .qq-totals__row--total.grand-totall-title {
        padding-top: 6px !important;
        margin-top: 4px !important;
        border-top: 1px solid var(--qq-line) !important;
    }
    .qq-totals-card .qq-totals__row--total span,
    .qq-totals-card .qq-totals__row--total strong {
        color: var(--qq-ink) !important;
        font-family: var(--qq-font-sans) !important;
        font-weight: var(--qq-fw-semi) !important;
        font-size: 14px !important;
    }
    .qq-totals-card .qq-totals__row--total strong {
        font-weight: var(--qq-fw-bold) !important;
        font-size: 15px !important;
    }

    /* Step body/header — meno padding per non moltiplicare l'aria vuota. */
    .qq-step__body { padding-top: var(--qq-space-3); }
    .qq-pickup-info { padding: 10px 12px; font-size: 12px; }
    /* Pickup store card mobile: padding e gap ridotti, badge compatto,
       name serif un filo più piccolo, contatti/address inalterati (già
       lineari verticali). */
    .qq-pickup-store { padding: 12px; gap: 12px; margin-top: 10px; }
    .qq-pickup-store__name { font-size: 16px; }
    .qq-pickup-store__badge { font-size: 10px; padding: 3px 8px; }
    .qq-pickup-store__address { padding: 10px; gap: 10px; }
    .qq-pickup-store__address-icon { width: 28px; height: 28px; font-size: 13px; }
    .qq-pickup-store__address-text { font-size: 12px; }
    .qq-pickup-store__contact-icon { width: 26px; height: 26px; font-size: 12px; }
    .qq-pickup-store__contacts { gap: 10px; }
    .qq-pickup-store__contact { grid-template-columns: 26px 1fr; gap: 10px; }
    .qq-pickup-store__contact-value { font-size: 12px; }
    .qq-pickup-store__note { padding: 10px; font-size: 12px; }

    /* Payment Element: min-height meno esagerato su schermi bassi. */
    .qq-pay-element { min-height: 200px; padding: var(--qq-space-3) 0; }
    .qq-pay-express { margin-bottom: var(--qq-space-3); padding-bottom: var(--qq-space-3); }

    /* Container esterno: padding orizzontale ridotto per guadagnare
       spazio interno (default e' var(--qq-space-5) ~20px per lato). */
    .qq-checkout-container { padding: 0 12px; }

    /* Anti-overflow globale: nessun figlio testuale deve sforare la sua
       colonna di grid/flex. Senza min-width:0 esplicito i browser
       trattano la min-content-size come intrinseca, causando lo sforo
       laterale (es. "PAZ RODRIGUEZ" spinge la 1fr oltre il container). */
    .qq-checkout-grid,
    .qq-cart-line__body,
    .qq-radio-card__body,
    .qq-checkout-summary,
    .qq-step__head,
    .qq-step__body {
        min-width: 0;
    }
    .qq-cart-line__brand,
    .qq-cart-line__name,
    .qq-cart-line__meta,
    .qq-radio-card__title,
    .qq-radio-card__meta,
    .qq-checkout-title,
    .qq-card__title,
    .qq-step__title {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }

    /* CTA "COMPLETA ORDINE E PAGA · 49,50 €": il default .qq-btn ha
       `white-space: nowrap` e questo testo lungo (uppercase + tracking)
       espandeva la min-content della sidebar sotto 900px, portando il
       grid item oltre il viewport. In mobile permettiamo il wrap e
       riduciamo il padding orizzontale. */
    .qq-btn.btn-complete-order,
    .qq-btn.btn-checkout {
        white-space: normal;
        line-height: 1.25;
        padding: 14px 12px;
        font-size: 12px;
    }

    /* --- Step 1/2/3 header più compatto, aria attorno al numero ridotta. */
    .qq-step__head {
        gap: 8px !important;
        margin-bottom: 6px !important;
    }
    .qq-step__num {
        width: 22px !important; height: 22px !important;
        font-size: 12px !important;
    }
    .qq-step__title { font-size: 14px !important; line-height: 1.2 !important; }

    /* --- Step 1: radio card metodo consegna ancora più compatte
       (l'utente ha segnalato "box troppo grande") */
    .qq-radio-card { padding: 8px 10px; gap: 8px; }
    .qq-radio-card__title { font-size: 12px; letter-spacing: 0; }
    .qq-radio-card__meta { font-size: 10px; line-height: 1.25; }
    .qq-radio-card__price { font-size: 12px; }
    .qq-radio-card input[type="radio"] { margin-top: 2px; transform: scale(0.85); transform-origin: left; }

    /* --- Step 2: address-list (partial legacy shipping-address.blade.php)
       il markup non è nostro: aggiustiamo via override CSS. */
    .address-row {
        padding: 8px 10px !important;
        border-width: 1px !important;
        border-radius: 6px !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
    }
    .address-details { font-size: 12px !important; line-height: 1.35 !important; }
    .address-details b { font-size: 13px !important; }
    .address-checkmark {
        width: 16px !important; height: 16px !important;
        min-width: 16px !important; border-width: 1px !important;
    }
    .btn-open-add-address { padding: 6px 12px !important; font-size: 12px !important; }
}

/* --- Pickup store card (Step 1 → "Ritira in negozio") -------------------
   Layout lineare: header (badge + nome), indirizzo cliccabile (icon | text | maps↗),
   lista contatti verticale (icon | label + value), nota opzionale.
   Il badge canary in header comunica già l'unicità del punto di ritiro. --- */
.qq-pickup-store {
    margin-top: var(--qq-space-3);
    background: var(--qq-white);
    border: 1px solid var(--qq-ink);
    border-radius: var(--qq-radius-md);
    padding: var(--qq-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--qq-space-4);
    color: var(--qq-ink);
    animation: qqPickupFadeIn var(--qq-t-base) ease-out;
}
@keyframes qqPickupFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.qq-pickup-store__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qq-pickup-store__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: var(--qq-canary);
    color: var(--qq-ink);
    padding: 4px 10px;
    border-radius: var(--qq-radius-pill);
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-bold);
    letter-spacing: var(--qq-ls-kicker);
    text-transform: uppercase;
    line-height: 1;
}
.qq-pickup-store__badge i { font-size: 11px; }
.qq-pickup-store__name {
    font-family: var(--qq-font-serif);
    font-weight: var(--qq-fw-medium);
    font-size: var(--qq-fs-h3);
    line-height: 1.2;
    color: var(--qq-ink);
}
.qq-pickup-store__subtitle {
    margin: 0;
    font-size: var(--qq-fs-micro);
    color: var(--qq-muted);
    line-height: 1.35;
}

/* Address card (link): icon a sx, testo multi-riga al centro, chevron ↗ a dx */
.qq-pickup-store__address {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--qq-space-3);
    padding: var(--qq-space-3);
    background: var(--qq-cream-warm);
    border-radius: var(--qq-radius-xs);
    color: var(--qq-ink);
    text-decoration: none;
    transition: background var(--qq-t-fast);
    min-width: 0;
}
.qq-pickup-store__address:hover {
    background: var(--qq-canary-soft, #FFF6BF);
    color: var(--qq-ink);
    text-decoration: none;
}
.qq-pickup-store__address-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--qq-white);
    border-radius: 50%;
    color: var(--qq-danger);
    font-size: 14px;
    flex-shrink: 0;
}
.qq-pickup-store__address-text {
    font-size: var(--qq-fs-small);
    line-height: 1.4;
    color: var(--qq-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}
.qq-pickup-store__address-arrow {
    color: var(--qq-muted);
    font-size: 12px;
    flex-shrink: 0;
    transition: color var(--qq-t-fast), transform var(--qq-t-fast);
}
.qq-pickup-store__address:hover .qq-pickup-store__address-arrow {
    color: var(--qq-ink);
    transform: translate(1px, -1px);
}

/* Contatti: lista verticale, icon left, label kicker + value nowrap-safe */
.qq-pickup-store__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--qq-space-3);
}
.qq-pickup-store__contact {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--qq-space-3);
    align-items: center;
    min-width: 0;
}
.qq-pickup-store__contact-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--qq-cream-warm);
    border-radius: 50%;
    color: var(--qq-ink);
    font-size: 13px;
    flex-shrink: 0;
}
.qq-pickup-store__contact-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.qq-pickup-store__contact-label {
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--qq-ls-kicker);
    color: var(--qq-muted);
    line-height: 1.2;
}
.qq-pickup-store__contact-value {
    font-size: var(--qq-fs-small);
    color: var(--qq-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
a.qq-pickup-store__contact-value {
    color: var(--qq-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.qq-pickup-store__contact-value:hover { color: #000; }

/* Nota (store_pickup_note): riquadro cream con icona info */
.qq-pickup-store__note {
    margin: 0;
    padding: var(--qq-space-3);
    background: var(--qq-cream-warm);
    border-radius: var(--qq-radius-xs);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--qq-fs-small);
    color: var(--qq-ink-soft);
    line-height: 1.4;
}
.qq-pickup-store__note i {
    color: var(--qq-ink);
    font-size: 13px;
    padding-top: 2px;
    flex-shrink: 0;
}
.qq-pickup-store__note > span {
    flex: 1;
    min-width: 0;
}

/* --- Riepilogo totali ---------------------------------------------------- */
.qq-totals {
    display: flex;
    flex-direction: column;
    gap: var(--qq-space-2);
    font-size: var(--qq-fs-body);
}
.qq-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.qq-totals__row--muted { color: var(--qq-muted); font-size: var(--qq-fs-small); }
.qq-totals__row--total {
    border-top: 1px solid var(--qq-line);
    padding-top: var(--qq-space-3);
    margin-top: var(--qq-space-2);
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h3);
    font-weight: var(--qq-fw-medium);
    color: var(--qq-ink);
}
.qq-totals__row--total strong { font-weight: var(--qq-fw-bold); }
.qq-totals__saved {
    background: var(--qq-canary-soft);
    color: var(--qq-ink);
    padding: 8px var(--qq-space-3);
    border-radius: var(--qq-radius-xs);
    font-size: var(--qq-fs-small);
    text-align: center;
    margin-top: var(--qq-space-2);
    font-weight: var(--qq-fw-medium);
}

/* --- Coupon input inline ------------------------------------------------- */
.qq-coupon {
    display: flex;
    gap: var(--qq-space-2);
    align-items: stretch;
    margin-top: var(--qq-space-3);
}
.qq-coupon input {
    flex: 1;
    border: 1px solid var(--qq-line);
    background: var(--qq-white);
    border-radius: var(--qq-radius-xs);
    padding: 10px 12px;
    font-size: var(--qq-fs-small);
    font-family: var(--qq-font-sans);
    color: var(--qq-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.qq-coupon input:focus { outline: 2px solid var(--qq-ink); outline-offset: -1px; }
.qq-coupon .qq-btn {
    padding: 10px 16px;
    font-size: var(--qq-fs-small);
}
.qq-coupon__applied {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--qq-canary-soft);
    color: var(--qq-ink);
    padding: 6px 10px;
    border-radius: var(--qq-radius-xs);
    font-size: var(--qq-fs-small);
    font-weight: var(--qq-fw-semi);
    margin-top: var(--qq-space-2);
}
.qq-coupon__applied button {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--qq-ink);
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}

/* --- CTA sticky su mobile ------------------------------------------------ */
.qq-cta-sticky {
    position: sticky;
    bottom: 0;
    background: var(--qq-white);
    border-top: 1px solid var(--qq-line);
    padding: var(--qq-space-3) var(--qq-space-5);
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(26,26,26,0.06);
    margin: var(--qq-space-6) calc(-1 * var(--qq-space-5)) 0;
}
.qq-cta-sticky__row {
    display: flex;
    align-items: center;
    gap: var(--qq-space-3);
    max-width: 1120px;
    margin: 0 auto;
}
.qq-cta-sticky__total {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h3);
    font-weight: var(--qq-fw-medium);
    color: var(--qq-ink);
    white-space: nowrap;
}
.qq-cta-sticky__total small { display: block; font-family: var(--qq-font-sans); font-size: var(--qq-fs-micro); color: var(--qq-muted); font-weight: var(--qq-fw-regular); }
.qq-cta-sticky .qq-btn { flex: 1; }

/* --- Form fields --------------------------------------------------------- */
.qq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--qq-space-4);
}
.qq-field__label {
    font-size: var(--qq-fs-small);
    font-weight: var(--qq-fw-semi);
    color: var(--qq-ink);
}
.qq-field__hint {
    font-size: var(--qq-fs-micro);
    color: var(--qq-muted);
}
.qq-field__input,
.qq-field__select,
.qq-field__textarea {
    background: var(--qq-white);
    border: 1px solid var(--qq-line);
    border-radius: var(--qq-radius-xs);
    padding: 12px 14px;
    font-size: var(--qq-fs-body);
    font-family: var(--qq-font-sans);
    color: var(--qq-ink);
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--qq-t-fast), box-shadow var(--qq-t-fast);
}
.qq-field__input:focus,
.qq-field__select:focus,
.qq-field__textarea:focus {
    outline: none;
    border-color: var(--qq-ink);
    box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
}
.qq-field__input::placeholder {
    color: var(--qq-muted);
}
.qq-field__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--qq-space-3);
}
@media (max-width: 480px) {
    .qq-field__row { grid-template-columns: 1fr; gap: 0; }
}
.qq-field--error .qq-field__input,
.qq-field--error .qq-field__select {
    border-color: var(--qq-danger);
}
.qq-field__error {
    color: var(--qq-danger);
    font-size: var(--qq-fs-micro);
    margin-top: 4px;
}

/* --- Radio card (metodi spedizione, indirizzi salvati) ------------------ */
.qq-radio-card {
    border: 1px solid var(--qq-line);
    border-radius: var(--qq-radius-xs);
    padding: var(--qq-space-3) var(--qq-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--qq-space-3);
    cursor: pointer;
    transition: border-color var(--qq-t-fast), background var(--qq-t-fast);
    background: var(--qq-white);
}
.qq-radio-card + .qq-radio-card { margin-top: var(--qq-space-2); }
.qq-radio-card:hover { border-color: var(--qq-muted); }
.qq-radio-card input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--qq-ink);
}
.qq-radio-card__body { flex: 1; }
.qq-radio-card__title {
    font-weight: var(--qq-fw-semi);
    color: var(--qq-ink);
    font-size: var(--qq-fs-body);
}
.qq-radio-card__meta {
    font-size: var(--qq-fs-small);
    color: var(--qq-muted);
    margin-top: 2px;
}
.qq-radio-card__price {
    font-weight: var(--qq-fw-bold);
    color: var(--qq-ink);
    white-space: nowrap;
}
.qq-radio-card.is-active {
    border-color: var(--qq-ink);
    background: var(--qq-cream-warm);
}

/* --- Payment Element container ------------------------------------------ */
.qq-pay-element {
    min-height: 240px;
    padding: var(--qq-space-4) 0;
}
.qq-pay-express {
    margin-bottom: var(--qq-space-5);
    padding-bottom: var(--qq-space-5);
    border-bottom: 1px solid var(--qq-line);
}
.qq-pay-express__divider {
    display: flex;
    align-items: center;
    gap: var(--qq-space-3);
    margin: var(--qq-space-4) 0;
    color: var(--qq-muted);
    font-size: var(--qq-fs-small);
    text-transform: uppercase;
    letter-spacing: var(--qq-ls-kicker);
    font-weight: var(--qq-fw-semi);
}
.qq-pay-express__divider::before,
.qq-pay-express__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--qq-line);
}
.qq-pay-error {
    background: #FDE9E5;
    color: var(--qq-danger);
    padding: var(--qq-space-3) var(--qq-space-4);
    border-radius: var(--qq-radius-xs);
    font-size: var(--qq-fs-small);
    margin: var(--qq-space-3) 0;
    display: none;
}
.qq-pay-error.is-visible { display: block; }
.qq-pay-error__fallback {
    display: block;
    margin-top: var(--qq-space-2);
    color: var(--qq-ink);
    text-decoration: underline;
    font-weight: var(--qq-fw-semi);
}

.qq-pay-trust {
    display: flex;
    align-items: center;
    gap: var(--qq-space-3);
    margin-top: var(--qq-space-3);
    padding: var(--qq-space-3);
    background: var(--qq-cream-warm);
    border-radius: var(--qq-radius-xs);
    font-size: var(--qq-fs-small);
    color: var(--qq-ink-soft);
}
.qq-pay-trust i { color: var(--qq-canary); font-size: 18px; }

/* --- Payment methods badges --------------------------------------------- */
.qq-pay-methods {
    margin-top: var(--qq-space-4);
}
.qq-pay-methods__label {
    font-size: var(--qq-fs-micro);
    font-weight: var(--qq-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--qq-ls-kicker);
    color: var(--qq-muted);
    margin-bottom: 10px;
}
.qq-pay-methods__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Base badge: ogni brand override background/color/font */
.qq-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 54px;
    padding: 0 10px;
    background: var(--qq-white);
    border: 1px solid var(--qq-line);
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    user-select: none;
    white-space: nowrap;
}

/* Visa: sfondo blu, testo bianco italic */
.qq-pay-badge--visa { background: #1A1F71; border-color: #1A1F71; }
.qq-pay-badge__visa {
    color: #fff;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-size: 15px;
}

/* Mastercard: due cerchi sovrapposti */
.qq-pay-badge--mc { padding: 0 12px; }
.qq-pay-badge__mc { display: inline-flex; align-items: center; }
.qq-pay-badge__mc > span { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.qq-pay-badge__mc > span:first-child { background: #EB001B; }
.qq-pay-badge__mc > span:last-child { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; }

/* Apple Pay: nero */
.qq-pay-badge--apple { background: #000; border-color: #000; color: #fff; }
.qq-pay-badge__apple { display: inline-flex; align-items: center; gap: 3px; color: #fff; font-weight: 600; font-size: 14px; }
.qq-pay-badge__apple svg { flex-shrink: 0; }

/* Google Pay */
.qq-pay-badge--gpay { padding: 0 8px; }
.qq-pay-badge__gpay { font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* Link (Stripe) */
.qq-pay-badge--link { background: #00D66F; border-color: #00D66F; }
.qq-pay-badge__link { color: #011E0F; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; }

/* PayPal */
.qq-pay-badge--paypal { background: #ffc439; border-color: #ffc439; }
.qq-pay-badge__paypal { font-weight: 800; font-size: 14px; font-style: italic; }

/* Klarna: rosa Klarna */
.qq-pay-badge--klarna { background: #FFA8CD; border-color: #FFA8CD; }
.qq-pay-badge__klarna { color: #17120F; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }

/* SEPA */
.qq-pay-badge--sepa { background: #10298E; border-color: #10298E; }
.qq-pay-badge__sepa { color: #FFCC00; font-weight: 900; letter-spacing: 0.06em; font-size: 13px; }

/* Bancontact */
.qq-pay-badge--bancontact { background: #fff; border-color: #005498; }
.qq-pay-badge__bancontact { color: #005498; font-weight: 700; font-size: 12px; letter-spacing: 0; }

/* iDEAL: magenta scritto minuscolo */
.qq-pay-badge--ideal { background: #fff; border-color: #CC0066; }
.qq-pay-badge__ideal { color: #CC0066; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }

/* Giropay */
.qq-pay-badge--giropay { background: #fff; border-color: #E5E5E5; }
.qq-pay-badge__giropay { font-size: 13px; font-weight: 700; color: #333; }
.qq-pay-badge__giropay em { color: #B7002B; font-style: normal; }

/* EPS */
.qq-pay-badge--eps { background: #fff; border-color: #DA291C; }
.qq-pay-badge__eps { color: #DA291C; font-weight: 800; font-size: 14px; text-transform: lowercase; }

/* BLIK */
.qq-pay-badge--blik { background: #000; border-color: #000; }
.qq-pay-badge__blik { color: #FF5C00; font-weight: 900; font-size: 13px; letter-spacing: 0.05em; text-transform: lowercase; }

/* Swish */
.qq-pay-badge--swish { background: #EE2E7B; border-color: #EE2E7B; }
.qq-pay-badge__swish { color: #fff; font-weight: 800; font-size: 13px; font-style: italic; letter-spacing: 0.02em; }

/* Legacy classi supportate (visa/paypal semi-fallback per compatibilità) */
.qq-pay-badge__wm { color: #fff; font-weight: 900; font-style: italic; letter-spacing: 0.05em; }

/* --- Success page ------------------------------------------------------- */
.qq-success {
    background: var(--qq-canary);
    padding: var(--qq-space-9) var(--qq-space-5);
    text-align: center;
    color: var(--qq-ink);
    margin: 0 calc(-1 * var(--qq-space-5));
}
.qq-success__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--qq-ink);
    color: var(--qq-canary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--qq-space-5);
    font-size: 32px;
}
.qq-success__kicker {
    font-size: var(--qq-fs-kicker);
    font-weight: var(--qq-fw-bold);
    letter-spacing: var(--qq-ls-kicker);
    text-transform: uppercase;
    margin: 0 0 var(--qq-space-3);
}
.qq-success__title {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-hero);
    font-weight: var(--qq-fw-medium);
    line-height: var(--qq-lh-tight);
    margin: 0 0 var(--qq-space-4);
}
.qq-success__title em { font-style: italic; }
.qq-success__lead {
    font-size: var(--qq-fs-body);
    max-width: 520px;
    margin: 0 auto var(--qq-space-5);
    color: var(--qq-ink-soft);
}

/* --- Failed page -------------------------------------------------------- */
.qq-failed {
    text-align: center;
    padding: var(--qq-space-9) var(--qq-space-5);
}
.qq-failed__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FDE9E5;
    color: var(--qq-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--qq-space-5);
    font-size: 32px;
}
.qq-failed__title {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h1);
    font-weight: var(--qq-fw-medium);
    margin: 0 0 var(--qq-space-3);
    color: var(--qq-ink);
}
.qq-failed__lead {
    color: var(--qq-muted);
    max-width: 460px;
    margin: 0 auto var(--qq-space-6);
}
.qq-failed__actions {
    display: flex;
    justify-content: center;
    gap: var(--qq-space-3);
    flex-wrap: wrap;
}

/* --- Guest email form --------------------------------------------------- */
.qq-guest {
    background: var(--qq-cream-warm);
    border-radius: var(--qq-radius-md);
    padding: var(--qq-space-5);
    margin-bottom: var(--qq-space-5);
}
.qq-guest__title {
    font-family: var(--qq-font-serif);
    font-size: var(--qq-fs-h3);
    margin: 0 0 var(--qq-space-2);
    color: var(--qq-ink);
}
.qq-guest__lead {
    color: var(--qq-muted);
    font-size: var(--qq-fs-small);
    margin: 0 0 var(--qq-space-3);
}

/* =========================================================================
   Auth pages · /login · /loggati-o-registrati · /change-password
   Le view riusano .qq-card, .qq-field, .qq-btn del checkout ma senza il
   contenitore .qq-checkout-container: senza queste regole la <section> si
   attacca al bordo del viewport (nessun padding orizzontale) e l'hero non
   respira. Larghezza contenuta a 640/1000px per non stirare troppo i form.
   ========================================================================= */
.qq-auth {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--qq-space-5);
}
.qq-auth__hero {
    text-align: center;
    padding: var(--qq-space-6) 0 var(--qq-space-5);
    max-width: 640px;
    margin: 0 auto;
}
.qq-auth__hero .qq-article__intro {
    color: var(--qq-muted);
    margin: var(--qq-space-2) 0 0;
}
.qq-auth__body { max-width: 480px; margin: 0 auto; }
.qq-auth__grid { max-width: 1000px; margin: 0 auto; }
.qq-auth__divider {
    display: flex;
    align-items: center;
    gap: var(--qq-space-3);
    margin: var(--qq-space-5) 0;
}

@media (max-width: 599px) {
    .qq-auth { padding: var(--qq-space-4) var(--qq-space-4); }
    .qq-auth__hero { padding: var(--qq-space-5) 0 var(--qq-space-4); }
}