/* =====================================================
   shop.css — stili dedicati allo shop + carrello + ordini
   Spec: docs/superpowers/specs/2026-05-21-coming-soon-products-prevendita-design.md
   ===================================================== */

/* Coming-soon prodotti + prevendita
   ----------------------------------------------------
   Per la pillola "In arrivo · {data}" lato vetrina (card shop,
   pagina prodotto, carrello) usiamo direttamente .wardrobe-cs-hero-eyebrow
   di ui-components.css, allineata al pattern dei video coming-soon.
   Sotto restano solo gli elementi specifici dello shop:
   il banner alert nel carrello e il badge compatto inline. */

/* Banner nel carrello quando contiene almeno un pre-ordine */
.shop-cart__preorder-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(201, 168, 107, 0.10);
    border: 1px solid var(--wardrobe-gold-soft, rgba(201, 168, 107, 0.5));
    color: var(--wardrobe-ink, #f0f0f0);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
}
.shop-cart__preorder-notice__icon {
    flex: 0 0 auto;
    color: var(--wardrobe-gold, #c9a86b);
    font-size: 20px;
    line-height: 1;
}

/* Badge "In arrivo" / "Pre-ordine" compatto inline.
   Variante mini della .wardrobe-cs-hero-eyebrow per spazi ristretti
   (riga tabella admin/ordine, lista ordini). */
.shop-cart-item__preorder-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    color: var(--wardrobe-gold, #c9a961);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.5));
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}