/* ==========================================================================
   CHENNAI ANGADI - FINAL RESPONSIVE FIXES
   Strictly scoped to unlocked viewports.
   LOCKED VIEWS:
   1. 🔒 Samsung Galaxy S8+ (<= 360px) - PRESERVED & UNCHANGED
   2. 🔒 Desktop (>= 1200px) - PRESERVED & UNCHANGED
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OTHER MOBILE PHONES (375px to 575.98px)
   - iPhone SE, iPhone 12/13/14/15/16 Pro, Pixel, Galaxy A51/A71, iPhone Pro Max
   -------------------------------------------------------------------------- */
@media (min-width: 375px) and (max-width: 575.98px) {
    /* Product Grid Card adjustments */
    .product-cart-wrap {
        padding: 8px !important;
    }
    
    .product-content-wrap {
        padding: 0 4px !important;
    }
    
    .product-content-wrap h2 {
        font-size: 13px !important;
        height: 40px !important;
        line-height: 1.25 !important;
        margin: 4px 0 !important;
        text-align: center !important;
    }
    
    .product-content-wrap h2 a {
        font-size: 13px !important;
    }
    
    .product-variant-selector select.product_Dropdown {
        font-size: 12px !important;
        height: 34px !important;
        padding: 2px 22px 2px 6px !important;
    }
    
    .product-cart-wrap .product-price div,
    .product-cart-wrap .product-price span {
        font-size: 14px !important;
    }
    
    .product-cart-wrap .qty-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 34px !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ececec !important;
        border-radius: 5px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    
    .product-cart-wrap .qty-label {
        font-size: 12px !important;
        color: #253D4E !important;
        white-space: nowrap !important;
        margin-right: 2px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .product-cart-wrap .qty-input {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #253D4E !important;
        height: 34px !important;
        line-height: 34px !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        text-align: center !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }
    
    .product-cart-wrap .qty-input::-webkit-outer-spin-button,
    .product-cart-wrap .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
    
    .product-cart-wrap .add-cart {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .product-cart-wrap .add-cart .add {
        height: 34px !important;
        font-size: 12px !important;
        padding: 0 6px !important;
        width: 100% !important;
    }
    
    /* Header layout */
    .header-bottom .header-wrap.header-space-between {
        padding: 8px 0 !important;
    }
    
    .logo.logo-width-1.d-block.d-lg-none {
        width: 130px !important;
        max-width: 50% !important;
    }
}

/* --------------------------------------------------------------------------
   2. LARGE PHONES / FOLDABLES / SMALL TABLETS (576px to 767.98px)
   - Surface Duo, Galaxy Z Fold, Landscape Phones
   -------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Product grid: 2 or 3 columns */
    .product-cart-wrap {
        padding: 10px !important;
    }
    
    .product-content-wrap h2 {
        font-size: 14px !important;
        height: 42px !important;
        text-align: center !important;
    }
    
    .product-content-wrap h2 a {
        font-size: 14px !important;
    }
    
    .product-variant-selector select.product_Dropdown {
        font-size: 13px !important;
        height: 36px !important;
    }
    
    .product-cart-wrap .product-price div,
    .product-cart-wrap .product-price span {
        font-size: 15px !important;
    }
    
    .product-cart-wrap .qty-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 36px !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ececec !important;
        border-radius: 5px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    
    .product-cart-wrap .qty-label {
        font-size: 12px !important;
        color: #253D4E !important;
        white-space: nowrap !important;
        margin-right: 2px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .product-cart-wrap .qty-input {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #253D4E !important;
        height: 36px !important;
        line-height: 36px !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        text-align: center !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }
    
    .product-cart-wrap .qty-input::-webkit-outer-spin-button,
    .product-cart-wrap .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
    
    .product-cart-wrap .add-cart {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .product-cart-wrap .add-cart .add {
        height: 36px !important;
        font-size: 13px !important;
        width: 100% !important;
    }
    
    /* Footer */
    .footer-mid .row > div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   3. TABLETS PORTRAIT (768px to 991.98px)
   - iPad Mini, iPad Air, Surface Pro 7, Asus Zenbook Fold, Galaxy Z Fold unfolded
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Full-width container expansion for tablets: removes the 24px-30px side white space */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Header & Navigation */
    .header-bottom .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    .header-bottom .header-wrap.header-space-between {
        padding: 12px 0 !important;
    }
    
    .logo.logo-width-1.d-block.d-lg-none {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 160px !important;
        max-width: 200px !important;
        text-align: center !important;
        margin: 0 auto !important;
        order: 2 !important;
    }
    
    .header-action-icon-2.d-block.d-lg-none {
        order: 1 !important;
        flex: 0 0 auto !important;
    }
    
    .mobile-only-icons {
        order: 3 !important;
        flex: 0 0 auto !important;
    }
    
    .mobile-only-icons .header-action-2 {
        gap: 20px !important;
    }
    
    .mobile-header-wrapper-style {
        width: 380px !important;
        max-width: 80% !important;
    }
    
    /* Product Grid: 3 columns */
    .product-grid .col-lg-1-5,
    .product-grid > [class*="col-"],
    .product-card-wrapper {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    .product-cart-wrap {
        padding: 12px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .product-cart-wrap .product-img-action-wrap {
        position: relative !important;
    }
    
    .product-content-wrap {
        padding: 5px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }
    
    .product-content-wrap h2 {
        font-size: 14px !important;
        height: 42px !important;
        line-height: 1.3 !important;
        margin: 5px 0 8px 0 !important;
        text-align: center !important;
    }
    
    .product-content-wrap h2 a {
        font-size: 14px !important;
    }
    
    .product-variant-selector {
        margin-bottom: 8px !important;
    }
    
    .product-variant-selector select.product_Dropdown {
        font-size: 13px !important;
        height: 36px !important;
        padding: 4px 26px 4px 8px !important;
    }
    
    .product-cart-wrap .product-price {
        margin-bottom: 8px !important;
        text-align: center !important;
    }
    
    .product-cart-wrap .product-price div,
    .product-cart-wrap .product-price span {
        font-size: 15px !important;
    }
    
    .product-card-bottom {
        margin-top: auto !important;
    }
    
    .product-cart-wrap .qty-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 36px !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ececec !important;
        border-radius: 5px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    
    .product-cart-wrap .qty-label {
        font-size: 12px !important;
        color: #253D4E !important;
        white-space: nowrap !important;
        margin-right: 2px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .product-cart-wrap .qty-input {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #253D4E !important;
        height: 36px !important;
        line-height: 36px !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        text-align: center !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }

    .product-cart-wrap .qty-input::-webkit-outer-spin-button,
    .product-cart-wrap .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
    
    .product-cart-wrap .add-cart {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .product-cart-wrap .add-cart .add {
        height: 36px !important;
        font-size: 12px !important;
        padding: 0 6px !important;
        width: 100% !important;
    }
    
    /* Product Detail Page */
    .custom-main-image-container {
        max-width: 100% !important;
        min-height: auto !important;
    }
    
    .custom-main-image-container figure {
        min-height: auto !important;
    }
    
    #main-product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
    
    .detail-info.pr-30.pl-30 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .detail-extralink {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .detail-extralink .detail-qty {
        max-width: 110px !important;
        height: 46px !important;
    }
    
    .button-add-to-cart {
        height: 46px !important;
        padding: 0 20px !important;
    }
    
    /* Offered Products Section */
    .offer-banner-col .banner-glass {
        height: 180px !important;
    }
    
    /* Cart Page Table */
    .shopping-summery table.table-wishlist th,
    .shopping-summery table.table-wishlist td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
    
    .shopping-summery .product-thumbnail img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .shopping-summery h6.product-name a {
        font-size: 14px !important;
    }
    
    /* Checkout Page */
    .checkout-order .payment.ml-30,
    .checkout-order .cart-totals.ml-30 {
        margin-left: 0 !important;
    }
    
    /* Featured 5 Quality Banners on Tablet: 5 in 1 row */
    .featured .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .featured .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .featured .col-lg-1-5 {
        flex: 1 1 0 !important;
        max-width: 20% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .featured .banner-left-icon {
        padding: 8px 6px !important;
    }

    .featured .banner-text h3.icon-box-title {
        font-size: 11.5px !important;
    }

    .featured .banner-text p {
        font-size: 10px !important;
    }

    .featured .banner-icon img {
        width: 26px !important;
    }

    /* Footer: 2 balanced rows on tablet (Row 1: About & Apps 50/50; Row 2: Company, Account, Categories 33/33/33) */
    .footer-mid .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    .footer-mid .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .footer-mid .row > div,
    .footer-mid .footer-link-widget,
    .footer-mid .footer-link-widget:not(:last-child) {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 15px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    /* Row 1 Left (50%): About & Contact */
    .footer-mid .row > div:nth-child(1) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        order: 1 !important;
    }

    .footer-mid .widget-about {
        min-width: 0 !important;
    }

    .footer-mid .widget-about .logo img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Row 1 Right (50%): App, ISO & Payments */
    .footer-mid .row > div:nth-child(5) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        order: 2 !important;
    }

    /* Row 2 Col 1 (33.3%): Company */
    .footer-mid .row > div:nth-child(2) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        order: 3 !important;
    }

    /* Row 2 Col 2 (33.3%): Account */
    .footer-mid .row > div:nth-child(3) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        order: 4 !important;
    }

    /* Row 2 Col 3 (33.3%): Popular Categories */
    .footer-mid .row > div:nth-child(4) {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        order: 5 !important;
    }
    
    /* Footer bottom copyright bar full width */
    .footer-top-border.container,
    .dark_green_bg.container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   4. TABLETS LANDSCAPE & SMART HUBS (992px to 1199.98px)
   - Nest Hub (1024x600), iPad Pro (1024x1366), iPad Air Landscape (1180x820)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Full-width container expansion: removes the large 32px-40px side white space on 1024px screens */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Header Top */
    .header-top .container {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    /* Header Middle */
    .header-middle .header-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
    }
    
    .header-middle .logo.logo-width-1 {
        flex: 0 0 160px !important;
        width: 160px !important;
    }
    
    .header-middle .logo.logo-width-1 img {
        max-width: 150px !important;
    }
    
    .header-middle .search-style-2 {
        flex: 1 1 auto !important;
        max-width: 420px !important;
    }
    
    .header-middle .search-style-2 form {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header-middle .search-style-2 form input {
        width: 100% !important;
    }
    
    .header-middle .search-style-2 form select {
        width: 130px !important;
    }
    
    .header-middle .hotline {
        flex: 0 0 auto !important;
    }
    
    /* Header Bottom / Navigation */
    .header-bottom .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .header-bottom .header-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    .main-categori-wrap {
        width: 175px !important;
        flex: 0 0 175px !important;
    }
    
    .main-categori-wrap > a.categories-button-active {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }
    
    .main-menu.main-menu-padding-1 > nav > ul {
        gap: 0 !important;
    }
    
    .main-menu.main-menu-padding-1 > nav > ul > li {
        padding: 0 5px !important;
    }
    
    .main-menu.main-menu-padding-1 > nav > ul > li > a {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }
    
    .header-right-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .sticky-search-wrapper {
        min-width: 140px !important;
        max-width: 170px !important;
    }

    .sticky-search-wrapper form input {
        font-size: 12px !important;
        padding: 6px 28px 6px 10px !important;
    }

    .header-right-group .bottom-cart-icon a {
        display: flex !important;
        align-items: center !important;
    }

    .header-right-group .bottom-cart-icon a .lable {
        font-size: 13px !important;
        margin-left: 4px !important;
    }

    /* On 992-1199px screens, hide the phone hotline inside sticky bottom bar to give full space to Search & Cart */
    .header-bottom .header-right-group .hotline {
        display: none !important;
    }
    
    /* Category Flyout Menu Bounding */
    .catfly-wrap {
        max-width: 500px !important;
    }
    
    .catfly-left {
        width: 220px !important;
        min-width: 220px !important;
    }
    
    .catfly-right {
        left: 220px !important;
    }
    
    .catfly-sub-panel {
        min-width: 200px !important;
    }
    
    .catfly-child {
        min-width: 180px !important;
    }
    
    /* Product Grid: 4 columns */
    .product-grid .col-lg-1-5,
    .product-card-wrapper {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    .product-content-wrap h2 {
        font-size: 14px !important;
        height: 42px !important;
        text-align: center !important;
    }
    
    .product-variant-selector select.product_Dropdown {
        font-size: 13px !important;
        height: 38px !important;
    }
    
    .product-cart-wrap .qty-container {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 37px !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #ececec !important;
        border-radius: 5px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    
    .product-cart-wrap .qty-label {
        font-size: 12px !important;
        color: #253D4E !important;
        white-space: nowrap !important;
        margin-right: 2px !important;
        background: transparent !important;
        border: none !important;
    }
    
    .product-cart-wrap .qty-input {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #253D4E !important;
        height: 37px !important;
        line-height: 37px !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        text-align: center !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }

    .product-cart-wrap .qty-input::-webkit-outer-spin-button,
    .product-cart-wrap .qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }
    
    .product-cart-wrap .add-cart {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .product-cart-wrap .add-cart .add {
        font-size: 12px !important;
        padding: 0 8px !important;
        width: 100% !important;
    }
    
    /* Product Detail Page */
    .custom-main-image-container {
        max-width: 100% !important;
        min-height: auto !important;
    }
    
    #main-product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    /* Featured row: 5 items in 1 row */
    .featured .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    .featured .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    .featured .col-lg-1-5 {
        flex: 1 1 0 !important;
        max-width: 20% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 0 !important;
    }

    .featured .banner-text h3.icon-box-title {
        font-size: 13px !important;
    }

    .featured .banner-text p {
        font-size: 11px !important;
    }

    .featured .banner-icon img {
        width: 32px !important;
    }

    /* Footer Layout: 5 equal/balanced columns in 1 row */
    .footer-mid .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }

    .footer-mid .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-mid .row > .col,
    .footer-mid .row > div {
        flex: 1 1 0 !important;
        max-width: 20% !important;
        width: 20% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .footer-mid .widget-about {
        min-width: 0 !important;
    }

    .footer-mid .widget-about .logo img {
        max-width: 130px !important;
        height: auto !important;
    }

    .footer-mid .widget-about .contact-infor li {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 5px !important;
        word-break: break-word !important;
    }

    .footer-mid .widget-about .contact-infor li a {
        font-size: 11.5px !important;
        word-break: break-all !important;
    }

    .footer-mid .widget-about .contact-infor li img {
        width: 13px !important;
        margin-right: 5px !important;
    }

    .footer-mid .footer-link-widget .widget-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .footer-mid .footer-link-widget ul.footer-list li {
        margin-bottom: 5px !important;
    }

    .footer-mid .footer-link-widget ul.footer-list li a {
        font-size: 12px !important;
        white-space: normal !important;
    }
}

/* --------------------------------------------------------------------------
   5. SHORT VIEWPORT HEIGHTS (Smart Hubs like Nest Hub 1024x600, Landscape)
   -------------------------------------------------------------------------- */
@media (max-height: 650px) {
    .catfly-left {
        max-height: 320px !important;
    }
    
    .catfly-child {
        max-height: 280px !important;
    }
    
    .search-suggestions-dropdown {
        max-height: 260px !important;
    }
    
    .modal-dialog {
        max-height: 90vh !important;
    }
    
    .modal-content {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. GLOBAL COMPONENT RESPONSIVE ENHANCEMENTS (Auth, Contact, Spacing)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Auth pages padding fix */
    .page-content.pt-150.pb-150 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    /* Contact page layout */
    .contact-from-area {
        padding: 20px 0 !important;
    }
    
    /* Prevent table horizontal breaks */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Order track card */
    .track-order-card {
        padding: 15px !important;
    }
}

/* Footer ISO certification logo bounding */
.footer-iso-logo {
    max-width: 135px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}