/* Mobile Responsiveness Fixes - Comprehensive */

/* 1. Fix Header Logo on Mobile */
@media (max-width: 768px) {
    .header-block {
        padding: 12px 24px !important;
        height: 85px; /* Increased height for larger logos */
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #1a202c;
    }

    .tn-container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tn-row.header-row {
        width: 100% !important;
        margin: 0 !important;
        gap: 0 !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* --- LOGO FIXES --- */
    .header-logo {
        margin: 0 !important;
        margin-left: -12px !important; /* Compensate for container padding on mobile */
        padding: 0 !important;
        flex: 1;
        display: flex;
        align-items: center;
        z-index: 1002; /* Above menu overlay */
    }

    .header-logo .logo {
        display: flex !important;
        align-items: center !important; /* Center vertically */
        gap: 10px !important; /* Increased space between Icon and Text */
        height: 60px; /* Increased height for larger logos */
    }

    /* 1. The Icon (Tirehunter 2.svg) */
    .header-logo .logo img:first-child {
        height: 58px !important; /* Increased from 45px */
        width: auto !important;
        display: block !important;
    }

    /* 2. The Text (Heading.svg) - UNHIDE THIS */
    .header-logo .logo img:nth-child(2) {
        display: block !important; /* Force show */
        visibility: visible !important;
        opacity: 1 !important;
        height: 42px !important; /* Increased from 32px */
        width: auto !important;
        margin-left: 0 !important; /* Reset margin */
    }

    /* --- HAMBURGER MENU POSITIONING --- */
    /* Remove fixed positioning to keep it aligned with flow */
    .mobile-menu-toggle {
        position: relative !important; /* Changed from fixed */
        top: auto !important;
        right: auto !important;
        margin-left: auto; /* Push to right */
        z-index: 1002;
        background: #f97316; /* Keep orange */
    }
    
    /* Hide desktop elements */
    .header-menu-inline, 
    .search-bar-container {
        display: none !important;
    }
}

/* 2. Remove Unnecessary Margins - Full Width Containers */
@media (max-width: 768px) {
    /* Make all containers full-width on mobile - override inline styles too */
    .tn-container,
    .tn-container[style*="max-width"],
    .tn-container[style*="margin"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .listing-container,
    .listing-container-with-sidebar {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Product listing section - full width */
    .product-listing-section {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Main content - full width */
    main {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}

/* 3. Fix Product Cards on Mobile - All Nested Elements */
@media (max-width: 768px) {
    /* Product grid - now handled by unified RAM pattern */
    /* Removed grid-template-columns override - RAM pattern handles responsive behavior */
    .product-grid,
    .testsieger-grid {
        padding: 0 12px !important; /* Changed from: padding: 0 !important; */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 12px !important; /* NEW: Add gap */
    }
    
    /* Product cards - ensure full width (outer container) - REDUCED SIZE */
    /* Use high specificity for listing pages like testsieger cards */
    /* CRITICAL: Target all possible selectors to override style.css .product-card rule */
    .listing-main-content .product-card,
    .listing-main-content #product-grid .product-card,
    .listing-main-content .product-grid .product-card,
    #product-grid .product-card,
    #product-grid.product-grid .product-card,
    .product-grid .product-card,
    .product-listing-section .product-card,
    .product-listing-section #product-grid .product-card,
    .listing-container-with-sidebar .product-card,
    .listing-container-with-sidebar .listing-main-content .product-card,
    .listing-container-with-sidebar #product-grid .product-card,
    .product-card,
    .testsieger-card {
        max-width: calc(100% - 24px) !important; /* Use calc to account for grid padding - fills more space */
        width: 100% !important;
        margin-left: auto !important; /* NEW: Center card */
        margin-right: auto !important; /* NEW: Center card */
        margin: 0 auto 8px auto !important; /* Updated: Keep bottom margin, center horizontally */
        box-sizing: border-box !important;
        min-width: 0 !important;
        padding: 6px !important; /* Reduced from 10px to override style.css 12px */
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important; /* Override style.css 8px */
        align-items: stretch !important;
        min-height: auto !important;
    }
    
    /* Explicit base page override - ensure cards get width constraints */
    /* Additional high-specificity selectors to catch all cases */
    body .listing-container-with-sidebar .product-card,
    body .listing-container-with-sidebar .listing-main-content .product-card,
    body .listing-container-with-sidebar #product-grid .product-card,
    body .listing-container-with-sidebar .product-grid .product-card,
    body .product-listing-section .listing-main-content .product-card,
    body .product-listing-section #product-grid .product-card {
        max-width: calc(100% - 24px) !important; /* Use calc to fill more space */
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    
    /* Fix ALL nested card elements to be full width */
    .product-card > *,
    .product-card-header,
    .product-card-image-section,
    .product-card-info,
    .product-card-price-section,
    .product-card-resellers,
    .product-card-footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix product card header layout - REDUCED SIZE */
    /* Override style.css @media (max-width: 768px) which sets flex-direction: row */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-header,
    #product-grid .product-card-header,
    .product-card-header {
        display: flex !important;
        flex-direction: column !important; /* Override style.css row */
        align-items: center !important; /* Override style.css flex-start */
        padding: 6px !important; /* Reduced from 10px */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important; /* Override style.css 0 */
        gap: 6px !important; /* Override style.css 12px */
    }
    
    /* Override style.css mobile product-card-image-section */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-image-section,
    #product-grid .product-card-image-section,
    .product-card-image-section {
        flex-shrink: 0 !important;
        width: 100% !important; /* Override style.css auto */
        text-align: center !important;
    }
    
    /* Override style.css mobile product-card-info text-align: left */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-info,
    #product-grid .product-card-info,
    .product-card-info {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: auto !important;
        text-align: center !important; /* Override style.css left */
        padding: 0 !important;
    }
    
    /* Fix image section - REDUCED SIZE */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-image-wrapper,
    #product-grid .product-card-image-wrapper,
    .product-card-image-wrapper {
        margin: 0 auto !important;
        width: 70px !important; /* Reduced from 98px, override style.css 150px */
        max-width: 70px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        padding: 6px !important; /* Reduced from 8px, override style.css 8px */
    }
    
    /* Remove borders from brand logos - REDUCED SIZE */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-brand-logo,
    #product-grid .product-card-brand-logo,
    .product-card-brand-logo {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        max-width: 70px !important; /* Reduced from 91px */
        margin: 4px auto 0 !important;
    }
    
    .listing-main-content .brand-logo-img,
    #product-grid .brand-logo-img,
    .brand-logo-img {
        max-height: 20px !important; /* Reduced from 26px */
    }
    
    /* Override large font sizes from style.css (21.6px/17.55px) with higher specificity */
    /* Use high specificity like testsieger cards */
    .listing-main-content .product-card-name,
    #product-grid .product-card-name,
    .product-card-name {
        font-size: 11px !important; /* Override style.css 21.6px */
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        margin-bottom: 3px !important; /* Override style.css 4px */
        display: block !important;
        line-height: 1.3 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .listing-main-content .product-card-size,
    #product-grid .product-card-size,
    .product-card-size {
        font-size: 9px !important; /* Override style.css 17.55px */
        margin-bottom: 3px !important; /* Override style.css 4px */
        display: block !important;
    }
    
    /* Fix price section - ensure full width - REDUCED SIZE */
    .product-card-price-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px !important; /* Reduced from 10px */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 4px !important; /* Reduced from 8px */
        box-sizing: border-box !important;
    }
    
    .price-main-row,
    .price-display {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 4px !important; /* Reduced from 5px */
    }
    
    .price-display {
        font-size: 12px !important; /* Reduced from 13px */
    }
    
    .price-low {
        font-size: 13px !important; /* Reduced from 14px */
    }
    
    .discount-percent-box {
        font-size: 12px !important; /* 9px * 1.3 = 11.7px ≈ 12px */
        padding: 3px 5px !important; /* 2px * 1.3 = 2.6px ≈ 3px, 4px * 1.3 = 5.2px ≈ 5px */
    }
    
    .price-note,
    .offers-count {
        font-size: 7px !important; /* 5.5px * 1.3 = 7.15px ≈ 7px */
    }
    
    .weiter-button,
    .listing-main-content .weiter-button,
    #product-grid .weiter-button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 10px !important; /* Reduced from 8px 13px */
        font-size: 10px !important; /* Increased from 9px for readability */
        min-height: 32px !important; /* Increased from 29px but still touch-friendly */
        box-sizing: border-box !important;
    }
    
    /* Fix EU label white box issue - remove background from winter icon container */
    .product-card-eu-label,
    .eu-label-item {
        background: transparent !important;
        border: none !important;
    }
    
    .eu-label-item {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .eu-icon,
    .eu-icon-season {
        background: transparent !important;
        padding: 0 !important;
    }
    
    /* Fix reseller sections */
    .product-card-resellers,
    .reseller-price-section,
    .reseller-item,
    .reseller-left,
    .reseller-right {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .reseller-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important; /* Reduced from 8px */
        padding: 6px !important; /* Reduced from 8px */
    }
    
    .reseller-right {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 4px !important; /* Reduced from 5px */
    }
    
    .reseller-button {
        width: 100% !important;
        margin-top: 4px !important; /* Reduced from 5px */
        padding: 6px 10px !important; /* Reduced from 8px 13px */
        font-size: 10px !important; /* Increased from 9px for readability */
        min-height: 32px !important; /* Increased from 29px but still touch-friendly */
    }
    
    .reseller-price-main {
        font-size: 12px !important; /* 9px * 1.3 = 11.7px ≈ 12px */
    }
    
    .reseller-price-shipping {
        font-size: 7px !important; /* 5.5px * 1.3 = 7.15px ≈ 7px */
    }
    
    .reseller-name {
        font-size: 9px !important; /* 7px * 1.3 = 9.1px ≈ 9px */
    }
    
    /* Fix price section overflow - ensure discount percentage doesn't get cut off - 65% of original */
    .price-main-row {
        flex-wrap: wrap !important;
        gap: 5px !important; /* 4px * 1.3 = 5.2px ≈ 5px */
        align-items: center !important;
    }
    
    .price-display {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important; /* Reduced from 5px */
    }
    
    .discount-percent-box {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .weiter-button {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-top: 4px !important; /* Reduced from 5px */
    }
    
    /* EU label icons - 65% of original */
    .eu-icon,
    .eu-icon-season,
    .eu-icon-info {
        width: 13px !important; /* 10px * 1.3 = 13px */
        height: 13px !important;
    }
    
    .eu-value {
        font-size: 7px !important; /* 5px * 1.3 = 6.5px ≈ 7px */
    }
    
    /* Variant badges - 65% of original */
    .variant-badge {
        font-size: 7px !important; /* 5px * 1.3 = 6.5px ≈ 7px */
        padding: 1px 4px !important; /* 1px * 1.3 = 1.3px ≈ 1px, 3px * 1.3 = 3.9px ≈ 4px */
    }
}

/* 3. Fix Homepage Configurator on Mobile */
@media (max-width: 768px) {
    /* Hero image - keep visible but smaller */
    .hero-image {
        height: 150px !important;
        overflow: hidden !important;
    }
    
    /* Fix tabs section spacing */
    .tn-tabs-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Wrapper Layout */
    .tn-configurator-content {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        margin: 20px 0 !important;
        width: 100% !important;
        background: #fff;
        border-radius: 8px;
    }

    /* 1. The Left Image (Illustration) */
    /* Target the specific div containing the tire image */
    .tn-configurator-content > div:first-child {
        margin-left: 0 !important; /* RESET the -400px margin */
        margin-bottom: 20px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        order: -1; /* Ensure image is on top */
    }

    /* Ensure the image itself is visible and sized correctly */
    .tn-configurator-content > div:first-child img {
        display: block !important; /* Force show */
        max-width: 200px !important; /* Smaller size for mobile */
        height: auto !important;
        margin: 0 auto !important;
    }

    /* 2. The Form Container */
    .tn-configurator-content > div:last-child,
    .tires-configurator-form {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Brand Logo inside Form */
    #form-brand-logo-container {
        display: block !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }
    
    #form-brand-logo-img {
        max-height: 60px !important; /* Make brand logo prominent */
        width: auto !important;
    }

    /* Form Controls Grid */
    .tn-configurator-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 columns */
        gap: 12px !important;
    }

    /* Make the 3rd select (Rim/Zoll) span full width or fit in grid */
    .configurator-select:nth-child(3) {
        grid-column: span 2 !important; /* Make Zoll full width */
    }

    .configurator-select {
        width: 100% !important;
        max-width: none !important;
    }
    
    .tn-select {
        width: 100% !important;
    }

    /* Header Text Adjustment */
    .hook h1 {
        font-size: 22px !important;
        padding: 0 10px;
    }
    
    .hook p.last-updated {
        font-size: 14px !important;
        color: #28a745 !important; /* Make the rating green/visible */
        font-weight: 600;
    }
}

/* 4. Fix Popular Tires Section on Mobile */
@media (max-width: 768px) {
    .popular-tires-section {
        padding: 40px 12px !important;
    }
    
    .popular-tires-heading {
        font-size: 24px !important;
        text-align: center !important;
        padding: 0 12px !important;
        display: block !important;
        visibility: visible !important;
        color: #ffffff !important;
    }
}

/* 5. Fix Comparison Table on Mobile */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -12px !important;
        padding: 0 12px !important;
    }
    
    .brand-comparison-table {
        min-width: 600px !important;
    }
}

/* 6. Fix Filter Bar on Mobile */
@media (max-width: 768px) {
    .top-filter-bar {
        display: none !important; /* Hide desktop filter bar */
    }
    
    .mobile-filter-bar {
        display: flex !important;
        gap: 12px !important;
        padding: 12px !important;
        background: #1a202c !important; /* Dark theme to match header */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
        position: sticky !important;
        top: 60px !important; /* Below header */
        z-index: 990 !important;
    }
    
    .mobile-filter-button,
    .mobile-sort-button {
        flex: 1 !important;
        padding: 10px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* 7. Fix Footer on Mobile */
@media (max-width: 768px) {
    .trust-footer {
        padding: 20px 12px !important;
        font-size: 12px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .trust-footer p {
        margin: 4px !important;
    }
}

/* 11. Hide Black Friday Banner on Mobile */
@media (max-width: 800px) {
    .black-friday-banner {
        display: none !important;
    }
}

/* 12. Override Inline Styles and Prevent Horizontal Scroll */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* Override inline max-width styles in HTML */
    [style*="max-width: 1200px"],
    [style*="max-width:1200px"],
    [style*="max-width: 1400px"],
    [style*="max-width:1400px"],
    [style*="max-width: 500px"],
    [style*="max-width:500px"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Override inline margin: auto that creates centering */
    [style*="margin: 0 auto"],
    [style*="margin:0 auto"],
    [style*="margin-left: auto"],
    [style*="margin-right: auto"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all sections use full width */
    section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Popular tires section - full width */
    .popular-tires-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Comparison section - full width */
    .comparison-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Hook section - full width */
    .hook {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hook-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Black Friday banner - full width */
    .black-friday-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .black-friday-banner > div {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure touch-friendly elements (min 44px) */
    button,
    .btn,
    a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Sort and filter controls */
    .sort-select,
    .filter-select {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* 9. Fix Testsieger Page Cards - Comprehensive Mobile Fixes */
@media (max-width: 768px) {
    /* Override max-width constraint on testsieger cards */
    .testsieger-section .product-card.testsieger-card,
    .testsieger-card {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix ALL nested elements in testsieger cards */
    .testsieger-card > *,
    .testsieger-card .product-card-header,
    .testsieger-card .product-card-image-section,
    .testsieger-card .product-card-info,
    .testsieger-card .product-card-price-section,
    .testsieger-card .testsieger-video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .testsieger-card .product-card-header {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .testsieger-card .product-card-image-section {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
    
    .testsieger-card .product-card-image-wrapper {
        width: 150px !important;
        max-width: 150px !important;
        /* height removed - using aspect-ratio from style.css */
        margin: 0 auto !important;
    }
    
    .testsieger-card .product-card-brand-logo {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px auto 0 !important;
        border: none !important;
        background: transparent !important;
    }
    
    .testsieger-card .test-badges {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px auto 0 !important;
    }
    
    .testsieger-card .product-card-info {
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }
    
    .testsieger-card .product-card-name {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .testsieger-card .pros-cons {
        font-size: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix price section */
    .testsieger-card .product-card-price-section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .testsieger-card .price-main-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    
    .testsieger-card .price-info-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .testsieger-card .price-display {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    .testsieger-card .weiter-button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }
    
    .testsieger-video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .testsieger-video-wrapper iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* 10. Fix All-Winter-Tires Page and Listing Pages - HARDENED */
@media (max-width: 768px) {
    /* 1. Force Main Container Constraint */
    main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    /* 2. Stabilize the Grid Container */
    .listing-container-with-sidebar {
        display: flex !important; /* Switch from Grid to Flex for better mobile control */
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        gap: 16px !important;
    }

    /* 3. Enforce Single Column Product Grid */
    #product-grid, .product-grid {
        display: flex !important; /* Force Flex column instead of Grid to prevent "auto-fit" weirdness */
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 12px !important; /* Add safe breathing room */
        box-sizing: border-box !important;
        gap: 12px !important;
    }

    /* 4. Strict Card Sizing */
    .product-card {
        width: 100% !important;
        margin: 0 !important;
        /* Prevent cards from shrinking or overflowing */
        flex: 0 0 auto !important; 
    }

    /* 5. Filter Bar & Header Alignment */
    .listing-header {
        padding: 12px 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .product-count {
        font-size: 14px !important;
    }

    .sorting-controls {
        width: 100% !important;
        justify-content: space-between !important;
    }

    #sort-select {
        flex: 1 !important;
    }

    /* 6. Ensure Filter Sidebar doesn't cause ghost width */
    .filter-sidebar {
        position: fixed !important;
        width: 85% !important; /* Not 100% to show overlay */
        max-width: 320px !important;
        z-index: 2000 !important;
    }

    /* 7. Fix Filter Row Layout - Stack Breite, Höhe, Zoll vertically on mobile */
    .filter-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .filter-row .filter-group {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    .filter-group label {
        display: block !important;
        margin-bottom: 6px !important;
        font-size: 14px !important;
    }

    .filter-select-full {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Very small screen breakpoint for mobile card width */
@media (max-width: 360px) {
    /* Use comprehensive selectors to ensure all cards get constrained */
    .listing-main-content .product-card,
    .listing-main-content #product-grid .product-card,
    .listing-main-content .product-grid .product-card,
    #product-grid .product-card,
    #product-grid.product-grid .product-card,
    .product-grid .product-card,
    .product-listing-section .product-card,
    .listing-container-with-sidebar .product-card,
    .product-card {
        max-width: calc(100% - 16px) !important; /* Use calc for very small screens (accounts for 8px padding each side) */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .product-grid {
        padding: 0 8px !important; /* Less padding on very small screens */
        gap: 10px !important; /* Smaller gap */
    }
}