/*
 * Mownii customer storefront responsive polish.
 * Layout-only overrides: no pricing, stock, freight, cart, checkout, or payment logic.
 */

html,
body {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

@supports (overflow: clip) {
    body {
        overflow-x: clip;
    }
}

@media (max-width: 767px) {
    :root {
        --mownii-mobile-header-height: 112px;
        --mownii-mobile-gutter: 12px;
        --mownii-mobile-control: 44px;
    }

    html {
        scroll-padding-top: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top));
    }

    body.toolbar-enabled {
        padding-top: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top)) !important;
    }

    /* Header: compact action row plus a full-width search row. */
    header.__inline-10 {
        box-sizing: border-box;
        height: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top));
        min-height: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        background: #fff;
        box-shadow: 0 3px 14px rgba(43, 52, 69, 0.1);
    }

    header.__inline-10 .topbar {
        display: none !important;
    }

    header.__inline-10 .mobile-head,
    header.__inline-10 .mobile-head > .navbar {
        min-height: var(--mownii-mobile-header-height);
        height: var(--mownii-mobile-header-height);
        padding: 0 !important;
        box-shadow: none !important;
    }

    header.__inline-10 .mobile-head > .navbar > .container {
        display: grid !important;
        grid-template-columns: var(--mownii-mobile-control) minmax(64px, 1fr) auto;
        grid-template-rows: 56px 48px;
        align-items: center;
        gap: 4px 8px;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 100%;
        padding: 4px var(--mownii-mobile-gutter) 4px !important;
        margin: 0;
    }

    header.__inline-10 .mobile-head > .navbar > .container > .navbar-toggler {
        grid-column: 1;
        grid-row: 1;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: var(--mownii-mobile-control);
        min-width: var(--mownii-mobile-control);
        height: var(--mownii-mobile-control);
        margin: 0;
        padding: 10px;
        border: 0;
        border-radius: 50%;
        background: #f4f7fb;
    }

    header.__inline-10 .mobile-head > .navbar > .container > .navbar-brand {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        min-width: 0 !important;
        width: auto;
        height: 52px;
        margin: 0 !important;
        padding: 0;
    }

    header.__inline-10 .mobile-head > .navbar > .container > .navbar-brand.d-sm-none {
        display: flex !important;
        align-items: center;
    }

    header.__inline-10 .mobile-logo-img,
    header.__inline-10 .navbar-brand .__inline-11 {
        display: block;
        width: 82px !important;
        max-width: 100%;
        height: 48px !important;
        object-fit: contain;
        object-position: left center;
    }

    header.__inline-10 .search-form-mobile {
        position: relative !important;
        inset: auto !important;
        z-index: 2;
        grid-column: 1 / -1;
        grid-row: 2;
        display: block !important;
        width: 100% !important;
        height: var(--mownii-mobile-control) !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    header.__inline-10 .search-form-mobile form,
    header.__inline-10 .search-form-mobile form > .d-flex {
        position: relative;
        width: 100%;
        height: 100%;
        min-width: 0;
    }

    header.__inline-10 .search-form-mobile .search-bar-input {
        width: 100%;
        height: var(--mownii-mobile-control);
        min-height: var(--mownii-mobile-control);
        padding: 0 48px 0 16px;
        border: 1px solid #dce5f1;
        border-radius: 22px !important;
        background: #f7f9fc;
        font-size: 16px;
        line-height: var(--mownii-mobile-control);
    }

    [dir="rtl"] header.__inline-10 .search-form-mobile .search-bar-input {
        padding-right: 16px;
        padding-left: 48px;
    }

    header.__inline-10 .search-form-mobile .search_button {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 3;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: var(--mownii-mobile-control);
        height: var(--mownii-mobile-control);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent !important;
    }

    [dir="rtl"] header.__inline-10 .search-form-mobile .search_button {
        right: auto;
        left: 0;
    }

    header.__inline-10 .search-form-mobile .search_button .input-group-text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
    }

    header.__inline-10 .search-form-mobile .search_button i {
        color: var(--web-primary) !important;
    }

    header.__inline-10 .search-form-mobile .close-search-form-mobile {
        display: none !important;
    }

    header.__inline-10 .search-form-mobile .mobile-search-card {
        top: calc(100% + 6px);
        right: 0;
        left: 0;
        width: 100%;
        max-height: calc(100dvh - var(--mownii-mobile-header-height) - 16px);
        border-radius: 12px;
    }

    header.__inline-10 .navbar-toolbar {
        grid-column: 3;
        grid-row: 1;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
        width: auto !important;
        min-width: 0;
        height: var(--mownii-mobile-control);
        margin: 0 !important;
        padding: 0 !important;
    }

    header.__inline-10 .navbar-toolbar > .navbar-stuck-toggler,
    header.__inline-10 .navbar-toolbar > .open-search-form-mobile,
    header.__inline-10 .navbar-toolbar > .navbar-tool.dropdown {
        display: none !important;
    }

    header.__inline-10 .navbar-toolbar > .__aliexpress-selector,
    header.__inline-10 .navbar-toolbar > .dropdown,
    header.__inline-10 .navbar-toolbar > #cart_items,
    header.__inline-10 .navbar-toolbar > #cart_items > .navbar-tool {
        flex: 0 0 auto;
        width: var(--mownii-mobile-control) !important;
        min-width: var(--mownii-mobile-control) !important;
        height: var(--mownii-mobile-control) !important;
        margin: 0 !important;
    }

    header.__inline-10 .navbar-toolbar .navbar-tool-icon-box,
    header.__inline-10 .navbar-toolbar .navbar-tool {
        width: var(--mownii-mobile-control) !important;
        min-width: var(--mownii-mobile-control) !important;
        height: var(--mownii-mobile-control) !important;
        margin: 0 !important;
    }

    header.__inline-10 .navbar-toolbar .navbar-tool-icon-box {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: var(--mownii-mobile-control);
        min-width: var(--mownii-mobile-control);
        height: var(--mownii-mobile-control);
        min-height: var(--mownii-mobile-control);
        padding: 0 !important;
        border-radius: 50%;
        background: #f4f7fb;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__selector-text,
    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__globe-icon,
    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__current-lang,
    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__current-country {
        display: none !important;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__trigger-flag:not(.__hidden) {
        display: block !important;
        width: 22px;
        height: 16px;
        object-fit: cover;
        border-radius: 3px;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__chevron-icon {
        display: inline-flex !important;
        margin: 0;
        font-size: 9px;
    }

    header.__inline-10 .navbar-toolbar .navbar-tool-label {
        top: -3px;
        right: -3px;
    }

    header.__inline-10 .__aliexpress-dropdown {
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: 460px;
        max-height: calc(100dvh - var(--mownii-mobile-header-height) - 16px) !important;
    }

    header.__inline-10 .mobile-head .navbar-stuck-menu {
        position: fixed !important;
        top: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top));
        right: auto;
        bottom: 0;
        left: 0;
        z-index: 1029;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - var(--mownii-mobile-header-height) - env(safe-area-inset-top));
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        /* The fixed drawer host spans the viewport.  It must not intercept
           storefront taps while the collapse itself is closed. */
        pointer-events: none;
    }

    header.__inline-10 .mobile-head .navbar-stuck-menu > .container {
        width: 100%;
        max-width: none;
        padding: 0 !important;
    }

    header.__inline-10 .mobile-head .navbar-stuck-menu .navbar-collapse.show,
    header.__inline-10 .mobile-head .navbar-stuck-menu .navbar-collapse.collapsing {
        width: min(88vw, 360px);
        max-height: calc(100dvh - var(--mownii-mobile-header-height) - env(safe-area-inset-top));
        padding: 16px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: 8px 12px 30px rgba(31, 48, 79, 0.18);
        pointer-events: auto;
    }

    header.__inline-10 .mobile-head .navbar-stuck-menu .nav-link,
    header.__inline-10 .mobile-head .navbar-stuck-menu .dropdown-item {
        min-height: var(--mownii-mobile-control);
        display: flex;
        align-items: center;
        border-radius: 8px;
        color: #26344f !important;
    }

    /* Home: predictable banner and deliberate, compact swipe previews. */
    .homepage-api-content {
        gap: 14px !important;
    }

    .homepage-api-content > section,
    .homepage-api-content > div,
    .homepage-api-content .container,
    .homepage-api-content .card,
    .homepage-api-content .card-body {
        max-width: 100%;
    }

    .__top-slider-images .hero-slider,
    .__top-slider-images .hero-slider .owl-stage-outer,
    .__top-slider-images .hero-slider .owl-item,
    .__top-slider-images .hero-slider a {
        border-radius: 10px;
    }

    .__top-slider-images .hero-slider .owl-stage-outer {
        overflow: hidden;
    }

    .__top-slider-images .__slide-img,
    .__top-slider-images .__slide-img.__slide-img-170 {
        display: block;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .hero-slider .owl-dots {
        margin-top: 8px !important;
    }

    .section-card-margin {
        border-radius: 12px;
    }

    .feature-product-title,
    .categories-title,
    .arrival-title,
    .featured_deal_title {
        font-size: clamp(1.125rem, 5vw, 1.375rem) !important;
        line-height: 1.3;
    }

    .feature-product {
        padding: 12px 8px 14px !important;
        overflow: hidden;
    }

    #featured_products_list {
        width: min(72vw, 220px) !important;
        max-width: min(72vw, 220px) !important;
        margin: 0 auto !important;
    }

    #featured_products_list .product-single-hover .inline_product img {
        width: 100%;
        height: auto !important;
        aspect-ratio: 1;
        object-fit: cover;
    }

    #featured_products_list .single-product-details a {
        min-height: 2.6rem;
        -webkit-line-clamp: 2;
        line-height: 1.3rem;
    }

    #featured_products_list.owl-theme .owl-nav .owl-prev,
    #featured_products_list.owl-theme .owl-nav .owl-next {
        transform: none !important;
    }

    .category-wise-product-slider .owl-stage-outer,
    #new-arrivals-product .owl-stage-outer {
        overflow: hidden;
    }

    /* Product listing cards retain a compact two-column layout. */
    .product-single-hover .single-product-details {
        padding: 8px 6px 0;
    }

    .product-single-hover .single-product-details a {
        line-height: 1.25rem;
    }

    .product-single-hover .rating-show {
        min-height: 28px;
        align-items: center;
    }

    /* Product Details: usable gallery, variants, actions and safe sticky purchase bar. */
    .pd-img-wrap,
    .pd-img-wrap .swiper,
    .pd-img-wrap .swiper-container,
    .pd-img-wrap .swiper-slide,
    .pd-img-wrap .swiper-slide img {
        max-width: 100%;
    }

    .product-cart-option-container > h2,
    .product-cart-option-container .product-title2 {
        margin-bottom: 12px !important;
        font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
        line-height: 1.25;
    }

    .checkbox-alphanumeric--style-1,
    .checkbox-color {
        gap: 10px;
        padding-inline-start: 0;
    }

    .checkbox-alphanumeric--style-1 label,
    .aliexpress-variant-option,
    .aliexpress-variant-option label {
        min-width: var(--mownii-mobile-control);
        min-height: var(--mownii-mobile-control);
    }

    .product-quantity .quantity-box,
    .product-quantity .btn-number,
    .product-quantity .input-number {
        min-height: var(--mownii-mobile-control) !important;
    }

    .product-add-and-buy-section {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .product-add-and-buy-section > .btn,
    .product-add-and-buy-section > a {
        min-width: 0;
        min-height: var(--mownii-mobile-control);
        padding: 8px 6px;
        white-space: normal;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .product-details-sticky {
        max-height: min(45dvh, 190px);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 -8px 24px rgba(31, 48, 79, 0.14);
    }

    .product-details-sticky .container {
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    /* Cart: preserve line identity and controls while making every action touchable. */
    #cart-summary {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
        padding: 12px !important;
    }

    #cart-summary > h3 {
        margin-top: 4px !important;
        text-align: left !important;
    }

    .cart_information,
    .cart_total {
        width: 100%;
        max-width: 100%;
        border-radius: 12px !important;
    }

    .cart_information .d-flex.justify-content-between.gap-3.p-3 {
        gap: 8px !important;
        padding: 12px !important;
    }

    .cart_information .__img-48 {
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

    .cart-mobile-qty-btn,
    .action-remove-cart-line,
    .qty_input {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .action-remove-cart-line {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px !important;
    }

    .checkout-shipping-label,
    .cart-selected-country-label {
        overflow-wrap: anywhere;
    }

    /* Checkout: one clear column, full-width provider controls, no iframe overflow. */
    .checkout_details,
    .checkout_details .card,
    .checkout-payment-in-summary,
    .order-summery-aside,
    #checkout-payment-section,
    #checkout-payment-section .card,
    #checkout-payment-section iframe {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .checkout_details .list-group-item,
    .order-summery-aside .card-body,
    .checkout-payment-in-summary .card-body {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .checkout_details input,
    .checkout_details select,
    .checkout_details textarea,
    .checkout_details button,
    #checkout-payment-section label,
    #checkout-payment-section button,
    #checkout-payment-section .btn {
        min-height: var(--mownii-mobile-control);
    }

    .checkout-payment-in-summary .credit-card-paypal-section .row > [class*="col-"],
    #checkout-payment-section [class*="col-"] {
        min-width: 0;
    }

    .checkout-payment-in-summary .payment-option,
    .checkout-payment-in-summary .payment-method,
    #checkout-payment-section .payment-option,
    #checkout-payment-section .payment-method {
        width: 100%;
        max-width: 100%;
    }

    .checkout_details [class*="map"],
    .checkout_details .gm-style {
        max-width: 100%;
        overflow: hidden;
    }

    /* Account and Wallet already use an off-canvas aside; tighten cards and tables. */
    .user-profile-container {
        width: 100%;
        max-width: 100%;
        padding: 12px !important;
    }

    .user-profile-container > .row {
        margin-right: 0;
        margin-left: 0;
    }

    .__customer-profile,
    .__customer-profile > .card,
    .__customer-profile > .card > .card-body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .__customer-profile > .card {
        border-radius: 12px;
    }

    .profile-aside-btn,
    .profile-aside-close-btn {
        min-width: var(--mownii-mobile-control);
        min-height: var(--mownii-mobile-control);
    }

    .my-wallet-card-content h2,
    .__customer-profile .fs-36 {
        font-size: clamp(1.5rem, 8vw, 2.25rem) !important;
        overflow-wrap: anywhere;
    }

    .__customer-profile .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .transaction-filter_dropdown {
        max-width: calc(100vw - 24px);
    }

    /* Footer and floating controls. */
    .page-footer .container,
    .page-footer .row,
    .page-footer [class*="col-"] {
        max-width: 100%;
    }

    .page-footer .footer-padding-bottom {
        margin-bottom: 20px;
    }

    .page-footer a,
    .page-footer button {
        min-height: 36px;
    }

    .floating-btn-grp {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 359px) {
    :root {
        --mownii-mobile-gutter: 8px;
    }

    header.__inline-10 .mobile-logo-img,
    header.__inline-10 .navbar-brand .__inline-11 {
        width: 70px !important;
    }

    .product-add-and-buy-section > .btn,
    .product-add-and-buy-section > a {
        font-size: 0.75rem;
        padding-right: 4px;
        padding-left: 4px;
    }

    #featured_products_list {
        width: min(70vw, 196px) !important;
        max-width: min(70vw, 196px) !important;
    }
}

