/**
 * cart-drawer.css — side cart dynamique.
 */

/* ============================================================
   Scroll lock global
   ============================================================ */
html.dwc-locked,
html.dwc-locked body { overflow: hidden; }

/* Le [hidden] HTML doit toujours gagner sur display:flex/grid de nos composants. */
.dwc-drawer [hidden],
.dwc-toast[hidden] { display: none !important; }

/* ============================================================
   Drawer container
   ============================================================ */
.dwc-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}
.dwc-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}
.dwc-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.45);
    opacity: 0;
    transition: opacity 280ms ease;
}
.dwc-drawer.is-open .dwc-drawer__overlay { opacity: 1; }

.dwc-drawer__panel {
    position: absolute;
    top: 0; right: 0;
    width: min(480px, 100vw);
    height: 100%;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}
.dwc-drawer.is-open .dwc-drawer__panel { transform: translateX(0); }

/* ============================================================
   Header
   ============================================================ */
.dwc-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.dwc-drawer__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}
.dwc-drawer__count {
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    margin-left: var(--space-1);
}
.dwc-drawer__close {
    background: transparent;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.dwc-drawer__close:hover { background: var(--color-surface); }

/* ============================================================
   Timer banner
   ============================================================ */
.dwc-drawer__timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-5);
    background: var(--color-text);
    color: var(--color-promo);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
}
.dwc-drawer__timer-text { color: var(--color-cta-text); }
.dwc-drawer__timer-clock {
    font-feature-settings: 'tnum';
    font-weight: var(--weight-bold);
    color: var(--color-promo);
    margin-left: 2px;
}

/* ============================================================
   Body / items list
   ============================================================ */
.dwc-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-2) var(--space-5);
    -webkit-overflow-scrolling: touch;
}
.dwc-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Item ---- */
.dwc-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
        "media main price"
        "media main remove";
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
    align-items: start;
    transition: opacity 200ms ease, transform 200ms ease;
}
.dwc-item.is-removing { opacity: 0.4; pointer-events: none; }

.dwc-item__media {
    grid-area: media;
    display: block;
    width: 72px;
    height: 90px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}
.dwc-item__media img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.dwc-item__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.dwc-item__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    color: var(--color-text);
    text-decoration: none;
    margin: 0;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dwc-item__title:hover { color: var(--color-brand); }

/* ---- Qty stepper ---- */
.dwc-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--color-bg);
    width: fit-content;
    font-family: var(--font-body);
}
.dwc-item__qty button {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    font-size: var(--text-base);
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.dwc-item__qty button:hover { background: var(--color-surface); }
.dwc-item__qty input {
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-feature-settings: 'tnum';
    -moz-appearance: textfield;
}
.dwc-item__qty input::-webkit-outer-spin-button,
.dwc-item__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dwc-item__qty input:focus { outline: none; }

/* ---- Price ---- */
.dwc-item__price {
    grid-area: price;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: var(--font-body);
}
.dwc-item__price del {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    text-decoration: line-through;
}
.dwc-item__price strong {
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}
.dwc-item__saved {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    background: var(--color-brand-soft);
    color: var(--color-brand);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- Bundle (offre) ---- */
.dwc-item--bundle .dwc-item__media { position: relative; }
.dwc-item__bundle-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--color-brand);
    color: var(--color-cta-text);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    line-height: 1;
    text-transform: uppercase;
}
.dwc-item__offer {
    font-size: var(--text-xs);
    color: var(--color-brand);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-top: 2px;
}
.dwc-item__gifts {
    grid-column: 1 / -1;
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) 0 0;
    border-top: 1px dashed var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dwc-item__gift {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-soft);
}
.dwc-item__gift img,
.dwc-item__gift-ph {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: cover;
    flex-shrink: 0;
}
.dwc-item__gift-tag {
    display: inline-block;
    background: var(--color-promo);
    color: var(--color-promo-text);
    font-size: 9px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    margin-right: 4px;
    text-transform: uppercase;
}

