/* style-v1.1-mobile.css */
/* Mobile Minimalist Redesign Layout & Spacing Overrides */

@media (max-width: 768px) {
    /* 1. Global Viewport Padding */
    body.app-layout-v11 {
        padding-top: 96px !important;
        padding-bottom: 75px !important;
        background-color: var(--color-background) !important;
    }

    /* 2. Deep Fixed Header Canopy matching live */
    body.app-layout-v11 .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 96px !important;
        z-index: 1000 !important;
        background: var(--color-background) !important;
        border-bottom: 1px solid var(--color-border) !important;
        box-shadow: var(--shadow-sm) !important;
        display: block !important;
    }
    
    body.app-layout-v11 .header-container {
        display: block !important;
        position: relative !important;
        height: 96px !important;
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    
    /* Top Bar Elements (Logo, Profile, Sign In / List Part) */
    body.app-layout-v11 .logo-link {
        position: absolute !important;
        top: 0px !important;
        left: 8px !important;
        height: 36px !important;
        width: 120px !important;
        z-index: 1000 !important;
        display: block !important;
    }
    
    body.app-layout-v11 .logo-link img {
        height: 62px !important;
        width: auto !important;
        top: -18px !important;
        left: 0 !important;
        position: absolute !important;
        object-fit: unset !important;
    }
    
    body.app-layout-v11 .header-profile-block {
        position: absolute !important;
        top: 6px !important;
        right: 124px !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        height: 36px !important;
    }
    
    body.app-layout-v11 .header-profile-avatar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        margin: 0 !important;
        background-color: #000000 !important;
        color: #ffffff !important;
        font-family: 'Charles Wright', sans-serif !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        padding: 2px 8px !important;
        min-height: 26px !important;
        min-width: 28px !important;
        width: auto !important;
        height: auto !important;
        border: 1.5px solid #000000 !important;
        box-shadow: inset 0 0 0 0.5px #000000, 0 1px 2px rgba(0,0,0,0.15) !important;
    }
    
    body.app-layout-v11 .mobile-hamburger-btn {
        position: absolute !important;
        top: 6px !important;
        right: 16px !important;
        z-index: 100 !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        height: 36px !important;
        width: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }
    
    body.app-layout-v11 .mobile-hamburger-btn span {
        font-size: 24px !important;
    }
    
    body.app-layout-v11 .main-header .btn-sell-now {
        position: absolute !important;
        top: 6px !important;
        right: 8px !important;
        width: auto !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        margin: 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
        z-index: 1000 !important;
    }

    body.app-layout-v11 .main-header .header-signin-link {
        position: absolute !important;
        top: 6px !important;
        right: 116px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--color-primary) !important;
        text-decoration: none !important;
        z-index: 1000 !important;
    }

    /* 3. Bottom Tab Navigation Drawer */
    body.app-layout-v11 .mobile-tab-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-border) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        z-index: 1000 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
        box-sizing: border-box !important;
    }
    
    body.app-layout-v11 .mobile-tab-bar .tab-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: var(--color-text-muted) !important;
        text-decoration: none !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1px !important;
        flex: 1 1 0px !important;
        min-width: 0 !important;
        height: 100% !important;
        gap: 3px !important;
        padding: 4px 1px !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    body.app-layout-v11 .mobile-tab-bar .tab-item > span:not(.material-symbols-outlined) {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        line-height: 1.15 !important;
        font-family: var(--font-sans) !important;
        margin: 0 auto !important;
    }
    
    body.app-layout-v11 .mobile-tab-bar .tab-item span.material-symbols-outlined {
        font-size: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    body.app-layout-v11 .mobile-tab-bar .tab-item:hover,
    body.app-layout-v11 .mobile-tab-bar .tab-item.active {
        color: var(--color-primary) !important;
    }

    /* Bottom tab bar consistent on all pages */

    /* Footer Offloading */
    body.app-layout-v11 .site-footer-body .desktop-footer-container {
        display: none !important;
    }
    
    body.app-layout-v11 .site-footer-body .mobile-footer-container {
        display: flex !important;
    }
    
    body.app-layout-v11 .site-footer-body {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    body.app-layout-v11 .site-footer-body .footer-bottom-inner {
        margin-top: 24px !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    body.app-layout-v11 .mobile-only-profile-footer {
        display: none !important;
    }

    /* 4. The 50/50 Product Catalog Grid */
    body.app-layout-v11 .parts-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    body.app-layout-v11 .part-card {
        padding: 0 !important;
        border-radius: var(--radius-sm) !important;
        box-shadow: var(--shadow-sm) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }

    body.app-layout-v11 .part-card a[href*="p/"]::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 5 !important;
    }

    body.app-layout-v11 .parts-grid .part-card div[style*="border-top"] {
        display: block !important;
        width: 100% !important;
        border-top: none !important;
        padding-top: 0px !important;
    }
    
    body.app-layout-v11 .parts-grid .part-card div[style*="border-top"] > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
    }
    
    body.app-layout-v11 .parts-grid .part-card .btn-view-details {
        display: none !important;
    }
    
    body.app-layout-v11 .part-card-content {
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }

    body.app-layout-v11 .part-card-image-wrap {
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body.app-layout-v11 .part-card-image-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Card Header: Show Seller Plate on Mobile */
    body.app-layout-v11 .parts-grid .part-card > div[style*="border-bottom"] {
        display: flex !important;
        padding: 6px 8px !important;
        height: auto !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(235, 234, 225, 0.4) !important;
    }
    body.app-layout-v11 .parts-grid .part-card .card-seller-plate {
        font-size: 10px !important;
        padding: 2px 6px !important;
        position: relative !important;
        z-index: 10 !important;
        max-width: 95px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }
    body.app-layout-v11 .parts-grid .part-card .part-card-meta {
        display: none !important;
    }
    body.app-layout-v11 .parts-grid .part-card .part-card-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
        z-index: 10 !important;
    }

    /* Mobile Top Badges: Scale and prevent collision on 50/50 grids */
    body.app-layout-v11 .parts-grid .part-card span[style*="top: 8px; left: 8px"],
    body.app-layout-v11 .parts-grid .part-card span[style*="top: 8px; right: 8px"] {
        font-size: 7.5px !important;
        padding: 2px 4px !important;
        letter-spacing: 0.3px !important;
        max-width: 48% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.app-layout-v11 .parts-grid .part-card span[style*="top: 8px; left: 8px"] span.material-symbols-outlined,
    body.app-layout-v11 .parts-grid .part-card span[style*="top: 8px; right: 8px"] span.material-symbols-outlined {
        font-size: 9px !important;
    }

    /* Keep Brand and Part Number on single lines with clean truncation */
    body.app-layout-v11 .parts-grid .part-card div[style*="font-size: 11px"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        font-size: 10px !important;
        font-family: var(--font-mono) !important;
        line-height: 1.3 !important;
        margin-top: 4px !important;
        gap: 2px !important;
        width: 100% !important;
    }
    body.app-layout-v11 .parts-grid .part-card div[style*="font-size: 11px"] span {
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* Price and Shipping strictly inline */
    body.app-layout-v11 .parts-grid .part-card div[style*="display: flex; align-items: baseline"],
    body.app-layout-v11 .parts-grid .part-card .part-card-price {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }
    body.app-layout-v11 .parts-grid .part-card div[style*="display: flex; align-items: baseline"] span:last-child {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    /* 5. Product Detail View (part_details.php) */
    body.app-layout-v11 main > nav {
        display: none !important; /* Hide breadcrumbs */
    }
    
    body.app-layout-v11 .details-gallery {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        max-width: none !important;
        border-radius: 0 !important;
        border: none !important;
        min-height: auto !important;
        aspect-ratio: 1 / 1 !important;
        position: relative !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    body.app-layout-v11 #main-gallery-view {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        max-height: none !important;
    }
    
    body.app-layout-v11 .floating-back-btn {
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.8) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-primary) !important;
        z-index: 100 !important;
        box-shadow: var(--shadow-sm) !important;
        text-decoration: none !important;
    }

    body.app-layout-v11 .details-status-badge-container {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 100 !important;
        display: block !important;
    }
    
    body.app-layout-v11 .details-status-badge-container span {
        margin: 0 !important;
        box-shadow: var(--shadow-sm) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Flatten Compatibility/Fitment Panels */
    body.app-layout-v11 .compatibility-panel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-top: 24px !important;
    }
    
    body.app-layout-v11 .compatibility-list {
        overflow-x: hidden !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body.app-layout-v11 .compatibility-list li {
        background: var(--color-surface-muted) !important;
        border: none !important;
        border-radius: 0 !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
        padding: 12px 8px !important;
        margin-bottom: 4px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: calc(100% + 16px) !important;
        overflow: hidden !important;
    }

    body.app-layout-v11 .compatibility-list li > div {
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* 6. Keyboard-Defensive Listing Wizard & Checkout Gates */
    body.app-layout-v11 .wizard-section h2 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    body.app-layout-v11 .wizard-container {
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.app-layout-v11 .wizard-section {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    body.app-layout-v11 button,
    body.app-layout-v11 .btn,
    body.app-layout-v11 #lookup-plate-btn,
    body.app-layout-v11 button[type="submit"],
    body.app-layout-v11 input[type="submit"],
    body.app-layout-v11 input[type="button"],
    body.app-layout-v11 .btn-sell-now,
    body.app-layout-v11 .btn-view-details {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 50px !important;
    }
    
    body.app-layout-v11 .wizard-steps {
        display: none !important;
    }
    
    body.app-layout-v11 .wizard-progress-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%) !important;
        z-index: 11000 !important;
        transition: width 0.3s ease !important;
    }

    /* Remove fixed/absolute modal traps on mobile viewports */
    body.app-layout-v11 #offer-modal,
    body.app-layout-v11 .modal-overlay-offer {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        z-index: 100 !important;
    }
    
    /* Force the form to float naturally inline, high up the container stream */
    body.app-layout-v11 #offer-modal .wizard-container,
    body.app-layout-v11 .modal-container-offer {
        position: relative !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-md) !important;
        box-sizing: border-box !important;
    }

    body.app-layout-v11 #offer-modal form {
        width: 100% !important;
        display: block !important;
    }

    body.app-layout-v11 #offer-modal {
        z-index: 2000 !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    body.app-layout-v11 #offer-modal form > div[style*="display: flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }
    
    body.app-layout-v11 #offer-modal button[name="submit_listing_offer"],
    body.app-layout-v11 #offer-modal button[onclick*="offer-modal"] {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Ensure price box and submit triggers stack seamlessly above mobile keypad heights */
    body.app-layout-v11 #offer-modal .form-group,
    body.app-layout-v11 .offer-input-group {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    /* 7. Container and registration layout overrides for V1 style mobile margins */
    body.app-layout-v11 .container {
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin: 16px auto !important;
    }
    
    body.app-layout-v11 .container > div[style*="display: grid"],
    body.app-layout-v11 .container > div[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    body.app-layout-v11 .container h2,
    body.app-layout-v11 .container h1 {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Reduce general h1 font-size to 32px on mobile */
    body.app-layout-v11 h1:not(.auth-card-title) {
        font-size: 32px !important;
    }

    body.app-layout-v11 .auth-card-title {
        font-size: 18px !important;
        letter-spacing: -0.4px !important;
        white-space: nowrap !important;
    }

    /* Reduce hero section padding from 60px to 30px on mobile */
    body.app-layout-v11 section[style*="padding: 60px 0"],
    body.app-layout-v11 section[style*="padding:60px 0"] {
        padding: 30px 0 !important;
    }

    /* Hero section side padding override */
    body.app-layout-v11 section > div[style*="max-width: 1200px"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    body.app-layout-v11 .filter-buttons-row::-webkit-scrollbar {
        display: none !important;
    }
    
    body.app-layout-v11 .filter-buttons-row {
        scrollbar-width: none !important;
    }

    /* Dashboard Tab Bar & Hub Navigation */
    body.app-layout-v11 .tab-header {
        display: none !important;
    }
    
    body.app-layout-v11.has-active-tab .dashboard-header-row,
    body.app-layout-v11.has-active-tab .action-center-container {
        display: none !important;
    }
    
    body.app-layout-v11 .mobile-back-header {
        display: flex !important;
    }
    
    body.app-layout-v11 .mobile-hub-row:active {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }

    /* Listing Wizard Tab Selector */
    body.app-layout-v11 .wizard-tabs-nav {
        display: none !important;
    }
    
    body.app-layout-v11 .wizard-mobile-nav {
        display: flex !important;
    }

    /* Search Results Form Mobile Layout */
    body.app-layout-v11 form.search-results-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-part {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-make {
        grid-column: 1 !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-year {
        grid-column: 2 !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-model {
        grid-column: 1 !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-category {
        grid-column: 2 !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-submit {
        grid-column: 2 !important;
        width: 100% !important;
    }
    
    body.app-layout-v11 form.search-results-form .results-search-submit button {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
    }

    body.app-layout-v11 form.search-results-form .results-model-helper-wrap {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        left: 0 !important;
        right: 0 !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* Responsive stacked card layout for dashboard tables to prevent horizontal scrolling */
    body.app-layout-v11 .dashboard-table,
    body.app-layout-v11 .dashboard-table thead,
    body.app-layout-v11 .dashboard-table tbody,
    body.app-layout-v11 .dashboard-table tr:not(.dispute-details-row):not(.bids-details-row):not(.offers-details-row),
    body.app-layout-v11 .dashboard-table th,
    body.app-layout-v11 .dashboard-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    body.app-layout-v11 .dashboard-table thead {
        display: none !important;
    }
    
    body.app-layout-v11 .dashboard-table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    body.app-layout-v11 .dashboard-table tr:not(.dispute-details-row):not(.bids-details-row):not(.offers-details-row) {
        display: block !important;
        width: 100% !important;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: var(--shadow-sm) !important;
        box-sizing: border-box !important;
    }

    body.app-layout-v11 .dashboard-table tr.dispute-details-row.active,
    body.app-layout-v11 .dashboard-table tr.bids-details-row.active,
    body.app-layout-v11 .dashboard-table tr.offers-details-row.active {
        display: block !important;
        width: 100% !important;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: var(--shadow-sm) !important;
        box-sizing: border-box !important;
    }
    
    body.app-layout-v11 .dashboard-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: right !important;
    }
    
    body.app-layout-v11 .dashboard-table td:last-child {
        border-bottom: none !important;
    }
    
    body.app-layout-v11 .dashboard-table td::before {
        content: attr(data-label) !important;
        font-weight: 700 !important;
        color: var(--color-primary) !important;
        text-align: left !important;
        margin-right: 16px !important;
        flex-shrink: 0 !important;
    }

    body.app-layout-v11 .dashboard-table td > * {
        max-width: 60% !important;
        word-break: break-word !important;
    }

    /* Registration page stacked layout with callout ordering (UPD-004) */
    body.app-layout-v11 .register-grid-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    body.app-layout-v11 .register-column {
        order: 1 !important;
    }
    body.app-layout-v11 .platform-guide-box {
        order: 2 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        margin-bottom: 0 !important;
    }
    body.app-layout-v11 .login-column {
        order: 3 !important;
    }

    body.app-layout-v11 .register-grid-wrapper.direct-register-mode .register-column {
        order: 1 !important;
    }
    body.app-layout-v11 .register-grid-wrapper.direct-register-mode .platform-guide-box {
        order: 2 !important;
    }
    body.app-layout-v11 .register-grid-wrapper.direct-register-mode .login-column {
        order: 3 !important;
    }

    /* Align search results header spacing with other pages */
    body.app-layout-v11 .fitment-selector-section {
        padding: 16px 0 !important;
    }
    body.app-layout-v11 .fitment-selector-section .container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobile Wanted Board Enhancements */
    body.app-layout-v11 .wanted-header-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.app-layout-v11 .wanted-main-title {
        font-size: 28px !important;
        margin: 0 !important;
    }
    body.app-layout-v11 .wanted-main-subtitle {
        display: none !important;
    }
    body.app-layout-v11 .wanted-post-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        border-radius: 50px !important;
        box-shadow: var(--shadow-sm) !important;
        flex-shrink: 0 !important;
    }
    body.app-layout-v11 .wanted-post-btn .btn-text-desktop {
        display: none !important;
    }
    body.app-layout-v11 .wanted-post-btn .btn-text-mobile {
        display: inline !important;
    }
    body.app-layout-v11 .wanted-search-section {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
        box-shadow: none !important;
    }
    body.app-layout-v11 .search-wanted-heading {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    body.app-layout-v11 .wanted-search-section .form-control {
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: var(--shadow-sm) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 50px !important;
        min-height: 44px !important;
    }
    body.app-layout-v11 .wanted-search-section .btn {
        border-radius: 50px !important;
        min-height: 44px !important;
        box-shadow: var(--shadow-sm) !important;
    }
    body.app-layout-v11 .wanted-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }
    body.app-layout-v11 .wanted-grid .compatibility-panel {
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-sm) !important;
        padding: 20px !important;
        margin-top: 0 !important;
        margin-bottom: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    body.app-layout-v11 .wizard-container {
        padding: 16px !important;
    }
    body.app-layout-v11 #wizard-form .form-group {
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
    body.app-layout-v11 #wizard-form .form-group.mobile-full-width {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.app-layout-v11 #wizard-form .form-group.mobile-full-width .form-label {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }
    body.app-layout-v11 #wizard-form .form-group #lookup-plate-btn {
        width: auto !important;
        align-self: flex-start !important;
        margin-top: 4px !important;
    }
    body.app-layout-v11 #wizard-form .form-group[style*="display: none"],
    body.app-layout-v11 #wizard-form .form-group[style*="display:none"] {
        display: none !important;
    }
    body.app-layout-v11 #wizard-form .form-group:has(#is-unidentified-checkbox) {
        display: block !important; /* Keep speculative checkbox block-level so it fits the disclaimer well */
    }
    body.app-layout-v11 #wizard-form .form-group .form-label {
        margin-bottom: 0 !important;
        flex: 0 0 100px !important;
        text-align: left !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--color-primary) !important;
    }
    body.app-layout-v11 #wizard-form .form-group .form-control {
        flex: 1 !important;
        min-width: 0 !important;
        border-radius: 50px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    body.app-layout-v11 #wizard-form .form-group textarea.form-control {
        border-radius: 12px !important;
    }
    body.app-layout-v11 #wizard-form .form-group > div {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Form & Container background removals on mobile to go full-width for accordion lists */
    body.app-layout-v11 #section-buying > .dashboard-card,
    body.app-layout-v11 #section-selling > .dashboard-card,
    body.app-layout-v11 #section-wanted > .dashboard-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 24px !important;
    }

    /* Partner & Affiliate Dark Hero Banners on Mobile */
    .partner-hero-card,
    .partner-banner-card,
    body.app-layout-v11 .partner-hero-card,
    body.app-layout-v11 .partner-banner-card,
    body.app-layout-v11 #section-partner .partner-hero-card,
    body.app-layout-v11 #section-hub .partner-banner-card {
        background: linear-gradient(135deg, #1b3d2f 0%, #0d281e 100%) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: var(--radius-md, 8px) !important;
        padding: 20px 16px !important;
        box-shadow: var(--shadow-md) !important;
        margin-bottom: 20px !important;
    }

    body.app-layout-v11 .partner-hero-card h2,
    body.app-layout-v11 .partner-banner-card h3 {
        color: #ffffff !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    body.app-layout-v11 .partner-hero-card p,
    body.app-layout-v11 .partner-banner-card p {
        color: rgba(255, 255, 255, 0.88) !important;
        font-size: 13px !important;
    }

    body.app-layout-v11 .partner-hero-card code {
        background: rgba(0, 0, 0, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: #6ee7b7 !important;
        word-break: break-all !important;
        display: inline-block !important;
        font-size: 13px !important;
    }

    body.app-layout-v11 .partner-hero-card .btn,
    body.app-layout-v11 .partner-banner-card .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Mobile Accordion/Concertina layout for My Active Wanted Ads */
    body.app-layout-v11 #section-wanted .dashboard-table {
        display: none !important;
    }
    body.app-layout-v11 .wanted-accordion-container {
        display: block !important;
    }
    body.app-layout-v11 .wanted-accordion-item {
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        background: var(--color-surface) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-sm) !important;
    }
    body.app-layout-v11 .wanted-accordion-header {
        padding: 16px !important;
        background: var(--color-surface) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-bottom: 1px solid transparent !important;
        position: relative !important;
    }
    body.app-layout-v11 .wanted-accordion-header.active {
        border-bottom-color: var(--color-border) !important;
    }
    body.app-layout-v11 .wanted-accordion-body {
        padding: 16px !important;
        display: none !important;
        background: #ffffff !important;
    }
    body.app-layout-v11 .wanted-accordion-body.open {
        display: block !important;
    }

    /* Buying & Selling Accordion Mobile Overrides */
    body.app-layout-v11 #section-buying .dashboard-table,
    body.app-layout-v11 #section-selling .dashboard-table {
        display: none !important;
    }

    body.app-layout-v11 .buying-accordion-container,
    body.app-layout-v11 .selling-accordion-container {
        display: block !important;
    }

    .buying-accordion-item, .selling-accordion-item {
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        background: var(--color-surface) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .buying-accordion-header, .selling-accordion-header {
        padding: 16px !important;
        background: var(--color-surface) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-bottom: 1px solid transparent !important;
        position: relative !important;
    }

    .buying-accordion-header.active, .selling-accordion-header.active {
        border-bottom-color: var(--color-border) !important;
    }

    .buying-accordion-body, .selling-accordion-body {
        padding: 16px !important;
        display: none !important;
        background: #ffffff !important;
    }

    .buying-accordion-body.open, .selling-accordion-body.open {
        display: block !important;
    }

    body.app-layout-v11 .offers-tabs-nav {
        display: none !important;
    }

    /* Responsive Direct Messaging Inbox Overrides */
    body.app-layout-v11 #messages-split-container {
        display: block !important;
        height: 550px !important;
        min-height: 400px !important;
        position: relative !important;
    }
    
    body.app-layout-v11 #messages-threads-sidebar {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        border-right: none !important;
    }
    
    body.app-layout-v11 #messages-main-viewer {
        display: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Active state viewport toggling on mobile */
    body.app-layout-v11 #messages-split-container.show-chat #messages-threads-sidebar {
        display: none !important;
    }
    
    body.app-layout-v11 #messages-split-container.show-chat #messages-main-viewer {
        display: flex !important;
    }
    
    body.app-layout-v11 #mobile-chat-back-header {
        display: flex !important;
    }
    
    body.app-layout-v11 #thread-reply-form {
        padding: 10px 12px !important;
    }

    /* Step 5 Layout Mobile Spacing Polish */
    body.app-layout-v11 #wizard-form .wizard-step-desc {
        margin-bottom: 12px !important;
    }
    body.app-layout-v11 #wizard-form .price-group-container {
        margin-bottom: 12px !important;
        row-gap: 4px !important;
        column-gap: 24px !important;
    }
    body.app-layout-v11 #wizard-form .free-to-list-box {
        padding-top: 0 !important;
    }
    body.app-layout-v11 #wizard-form .postage-options-container {
        margin-top: 12px !important;
    }
    body.app-layout-v11 #wizard-form .postage-details-row {
        row-gap: 8px !important;
        column-gap: 24px !important;
    }
    
    body.app-layout-v11 .dashboard-header-plate-wrapper {
        align-items: flex-start !important;
        width: 100% !important;
    }

    body.app-layout-v11 .dashboard-user-plate {
        display: flex !important;
        align-items: center !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
    }

    body.app-layout-v11 .dashboard-signout-btn {
        display: none !important;
    }

    body.app-layout-v11 select.form-control {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        color: var(--color-text) !important;
        background-color: #ffffff !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 14px !important;
        padding-right: 40px !important;
    }

    body.app-layout-v11 .detail-category-badge {
        background-color: #FFFFFF !important;
        color: #151515 !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }

    body.app-layout-v11 .buyer-plate-badge {
        background-color: #000000 !important;
        color: #FFFFFF !important;
        font-family: 'Charles Wright', sans-serif !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
    }
}