@media (min-width: 360px) and (max-width: 767px) {
    header.__inline-10 .navbar-toolbar > .__aliexpress-selector,
    header.__inline-10 .navbar-toolbar .__aliexpress-trigger {
        width: 68px !important;
        min-width: 68px !important;
        border-radius: 22px;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__selector-text {
        display: inline-flex !important;
        width: auto;
        max-width: 30px;
        overflow: hidden;
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    header.__inline-10 .navbar-toolbar .__aliexpress-trigger .__current-currency {
        display: inline !important;
    }
}

@media (max-width: 575px) {
    header.__inline-10 .__aliexpress-dropdown {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 18px 18px 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .page-footer .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    header.__inline-10 .mobile-head > .navbar > .container > .navbar-brand.d-none.d-sm-block {
        display: flex !important;
        align-items: center;
    }

    header.__inline-10 .__aliexpress-dropdown {
        top: calc(var(--mownii-mobile-header-height) + env(safe-area-inset-top) + 4px) !important;
        bottom: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .homepage-api-content,
    .homepage-api-content .container,
    .checkout_details,
    .order-summery-aside,
    .user-profile-container {
        max-width: 100%;
    }

    .__top-slider-images .__slide-img {
        width: 100%;
        object-position: center;
    }

    .checkout-payment-in-summary,
    #checkout-payment-section,
    #checkout-payment-section iframe {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}