:root {
  --z-base: 1;
  --z-header: 100;
  --z-dropdown: 500;
  --z-overlay: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}
/* ======================================================
   PRODUCT CARDS
====================================================== */
.product-card-grid-image {
    width: 100%;
    border-radius: 1rem 1rem 0 0;
}

.product-card-list-image {
    width: 7rem;
    height: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

[dir="ltr"] .product-card-list-image {
    border-radius: .5rem 0 0 .5rem;
}

/* ======================================================
   PAYMENT BUTTON (SweetAlert2)
====================================================== */
.payment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;

    border: 0;
    border-radius: .625rem;

    background: #2563eb;
    color: #fff;

    font-size: .875rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    position: relative;
    z-index: 1;

    transition: background .2s ease, transform .1s ease, opacity .2s ease;
}

.payment-button:hover {
    background: #1d4ed8;
}

.payment-button:active {
    transform: translateY(1px);
}

.payment-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}


/* ======================================================
   LOGO ANIMATION
====================================================== */
@keyframes logoZoomIn {
    from {
        transform: scale(.85);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-logo-zoom {
    animation: logoZoomIn .6s ease-out both;
}


/* ======================================================
   HEADER
====================================================== */
#app-header,
#logo-box {
    transition: all .3s ease;
}

.header-compact {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.header-compact #logo-box {
    width: 4rem;
}


/* ======================================================
   PRODUCT TITLE
====================================================== */
.product-title {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;

    max-width: 200px;
    width: fit-content;

    text-transform: capitalize;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ======================================================
   CART
====================================================== */
.cart-over-all {
    z-index: 9999 !important;
}

#cartItems::-webkit-scrollbar {
    width: 4px;
}

#cartItems::-webkit-scrollbar-track {
    background: transparent;
}

#cartItems::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}