/*
 * Cross-cutting mobile / tablet responsiveness for the storefront.
 * Loaded last so overrides win over demo35 + page CSS.
 */

/* Prevent horizontal page scroll on small screens */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* Sticky bottom bar — fill available slots, readable labels */
.sticky-navbar .sticky-info {
    flex: 1 1 0 !important;
    max-width: none !important;
}

.sticky-navbar .sticky-info a {
    min-height: 48px;
    font-size: 1.1rem !important;
    line-height: 1.2;
}

.sticky-navbar .sticky-info i {
    font-size: 1.8rem !important;
}

/* Larger tap targets for common storefront controls */
.product-default .category-wrap .btn-icon-wish,
.product-default .product-price-cart,
.product-default .btn-add-cart.product-price-cart {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.75rem !important;
    box-sizing: content-box;
}

.cart-qty__btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
}

.cart-qty__input {
    min-height: 44px;
    height: 44px;
}

.cart-line__remove {
    min-height: 44px;
    padding: 0.8rem 0.4rem;
}

.sidebar-shop .cat-list .toggle {
    width: 44px;
    height: 44px;
    line-height: 44px;
    right: 0;
    top: 0;
}

.order-actions-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* —— Tablet (≤991) —— */
@media (max-width: 991.98px) {
    .cart-dropdown .mobile-cart,
    .cart-opened .cart-dropdown .mobile-cart,
    .cart-dropdown.show .mobile-cart {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        width: min(340px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .cart-dropdown .dropdownmenu-wrapper:before,
    .cart-dropdown .dropdownmenu-wrapper:after {
        left: auto !important;
        right: 18px !important;
        margin-left: 0 !important;
    }

    .checkout-steps__list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .checkout-steps__item {
        padding: 0.75rem 0.7rem;
        font-size: 1.2rem;
    }

    .category-banner {
        padding: 3rem 1.5rem !important;
        min-height: 0 !important;
    }

    .toolbox {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .toolbox-left,
    .toolbox-right {
        width: 100%;
        justify-content: space-between;
    }

    .sidebar-toggle {
        min-height: 44px !important;
        padding: 0 1.2rem !important;
    }

    .home-promo__copy {
        margin: 1.2rem !important;
        max-width: none !important;
    }

    .account-page .sidebar-shop,
    .account-dashboard .widget-dashboard {
        margin-bottom: 1.5rem;
    }

    /* Account nav: horizontal scroll on tablet/phone */
    .account-page .widget-dashboard .nav.list,
    .sidebar.widget-dashboard .nav.list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        margin: 0;
        list-style: none;
        border: 0 !important;
        flex-direction: row !important;
    }

    .account-page .widget-dashboard .nav.list > .nav-item,
    .sidebar.widget-dashboard .nav.list > .nav-item {
        flex: 0 0 auto;
        margin: 0 !important;
        border: 1px solid var(--sf-line, #e6ebe8);
        border-radius: 999px;
        background: #fff;
    }

    .account-page .widget-dashboard .nav.list > .nav-item > .nav-link,
    .account-page .widget-dashboard .nav.list > .nav-item > form > .nav-link,
    .sidebar.widget-dashboard .nav.list > .nav-item > .nav-link,
    .sidebar.widget-dashboard .nav.list > .nav-item > form > .nav-link {
        display: block;
        padding: 0.85rem 1.2rem !important;
        white-space: nowrap;
        border: 0 !important;
        border-radius: 999px !important;
        text-align: center;
    }

    .account-page .widget-dashboard .nav.list > .nav-item > .nav-link.active,
    .sidebar.widget-dashboard .nav.list > .nav-item > .nav-link.active {
        background: color-mix(in srgb, var(--sf-accent, #4dae65) 14%, #fff);
        color: var(--sf-ink, #1c2328);
    }

    .sidebar.widget-dashboard h2 {
        font-size: 1.5rem;
        margin-bottom: 0.85rem;
    }

    body:has(.sticky-navbar) .main {
        padding-bottom: 4.5rem;
    }
}

/* —— Narrow tablet / large phone (≤767) —— */
@media (max-width: 767.98px) {
    .checkout-field-row {
        grid-template-columns: 1fr !important;
    }

    .checkout-coupon__row {
        flex-direction: column;
    }

    .checkout-shell,
    .cart-shell {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .checkout-steps__list {
        grid-template-columns: 1fr !important;
    }

    .product-page .product-single-tabs .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-page .product-single-tabs .table,
    .product-page .product-single-tabs .tab-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-page .product-single-tabs .table th {
        width: auto;
        min-width: 8rem;
    }

    .product-page .product-single-details .product-action {
        width: 100%;
        flex-wrap: wrap;
    }

    .product-page .product-single-details .product-action .btn.add-cart {
        flex: 1 1 auto;
        width: 100%;
        min-height: 48px;
    }

    .product-page .social-icon {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
    }

    .cart-line {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .order-receipt__table,
    .order-receipt table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-search-results__thumb {
        width: 4.8rem !important;
        height: 4.8rem !important;
    }

    .home-hero__layer {
        padding: 2rem 1.25rem !important;
    }

    .order-complete__actions .checkout-btn,
    .order-complete__actions form {
        width: 100%;
    }

    .order-complete__actions .checkout-btn {
        display: block;
        text-align: center;
    }
}

/* —— Phones (≤575) —— */
@media (max-width: 575.98px) {
    .cart-intro__title,
    .checkout-intro__title,
    .order-complete-intro .checkout-intro__title {
        font-size: clamp(2.2rem, 7vw, 3rem);
    }

    .sf-topbar__switchers {
        display: none !important;
    }

    .btn-go-shop {
        width: 100%;
        min-width: 0 !important;
    }

    .products-slider.owl-carousel .owl-nav {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .home-owl .owl-dots .owl-dot,
    .home-hero .owl-dots .owl-dot {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .checkout-summary {
        order: 0;
    }

    .mobile-menu-container .search-wrapper .form-control {
        min-height: 44px;
        font-size: 1.4rem;
    }

    .mobile-menu-container .mobile-menu > li > a,
    .mobile-menu-container .login-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}