/* ---- Remove ---- */
.dwc-item__remove {
    grid-area: remove;
    background: transparent;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    align-self: end;
    justify-self: end;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.dwc-item__remove:hover {
    color: var(--color-danger);
    background: var(--color-surface);
}

/* ============================================================
   Empty state
   ============================================================ */
.dwc-drawer__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-muted);
    padding: var(--space-8) var(--space-4);
    gap: var(--space-4);
}
.dwc-drawer__empty svg { color: var(--color-border); }
.dwc-drawer__empty p { margin: 0; font-size: var(--text-base); }
.dwc-drawer__empty-cta {
    display: inline-block;
    background: var(--color-text);
    color: var(--color-cta-text);
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: background var(--transition-fast);
}
.dwc-drawer__empty-cta:hover { background: var(--color-cta-hover); }

/* ============================================================
   Coupon
   ============================================================ */
.dwc-drawer__coupon {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-divider);
    background: var(--color-bg);
}
.dwc-drawer__coupon-toggle {
    background: transparent;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.dwc-drawer__coupon-toggle > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.dwc-drawer__coupon-chev {
    color: var(--color-muted);
    font-size: var(--text-lg);
    line-height: 1;
    transition: transform var(--transition-fast);
}
.dwc-drawer__coupon-toggle[aria-expanded="true"] .dwc-drawer__coupon-chev {
    transform: rotate(45deg);
}
.dwc-drawer__coupon-form {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.dwc-drawer__coupon-form input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.dwc-drawer__coupon-form input:focus {
    outline: none;
    border-color: var(--color-text);
}
.dwc-drawer__coupon-form button {
    background: var(--color-text);
    color: var(--color-cta-text);
    border: none;
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
}
.dwc-drawer__coupon-error {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-danger);
}
.dwc-drawer__coupons {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.dwc-drawer__coupons:empty { margin-top: 0; }
.dwc-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-brand-soft);
    color: var(--color-brand);
    padding: 4px 8px 4px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.dwc-coupon-chip button {
    background: transparent;
    border: none;
    color: var(--color-brand);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
    padding: 0 0 0 4px;
    opacity: 0.7;
}
.dwc-coupon-chip button:hover { opacity: 1; }

/* ============================================================
   Footer (subtotal + CTA + payments)
   ============================================================ */
.dwc-drawer__foot {
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--color-divider);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.dwc-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
}
.dwc-drawer__subtotal > span:first-child {
    font-weight: var(--weight-medium);
}
.dwc-drawer__subtotal > span:last-child {
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    font-feature-settings: 'tnum';
}

.dwc-drawer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-cta);
    color: var(--color-cta-text);
    text-decoration: none;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-align: center;
}
.dwc-drawer__cta:hover {
    background: var(--color-cta-hover);
    transform: translateY(-1px);
}
.dwc-drawer__cta-sep { opacity: 0.55; }
.dwc-drawer__cta-total { font-feature-settings: 'tnum'; }

/* Logos paiement : styles communs definis dans checkout.css (.dwc-paylogos)
   et inlines pour le drawer ci-dessous au cas ou checkout.css n'est pas charge */
.dwc-paylogos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.dwc-paylogo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.dwc-paylogo svg {
    display: block;
    height: 20px;
    width: auto;
}

/* ============================================================
   Toast
   ============================================================ */
.dwc-toast {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-text);
    color: var(--color-cta-text);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    z-index: 10000;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0, 0, 1);
    box-shadow: var(--shadow-md);
    max-width: calc(100vw - 32px);
}
.dwc-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.dwc-toast[data-type="error"] { background: var(--color-danger); }

/* ============================================================
   Header cart count bounce
   ============================================================ */
@keyframes dwc-bounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.dwc-bounce { animation: dwc-bounce 380ms cubic-bezier(0.2, 0, 0, 1); }

.site-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    background: var(--color-text);
    color: var(--color-cta-text);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--weight-bold);
    font-feature-settings: 'tnum';
    line-height: 1;
}
.site-cart__count.is-zero {
    background: var(--color-surface-2);
    color: var(--color-muted);
}

/* ---- Add-to-cart loading state ---- */
.add_to_cart_button.is-loading,
form.cart .single_add_to_cart_button.is-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 480px) {
    .dwc-drawer__panel { width: 100vw; }
    .dwc-drawer__head { padding: var(--space-4); }
    .dwc-drawer__body { padding: var(--space-2) var(--space-4); }
    .dwc-drawer__foot,
    .dwc-drawer__coupon { padding-left: var(--space-4); padding-right: var(--space-4); }
}