/* Cart */

/* ================================
 * VARIABLES
 * ================================ */
 :root {
     --badge-size: 1.6rem;
 }

/* ================================
 * TOAST/ADD-TO-PACK MODAL
 * ================================ */
.dso-toast-overlay {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--dso-warm-gray-10);
    border: 1px solid var(--dso-cool-gray-80-50p);
    border-radius: var(--br1);
    box-shadow: 0 10px 25px -5px color-mix(in srgb, black, transparent 85%);
    transform: translateY(120%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dso-toast-overlay.is-active {
    transform: translateY(0);
}

.dso-toast-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: var(--br1);
}

.dso-toast-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dso-toast-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dso-cool-gray-90);
}

.dso-toast-variant {
    font-size: 0.825rem;
    color: var(--dso-cool-gray-80);
}

.dso-toast-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

/* Common button classes for toast */
.dso-btn-primary, .dso-btn-secondary {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--br1);
    cursor: pointer;
}

.dso-btn-primary {
    background: var(--dso-cool-gray-90);
    color: var(--dso-warm-gray-10);
    border: none;
}

.dso-btn-secondary {
    background: transparent;
    color: var(--dso-cool-gray-90);
    border: 1px solid var(--dso-cool-gray-80-50p);
}

/* ================================
 * MAIN CART OVERLAY
 * ================================ */
.dso-cart-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--dso-cool-gray-90), transparent 50%);
    backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.dso-cart-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.dso-cart-drawer {
    position: absolute;
    top: 50%;
    right: 0;
    width: min(100vw, 440px);
    height: 96dvh;
    max-height: 96dvh;
    background: var(--dso-warm-gray-10);
    display: flex;
    flex-direction: column;
    border-radius: var(--br1) 0 0 var(--br1);
    box-shadow: 0 0 2rem color-mix(in srgb, black, transparent 75%);
    overflow: hidden;

    /* Centered vertically, offscreen to the right by default */
    transform: translate(100%, -50%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dso-cart-overlay.is-active .dso-cart-drawer {
    transform: translate(0, -50%);
}

/* Header & Bulk Controls */
.dso-cart-header {
    padding: 20px;
    border-bottom: 1px solid var(--dso-cool-gray-80-50p);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dso-cart-bulk-actions {
    padding: 10px 20px;
    background: var(--dso-warm-gray-10);
    border-bottom: 1px solid var(--dso-cool-gray-80-50p);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.dso-cart-close {
    box-sizing: border-box;

    background: var(--dso-cool-gray-90);
    color: var(--dso-warm-gray-10);

    width: 2.4rem;
    height: 2.4rem;

    border-radius: 999rem;

    align-items: center;
    justify-content: center;
}

/* Item List */
.dso-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dso-cart-item {
    display: grid;
    grid-template-columns: auto 60px 1fr auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dso-cool-gray-80-50p);
}

.dso-cart-item-select {
    cursor: pointer;
}

.dso-cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--br1);
    border: 1px solid var(--dso-cool-gray-80-50p);
}

.dso-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dso-cart-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dso-cool-gray-90);
    text-decoration: none;
}

.dso-cart-item-title:hover {
    text-decoration: underline;
}

.dso-cart-item-meta {
    font-size: 0.8rem;
    color: var(--dso-cool-gray-80);
}

/* Quantity Controls */
.dso-cart-qty-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--dso-cool-gray-80-50p);
    border-radius: 999rem;
    margin-top: 0.25rem;
    width: fit-content;
}

.dso-cart-qty-btn {
    border: none;
    border-radius: 999rem;

    background: transparent;
    cursor: pointer;
    color: var(--dso-cool-gray-90);
}

.dso-cart-qty-val {
    padding: 0 0.8rem;

    min-width: 1.6rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--dso-cool-gray-90);
}

.dso-cart-item-price {
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
    color: var(--dso-cool-gray-90);
}

.dso-cart-item-remove {
    background: transparent;
    border-radius: 999rem;
    outline: 1px solid var(--dso-orange-50);

    color: var(--dso-orange-50);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    margin-top: 0.4rem;
}

/* Footer / Total / Checkout */
.dso-cart-footer {
    padding: 20px;
    border-top: 1px solid var(--dso-cool-gray-80-50p);
    background: var(--dso-warm-gray-10);
}

.dso-cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--dso-cool-gray-90);
}

.dso-cart-checkout-btn {
    width: 100%;
    padding: 14px;
    background: var(--dso-cool-gray-90);
    color: var(--dso-warm-gray-10);
    border: none;
    border-radius: var(--br1);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dso-cart-checkout-btn:hover {
    background: var(--dso-cool-gray-80);
}

/* ==========================================
   FLOATING CART / PACK BUTTON & BADGE
========================================== */
.dso-floating-cart-btn {
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    background: var(--dso-cool-gray-90);
    color: var(--dso-warm-gray-10);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px color-mix(in srgb, black, transparent 75%);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

.dso-floating-cart-btn:hover {
    transform: scale(1.08);
    background: var(--dso-cool-gray-80);
}

.dso-floating-cart-btn:active {
    transform: scale(0.95);
}

.dso-floating-cart-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Dynamic Item Count Badge */
.dso-cart-badge {
    position: absolute;
    top: calc(var(--badge-size) * -0.25);
    right: calc(var(--badge-size) * -0.25);
    
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: var(--badge-size);
    aspect-ratio: 1 / 1;

    background: var(--dso-orange-50);
    color: var(--dso-warm-gray-10);
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 999rem;
    border: 2px solid var(--dso-warm-gray-10);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Visible state when totalQuantity > 0 */
.dso-cart-badge.has-items {
    opacity: 1;
    transform: scale(1);
}

/* Bounce animation when item count increases */
@keyframes dso-badge-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.dso-cart-badge.bounce {
    animation: dso-badge-pop 0.3s ease-in-out;
}