/* Aninda Perde mobile homepage header and category banner flow. */
:root {
    --ap-mobile-header-bg: #131f2e;
    --ap-mobile-accent: #ffad45;
    --ap-mobile-banner-gap: 2px;
    --ap-mobile-top-row-height: 62px;
    --ap-mobile-search-button-width: 54px;
    --ap-mobile-header-height: 114px;
}

.ap-mobile-banner-stack {
    display: none;
}

/* Keep the original desktop banner partials as direct children of the theme row. */
.ap-desktop-index-banner {
    display: contents;
}

@media (max-width: 767.98px) {
    body.ap-homepage {
        overflow-x: hidden;
    }

    body.ap-homepage #header {
        height: calc(var(--ap-mobile-header-height) + env(safe-area-inset-top)) !important;
        min-height: calc(var(--ap-mobile-header-height) + env(safe-area-inset-top)) !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    body.ap-homepage .nav-mobile-header {
        padding-top: env(safe-area-inset-top);
        border: 0 !important;
        background: var(--ap-mobile-header-bg) !important;
        box-shadow: none !important;
    }

    body.ap-homepage .nav-mobile-header-container {
        position: relative;
        height: var(--ap-mobile-top-row-height) !important;
        padding-inline: 10px;
        background: var(--ap-mobile-header-bg) !important;
    }

    body.ap-homepage .nav-mobile-header-container .flex-item {
        min-width: 52px;
    }

    body.ap-homepage .nav-mobile-header-container .flex-item-mid {
        position: absolute;
        inset-inline-start: 50%;
        width: min(48vw, 190px);
        transform: translateX(-50%);
    }

    [dir="rtl"] body.ap-homepage .nav-mobile-header-container .flex-item-mid {
        transform: translateX(50%);
    }

    body.ap-homepage .mobile-logo,
    body.ap-homepage .mobile-logo a {
        display: flex;
        width: 100%;
        height: 54px;
        align-items: center;
        justify-content: center;
    }

    body.ap-homepage .mobile-logo img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 48px;
        object-fit: contain;
    }

    body.ap-homepage .btn-open-mobile-nav,
    body.ap-homepage .a-mobile-cart {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    body.ap-homepage .nav-mobile-header i {
        color: #fff !important;
    }

    body.ap-homepage .nav-mobile-header .span_cart_product_count {
        background: var(--ap-mobile-accent) !important;
        color: #17202a !important;
    }

    body.ap-homepage .nav-mobile-header-container .a-search-icon {
        display: none !important;
    }

    body.ap-homepage .mobile-search-form {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 12px 0 !important;
        border: 0 !important;
        background: var(--ap-mobile-header-bg) !important;
    }

    body.ap-homepage .mobile-search-form form {
        display: flex !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 7px !important;
        background: #fff !important;
    }

    body.ap-homepage .mobile-search-form form > .form-control {
        width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding-inline: 14px !important;
        flex: 1 1 0 !important;
        border: 0 !important;
        border-radius: 7px 0 0 7px !important;
        background: #fff !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        line-height: 48px !important;
        box-shadow: none !important;
    }

    [dir="rtl"] body.ap-homepage .mobile-search-form form > .form-control {
        border-radius: 0 7px 7px 0 !important;
    }

    body.ap-homepage .mobile-search-form form > .btn-search {
        position: static !important;
        display: flex !important;
        width: var(--ap-mobile-search-button-width) !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--ap-mobile-search-button-width) !important;
        border: 0 !important;
        border-radius: 0 7px 7px 0 !important;
        background: var(--ap-mobile-accent) !important;
    }

    [dir="rtl"] body.ap-homepage .mobile-search-form form > .btn-search {
        border-radius: 7px 0 0 7px !important;
    }

    body.ap-homepage .mobile-search-form form > .btn-search i {
        color: #17202a !important;
        font-size: 22px !important;
    }

    body.ap-homepage .mobile-search-form .search-results-ajax {
        top: 48px !important;
        z-index: 1001 !important;
    }

    body.ap-homepage .ap-desktop-main-slider {
        display: none;
    }

    body.ap-homepage .ap-desktop-index-banner {
        display: none;
    }

    body.ap-homepage .ap-mobile-banner-stack {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        flex-direction: column;
        gap: var(--ap-mobile-banner-gap);
        background: #fff;
    }

    body.ap-homepage .ap-mobile-banner {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        line-height: 0;
    }

    body.ap-homepage .ap-mobile-banner picture {
        display: block;
        width: 100%;
    }

    body.ap-homepage .ap-mobile-banner img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4.7 / 1;
        object-fit: cover;
        object-position: center;
        border: 0;
        border-radius: 0;
    }

    body.ap-homepage .index-wrapper {
        padding-top: 0 !important;
    }
}

@media (min-width: 768px) {
    .ap-desktop-main-slider {
        display: block;
    }
}