/*
 * responsive-fixes.css — Sambhav v4 (production)
 * Uses real class names from the actual site markup.
 */

/* 1. Prevent horizontal scroll (html only — not body) */
html { overflow-x: hidden; }

/* 2. Global image safety */
img { max-width: 100%; height: auto; }

/* 3. Hero slider */
.mv-slider-img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}
@media (max-width: 767px) {
    .home-3-slideshow { max-height: 240px; overflow: hidden; }
    .mv-slider-img    { max-height: 240px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .home-3-slideshow { max-height: 360px; overflow: hidden; }
    .mv-slider-img    { max-height: 360px; }
}

/* 4. Page banner */
@media (max-width: 767px) {
    .mv-banner-style-1   { min-height: 110px !important; }
    .mv-title-style-9 .main { font-size: 18px !important; }
}

/* 5. Product grid cards */
.block-18-thumb-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    display: block;
}
@media (max-width: 480px) {
    .block-18-list .item  { width: 50% !important; }
    .block-18-thumb-img   { aspect-ratio: 1 / 1; }
}

/* 6. Product detail: image slider */
.block-26-main-img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    object-position: top center;
    display: block;
}
.block-26-thumbs-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    .block-26-main-img { max-height: 280px; }
    .mv-block-style-27 .mv-col-wrapper { display: block !important; }
    .mv-block-style-27 .mv-col-left,
    .mv-block-style-27 .mv-col-right   { width: 100% !important; float: none !important; }
}

/* 7. Highlight cards */
.mv-block-style-1 .mv-effect-item {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top;
    display: block;
}
@media (max-width: 480px) {
    .block-1-list .item { width: 100% !important; margin-bottom: 16px; }
    .mv-block-style-1 .mv-effect-item { aspect-ratio: 4 / 3; }
}

/* 8. Section headings: fix "ProductsProducts" duplication */
/* .behind is large decorative bg text, .main is abs-positioned overlay.
   Container needs min-height so abs element has something to anchor to. */
.mv-title-style-3 .title-3-text { min-height: 80px; }
@media (max-width: 991px) {
    .mv-title-style-3 .title-3-text { min-height: 70px; }
}
@media (max-width: 767px) {
    /* .behind is display:none at mobile per main.css, so collapse is fine */
    .mv-title-style-3 .title-3-text { min-height: 40px; }
}

/* 9. Order popup mobile */
@media (max-width: 767px) {
    .mfp-content {
        width: 95vw !important;
        margin: 0 auto;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mfp-content input,
    .mfp-content select,
    .mfp-content textarea { font-size: 16px !important; min-height: 44px; }
    .mfp-content .mv-btn  { min-height: 44px; }
}

/* 10. Off-canvas mobile nav */
.mv-off-canvas-sidebar { max-width: 300px; }
.off-canvas-left .sf-menu a,
.off-canvas-left .nav a { padding-top: 10px; padding-bottom: 10px; display: block; }

/* 11. Footer */
@media (max-width: 767px) {
    .footer .footer-inner .row { flex-direction: column; }
    .footer [class*="col-md"]  { width: 100% !important; margin-bottom: 1rem; }
}

/* 12. Headings word break */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }

/* 13. Lazy image placeholder */
img[loading="lazy"] { background: #f5f5f5; }

/* 14. Touch targets */
@media (max-width: 767px) {
    .mv-btn,
    input[type="submit"],
    button[type="submit"] { min-height: 44px; }
}

/* 15. Blog / team image containers */
.block-34-thumb-img,
.block-4-thumb-img,
.block-2-thumb-img { width: 100%; object-fit: cover; display: block; }

/* 16. Keep style-1 button icons visible before hover 
.mv-btn.mv-btn-style-1 .btn-icon {
    color: #262b30;
}
@media (min-width: 992px) {
    .mv-btn.mv-btn-style-1:hover .btn-icon {
        color: #fff;
    }
}
.mv-btn.mv-btn-style-1:active .btn-icon,
.mv-btn.mv-btn-style-1.active .btn-icon,
.mv-btn.mv-btn-style-1.active:hover .btn-icon {
    color: #fff;
}
*/