/* =========================================================
   RESPONSIVE FINAL SYSTEM
   Storefront-wide layout hardening and responsive polish.
   Loaded after the existing theme patches.
   ========================================================= */

:root{
    --rf-gutter:clamp(12px,2vw,24px);
    --rf-radius:clamp(16px,1.8vw,24px);
    --rf-section-gap:clamp(18px,2.4vw,32px);
}

html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    scroll-behavior:smooth;
}

body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
}

*,*::before,*::after{box-sizing:border-box;}

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

input,select,textarea,button{font:inherit;max-width:100%;}
textarea{resize:vertical;}

:where(.site-shell-container,.site-main-wrap,.site-main-wrap.is-wide,.container){
    width:min(calc(100% - (var(--rf-gutter) * 2)),1520px) !important;
    max-width:1520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.site-shell-container{max-width:1400px !important;}

:where(
    .homepage,.shop-page,.shop-layout,.shop-main,.shop-sidebar,.shop-card,
    .category-shell,.products-card,.toolbar-card,.breadcrumb-card,
    .product-page,.product-hero,.product-gallery-card,.product-info-card,.purchase-card,.content-card,
    .cart-shell,.cart-layout,.cart-card,.cart-summary-card,.related-card-wrap,
    .checkout-container,.checkout-card,
    .account-shell,.account-layout,.account-sidebar,.account-content,.account-card,
    .orders-shell,.order-detail-shell,.order-detail-layout,.order-detail-main,.order-detail-side,
    .contact-shell,.contact-grid,.contact-card,.contact-bottom-grid,
    .blog-page,.blog-grid,.blog-card,.blog-detail-page,.blog-detail-layout,.blog-detail-content,.blog-detail-sidebar,
    .campaign-shell,.campaign-detail-layout,.campaign-products,.campaign-card,
    .register-grid,.auth-register-wrap,.auth-register-card,.auth-register-form-area,.auth-page,.auth-card-modern,
    .payment-grid,.payment-card,.info-page-shell,.info-page-wrap,.support-shell,
    .builder-layout,.products-panel,.component-grid,.device-choice-grid,.complete-grid
){min-width:0;max-width:100%;}

:where(
    .product-title,.product-brand,.product-category,.product-short,.product-description,
    .cart-item-info,.cart-item-top,.order-item-info,.blog-card-body,.campaign-body,
    .account-content,.contact-card-body,.mega-product-body,.search-panel-live-content
){overflow-wrap:anywhere;word-break:normal;}

:where(h1,h2,h3,h4,p){max-width:100%;}

/* Tables must never widen the viewport. */
:where(.table-wrap,.responsive-table,.print-table,.order-table-wrap){
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
:where(table){max-width:100%;}

/* Scrollable horizontal UI keeps its own overflow instead of widening the page. */
:where(
    .category-carousel,.category-track,.category-tree-track,.shop-rail-scroll,
    .product-gallery-thumbs,.product-tabs-nav,.footer-live-slider,.nav-inner
){
    max-width:100%;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}

/* Flexible button rows. */
:where(
    .hero-actions,.shop-mobile-actions,.filter-actions,.form-actions,.product-actions,
    .order-card-actions,.order-mini-actions,.campaign-hero-actions,.blog-hero-actions,
    .checkout-login-actions,.customer-form-actions,.empty-products-actions
){min-width:0;}

/* Sticky side panels should not exceed the viewport. */
:where(.cart-summary-card,.campaign-side,.blog-detail-sidebar,.order-detail-side,.side-stack,.shop-sidebar){
    max-height:calc(100dvh - 24px);
}

/* Desktop/tablet grid safety. */
@media (max-width:1180px){
    :where(.product-grid,.product-grid-modern,.related-grid,.campaign-products){
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    :where(.footer-trust-row,.shop-trust-strip){
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    :where(.builder-layout,.checkout-container,.blog-detail-layout,.campaign-detail-layout,.order-detail-layout){
        grid-template-columns:1fr !important;
    }

    :where(.campaign-side,.blog-detail-sidebar,.order-detail-side,.side-stack){
        position:static !important;
        max-height:none !important;
    }
}

@media (max-width:1024px){
    :where(.account-layout,.contact-grid,.contact-bottom-grid,.payment-grid){
        grid-template-columns:1fr !important;
    }

    :where(.account-sidebar,.shop-sidebar){max-width:100% !important;}

    :where(.account-menu-card){position:static !important;}

    :where(.product-hero,.product-detail-card){
        grid-template-columns:1fr !important;
    }
}

/* Header: 769-1100 was previously the awkward no-man's-land. */
@media (min-width:769px) and (max-width:1100px){
    .header-main-inner{
        display:grid !important;
        grid-template-columns:minmax(180px,220px) minmax(0,1fr) auto !important;
        gap:12px !important;
        align-items:center !important;
    }

    .logo{min-width:0 !important;max-width:220px !important;}
    .logo img{max-width:100% !important;max-height:54px !important;}
    .search-trigger-wrap,.search-trigger,.search-box-live,.search-box{width:100% !important;min-width:0 !important;}
    .header-actions{min-width:0 !important;gap:8px !important;flex-wrap:nowrap !important;}
    .header-track-wrap{display:none !important;}
    .header-icon{padding:0 10px !important;min-width:46px !important;}
    .header-icon > span:last-child:not(.header-icon-emoji){display:none !important;}
    .nav-inner{overflow-x:auto !important;flex-wrap:nowrap !important;scrollbar-width:none;}
    .nav-inner::-webkit-scrollbar{display:none;}
}

@media (max-width:768px){
    :root{--rf-gutter:10px;}

    body{padding-bottom:max(76px,env(safe-area-inset-bottom)) !important;}

    .site-main-wrap{margin-top:14px !important;}

    /* Cards and section spacing */
    :where(
        .home-card,.shop-card,.products-card,.toolbar-card,.breadcrumb-card,
        .product-gallery-card,.product-info-card,.purchase-card,.content-card,
        .cart-card,.cart-summary-card,.related-card-wrap,.checkout-card,
        .account-card,.edit-card,.contact-card,.blog-card,.blog-side-card,
        .campaign-card,.campaign-side-card,.payment-card,.info-page-card,
        .builder-card,.summary-card,.ai-card,.auto-plan-card,.share-contact-card
    ){
        border-radius:18px !important;
    }

    :where(
        .shop-grid-card,.products-card,.toolbar-card,.checkout-card,
        .account-card,.edit-card,.contact-card,.blog-side-card,.campaign-side-card,
        .payment-card,.info-page-card,.builder-card,.summary-card
    ){
        padding:clamp(14px,4vw,20px) !important;
    }

    /* Hero text scales without abrupt jumps. */
    :where(
        .hero-title,.monster-slide-overlay h1,.monster-hero-empty h1,.shop-hero h1,
        .category-hero h1,.brand-hero h1,.cart-hero h1,.product-hero h1,
        .account-hero h1,.orders-hero h1,.order-detail-hero h1,.contact-hero h1,
        .blog-hero h1,.blog-detail-hero h1,.campaign-hero h1,.checkout-login-inner h2,
        .payment-notify-hero h1,.order-success-hero h1,.track-hero h1
    ){
        font-size:clamp(28px,8vw,36px) !important;
        line-height:1.08 !important;
        letter-spacing:-.035em !important;
    }

    :where(.hero-content,.monster-slide-overlay){max-width:100% !important;}

    /* Core page layouts */
    :where(
        .hero-grid,.showcase-grid,.enterprise-split,.monster-hero-grid,
        .shop-layout,.cart-layout,.account-layout,.order-detail-layout,
        .blog-detail-layout,.campaign-detail-layout,.checkout-container,
        .contact-grid,.contact-bottom-grid,.payment-grid,.builder-layout
    ){
        grid-template-columns:1fr !important;
    }

    /* Product/card grids stay useful on phones. */
    :where(.product-grid,.product-grid-modern,.related-grid,.campaign-products,.blog-grid){
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    :where(.product-card,.product-card-modern,.related-card,.campaign-card,.blog-card){min-width:0 !important;}

    :where(.product-body,.product-content,.related-body,.campaign-body,.blog-card-body){
        padding:12px !important;
    }

    :where(.product-title,.related-title,.campaign-body h3,.blog-card h2,.blog-card h3){
        font-size:13px !important;
        line-height:1.45 !important;
        min-height:0 !important;
    }

    :where(.product-price-current,.related-price,.campaign-price){font-size:18px !important;}

    :where(.product-actions){grid-template-columns:1fr !important;gap:8px !important;}
    :where(.product-btn-secondary){min-width:0 !important;width:100% !important;}

    /* Forms */
    :where(
        .form-grid,.contact-form-grid,.payment-form-grid,.orders-filter-grid,
        .register-grid,.price-grid,.form-note-grid,.account-mini-stats
    ){
        grid-template-columns:1fr !important;
    }

    :where(.shop-sort,.toolbar-form,.orders-toolbar,.blog-toolbar,.campaign-toolbar){
        width:100% !important;
        max-width:100% !important;
    }

    :where(.shop-sort select,.toolbar-form select,.toolbar-form input,.campaign-search input){
        width:100% !important;
        min-width:0 !important;
    }

    :where(.form-actions,.filter-actions,.checkout-login-actions,.campaign-hero-actions,.blog-hero-actions){
        flex-direction:column !important;
        align-items:stretch !important;
    }

    :where(.form-actions .btn,.filter-actions .btn,.checkout-login-actions a,.campaign-hero-actions a,.blog-hero-actions a){
        width:100% !important;
        justify-content:center !important;
    }

    /* Product tabs become a deliberate swipe rail. */
    .product-tabs-nav{
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        gap:8px !important;
        padding:10px !important;
        scrollbar-width:none;
    }
    .product-tabs-nav::-webkit-scrollbar{display:none;}
    .product-tab-btn{flex:0 0 auto !important;white-space:nowrap !important;}

    /* Cart */
    .cart-item-card{grid-template-columns:112px minmax(0,1fr) !important;gap:12px !important;padding:14px !important;}
    .cart-item-meta{grid-template-columns:1fr !important;gap:8px !important;}
    .cart-summary-card{position:static !important;max-height:none !important;}
    .coupon-row{grid-template-columns:1fr !important;}

    /* Header/mobile overlays */
    .site-header{isolation:isolate;}
    .mega-menu{
        top:calc(var(--mobile-header-height,190px) + 8px) !important;
        max-height:calc(100dvh - var(--mobile-header-height,190px) - 18px) !important;
    }
    .mega-grid{
        height:calc(100dvh - var(--mobile-header-height,190px) - 18px) !important;
        max-height:none !important;
    }
    .search-panel{
        top:calc(var(--mobile-header-height,190px) + 8px) !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-height:calc(100dvh - var(--mobile-header-height,190px) - 18px) !important;
        overflow:auto !important;
    }

    .cart-drawer{
        width:min(420px,calc(100vw - 12px)) !important;
        max-width:calc(100vw - 12px) !important;
    }

    /* Footer */
    .footer-prime-grid{grid-template-columns:1fr !important;}
    .footer-trust-row,.footer-links-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .footer-bottom{align-items:flex-start !important;}
    .whatsapp-floating-bubble{bottom:max(12px,env(safe-area-inset-bottom)) !important;}
}

@media (max-width:560px){
    :root{--rf-gutter:7px;}

    :where(.product-grid,.product-grid-modern,.related-grid,.campaign-products,.blog-grid){
        grid-template-columns:1fr !important;
    }

    :where(.footer-trust-row,.footer-links-grid,.shop-trust-strip){grid-template-columns:1fr !important;}

    .cart-item-card{grid-template-columns:1fr !important;}
    .cart-item-image{max-width:220px !important;width:100% !important;margin:0 auto !important;}

    :where(.cart-item-actions,.cart-qty-form){width:100% !important;}
    .cart-qty-form{display:grid !important;grid-template-columns:42px minmax(0,1fr) 42px !important;gap:8px !important;}
    .qty-input{width:100% !important;}
    .qty-update-btn{grid-column:1/-1 !important;width:100% !important;}

    .footer-payment-logos{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .pay-logo{width:100% !important;min-width:0 !important;}

    .live-sale-toast{left:7px !important;right:7px !important;width:auto !important;bottom:76px !important;}
}

@media (max-width:390px){
    .header-main-inner{gap:8px !important;}
    .logo{max-width:145px !important;}
    .logo img{max-width:140px !important;}
    .header-actions{gap:6px !important;}
    .header-icon{width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important;}
    .mega-grid{grid-template-columns:96px minmax(0,1fr) !important;}
    .mega-left-item{font-size:11px !important;padding-inline:6px !important;}
    .footer-payment-logos{grid-template-columns:1fr !important;}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}