/* ============================================================
   PRODUCT QUICK ADD — IMAGE OVERLAY
   The panel sits over the lower part of the product image.
   ============================================================ */

.ml-product-card__media {
    position: relative;
    overflow: hidden;
}

/* Keep the favorite button above the overlay. */
.ml-product-card__wishlist--circle {
    z-index: 12 !important;
}

/* Plus button remains in the product info row. */
.ml-product-card__plus {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Overlay shell
   ------------------------------------------------------------ */

.ml-product-quick-add {
    position: absolute;
    z-index: 10;

    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    max-height: 62%;

    direction: rtl;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(22px);

    transition:
        opacity .26s ease,
        transform .32s cubic-bezier(.22,.61,.36,1),
        visibility .26s ease;
}

.ml-product-quick-add[hidden] {
    display: none !important;
}

.ml-product-quick-add.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ml-product-quick-add__surface {
    position: relative;

    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 18px 22px 20px;

    border-top: 1px solid rgba(40, 36, 32, .10);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.84) 0%,
            rgba(255,255,255,.92) 100%
        );

    -webkit-backdrop-filter: blur(16px) saturate(105%);
    backdrop-filter: blur(16px) saturate(105%);

    box-shadow:
        0 -12px 40px rgba(30, 27, 24, .06);
}

.ml-product-quick-add__surface::-webkit-scrollbar {
    width: 4px;
}

.ml-product-quick-add__surface::-webkit-scrollbar-thumb {
    background: rgba(49, 45, 41, .22);
}

.ml-product-quick-add__loading {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #777069;

    font-size: 10px;
    line-height: 1.8;
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */

.ml-quick-add-section {
    padding: 0 0 17px;
    margin: 0 0 16px;

    border-bottom: 1px solid rgba(53, 48, 44, .13);
}

.ml-quick-add-section__title {
    margin: 0 0 13px;

    color: #24211e;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   Colors
   ------------------------------------------------------------ */

.ml-quick-add-colors {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    overflow-x: auto;
    padding: 2px 0 4px;

    scrollbar-width: none;
}

.ml-quick-add-colors::-webkit-scrollbar {
    display: none;
}

.ml-quick-add-color {
    flex: 0 0 auto;

    width: 58px;
    padding: 0;

    border: 0;
    background: transparent;
    color: #312c28;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    font-family: inherit;
    font-size: 8px;
    line-height: 1.35;

    cursor: pointer;
}

.ml-quick-add-color__swatch {
    position: relative;

    width: 50px;
    height: 56px;

    border: 1px solid rgba(45, 40, 36, .16);
    background: var(--quick-color);

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.30);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.ml-quick-add-color:hover:not(:disabled)
.ml-quick-add-color__swatch {
    transform: translateY(-1px);
    border-color: rgba(34, 31, 28, .46);
}

.ml-quick-add-color.is-selected
.ml-quick-add-color__swatch {
    border-color: #24211f;

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.34),
        0 0 0 1px #24211f;
}

.ml-quick-add-color.is-selected {
    color: #171513;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Sizes
   ------------------------------------------------------------ */

.ml-quick-add-sizes {
    display: flex;
    align-items: center;
    gap: 21px;

    overflow-x: auto;

    padding: 1px 0 5px;

    scrollbar-width: none;
}

.ml-quick-add-sizes::-webkit-scrollbar {
    display: none;
}

.ml-quick-add-size {
    position: relative;

    flex: 0 0 auto;

    min-width: 28px;
    height: 34px;

    padding: 0 3px;

    border: 1px solid transparent;
    background: transparent;
    color: #2a2724;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: inherit;
    font-size: 9px;
    font-weight: 400;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.ml-quick-add-size:hover:not(:disabled) {
    border-color: rgba(39, 35, 32, .24);
}

.ml-quick-add-size.is-selected {
    border-color: #282522;
    background: rgba(255,255,255,.44);
    color: #171513;
    font-weight: 600;
}

/* ------------------------------------------------------------
   Disabled variants
   ------------------------------------------------------------ */

.ml-quick-add-color.is-disabled,
.ml-quick-add-size.is-disabled,
.ml-quick-add-color:disabled,
.ml-quick-add-size:disabled {
    opacity: .28;
    cursor: not-allowed;
}

.ml-quick-add-size.is-disabled,
.ml-quick-add-size:disabled {
    text-decoration: line-through;
}

/* ------------------------------------------------------------
   Add to basket
   ------------------------------------------------------------ */

.ml-quick-add-submit {
    width: 100%;
    min-height: 48px;

    padding: 0 18px;

    border: 1px solid #272522;
    background: #272522;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;

    cursor: pointer;

    transition:
        background-color .18s ease,
        opacity .18s ease;
}

.ml-quick-add-submit:hover:not(:disabled) {
    background: #171614;
}

.ml-quick-add-submit:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.ml-quick-add-submit.is-loading {
    pointer-events: none;
    opacity: .65;
}

/* ------------------------------------------------------------
   When Quick Add is open, calm down gallery controls behind it.
   ------------------------------------------------------------ */

.ml-product-card:has(.ml-product-quick-add.is-open)
.ml-product-card__nav {
    opacity: 0 !important;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Tablet / mobile
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .ml-product-quick-add {
        max-height: 67%;
    }

    .ml-product-quick-add__surface {
        padding: 16px 16px 17px;
    }

    .ml-quick-add-colors {
        gap: 9px;
    }

    .ml-quick-add-color {
        width: 50px;
    }

    .ml-quick-add-color__swatch {
        width: 44px;
        height: 48px;
    }

    .ml-quick-add-sizes {
        gap: 13px;
    }
}

@media (max-width: 575.98px) {
    .ml-product-quick-add {
        max-height: 72%;
    }

    .ml-product-quick-add__surface {
        padding: 13px 12px 14px;
    }

    .ml-quick-add-section {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .ml-quick-add-section__title {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .ml-quick-add-color {
        width: 44px;
        gap: 4px;
        font-size: 7px;
    }

    .ml-quick-add-color__swatch {
        width: 38px;
        height: 42px;
    }

    .ml-quick-add-sizes {
        gap: 8px;
    }

    .ml-quick-add-size {
        min-width: 26px;
        height: 30px;
        font-size: 8px;
    }

    .ml-quick-add-submit {
        min-height: 43px;
        font-size: 9px;
    }
}