/* =========================================================
   Supplementary responsive rules for the site (front end).
   Loaded AFTER style.css / customer.css so it can safely
   patch/extend them without touching the original files.
   Covers: phones (small/large), tablets (portrait/landscape),
   laptops, and large desktops.
   ========================================================= */

/* ---------- Global safety net ---------- */
html{
    -webkit-text-size-adjust: 100%;
}
html, body{
    max-width: 100%;
    overflow-x: hidden; /* stops any stray wide element from causing a horizontal scrollbar */
}
img, svg, video, iframe, embed, object, canvas{
    max-width: 100%;
    height: auto;
}
* {
    -webkit-tap-highlight-color: transparent;
}
.container, .container-fluid, .row{
    max-width: 100%;
}
table{
    max-width: 100%;
}

/* Respect device notches / safe areas (iPhone X and newer, modern Android) */
.header{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
footer.footer{
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Buttons / form controls should never force horizontal scroll */
.btn, .form-control, .input-group{
    max-width: 100%;
}
.d-flex.flex-wrap-safe, .input-group{
    flex-wrap: wrap;
}

/* =====================================================
   Large desktops / big monitors (1400px and up)
   ===================================================== */
@media screen and (min-width: 1400px){
    .container{
        max-width: 1320px;
    }
    .prImg img{
        max-height: 380px;
    }
}

/* =====================================================
   Laptops (1200px - 1399px)
   ===================================================== */
@media screen and (min-width: 1200px) and (max-width: 1399px){
    .prImg img{
        max-height: 320px;
    }
}

/* =====================================================
   Small laptops / large tablets landscape (992px - 1199px)
   already partly handled in style.css - a couple of extra fixes
   ===================================================== */
@media screen and (min-width: 992px) and (max-width: 1199px){
    .productDescription{
        padding-left: 20px;
    }
    .cart-dropdown{
        min-width: 320px;
    }
}

/* =====================================================
   Tablets - portrait (576px - 991px)
   ===================================================== */
@media screen and (min-width: 576px) and (max-width: 991px){
    .newArrival-section .cat-item h3 a{
        font-size: 17px;
    }
    .checkout .col-md-6, .checkout .col-md-4{
        margin-bottom: 20px;
    }
    .table-responsive table{
        font-size: 14px;
    }
}

/* =====================================================
   Large phones (up to 575px) - refine what style.css has
   ===================================================== */
@media screen and (max-width: 575px){
    .container, .container-fluid{
        padding-left: 12px;
        padding-right: 12px;
    }
    h1, .h1{ font-size: 26px; }
    h2, .h2{ font-size: 22px; }
    h3, .h3{ font-size: 19px; }
    .btn, button, input[type="submit"], input[type="button"]{
        font-size: 14px;
    }
    .table-responsive table{
        font-size: 13px;
    }
    .productDescription{
        padding-top: 15px;
    }
    .offcanvas.saerch-offcanvas .container{
        padding-left: 12px;
        padding-right: 12px;
    }
    #backtotop{
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* =====================================================
   Newsletter form (footer) - stack the email field above
   the Subscribe button on phones AND tablets (up to 767px).
   Bootstrap's .input-group gives .form-control "width: 1%"
   (a flex-basis hack that only works in row layout). Once
   flex-direction switches to column that 1% becomes a real
   width, so the email box collapses to a tiny box - this is
   the exact bug from the CI3->CI4 conversion. Fix: force the
   field to 100% width whenever it's stacked.
   ===================================================== */
@media screen and (max-width: 767px){
    .newsletter-form .form-group.input-group{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .newsletter-form .form-control{
        width: 100%;
        border-radius: .375rem !important;
        margin-bottom: 8px;
    }
    .newsletter-form .btn{
        width: 100%;
        border-radius: .375rem !important;
    }
}

/* =====================================================
   Small phones (up to 400px, e.g. iPhone SE / small Android)
   ===================================================== */
@media screen and (max-width: 400px){
    body, html{
        font-size: 13px;
    }
    .header .logo img{
        height: 30px;
    }
    .products-section .prduct{
        max-width: 100%;
    }
    .cats-item img, .catimg img{
        max-height: 110px;
    }
    .cartBtn .badge{
        font-size: 10px;
    }
}

/* Landscape phones (short height, wide width) */
@media screen and (max-height: 480px) and (orientation: landscape){
    body{
        padding-top: 55px;
    }
    .header{
        height: 55px;
    }
    .menues{
        overflow-y: auto;
        max-height: 100vh;
    }
}