/* ─── GLOBAL RESPONSIVENESS (PHASE 9 FINAL) ─────────────────────────── */
* { box-sizing: border-box; }
html, body { overflow-x: hidden !important; width: 100% !important; margin: 0; padding: 0; position: relative; }

.container, .container-lp { 
    max-width: 100vw !important; 
    padding-left: 15px !important; 
    padding-right: 15px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Force Horizontal Scroll for Nav Bars */
.mp-nav-links, .mh-nav, .mp-nav-bar, .nav-menu { 
    display: flex !important; 
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important; 
    white-space: nowrap !important; 
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    scrollbar-width: none;
    padding: 0 20px !important;
    margin: 0 !important;
}
.mp-nav-links::-webkit-scrollbar, .mh-nav::-webkit-scrollbar { display: none; }
.mp-nav-links li, .mh-nav a { flex: 0 0 auto !important; margin: 0 !important; }

/* Sidebar & Heading Wrapping (Force override) */
.shop-sidebar h3, .retail-section-head h2, .mp-sidebar-title, .widget-title, .sidebar-title, .market-sidebar h3 { 
    white-space: normal !important; 
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    display: block !important;
    text-align: left !important;
}

/* Mobile Layout Transformations */
@media (max-width: 991px) {
    .shop-layout, .market-layout { display: block !important; }
    .shop-sidebar, .market-sidebar { width: 100% !important; margin-bottom: 30px !important; position: static !important; }
    .retail-grid-5, .shop-grid, .product-grid, .mp-product-grid { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important; 
    }
}

@media (max-width: 768px) {
    .mp-logo-wrap, .m-logo { transform: scale(0.9); transform-origin: center; display: flex; align-items: center; justify-content: center; margin: 0 auto !important; }
    .mp-header-basket, .mh-cart-btn { padding: 8px 12px !important; font-size: 0.8rem !important; margin: 10px auto !important; }
    .hero-retail-swiper { min-height: 300px !important; }
    .mp-top-utility { display: none !important; }
}

@media (max-width: 480px) {
    .retail-grid-5, .shop-grid, .product-grid, .mp-product-grid { grid-template-columns: 1fr !important; }
}

/* 
   ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CRITICAL: LOCKED GLOBAL PRODUCT IMAGE STANDARDS                         ║
   ║  ENFORCED BY MAGNO PLATFORM CORE. DO NOT REMOVE OR ALTER.                ║
   ║  (Unified Size, Curved Edges, Aspect Ratio Control)                      ║
   ╚══════════════════════════════════════════════════════════════════════════╝
*/
img.standard-product-image, .pv-hero-img {
    border-radius: 20px !important; /* Significant curve for the image itself */
    object-fit: contain !important;
    background: #fff !important; /* Clear white backdrop for the image pixels */
    padding: 0 !important; /* NO PADDING - makes the image BE the rounded element */
    border: none !important; /* No container-like stroke */
    display: block !important;
    margin: 0 auto !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
img.standard-product-image {
    width: 100% !important;
    height: 180px !important;
    max-height: 180px !important;
}
.pv-hero-img {
    width: 100% !important;
    height: 100% !important;
}
img.standard-product-image:hover, .pv-hero-img:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
}