/* ============================================================
   BOHEME DE DIOR - Page Panier (extension de theme.css)
   Palette/tokens herites du theme : --bs-primary (#4e7661),
   --bs-emphasis-color, --bs-tertiary-bg, Urbanist.
   ============================================================ */

/* Hero (.boheme-cart-hero), fil retour (.boheme-continue) et etat vide
   (.boheme-cart-empty-*) sont partages avec checkout : deplaces dans boheme.css. */

/* ---------- Bandeau livraison gratuite ---------- */
.boheme-freeship {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--boheme-radius);
    padding: 16px 20px;
    box-shadow: var(--boheme-shadow-soft);
}
.boheme-freeship-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    color: var(--bs-emphasis-color);
    margin-bottom: 10px;
}
.boheme-freeship-label .amount { color: var(--bs-primary); font-weight: 700; }
.boheme-freeship-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}
.boheme-freeship-bar {
    height: 100%;
    border-radius: 999px;
    width: 0;
    background: linear-gradient(90deg, var(--bs-primary), rgba(var(--bs-primary-rgb), .65));
    transition: width .7s var(--boheme-ease);
}
.boheme-freeship.is-unlocked {
    border-color: rgba(var(--bs-primary-rgb), .5);
    background: rgba(var(--bs-primary-rgb), .06);
}
.boheme-freeship.is-unlocked .boheme-freeship-label { color: var(--bs-primary); font-weight: 600; }

/* ---------- Lignes panier ---------- */
.boheme-cart-lines { display: flex; flex-direction: column; }
.boheme-line {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--bs-border-color);
    animation: boheme-line-in .5s var(--boheme-ease-out) both;
}
.boheme-line.is-removing {
    animation: boheme-line-out .35s var(--boheme-ease) forwards;
}
@keyframes boheme-line-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes boheme-line-out {
    to { opacity: 0; transform: translateX(30px); height: 0; padding: 0; margin: 0; }
}
.boheme-line-media {
    flex-shrink: 0;
    width: 120px;
    border-radius: var(--boheme-radius);
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    align-self: flex-start;
}
.boheme-line-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--boheme-ease);
}
.boheme-line:hover .boheme-line-media img { transform: scale(1.06); }

.boheme-line-body {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.boheme-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.boheme-line-title {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
    line-height: 1.35;
    transition: color .25s ease;
}
.boheme-line-title:hover { color: var(--bs-primary); }
.boheme-line-meta {
    color: var(--bs-secondary-color);
    font-size: .85rem;
    margin-top: 4px;
}
.boheme-line-foot {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.boheme-line-remove {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.boheme-line-remove:hover {
    color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .1);
    transform: scale(1.1);
}
.boheme-line-price {
    text-align: right;
    line-height: 1.2;
}
.boheme-line-price del {
    display: block;
    color: var(--bs-secondary-color);
    font-size: .82rem;
}
.boheme-line-price span {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-emphasis-color);
}

/* Stepper, recapitulatif (.boheme-summary*) et trust badges (.boheme-trust) sont
   partages avec checkout/paiement : deplaces dans boheme.css (composants globaux). */

/* ---------- Cross-sell "Vous pourriez aussi aimer" ---------- */
.boheme-cart-upsell {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--bs-border-color);
}
.boheme-cart-upsell-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    margin-bottom: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
    .boheme-line { gap: 14px; padding: 18px 0; }
    .boheme-line-media { width: 92px; }
    .boheme-line-title { font-size: .95rem; }
    .boheme-line-foot { padding-top: 12px; }
    .boheme-stepper button { width: 36px; height: 36px; }
}