/* Material 3 location picker used only by mobile filters. */
.mobile-location-picker { display: grid; gap: 10px; margin-bottom: 14px; }
.mobile-location-picker__select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #79747e; border-radius: 12px; background: #fffbfe; color: #1d1b20; font: inherit; }
.mobile-location-picker__select:focus { border: 2px solid #4f46e5; outline: none; }

/* Home empty state: one full-width M3 surface, matching category empty state. */
@media (max-width: 1023px) {
    .home-page .listings-grid > .no-listings-message {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 40px 20px;
        border: 1px solid var(--m3-outline-variant, #cac4d0);
        border-radius: var(--m3-corner-lg, 16px);
        background: var(--m3-surface, #fffbfe);
    }

    .home-page .no-listings-message .no-listings-icon { margin-bottom: 14px; }
    .home-page .no-listings-message .no-listings-icon .material-icons { font-size: 52px; color: var(--m3-on-surface-variant, #49454f); }
    .home-page .no-listings-message__title { font-size: 20px !important; color: var(--m3-on-surface, #1d1b20) !important; }
    .home-page .no-listings-message p { line-height: 1.5; color: var(--m3-on-surface-variant, #49454f); }
    .home-page .no-listings-message .btn { display: inline-flex; width: auto; min-width: 190px; justify-content: center; }
}

/* Mobile category browser — Material 3 list rows without category icons. */
@media (max-width: 1023px) {
    .mobile-nav__category {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        text-align: left;
    }

    .mobile-nav__category > .material-icons:not(.mobile-nav__category-arrow) {
        display: none !important;
    }

    .mobile-nav__category-arrow {
        flex: 0 0 auto;
        width: 24px;
        color: var(--m3-on-surface-variant);
    }

    .mobile-nav__category-back {
        display: block;
        margin: 0 0 10px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: var(--m3-primary);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .mobile-nav__category-empty {
        padding: 24px 12px;
        color: var(--m3-on-surface-variant);
        text-align: center;
    }
}
/* Profile sorting header fix (mobile/tablet only)
   Keeps desktop untouched and prevents ugly nested-looking layout */
@font-face {
    font-family: "nbrb";
    /* Assets are exposed by Apache at /assets, not /public/assets. Relative
       URLs also keep this font working when the application has a base path. */
    src: url("../fonts/nbrb.woff2") format("woff2"),
         url("../fonts/nbrb.woff") format("woff"),
         url("../fonts/nbrb.ttf") format("truetype");
    font-display: block;
    unicode-range: U+E901, U+42, U+59, U+4E;
}

/*
 * Listing media parity on mobile.
 * The multi-image preview uses an absolute track, while the single-image
 * fallback is rendered through <picture>. Keep both in the same fixed
 * media box so card height does not depend on the source image dimensions.
 */
.item-card__image > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.item-card__image > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Auction cards keep their body outside the media link (timer/title/price).
 * Match the regular listing card's media contract without changing the
 * auction markup or its body layout: the image link fills the same fixed
 * media box and the picture/image use the same object-fit rules. */
.auction-card .item-card__image > .auction-card__media-link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.auction-card .item-card__image > .auction-card__media-link > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.auction-card .item-card__image > .auction-card__media-link > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep the same single-photo behavior as regular listing cards. */
.auction-card .item-card__image.item-card__image--single > .auction-card__media-link > picture > img {
    object-fit: cover;
    background: var(--m3-surface-variant, #e7e0ec);
}

/* Single-photo cards use the same scaling as the multi-photo preview track
 * (`object-fit: cover`). JS does not build a slider on mobile either when
 * `data-images-count <= 1` (see ad-card-mobile-swipe.js initCard guard), so the
 * main <img>/<picture> is the only image element to style here. The
 * surface-variant background fills the cell for transparent PNG frames. */
.item-card__image--single > img,
.item-card__image--single > picture > img {
    object-fit: cover;
    background: var(--m3-surface-variant, #e7e0ec);
}

.nbrb-icon {
    font-family: "nbrb" !important;
    speak: none;
    font-style: normal;
    font-weight: 500;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    font-size: 22px;
    vertical-align: baseline;
    line-height: 1;
}

.nbrb-icon-byn:before {
    content: "\e901"; /* Юникод для знака */
}

@media (max-width: 1023px) {
    .profile-page .profile-sort-mobile {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Public seller profile: remove extra gap above contacts block
       .profile-sort-mobile sits outside .item-detail-main and creates
       unwanted spacing on mobile. The .item-detail-main already has
       its own padding, so we zero out the margin here. */
    .profile-page--public-seller .profile-sort-mobile {
        margin-bottom: 0;
    }

    /* Seller blog pages (topic.php, user-topics.php) — fix large gap
       above the sidebar on mobile. Same approach as
       seller-blog-page--manage: flex column layout with controlled gap. */
    .seller-blog-page .item-detail-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin-top: 0 !important;
        gap: 12px !important;
    }

    .seller-blog-page .item-detail-sidebar {
        order: 1 !important;
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .seller-blog-page .profile-main-column {
        order: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .seller-blog-page .item-detail-sidebar .profile-card {
        margin-bottom: 0 !important;
    }

    .seller-blog-page .profile-header {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
    }

    .profile-page .profile-sort-mobile .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
        padding: 0 2px;
    }

    .profile-page .profile-sort-mobile .section-title {
        margin: 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .profile-page .profile-sort-mobile .sort-options {
        margin: 0;
        flex: 0 0 auto;
    }

    .profile-page .profile-sort-mobile .sort-select {
        width: auto;
        min-width: 130px;
        max-width: 170px;
    }

    .profile-page .profile-sort-desktop {
        display: none !important;
    }

    .profile-page .profile-sort-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        padding: 0 2px;
    }

    .profile-page .profile-sort-header .section-title {
        margin: 0;
        font-size: 28px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .profile-page .profile-sort-header .sort-options {
        margin: 0;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .profile-page .profile-sort-header .sort-select {
        width: auto;
        min-width: 130px;
        max-width: 170px;
        height: 34px;
        padding: 0 30px 0 10px;
        font-size: 14px;
        line-height: 34px;
        border-radius: 10px;
    }

    /* Management block above item-detail-main */
    .profile-management {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 18px 16px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
    }

    .profile-management.item-detail-main {
        padding: 18px 16px !important;
        border: 1px solid var(--m3-outline-variant) !important;
        border-radius: var(--m3-corner-lg) !important;
        color: #9ca3af !important;
        background: #f8fafc !important;
    }

    .profile-management__header {
        margin: 0;
        min-width: 0;
        flex: 1 1 auto;
    }

    .profile-management__title {
        margin: 0;
        font-size: 21px;
        line-height: 1.15;
    }

    .profile-management__actions {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex: 0 0 auto;
        margin-left: 0;
        width: 100%;
    }

    .profile-management__actions .btn--bump-all {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 999px;
        border: none;
        background: var(--m3-primary);
        color: var(--m3-on-primary);
        margin: 0;
        box-shadow: var(--m3-elevation-1);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .profile-management__actions .btn--bump-all:hover {
        background: #4338ca;
        color: var(--m3-on-primary);
    }

    .profile-management__actions .btn--bump-all .material-icons {
        font-size: 18px;
        color: var(--m3-on-primary);
    }

    .profile-management__actions .btn--bump-all[disabled] {
        background: rgba(79, 70, 229, 0.38);
        box-shadow: none;
        color: rgba(255, 255, 255, 0.75);
        opacity: 1;
    }

    /* Charges / mega-charge block — stack heading, actions and charge info. */
    .profile-management__top {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .profile-management--column .profile-management__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mega-charge {
        align-items: flex-start;
        text-align: left;
    }

    .profile-charges {
        font-size: 13px;
        padding: 10px 12px;
    }

    .charge-hint {
        text-align: left;
    }

    .item-card .mega-select {
        top: 8px;
        left: 8px;
    }

    .profile-page .profile-management + .profile-sort-mobile {
        margin-top: 12px;
    }

    /* Ads tab: the mobile sort header sits below the drafts block, so keep the
       same vertical rhythm as when it followed the management block. */
    .profile-page .profile-drafts-empty + .profile-sort-mobile,
    .profile-page .item-detail-main + .profile-sort-mobile {
        margin-top: 12px;
    }
}
/* ============================================
   MOBILE STYLES FOR HAPAI.BY
   ============================================ */

/* Mobile-first approach with responsive breakpoints */
/* Base mobile styles (320px+) */
/* Small mobile (480px+) */
/* Tablet (768px+) */
/* Desktop (1024px+) */

/* ============================================
   MOBILE LAYOUT & CONTAINER
   ============================================ */

/* Tablet and mobile styles */
@media (max-width: 1023px) {
    /* Material Design 3 — color & shape tokens */
    :root {
        --m3-primary: #4f46e5;
        --m3-on-primary: #ffffff;
        --m3-primary-container: #e0e0ff;
        --m3-on-primary-container: #1b1664;
        --m3-secondary-container: #e8def8;
        --m3-on-secondary-container: #1d192b;
        --m3-secondary: #625b71;
        --m3-on-secondary: #ffffff;
        --m3-surface: #fffbfe;
        --m3-surface-variant: #e7e0ec;
        --m3-background: #ffffff;
        --m3-on-surface: #1c1b1f;
        --m3-on-surface-variant: #49454f;
        --m3-outline: #79747e;
        --m3-outline-variant: #cac4d0;
        --m3-error: #b3261e;
        --m3-elevation-0: none;
        --m3-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
        --m3-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
        --m3-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
        --m3-state-layer-hover: rgba(79, 70, 229, 0.08);
        --m3-state-layer-press: rgba(79, 70, 229, 0.12);
        --m3-corner-xs: 4px;
        --m3-corner-sm: 8px;
        --m3-corner-md: 12px;
        --m3-corner-lg: 16px;
        --m3-corner-xl: 28px;
        --m3-corner-pill: 1000px;
    }

    /* Force light theme for all elements - prevent dark mode on mobile */
    * {
        color-scheme: light !important;
    }
    
    /* Remove all focus effects on mobile for better UX */
    * {
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* M3 filled surface for inputs */
    input,
    textarea,
    select {
        background-color: #ece6f0 !important;
        color: var(--m3-on-surface) !important;
        -webkit-text-fill-color: var(--m3-on-surface) !important;
        color-scheme: light !important;
        border-radius: var(--m3-corner-sm) !important;
        border: 1px solid transparent !important;
        transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }
    
    input:focus,
    input:focus-visible,
    input:active,
    textarea:focus,
    textarea:focus-visible,
    textarea:active,
    select:focus,
    select:focus-visible,
    select:active,
    button:focus,
    button:focus-visible,
    button:active,
    a:focus,
    a:focus-visible,
    a:active {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Ensure input placeholders are visible (M3 on-surface-variant) */
    input::placeholder,
    textarea::placeholder {
        color: var(--m3-on-surface-variant) !important;
        opacity: 1 !important;
    }
    
    .container {
        padding: 0 16px;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Header container should have proper padding */
    .header .container {
        padding: 0 16px;
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Add top margin to main content to account for fixed header */
    .main {
        margin-top: 80px; /* Height of fixed header */
    }
    
    /* Ensure body has proper spacing */
    body {
        padding-top: 0;
    }
    
    /* Add top padding to page content */
    .page-content,
    .home-page,
    .messages-page,
    .profile-page,
    .auth-page {
        padding-top: 0px;
    }
    
    /* Specific pages that need top spacing */
    .item-detail-page,
    .create-item-page,
    .search-page,
    .category-page {
        padding-top: 0px;
    }
    
    /* Add bottom padding to account for fixed bottom navigation */
    body {
        padding-bottom: 80px;
    }
    
    /* Messages page - no bottom padding on body */
    body:has(.messages-page) {
        padding-bottom: 0 !important;
    }
    
    /* Alternative for older browsers */
    body.messages-page-active {
        padding-bottom: 0 !important;
    }
    
    .main,
    .page-content,
    .home-page,
    .profile-page,
    .auth-page,
    .item-detail-page,
    .create-item-page,
    .search-page,
    .category-page {
        padding-bottom: 80px;
    }
    
    /* Messages page - minimal bottom padding */
    .messages-page {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .messages-page .main,
    .messages-page .container,
    .messages-page .messages-layout,
    .messages-page .conversations-sidebar,
    .messages-page .conversations-list,
    .messages-page .messages-content,
    .messages-page .chat-messages {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Messages page: chat input form is fixed at bottom, hide bottom nav when chat active */
    body.messages-page-active.messages-chat-active .main {
        padding-bottom: 0 !important;
    }
    
    /* Ensure messages page container doesn't have extra bottom spacing */
    body.messages-page-active .messages-page > .container {
        padding-bottom: 0 !important;
    }
    
    /* Fix scroll to top — M3 FAB (small, primary tone) */
    .scroll-to-top {
        position: fixed !important;
        bottom: 100px !important; /* Above mobile bottom nav */
        right: 16px !important;
        z-index: 5000 !important; /* Higher than mobile-nav (1000) but lower than bottom-nav (9999) */
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: var(--m3-primary-container) !important;
        color: var(--m3-on-primary-container) !important;
        border: none !important;
        box-shadow: var(--m3-elevation-3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .scroll-to-top:hover {
        background: #d0ccff !important;
        transform: translateY(-2px) !important;
        box-shadow: var(--m3-elevation-3) !important;
    }
    
    .scroll-to-top .material-icons {
        font-size: 24px !important;
        color: var(--m3-on-primary-container) !important;
    }
    
    /* Ensure scroll to top button doesn't interfere with bottom nav */
    .scroll-to-top {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    
    /* Hide scroll to top button when it might interfere */
    .scroll-to-top.hidden {
        display: none !important;
    }
    
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: var(--m3-on-surface);
        background-color: var(--m3-background);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: 0.02em;
    }
    
    html {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .main {
        padding-top: 0;
    }

    /* Error pages (403/404): stable column layout with bottom nav */
    .main:has(.error-page) {
        min-height: calc(100vh - 80px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .error-page {
        flex: 1 0 auto !important;
        padding: 20px 0 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .error-page .container {
        max-width: 100% !important;
    }

    .error-content {
        max-width: 100% !important;
    }

    body:has(.error-page) .development-banner {
        margin-top: 0 !important;
    }
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */

@media (max-width: 1023px) {
    /* Ensure html and body have correct height */
    html {
        height: 100%;
        height: calc(var(--vh, 1vh) * 100);
        overflow-x: hidden;
    }
    
    body {
        min-height: 100%;
        min-height: calc(var(--vh, 1vh) * 100);
        position: relative;
    }
    
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important; /* Highest priority - always on top */
        background: var(--m3-surface) !important;
        border-top: 1px solid var(--m3-outline-variant) !important;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2), 0 -2px 6px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        padding: 8px 0 !important;
        height: 80px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        /* Additional mobile fixes */
        -webkit-position: sticky !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-bottom-nav__item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none;
        color: var(--m3-on-surface-variant);
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
        padding: 8px 4px;
        border-radius: var(--m3-corner-lg);
        position: relative;
        min-width: 0;
        height: 60px;
        -webkit-tap-highlight-color: transparent;
        flex: 1 !important;
        max-width: none;
        flex-shrink: 0 !important;
        margin: 0;
        z-index: 9999 !important; /* Same as parent */
    }
    
    .mobile-bottom-nav__item:hover,
    .mobile-bottom-nav__item:focus {
        color: var(--m3-primary);
        background: var(--m3-state-layer-hover);
        transform: scale(1.02);
    }
    
    .mobile-bottom-nav__item.active {
        color: var(--m3-primary);
        background: rgba(79, 70, 229, 0.12);
    }
    
    .mobile-bottom-nav__item--primary {
        background: transparent !important;
        color: var(--m3-primary) !important;
        box-shadow: none !important;
        border-radius: 0;
        min-width: 0;
        height: 60px;
        margin: 0;
        flex: 1 !important;
        order: 3;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important; /* Same as parent */
    }
    
    .mobile-bottom-nav__item--primary:hover,
    .mobile-bottom-nav__item--primary:focus {
        color: var(--m3-primary) !important;
        background: transparent !important;
        transform: none;
        box-shadow: none !important;
    }

    /* M3 FAB-like add action: the circle belongs to the icon, while the
       navigation label stays underneath it (as in the native app). */
    .mobile-bottom-nav__item--primary .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 88px;
        height: 48px;
        margin-bottom: 2px;
        border-radius: 12px;
        background: #4f46e5 !important;
        color: var(--m3-on-primary);
        box-shadow: var(--m3-elevation-2);
    }

    .mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
        color: #ef4444;
    }
    
    /* Mobile button requiring verification — M3 error / warning tonal */
    .mobile-bottom-nav__item--primary[title*="верификация"] {
        background: transparent !important;
        color: #7c5800 !important;
        box-shadow: none !important;
    }

    .mobile-bottom-nav__item--primary[title*="верификация"] .material-icons {
        background: #7c5800;
        color: #ffffff;
    }
    
    .mobile-bottom-nav__item--primary[title*="верификация"]:hover,
    .mobile-bottom-nav__item--primary[title*="верификация"]:focus {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .mobile-bottom-nav__item .material-icons {
        font-size: 24px;
        margin-bottom: 4px;
        transition: all 0.2s ease;
    }
    
    .mobile-bottom-nav__label {
        font-size: 10px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
        font-size: 10px;
        font-weight: 500;
        color: var(--m3-on-primary);
        text-align: center;
        line-height: 1.2;
    }
    
    .mobile-bottom-nav__badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: var(--m3-error);
        color: #ffffff;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: var(--m3-corner-pill);
        min-width: 18px;
        height: 18px;
        display: none; /* Hidden by default */
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: var(--m3-elevation-1);
    }
    
    /* Force hide badge when it has no content or shows "0" */
    .mobile-bottom-nav__badge.hidden,
    .mobile-bottom-nav__badge:empty {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Haptic feedback animation */
    .mobile-bottom-nav__item:active {
        transform: scale(0.95);
    }
    
    .mobile-bottom-nav__item--primary:active {
        transform: scale(1.05);
    }
    
    /* Force horizontal layout */
    .mobile-bottom-nav > * {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Order for proper positioning - Add button in center */
    .mobile-bottom-nav__item:nth-child(1) { order: 1; } /* Главная */
    .mobile-bottom-nav__item:nth-child(2) { order: 2; } /* Избранное */
    .mobile-bottom-nav__item:nth-child(3) { order: 3; } /* Добавить - CENTER */
    .mobile-bottom-nav__item:nth-child(4) { order: 4; } /* Сообщения */
    .mobile-bottom-nav__item:nth-child(5) { order: 5; } /* Профиль */
    
    /* Ensure proper spacing */
    .mobile-bottom-nav {
        gap: 0 !important;
    }
    
    /* Force full width layout */
    .mobile-bottom-nav {
        margin: 0 !important;
    }
    
    /* Force horizontal layout with important declarations */
    .mobile-bottom-nav {
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure items stay in row with equal spacing */
    .mobile-bottom-nav__item {
        flex-basis: 0 !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        text-align: center !important;
    }
    
    /* Responsive adjustments for smaller screens */
    @media (max-width: 480px) {
        .mobile-bottom-nav {
            height: 70px;
            padding: 6px 0;
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-evenly !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Adjust scroll to top button for smaller screens */
        .scroll-to-top {
            bottom: 90px !important; /* Above mobile bottom nav */
            right: 12px !important;
            width: 44px !important;
            height: 44px !important;
            z-index: 5000 !important; /* Higher than mobile-nav (1000) but lower than bottom-nav (9999) */
        }
        
        .scroll-to-top .material-icons {
            font-size: 22px !important;
        }
        
        /* Mobile menu toggle for smaller screens */
        .mobile-menu-toggle {
            padding: 2px;
            background: transparent;
            color: #4f46e5;
            border: none;
            width: 36px;
            height: 36px;
        }
        
        .mobile-menu-toggle__text {
            display: none;
        }
        
        .mobile-menu-toggle .material-icons {
            font-size: 28px;
            color: #4f46e5;
        }
        
        /* Mobile search for smaller screens */
        .mobile-search {
            margin-top: 10px;
            padding: 0;
        }
        
        .mobile-search__input {
            padding: 6px 10px;
            font-size: 16px;
        }
        
        .mobile-search__voice-btn {
            width: 32px;
            height: 32px;
        }
        
        .mobile-search__voice-btn .material-icons {
            font-size: 28px;
        }
        
        /* Mobile nav close button for smaller screens */
        .mobile-nav__close {
            width: 36px;
            height: 36px;
            top: 12px;
            right: 12px;
        }
        
        .mobile-nav__close .material-icons {
            font-size: 18px;
        }
        
        .mobile-nav__content {
            padding-bottom: 16px; /* Remove extra bottom padding */
            min-height: calc(100vh - 40px); /* Ensure content fills viewport */
        }
        
        .mobile-nav__header {
            padding: 12px 0;
            margin-bottom: 16px;
            flex-wrap: nowrap;
        }
        
        .mobile-nav__logo {
            margin-right: auto;
        }
        
        .mobile-nav__actions {
            gap: 6px;
            flex-shrink: 0;
        }
        
        .mobile-nav__logout-btn {
            padding: 2px;
            width: 36px;
            height: 36px;
        }
        
        .mobile-nav__logout-btn .material-icons {
            font-size: 28px;
        }
        
        .mobile-nav__close {
            width: 36px;
            height: 36px;
            padding: 2px;
        }
        
        .mobile-nav__close .material-icons {
            font-size: 28px;
        }
        
        /* Mobile nav categories for smaller screens */
        .mobile-nav__categories {
            gap: 6px;
        }
        
        .mobile-nav__category {
            padding: 8px 10px;
            min-height: 48px;
        }
        
        .mobile-nav__category .material-icons {
            font-size: 18px;
            margin-bottom: 0;
        }
        
        .mobile-nav__category-name {
            font-size: 12px;
        }
        
        
        .mobile-bottom-nav__item {
            min-width: 0;
            height: 50px;
            padding: 6px 2px;
            margin: 0;
            flex: 1 !important;
        }
        
        .mobile-bottom-nav__item--primary {
            min-width: 0;
            height: 50px;
            margin: 0;
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .mobile-bottom-nav__item .material-icons {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .mobile-bottom-nav__item--primary .material-icons {
            width: 80px;
            height: 40px;
            font-size: 20px;
            margin-bottom: 1px;
            color: #ffffff;
        }
        
        .mobile-bottom-nav__label {
            font-size: 9px;
            max-width: 50px;
        }
        
        .mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
            font-size: 9px;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 1.2;
        }
        
        .mobile-bottom-nav__badge {
            top: 6px;
            right: 6px;
            font-size: 9px;
            padding: 1px 4px;
            min-width: 16px;
            height: 16px;
        }
    }
    
    /* Responsive adjustments for very small screens */
    @media (min-width: 321px) and (max-width: 360px) {
        /* Ensure proper grid layout for 321px-360px screens */
        .listings-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
            padding: 16px 0 !important;
            width: 100%;
            max-width: 100%;
            overflow: hidden !important;
            box-sizing: border-box !important;
            margin: 0 !important;
        }
        
        .item-card {
            width: 100%;
            max-width: 100%;
            min-width: 0 !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
        
        .item-card__image {
            width: 100%;
            max-width: 100%;
        }
        
        .item-card__content {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box !important;
        }
        .mobile-bottom-nav {
            height: 65px;
            padding: 4px 0;
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-evenly !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        /* Adjust scroll to top button for very small screens */
        .scroll-to-top {
            bottom: 85px !important; /* Above mobile bottom nav */
            right: 8px !important;
            width: 40px !important;
            height: 40px !important;
            z-index: 5000 !important; /* Higher than mobile-nav (1000) but lower than bottom-nav (9999) */
        }
        
        .scroll-to-top .material-icons {
            font-size: 20px !important;
        }
        
        /* Ultra compact search for very small screens */
        .mobile-search__input {
            padding: 4px 6px;
            font-size: 16px;
        }
        
        .mobile-search__voice-btn,
        .mobile-search__submit-btn {
            width: 24px;
            height: 24px;
        }
        
        .mobile-search__voice-btn .material-icons,
        .mobile-search__submit-btn .material-icons {
            font-size: 28px;
        }
    }
    
    /* iOS Safari specific fixes */
    @media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 320px) {
        .listings-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
            padding: 16px 0 !important;
            width: 100%;
            max-width: 100%;
            overflow: hidden !important;
            box-sizing: border-box !important;
            margin: 0 !important;
        }
        
        .item-card {
            width: 100%;
            max-width: 100%;
            min-width: 0 !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
        
        .mobile-sort-buttons {
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar {
            display: none !important;
        }
        
        .mobile-sort-btn {
            flex-shrink: 0 !important;
            display: inline-flex !important;
            min-width: 120px !important;
            width: 120px !important;
            font-size: 16px !important;
            gap: 8px !important;
            padding: 12px 16px !important;
        }
    }
    
    @media (min-width: 320px) and (max-width: 320px) {
        /* Specific styles for 320px screens */
        .listings-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
            padding: 16px 0 !important;
            width: 100%;
            max-width: 100%;
            overflow: hidden !important;
            box-sizing: border-box !important;
            margin: 0 !important;
        }
        
        .item-card {
            width: 100%;
            max-width: 100%;
            min-width: 0 !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            border-radius: 12px 12px 0px 0px !important;
        }
        
        .item-card__image {
            min-height: 176px !important;
            height: 176px !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .item-card--small .item-card__image {
            min-height: 156px !important;
            height: 156px !important;
        }
        
        /* Profile listings — stacked card, room for stats below photo */
        .profile-listings .item-card {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        
        .profile-listings .item-card__image {
            width: 100% !important;
            min-height: 188px !important;
            height: 188px !important;
        }
        
        .item-card__content {
            padding: 12px !important;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box !important;
        }
        
        .item-card__title {
            font-size: 14px !important;
            line-height: 1.4 !important;
            margin-bottom: 6px !important;
            font-weight: 500 !important;
        }
        
        .item-card__price {
            font-size: 16px !important;
            margin-bottom: 6px !important;
            font-weight: 700 !important;
            color: #059669 !important;
        }
        
        .item-card__meta {
            font-size: 12px !important;
            gap: 0px !important;
            margin-top: 4px !important;
            display: flex !important;
            align-items: center !important;
        }
        
        .item-card__location {
            font-size: 12px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        
        .item-card__time {
            font-size: 13px !important;
            color: #9ca3af !important;
        }
        
        .item-card__category {
            font-size: 12px !important;
            margin-top: 4px !important;
            color: #6b7280 !important;
        }
        
        .item-card__location .material-icons {
            font-size: 14px !important;
        }
        
        .mobile-sort-buttons {
            gap: 12px !important;
            padding: 0;
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            white-space: nowrap !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar {
            display: none !important;
        }
        
        .mobile-sort-btn {
            min-width: 120px !important;
            width: 120px !important;
            font-size: 16px !important;
            gap: 8px !important;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 8px 12px !important;
        }
        
        .mobile-sort-btn .material-icons {
            font-size: 18px !important;
        }
        
        .mobile-sort-btn span:not(.material-icons) {
            font-size: 12px !important;
        }
        
        /* Extra compact for smallest screens */
        .mobile-search {
            margin-right: 6px;
        }
        
        .mobile-search__input {
            padding: 2px 4px;
            font-size: 16px;
            flex: 1;
            min-width: 0;
        }
        
        .mobile-search__voice-btn {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        
        .mobile-search__voice-btn .material-icons {
            font-size: 28px;
        }
        
        .mobile-search__input-group {
            border-radius: 6px;
            gap: 2px;
            padding: 0 2px;
        }
        
        .mobile-menu-toggle {
            padding: 1px;
            min-width: 28px;
            width: 28px;
            height: 28px;
        }
        
        .mobile-menu-toggle .material-icons {
            font-size: 24px;
        }
        
        /* Ensure menu button is always visible */
        .mobile-menu-toggle {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        /* Ultra compact header for 320px */
        .mobile-header-row {
            gap: 4px;
            padding: 0 4px;
        }
        
        /* Ultra compact cards for 320px screens */
        .listings-grid {
            gap: 12px !important;
            padding: 16px 0 !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            contain: layout;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .item-card {
            min-width: 0 !important;
            max-width: 100%;
            border-radius: 12px 12px 0px 0px !important;
            contain: layout style;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        
        .item-card__image {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            min-height: 176px !important;
            height: 176px !important;
            flex-shrink: 0;
        }
        
        .item-card__content {
            padding: 12px 0px 0px 0px !important;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box !important;
        }
        
        .item-card__title {
            font-size: 14px !important;
            line-height: 1.4 !important;
            margin-bottom: 6px !important;
            font-weight: 500 !important;
        }
        
        .item-card__price {
            font-size: 16px !important;
            margin-bottom: 6px !important;
            font-weight: 700 !important;
            color: #059669 !important;
        }
        
        .item-card__meta {
            font-size: 12px !important;
            gap: 0px !important;
            margin-top: 4px !important;
            display: flex !important;
            align-items: center !important;
        }
        
        .item-card__location {
            font-size: 11px !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        
        .item-card__time {
            font-size: 13px !important;
            color: #9ca3af !important;
        }
        
        .item-card__category {
            font-size: 12px !important;
            margin-top: 4px !important;
            color: #6b7280 !important;
        }
        
        .item-card__location .material-icons {
            font-size: 14px !important;
        }
        
        /* Ultra compact sort buttons for 320px */
        .mobile-sort-buttons {
            gap: 12px !important;
            padding: 0;
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            white-space: nowrap !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar {
            display: none !important;
        }
        
        .mobile-sort-btn {
            min-width: 120px !important;
            width: 120px !important;
            font-size: 16px !important;
            gap: 8px !important;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 8px 12px !important;
        }
        
        .mobile-sort-btn .material-icons {
            font-size: 18px !important;
        }
        
        .mobile-sort-btn span:not(.material-icons) {
            font-size: 12px !important;
        }
        
        /* Reduce spacing between section titles and cards */
        .section-title {
            margin-bottom: 6px !important;
        }
        
        .section-header {
            margin-bottom: 6px !important;
        }
        
        .listings-grid {
            margin-top: 6px !important;
        }
        
        .items-scroll-container {
            margin-top: 6px !important;
        }
        
    }
    
    @media (max-width: 429px) {
        /* Narrow phones — stacked cards, slightly shorter photo than default */
        .item-card {
            min-width: 0;
            max-width: 100%;
            border-radius: 12px 12px 0px 0px !important;
            contain: layout style;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 0;
            max-height: none;
        }
        
        .item-card__image {
            width: 100%;
            min-width: 0;
            max-width: none;
            min-height: 184px;
            height: 184px;
            flex-shrink: 0;
        }
        
        .profile-listings .item-card {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        
        .profile-listings .item-card__image {
            width: 100% !important;
            min-height: 184px !important;
            height: 184px !important;
        }
        
        .item-card__content {
            padding: 6px 0px 0px 0px !important;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .item-card__title {
            font-size: 14px;
            line-height: 1.2;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .item-card__price {
            font-size: 13px;
            margin-bottom: 4px;
        }
        
        .item-card__meta {
            font-size: 9px;
            gap: 4px;
            margin-top: auto;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        
        .item-card__location {
            font-size: 12px;
            flex-shrink: 0;
        }
        
        .item-card__time {
            font-size: 12px;
            flex-shrink: 0;
        }
        
        .item-card__category {
            font-size: 9px;
            margin-top: 2px;
        }
        
        .item-card__location .material-icons {
            font-size: 10px;
        }
        
        .item-card--small {
            height: auto;
            min-height: 0;
            max-height: none;
        }
        
        .item-card--small .item-card__image {
            width: 100%;
            min-width: 0;
            max-width: none;
            min-height: 156px;
            height: 156px;
        }
        
        .profile-listings .item-card--small {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        
        .profile-listings .item-card--small .item-card__image {
            width: 100% !important;
            min-height: 172px !important;
            height: 172px !important;
        }
        
        .item-card--small .item-card__content {
            padding: 5px;
        }
        
        .item-card--small .item-card__title {
            font-size: 14px;
            margin-bottom: 3px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .item-card--small .item-card__price {
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        .item-card--small .item-card__meta {
            font-size: 8px;
            gap: 3px;
            margin-top: auto;
        }
        
        /* Reduce spacing between section titles and cards for small screens */
        .section-title {
            margin-bottom: 4px !important;
        }
        
        .section-header {
            margin-bottom: 4px !important;
        }
        
        .listings-grid {
            margin-top: 4px !important;
        }
        
        .items-scroll-container {
            margin-top: 4px !important;
        }
    }
    
    @media (max-width: 279px) {
        /* Ultra compact for very old devices */
        .mobile-search {
            margin-right: 4px;
        }
        
        .mobile-search__input {
            padding: 1px 3px;
            font-size: 16px;
            flex: 1;
            min-width: 0;
        }
        
        .mobile-search__voice-btn {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        
        .mobile-search__voice-btn .material-icons {
            font-size: 28px;
        }
        
        .mobile-search__input-group {
            border-radius: 4px;
            gap: 1px;
            padding: 0;
        }
        
        .mobile-menu-toggle {
            padding: 1px;
            min-width: 24px;
            width: 24px;
            height: 24px;
        }
        
        .mobile-menu-toggle .material-icons {
            font-size: 20px;
        }
        
        .mobile-header-row {
            gap: 2px;
            padding: 0 2px;
        }
        
        /* Very narrow legacy widths — two columns; compact photo height */
        .listings-grid {
            gap: 10px;
            padding: 10px 0;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            contain: layout;
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        
        .item-card {
            min-width: 0;
            max-width: 100%;
            border-radius: 12px 12px 0px 0px !important;
            contain: layout style;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 0;
            max-height: none;
        }
        
        .item-card__image {
            width: 100%;
            min-width: 0;
            max-width: none;
            min-height: 148px;
            height: 148px;
            flex-shrink: 0;
        }
        
        .item-card__content {
            padding: 4px;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .item-card__title {
            font-size: 14px;
            line-height: 1.1;
            margin-bottom: 3px;
        }
        
        .item-card__price {
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        .item-card__meta {
            font-size: 8px;
            gap: 1px;
            margin-top: 3px;
            display: flex;
            align-items: flex-start;
        }
        
        .item-card__location {
            font-size: 12px;
        }
        
        .item-card__time {
            font-size: 12px;
        }
        
        .item-card__category {
            font-size: 8px;
            margin-top: 1px;
        }
        
        .item-card__location .material-icons {
            font-size: 8px;
        }
        
        .item-card--small {
            min-width: 0;
            max-width: 100%;
            border-radius: var(--m3-corner-sm, 8px);
            contain: layout style;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 0;
            max-height: none;
        }
        
        .item-card--small .item-card__image {
            width: 100%;
            min-width: 0;
            max-width: none;
            min-height: 132px;
            height: 132px;
            flex-shrink: 0;
        }
        
        .item-card--small .item-card__content {
            padding: 4px 0px 0px 0px !important;;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .item-card--small .item-card__title {
            font-size: 14px;
            line-height: 1.1;
            margin-bottom: 3px;
        }
        
        .item-card--small .item-card__price {
            font-size: 12px;
            margin-bottom: 3px;
        }
        
        .item-card--small .item-card__meta {
            font-size: 8px;
            gap: 1px;
            margin-top: 3px;
            display: flex;
            align-items: flex-start;
        }
        
        /* Reduce spacing between section titles and cards for very small screens */
        .section-title {
            margin-bottom: 2px !important;
        }
        
        .section-header {
            margin-bottom: 2px !important;
        }
        
        .listings-grid {
            margin-top: 2px !important;
        }
        
        .items-scroll-container {
            margin-top: 2px !important;
        }
        
        /* Ultra compact sort buttons for 280px */
        .mobile-sort-buttons {
            gap: 4px;
            padding: 0;
            margin: 10px 0 12px 0;
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            white-space: nowrap !important;
        }
        
        .mobile-sort-btn {
            width: 70px;
            padding: 6px 8px;
            font-size: 11px;
            gap: 3px;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }
        
        .mobile-sort-btn .material-icons {
            font-size: 12px;
        }
        
        .mobile-sort-btn span:not(.material-icons) {
            font-size: 10px;
        }
        
        
        /* Mobile menu toggle for very small screens */
        .mobile-menu-toggle {
            padding: 2px;
            background: transparent;
            color: #4f46e5;
            border: none;
            width: 32px;
            height: 32px;
        }
        
        .mobile-menu-toggle__text {
            display: none;
        }
        
        .mobile-menu-toggle .material-icons {
            font-size: 26px;
            color: #4f46e5;
        }
        
        /* Mobile search for very small screens */
        .mobile-search {
            margin-top: 8px;
            padding: 0 8px;
        }
        
        .mobile-search__input {
            padding: 5px 8px;
            font-size: 16px;
        }
        
        .mobile-search__voice-btn {
            width: 28px;
            height: 28px;
        }
        
        .mobile-search__voice-btn .material-icons {
            font-size: 28px;
        }
        
        /* Mobile nav close button for very small screens */
        .mobile-nav__close {
            width: 32px;
            height: 32px;
            top: 10px;
            right: 10px;
        }
        
        .mobile-nav__close .material-icons {
            font-size: 16px;
        }
        
        .mobile-nav__content {
            padding-bottom: 12px; /* Remove extra bottom padding */
            min-height: calc(100vh - 40px); /* Ensure content fills viewport */
        }
        
        .mobile-nav__header {
            padding: 10px 0;
            margin-bottom: 12px;
            flex-wrap: nowrap;
        }
        
        .mobile-nav__logo {
            margin-right: auto;
        }
        
        .mobile-nav__actions {
            gap: 4px;
            flex-shrink: 0;
        }
        
        .mobile-nav__logout-btn {
            padding: 2px;
            width: 32px;
            height: 32px;
        }
        
        .mobile-nav__logout-btn .material-icons {
            font-size: 26px;
        }
        
        .mobile-nav__close {
            width: 32px;
            height: 32px;
            padding: 2px;
        }
        
        .mobile-nav__close .material-icons {
            font-size: 26px;
        }
        
        /* Mobile nav categories for very small screens */
        .mobile-nav__categories {
            gap: 4px;
        }
        
        .mobile-nav__category {
            padding: 6px 8px;
            min-height: 44px;
        }
        
        .mobile-nav__category .material-icons {
            font-size: 16px;
            margin-bottom: 0;
        }
        
        .mobile-nav__category-name {
            font-size: 11px;
        }
        
        
        .mobile-bottom-nav__item {
            min-width: 0;
            height: 45px;
            padding: 4px 2px;
            margin: 0;
            flex: 1 !important;
        }
        
        .mobile-bottom-nav__item--primary {
            min-width: 0;
            height: 45px;
            margin: 0;
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        .mobile-bottom-nav__item .material-icons {
            font-size: 18px;
            margin-bottom: 1px;
        }
        
        .mobile-bottom-nav__item--primary .material-icons {
            font-size: 18px;
            margin-bottom: 1px;
            color: #ffffff;
        }
        
        .mobile-bottom-nav__label {
            font-size: 8px;
            max-width: 45px;
        }
        
        .mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
            font-size: 8px;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 1.2;
        }
    }
}

/* ============================================
   TABLET SPECIFIC STYLES (769px - 1023px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1023px) {
    /* Ensure mobile styles don't break on tablets */
    .mobile-sort-buttons {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .listings-grid {
        contain: layout;
        overflow: hidden;
    }
    
    .item-card {
        contain: layout style;
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
    }
    
    .item-card__content {
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    
    .item-card__title {
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
}

/* ============================================
   MOBILE HEADER
   ============================================ */

    @media (max-width: 1023px) {
        .header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1000 !important;
            background: var(--m3-surface) !important;
            box-shadow: var(--m3-elevation-2) !important;
            border-bottom: 1px solid var(--m3-outline-variant) !important;
            padding: 0 !important;
            width: 100% !important;
            margin: 0 !important;
            will-change: transform !important;
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
            -webkit-transform: translateZ(0) !important;
            transform: translateZ(0) !important;
            -webkit-position: sticky !important;
        }
    
    /* Header container should be full width */
    .header .container {
        padding: 0 16px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }
    
    /* Ensure header stays on top during scroll */
    .header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--m3-surface);
        z-index: -1;
    }
    
    .header__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin: 0;
    }
    
    /* Desktop header content - horizontal layout */
    @media (min-width: 1024px) {
        .header__content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
    }
    
    /* Mobile header row for logo and categories */
    .mobile-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
        min-height: 44px;
    }
    
    /* Mobile search positioning */
    .mobile-search {
        flex: 1;
        margin-right: 8px;
        min-width: 0;
    }
    
    /* Mobile menu toggle button positioning */
    .mobile-menu-toggle {
        flex-shrink: 0;
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
    
    /* Ensure mobile header layout works properly */
    .header__logo {
        flex-shrink: 0;
        padding-left: 0;
    }
    
    /* Add right padding for mobile header actions */
    .mobile-header-actions {
        padding-right: 0;
    }
    
    /* Hide desktop messages button on mobile */
    .header-messages-btn {
        display: none !important;
    }
    
    .header__logo .logo {
        height: 32px;
    }
    
    /* Mobile menu toggle button styles */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        color: var(--m3-primary);
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 40px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: var(--m3-corner-lg);
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: rgba(79, 70, 229, 0.08);
        color: var(--m3-primary);
        transform: scale(1.02);
    }
    
    .mobile-menu-toggle__text {
        display: none;
    }
    
    .mobile-menu-toggle .material-icons {
        font-size: 32px;
        color: var(--m3-primary);
    }
    
    /* Mobile Filters Button */
    .mobile-filters {
        display: none;
        background: var(--m3-surface);
        border-bottom: 1px solid var(--m3-outline-variant);
        padding: 12px 16px;
        position: sticky;
        top: 65px;
        z-index: 999;
    }
    
    /* Show mobile filters only on mobile devices */
    @media (max-width: 1023px) {
        .mobile-filters.mobile-only {
            display: block;
        }
    }
    
    .mobile-filters__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px 16px;
        background: var(--m3-surface-variant);
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-lg);
        color: var(--m3-on-surface);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Final tree controls: the toggle and the navigation target are separate. */
    .mobile-nav__tree-node .mobile-nav__category {
        gap: 8px;
        padding: 6px 8px;
        min-height: 56px;
    }
    .mobile-nav__tree-node .mobile-nav__tree-toggle {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-md);
        background: var(--m3-primary-container);
        color: var(--m3-on-primary-container);
        font-size: 24px;
        line-height: 1;
        font-weight: 500;
        cursor: pointer;
    }
    .mobile-nav__tree-node .mobile-nav__tree-toggle:active { transform: scale(.94); }
    .mobile-nav__tree-node .mobile-nav__category-link {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-height: 44px;
        padding: 8px 10px;
        border-radius: var(--m3-corner-md);
        color: inherit;
        text-decoration: none;
    }
    .mobile-nav__tree-node .mobile-nav__category-link:hover,
    .mobile-nav__tree-node .mobile-nav__category-link:focus-visible {
        background: var(--m3-state-layer-hover);
        outline: 2px solid var(--m3-primary);
        outline-offset: 1px;
    }
    .mobile-nav__tree-node .mobile-nav__tree-children {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-left: 24px;
        padding-left: 12px;
        border-left: 1px solid var(--m3-outline-variant);
    }
    .mobile-nav__tree-node .mobile-nav__tree-children[hidden] { display: none !important; }
    .mobile-nav__tree-node .mobile-nav__tree-spacer {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .mobile-nav__tree-node { width: 100%; }
    .mobile-nav__category-link {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        color: inherit;
        text-decoration: none;
    }
    .mobile-nav__tree-toggle,
    .mobile-nav__tree-spacer {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        color: var(--m3-primary);
        font-size: 23px;
        line-height: 1;
        font-weight: 500;
    }
    .mobile-nav__tree-toggle { cursor: pointer; }
    .mobile-nav__tree-toggle:disabled { opacity: .55; cursor: wait; }
    .mobile-nav__tree-children {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-left: 28px;
        padding-left: 10px;
        border-left: 1px solid var(--m3-outline-variant);
    }
    .mobile-nav__tree-children[hidden] { display: none !important; }
    .mobile-nav__tree-node--leaf .mobile-nav__category { background: var(--m3-surface-variant); }
    
    .mobile-filters__toggle:hover,
    .mobile-filters__toggle:focus {
        background: #ded8e0;
        border-color: var(--m3-outline);
    }
    
    .mobile-filters__toggle.active {
        background: var(--m3-primary);
        border-color: var(--m3-primary);
        color: var(--m3-on-primary);
    }
    
    .mobile-filters__toggle .material-icons {
        font-size: 20px;
        color: inherit;
    }
    
    .mobile-filters__text {
        flex: 1;
        text-align: left;
        margin-left: 8px;
    }
    
    .mobile-filters__arrow {
        transition: transform 0.2s ease;
    }
    
    .mobile-filters__toggle.active .mobile-filters__arrow {
        transform: rotate(180deg);
    }
    
    /* Mobile Filters Dropdown */
    .mobile-filters-dropdown {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .mobile-filters-dropdown.active {
        display: block !important;
        visibility: visible;
        opacity: 1;
    }
    
    .mobile-filters-dropdown__content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--m3-surface);
        border-radius: 0 0 var(--m3-corner-lg) var(--m3-corner-lg);
        box-shadow: var(--m3-elevation-3);
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .mobile-filters-dropdown__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid var(--m3-outline-variant);
        background: var(--m3-surface-variant);
        border-radius: var(--m3-corner-lg) var(--m3-corner-lg) 0 0;
    }
    
    .mobile-filters-dropdown__title {
        font-size: 18px;
        font-weight: 600;
        color: var(--m3-on-surface);
        margin: 0;
    }
    
    .mobile-filters-dropdown__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        border-radius: var(--m3-corner-sm);
        color: var(--m3-on-surface-variant);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .mobile-filters-dropdown__close:hover,
    .mobile-filters-dropdown__close:focus {
        background: rgba(121, 116, 126, 0.12);
        color: var(--m3-on-surface);
    }
    
    .mobile-filters-dropdown__close .material-icons {
        font-size: 20px;
    }
    
    .mobile-filters-dropdown__body {
        padding: 20px;
    }
    
    .mobile-filters-dropdown__section {
        margin-bottom: 24px;
    }
    
    .mobile-filters-dropdown__section:last-child {
        margin-bottom: 0;
    }
    
    .mobile-filters-dropdown__section-title {
        font-size: 16px;
        font-weight: 600;
        color: #374151;
        margin: 0 0 12px 0;
    }
    
    .mobile-filters-dropdown__filters {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-filters-dropdown__input-row {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    
    .mobile-filters-dropdown__input-group {
        flex: 1;
    }
    
    .mobile-filters-dropdown__price-input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        background: #ffffff;
        color: #374151;
        transition: all 0.2s ease;
    }
    
    .mobile-filters-dropdown__price-input:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    
    .mobile-filters-dropdown__price-input::placeholder {
        color: #9ca3af;
    }
    
    .mobile-filters-dropdown__select-container {
        width: 100%;
    }
    
    .mobile-filters-dropdown__select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        background: #ffffff;
        color: #374151;
        transition: all 0.2s ease;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }
    
    .mobile-filters-dropdown__select:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    
    .mobile-filters-dropdown__select option {
        padding: 8px 12px;
        color: #374151;
    }
    
    .mobile-filters-dropdown__filter-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .mobile-filters-dropdown__filter-item:hover {
        background: #f3f4f6;
        border-color: #d1d5db;
    }
    
    .mobile-filters-dropdown__filter-item.active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: #ffffff;
    }
    
    .mobile-filters-dropdown__filter-checkbox {
        margin-right: 12px;
    }
    
    .mobile-filters-dropdown__filter-label {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
    }
    
    .mobile-filters-dropdown__footer {
        display: flex;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 0 0 16px 16px;
    }
    
    .mobile-filters-dropdown__clear,
    .mobile-filters-dropdown__apply {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        flex: 1;
    }
    
    .mobile-filters-dropdown__clear {
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    
    .mobile-filters-dropdown__clear:hover {
        background: #e5e7eb;
    }
    
    .mobile-filters-dropdown__apply {
        background: #4f46e5;
        color: #ffffff;
    }
    
    .mobile-filters-dropdown__apply:hover {
        background: #4338ca;
    }
    
        .mobile-filters-dropdown__clear .material-icons,
        .mobile-filters-dropdown__apply .material-icons {
            font-size: 18px;
        }
        
        .mobile-filters-dropdown__input-row {
            gap: 8px;
        }
        
        .mobile-filters-dropdown__price-input {
            padding: 10px 12px;
            font-size: 13px;
        }
        
        .mobile-filters-dropdown__select {
            padding: 10px 12px;
            font-size: 13px;
            padding-right: 36px;
        }
    
    /* Mobile Sort Buttons */
    .mobile-sort-buttons {
        display: flex !important;
        margin: 16px 0 20px 0;
        gap: 12px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* iOS smooth scrolling */
        scroll-behavior: smooth !important; /* Smooth scrolling */
        scroll-snap-type: x mandatory !important; /* Snap to buttons */
        scroll-padding: 0 16px !important; /* Padding for snap points */
        padding: 0;
        width: 100%;
        max-width: 100%;
        white-space: nowrap !important; /* Prevent wrapping */
        position: relative;
        flex-wrap: nowrap !important;
        min-width: 100%;
        scrollbar-width: none !important; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none !important; /* Hide scrollbar for IE and Edge */
        flex-shrink: 0 !important; /* Prevent container from shrinking */
    }
    
    /* Hide scrollbar completely */
    .mobile-sort-buttons::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome, Safari, Opera */
    }
    
    .mobile-sort-buttons::-webkit-scrollbar-track {
        display: none;
    }
    
    .mobile-sort-buttons::-webkit-scrollbar-thumb {
        display: none;
    }
    
    .mobile-sort-buttons::-webkit-scrollbar-thumb:hover {
        display: none;
    }
    
    /* Firefox scrollbar styling - hide */
    .mobile-sort-buttons {
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    }
    
    .mobile-sort-btn {
        display: inline-flex !important; /* Change to inline-flex for proper scrolling */
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 0 0 auto !important; /* Prevent shrinking */
        min-width: 120px !important; /* Make buttons wider */
        width: 120px !important; /* Fixed width for consistency */
        padding: 12px 20px; /* Increased padding */
        background: var(--m3-surface-variant);
        border: 1px solid transparent;
        border-radius: var(--m3-corner-pill);
        color: var(--m3-on-surface-variant);
        font-size: 14px; /* Slightly larger font */
        font-weight: 500;
        scroll-snap-align: start !important; /* Snap alignment */
        scroll-margin: 0 8px !important; /* Margin for snap points */
        white-space: nowrap !important; /* Prevent text wrapping */
        flex-shrink: 0 !important; /* Prevent button from shrinking */
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-x; /* Allow horizontal panning */
    }
    
    .mobile-sort-btn:hover {
        background: #ded8e0;
        border-color: var(--m3-outline-variant);
        color: var(--m3-on-surface);
    }
    
    .mobile-sort-btn--active {
        background: var(--m3-primary-container);
        border-color: transparent;
        color: var(--m3-on-primary-container);
        border-radius: var(--m3-corner-pill);
        box-shadow: var(--m3-elevation-1);
    }
    
    .mobile-sort-btn .material-icons {
        font-size: 16px;
        color: inherit;
    }
    
    .mobile-sort-btn span:not(.material-icons) {
        white-space: nowrap;
    }
    
    /* Enhanced touch scrolling for mobile sort buttons */
    .mobile-sort-buttons {
        scroll-snap-type: x mandatory !important; /* Snap to buttons */
        scroll-padding: 0 16px !important; /* Padding for snap points */
        scrollbar-width: thin !important;
        scrollbar-color: #cbd5e1 #f1f5f9 !important;
    }
    
    .mobile-sort-btn {
        scroll-snap-align: start; /* Snap alignment */
        scroll-margin: 0 8px; /* Margin for snap points */
    }
    
    /* Mobile Sort Section */
    .mobile-sort-section {
        margin: 20px 0;
        padding: 0;
    }
    
    /* Mobile sort container - natural overflow */
    .mobile-sort-container {
        position: relative;
        width: 100%;
        overflow: hidden; /* Hide overflow to show only 2.5 buttons */
        /* Show 2 full buttons + half of 3rd button */
        max-width: calc(2 * 120px + 1 * 12px + 60px); /* 2 full buttons + gap + half button */
    }
    
    
    
    /* Touch feedback for mobile */
    .mobile-sort-btn:active {
        transform: scale(0.98);
        background: rgba(121, 116, 126, 0.2);
    }
    
    /* Additional mobile card fixes */
    .item-card__link {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        box-sizing: border-box;
    }
    
    .item-card__meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        color: #6b7280;
        margin-top: 8px;
        overflow: hidden;
    }
    
    .item-card__location {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #6b7280;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .item-card__time {
        font-size: 13px;
        color: #9ca3af;
    }
    
    .item-card__category {
        font-size: 11px;
        color: #6b7280;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Ensure proper scrolling on mobile */
    @media (max-width: 1023px) {
        .mobile-sort-buttons {
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important; /* Hide scrollbar for Firefox */
            -ms-overflow-style: none !important; /* Hide scrollbar for IE and Edge */
        }
        
        .mobile-sort-buttons::-webkit-scrollbar {
            display: none !important; /* Hide scrollbar for Chrome, Safari, Opera */
        }
        
        .mobile-sort-buttons::-webkit-scrollbar-track {
            display: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar-thumb {
            display: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar-thumb:hover {
            display: none !important;
        }
        
        .mobile-sort-btn {
            flex-shrink: 0 !important;
            display: inline-flex !important;
        }
    }
    
    /* Mobile Search Styles */
    .mobile-search {
        flex: 1;
        margin-right: 12px;
        padding: 0;
    }
    
    .mobile-search__form {
        width: 100%;
    }
    
    .mobile-search__input-group {
        position: relative;
        display: flex;
        align-items: center;
        background: #ece6f0;
        border: 1px solid transparent;
        border-radius: var(--m3-corner-pill);
        overflow: hidden;
        width: 100%;
        gap: 4px;
        padding: 0 4px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .mobile-search__input {
        flex: 1;
        padding: 8px 12px;
        border: none;
        background: transparent !important;
        font-size: 16px;
        color: var(--m3-on-surface);
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }
    
    .mobile-search__input::placeholder {
        color: var(--m3-on-surface-variant);
    }
    
    .mobile-search__voice-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-search__voice-btn:hover,
    .mobile-search__voice-btn:focus {
        background: rgba(121, 116, 126, 0.12);
        color: var(--m3-on-surface);
    }
    
    .mobile-search__voice-btn .material-icons {
        font-size: 28px;
    }
    
    .mobile-search__voice-btn.active {
        background: var(--m3-error);
        color: #ffffff;
    }
    
    /* Remove all focus effects from mobile search elements */
    .mobile-search__input:focus,
    .mobile-search__input:active,
    .mobile-search__input:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-search__input-group:focus,
    .mobile-search__input-group:active,
    .mobile-search__input-group:focus-within,
    .mobile-search__input-group:focus-visible {
        outline: none !important;
        border-color: transparent !important;
        box-shadow: inset 0 0 0 2px var(--m3-primary) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-search__voice-btn:focus,
    .mobile-search__voice-btn:active,
    .mobile-search__voice-btn:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-search__form:focus,
    .mobile-search__form:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Remove focus from mobile search container */
    .mobile-search:focus,
    .mobile-search:focus-within {
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Mobile menu toggle button - Only on mobile */
    .mobile-menu-toggle {
        display: flex !important;
        -webkit-display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px;
        background: transparent;
        color: #4f46e5;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: all 0.2s ease;
        order: 3;
        flex-shrink: 0;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .mobile-menu-toggle:hover {
        background: transparent;
        color: #4f46e5;
        transform: scale(1.1);
    }
    
    /* Mobile notification badge */
    .mobile-notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: #ef4444;
        color: white;
        font-size: 10px;
        font-weight: 600;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
    }
    
    /* Responsive mobile header actions */
    @media (max-width: 480px) {
        /* Recently viewed — match stacked listing cards */
        .recently-viewed .slider-item .item-card {
            height: auto;
        }

        .recently-viewed .slider-item .item-card__image {
            width: 100%;
            min-width: 0;
            max-width: none;
            min-height: 168px;
            height: 168px;
        }

        .recently-viewed .slider-item .item-card__content {
            padding: 12px 0px 0px 0px !important;
        }

        .recently-viewed .slider-item .item-card__title {
            font-size: 14px;
            line-height: 1.35;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .recently-viewed .slider-item .item-card__price {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .recently-viewed .slider-item .item-card__meta {
            font-size: 11px;
            gap: 4px;
            margin-top: 0;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .recently-viewed .slider-item .item-card__time {
            font-size: 12px;
            flex-shrink: 0;
        }

        .mobile-header-actions {
            gap: 6px;
            justify-content: flex-end;
            padding-right: 0;
            margin-left: auto !important;
            right: 0;
        }
              
        .header__logo {
            padding-left: 0;
        }
        
        .mobile-notification-badge {
            min-width: 14px;
            height: 14px;
            font-size: 9px;
            border-radius: 7px;
        }
    }
    
    /* Ensure proper spacing on very small screens */
    @media (min-width: 321px) and (max-width: 360px) {
        .mobile-header-actions {
            gap: 4px;
        }
        
        /* Extra small screens - ensure cards fit */
        .listings-grid {
            gap: 8px;
            padding: 12px 0;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            contain: layout;
            overflow: hidden;
        }
        
        .item-card {
            min-width: 0;
            max-width: 100%;
            contain: layout style;
            overflow: hidden;
        }
        
        .item-card__content {
            padding: 8px 0px 0px 0px !important;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
        
        .item-card__title {
            font-size: 14px;
            line-height: 1.3;
            word-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
        }
        
        .item-card__price {
            font-size: 14px;
        }
        
        .item-card__meta {
            font-size: 10px;
        }
        
        .item-card__location {
            font-size: 12px;
        }
        
        .item-card__time {
            font-size: 12px;
        }
        
        .item-card__category {
            font-size: 12px;
        }
    }
    
    /* Desktop search is now hidden via HTML classes */
    
    .search-input-group {
        position: relative;
    }
    
    .search-input {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 20px;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    
    .search-btn {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #4f46e5;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .search-btn .material-icons {
        color: white;
        font-size: 18px;
    }
    
    /* Desktop buttons are now hidden via HTML classes */
    
    .header-action-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f3f4f6;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
    }
    
    .header-action-btn .material-icons {
        font-size: 20px;
        color: #6b7280;
    }
    
    .header-action-btn:hover {
        background: #e5e7eb;
    }
    
    .notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: #ef4444;
        color: white;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile create button — M3 filled */
    .btn--create-ad {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        z-index: 0;
        background: #ef4444;
        color: var(--m3-on-primary);
        border: none;
        padding: 8px 16px;
        border-radius: var(--m3-corner-pill);
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
        box-shadow: var(--m3-elevation-1);
    }

    /* Keep the animated highlight clipped to the mobile button itself. */
    .btn--create-ad::before {
        top: -20%;
        left: -28%;
        width: 24%;
        height: 140%;
        transform: skewX(-24deg) translateX(0);
    }
    
    .btn--create-ad .material-icons {
        font-size: 18px;
    }
    
    .btn--create-ad:hover {
        transform: translateY(-1px);
        box-shadow: var(--m3-elevation-2);
        background: #ff7878;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 1023px) {
    /* Mobile menu toggle styles are defined above */
    
    /* Mobile Navigation - Only on mobile */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--m3-surface);
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        display: none !important;
        box-sizing: border-box;
        max-width: 100vw;
    }
    
    .mobile-nav.active {
        transform: translateX(0);
    }
    
    /* Lock body scroll when mobile nav is open */
    body.scroll-locked {
        overflow: hidden !important;
        position: fixed !important;
        width: 100%;
        height: 100% !important;
    }
    
    .mobile-nav__content {
        position: relative; /* For absolute positioning of close button */
        padding: 20px 16px;
    }
    
    .mobile-nav__close {
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        color: #4f46e5;
        padding: 4px;
        transition: all 0.2s ease;
    }
    
    .mobile-nav__close .material-icons {
        font-size: 42px;
        color: #ef4444;
    }
    
    .mobile-nav__close:hover,
    .mobile-nav__close:focus {
        background: #f3f4f6;
        color: #4f46e5;
        transform: scale(1.1);
    }
    
    .mobile-nav__logout {
        margin: 0;
    }
    
    .mobile-nav__logout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        background: transparent;
        border: none;
        border-radius: 0;
        color: #4f46e5;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
    
    .mobile-nav__logout-btn:hover,
    .mobile-nav__logout-btn:focus {
        background: #f3f4f6;
        color: #4f46e5;
        transform: scale(1.1);
    }
    
    .mobile-nav__logout-btn .material-icons {
        font-size: 32px;
        color: inherit;
    }
    
    .mobile-nav__content {
        position: relative;
        padding: 20px 16px;
        padding-bottom: 20px;
        min-height: calc(100vh - 40px);
        display: flex;
        flex-direction: column;
        height: calc(100vh - 40px);
        width: 100%;
        box-sizing: border-box;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .mobile-nav__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 0px 12px 0px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e5e7eb;
        flex-wrap: nowrap;
    }
    
    .mobile-nav__logo {
        flex-shrink: 0;
        margin-right: auto;
    }
    
    .mobile-nav__logo .logo {
        height: 32px;
    }
    
    .mobile-nav__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-direction: row;
        flex-shrink: 0;
    }
    
    .mobile-nav__logout {
        margin: 0;
    }
    
    .mobile-nav__section {
        margin-bottom: 32px;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Admin section must NOT grow — only wraps its button */
    .mobile-nav__section--admin {
        flex: 0 0 auto;
        margin-bottom: 12px;
    }
    
    .mobile-nav__admin-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            min-height: 44px;
            margin: 0 0 12px;
            padding: 10px 16px;
            box-sizing: border-box;
            border-radius: 50px;
            background: #4f46e5;
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            text-decoration: none;
    }
    
    .mobile-nav__admin-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(103, 80, 164, 0.4);
    }
    
    .mobile-nav__admin-link .material-icons {
        color: white;
    }
    
    .mobile-nav__title {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--m3-on-surface);
        margin: 0 0 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--m3-outline-variant);
    }
    
    /* M3 — burger drawer: categories list (single column, adaptive scroll) */
    .mobile-nav__categories {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 100px;
        scrollbar-width: thin;
        scrollbar-color: var(--m3-outline-variant) var(--m3-surface-variant);
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav__categories:not(.active) {
        display: none !important;
    }

    .mobile-nav__categories.active {
        display: flex !important;
    }
    
    .mobile-nav__categories::-webkit-scrollbar {
        width: 6px;
    }
    
    .mobile-nav__categories::-webkit-scrollbar-track {
        background: var(--m3-surface-variant);
        border-radius: var(--m3-corner-pill);
    }
    
    .mobile-nav__categories::-webkit-scrollbar-thumb {
        background: var(--m3-outline-variant);
        border-radius: var(--m3-corner-pill);
    }
    
    .mobile-nav__categories::-webkit-scrollbar-thumb:hover {
        background: var(--m3-outline);
    }

    @keyframes mobile-nav-category-marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(var(--marquee-shift, 0px));
        }
    }
    
    .mobile-nav__category {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        min-height: 52px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-decoration: none;
        color: var(--m3-on-surface);
        background-color: var(--m3-surface);
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-lg);
        box-shadow: none;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-nav__category:hover {
        border-color: var(--m3-outline);
        background-color: var(--m3-surface-variant);
        color: var(--m3-on-surface);
    }

    .mobile-nav__category:focus {
        outline: none;
    }

    .mobile-nav__category:focus-visible {
        outline: 2px solid var(--m3-primary);
        outline-offset: 2px;
    }
    
    .mobile-nav__category .material-icons {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        font-size: 22px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--m3-primary);
    }

    .mobile-nav__category-name-wrap {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }
    
    .mobile-nav__category-name {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: 0.01em;
        color: var(--m3-on-surface);
        white-space: nowrap;
        display: inline-block;
    }

    .mobile-nav__category--marquee .mobile-nav__category-name {
        animation: mobile-nav-category-marquee var(--marquee-duration, 10s) ease-in-out infinite alternate;
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-nav__category--marquee .mobile-nav__category-name {
            animation: none !important;
        }
    }
    
    
    .mobile-nav__actions {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }
    
    
    /* Desktop elements are now hidden via HTML classes */
    
    .categories-dropdown__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #f3f4f6;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
    }
    
    .categories-dropdown__toggle .material-icons {
        font-size: 18px;
    }
    
    .categories-dropdown__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        max-height: 70vh;
        overflow-y: auto;
        margin-top: 8px;
    }
    
    .categories-mega-menu {
        display: block;
        padding: 16px;
    }
    
    .categories-mega-menu__left {
        display: none;
    }
    
    .categories-mega-menu__right {
        width: 100%;
    }
    
    .categories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .category-card {
        padding: 12px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        text-align: center;
        transition: all 0.2s ease;
    }
    
    .category-card:hover {
        border-color: #4f46e5;
        background: #f8faff;
    }
    
    .category-card__icon {
        width: 40px;
        height: 40px;
        margin: 0 auto 8px;
        background: #f3f4f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-card__icon .material-icons {
        font-size: 20px;
        color: #6b7280;
    }
    
    .category-card__title {
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 4px;
    }
    
    .category-card__count {
        font-size: 11px;
        color: #9ca3af;
    }
}

/* ============================================
   MOBILE HERO SECTION
   ============================================ */

@media (max-width: 1023px) {
    .categories-hero {
        padding: 24px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }
    
    .categories-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.3;
    }
    
    .floating-shapes {
        display: none; /* Hide on mobile for performance */
    }
    
    .categories-grid-hero {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        position: relative;
        z-index: 1;
    }
    
    .category-card-hero {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .category-card-hero:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
    }
    
    .category-card-hero__icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 12px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .category-card-hero__icon .material-icons {
        font-size: 24px;
        color: white;
    }
    
    .category-card-hero__title {
        font-size: 14px;
        font-weight: 600;
        color: white;
        margin-bottom: 4px;
    }
    
    .category-card-hero__count {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    }
}

/* ============================================
   MOBILE LISTINGS GRID
   ============================================ */

@media (max-width: 1023px) {
    .listings-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        padding: 16px 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0;
        contain: layout;
        /* Ensure responsive behavior */
        min-width: 0;
        flex-shrink: 0;
    }
    
    .listings-grid .item-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    
    
    /* Restore original mobile styles for all other items-scroll blocks */
    .items-scroll {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        overflow-x: hidden;
        overflow-y: visible;
        scroll-behavior: auto;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: none;
        cursor: default;
        user-select: auto;
    }
    
    .items-scroll-container {
        overflow: visible;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .items-scroll-container::before,
    .items-scroll-container::after {
        display: none !important;
    }
    
    .items-scroll-nav {
        display: none !important;
    }
    
    .items-scroll .item-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    
    /* Responsive adjustments for recently viewed */
    @media (max-width: 480px) {
        .recently-viewed .items-scroll .item-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
        }
        
        .recently-viewed .items-scroll-container {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .recently-viewed .items-scroll-nav {
            width: 36px;
            height: 36px;
        }
        
        .recently-viewed .items-scroll-nav--prev {
            left: 6px;
        }
        
        .recently-viewed .items-scroll-nav--next {
            right: 6px;
        }
    }
    
    @media (max-width: 360px) {
        .recently-viewed .items-scroll .item-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
        }
        
        .recently-viewed .items-scroll-container {
            margin: 0 !important;
            padding: 0 !important;
        }
    }
    
    @media (max-width: 280px) {
        .recently-viewed .items-scroll .item-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
        }
        
        .recently-viewed .items-scroll-container {
            margin: 0 !important;
            padding: 0 !important;
        }
    }
    
    /* ============================================
       RECENTLY VIEWED - MOBILE HORIZONTAL SCROLL
       ============================================ */
    
    /* Override general styles specifically for recently viewed section */
    .recently-viewed .items-scroll {
        display: flex !important;
        gap: 12px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-behavior: smooth;
        padding: 8px 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        cursor: grab;
        user-select: none;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        contain: layout;
    }
    
    .recently-viewed .items-scroll:active {
        cursor: grabbing;
    }
    
    .recently-viewed .items-scroll-container {
        position: relative !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        contain: layout;
    }
    
    .recently-viewed .items-scroll-container::before,
    .recently-viewed .items-scroll-container::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        z-index: 1;
        pointer-events: none;
    }
    
    .recently-viewed .items-scroll-container::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    
    .recently-viewed .items-scroll-container::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    
    .recently-viewed .items-scroll-container.scrolled-to-end::after {
        opacity: 0;
    }
    
    .recently-viewed .items-scroll-container.scrolled-to-start::before {
        opacity: 0;
    }
    
    .recently-viewed .items-scroll-nav {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.95);
        border: 2px solid #4f46e5;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 2;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }
    
    .recently-viewed .items-scroll-nav:hover {
        background: #4f46e5;
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
        transform: translateY(-50%) scale(1.05);
    }
    
    .recently-viewed .items-scroll-nav--prev {
        left: 8px;
    }
    
    .recently-viewed .items-scroll-nav--next {
        right: 8px;
    }
    
    .recently-viewed .items-scroll-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.5);
        border-color: #d1d5db;
        color: #9ca3af;
    }
    
    .recently-viewed .items-scroll-nav:disabled:hover {
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.5);
        color: #9ca3af;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    }
    
    .recently-viewed .items-scroll .item-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box;
        scroll-snap-align: start;
    }
    
    /* Ensure recently viewed section doesn't affect other sections */
    .recently-viewed {
        margin-bottom: 24px;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        contain: layout;
    }
    
    .recently-viewed .section-title {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 600;
        color: #111827;
    }
    
    /* Hide scrollbar for recently viewed */
    .recently-viewed .items-scroll::-webkit-scrollbar {
        display: none;
    }
    
    .recently-viewed .items-scroll::-webkit-scrollbar-track {
        display: none;
    }
    
    .recently-viewed .items-scroll::-webkit-scrollbar-thumb {
        display: none;
    }
    
    /* Prevent recently viewed from affecting parent container width */
    .recently-viewed {
        isolation: isolate;
        position: relative;
        z-index: 1;
    }
    
    .recently-viewed * {
        box-sizing: border-box;
    }
    
    /* Ensure main-content maintains its width */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Hide desktop slider on mobile */
    /* Mobile styles for recently viewed slider */
    .recently-viewed-slider {
        display: block !important;
    }

    .recently-viewed .slider-container {
        width: 100%;
        overflow: visible;
    }

    /* Native horizontal scroll — two cards per viewport; no transform carousel */
    .recently-viewed .slider-wrapper {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
        overscroll-behavior-x: contain;
        container-type: inline-size;
        container-name: rvstrip;
    }

    .recently-viewed .slider-wrapper {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .recently-viewed .slider-wrapper::-webkit-scrollbar {
        display: none;
    }

    .recently-viewed .slider-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--hapai-mobile-listings-gap, 5px);
        width: max-content;
        min-width: 100%;
        transform: none !important;
        transition: none !important;
        cursor: default;
    }

    .recently-viewed .slider-item {
        flex: 0 0 auto;
        min-width: 0;
        width: calc((100cqi - var(--hapai-mobile-listings-gap, 5px)) / 2);
        max-width: calc((100cqi - var(--hapai-mobile-listings-gap, 5px)) / 2);
    }

    @supports not (width: 1cqi) {
        .recently-viewed .slider-item {
            width: calc((100vw - 2 * var(--hapai-mobile-listing-gutter-inline, 8px) - var(--hapai-mobile-listings-gap, 5px)) / 2);
            max-width: calc((100vw - 2 * var(--hapai-mobile-listing-gutter-inline, 8px) - var(--hapai-mobile-listings-gap, 5px)) / 2);
        }
    }

    .recently-viewed .slider-item .item-card {
        position: relative;
        background: var(--m3-surface, #fffbfe);
        border: 0px solid var(--m3-outline-variant, #cac4d0);
        border-radius: 12px 12px 0px 0px !important;
        overflow: hidden;
        transition: border-color 0.2s ease;
        display: flex;
        flex-direction: column;
        height: auto;
        min-width: 0;
        max-width: 100%;
        contain: layout style;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        box-shadow: none;
    }

    .recently-viewed .slider-item .item-card:hover {
        border-color: var(--m3-outline, #79747e);
    }

    .recently-viewed .slider-item .item-card:active,
    .recently-viewed .slider-item .item-card:focus {
        transform: none !important;
        box-shadow: none !important;
    }

    .recently-viewed .slider-item .item-card__link {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        min-height: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .recently-viewed .slider-item .item-card__link:active,
    .recently-viewed .slider-item .item-card__link:focus {
        transform: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .recently-viewed .slider-item .item-card:hover .item-card__title {
        color: #4f46e5;
    }

    .recently-viewed .slider-item .item-card__image {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 176px;
        height: 176px;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .recently-viewed .slider-item .item-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease, opacity 0.3s ease;
    }

    .recently-viewed .slider-item .item-card__image img.lazy {
        opacity: 0.7;
        filter: blur(2px);
    }

    .recently-viewed .slider-item .item-card__image img.loaded {
        opacity: 1;
        filter: none;
    }

    .recently-viewed .slider-item .item-card:hover .item-card__image img {
        transform: none;
        border-radius: 18px !important;
    }

    .recently-viewed .slider-item .no-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #9ca3af;
        background: #f9fafb;
    }

    .recently-viewed .slider-item .item-card__badge {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }

    .recently-viewed .slider-item .item-card__badge--featured {
        background: #fbbf24;
        color: #92400e;
    }
    
    .recently-viewed .slider-item .item-card__badge--company {
        background: #4f46e5;
        color: #ffffff;
        top: 6px;
        left: 6px;
        padding: 2px 6px;
        font-size: 9px;
        border-radius: 8px;
    }

    .recently-viewed .slider-item .item-card__content {
        padding: 12px 0px 0px 0px !important;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0px;
        box-sizing: border-box;
    }

    .recently-viewed .slider-item .item-card__title {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 6px;
        font-weight: 500;
        color: #111827;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .recently-viewed .slider-item .item-card__price {
        font-size: 16px;
        margin-bottom: 6px;
        font-weight: 700;
        color: #059669;
    }

    .recently-viewed .slider-item .item-card__meta {
        font-size: 12px;
        gap: 8px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        color: #6b7280;
    }

    .recently-viewed .slider-item .item-card__time {
        font-size: 12px;
        color: #9ca3af;
    }

    /* Manual prev/next — M3 standard icon buttons (tonal, on header row) */
    .recently-viewed .slider-nav-container {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-shrink: 0;
        padding: 4px;
        border-radius: var(--m3-corner-pill);
        background: transparent;
    }

    .recently-viewed .slider-nav {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: var(--m3-corner-pill);
        background-color: var(--m3-primary-container);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            background-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.12s ease,
            opacity 0.2s ease;
    }

    .recently-viewed .slider-nav::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        opacity: 0;
        transition: opacity 0.2s ease;
        background-color: var(--m3-state-layer-hover);
        pointer-events: none;
    }

    .recently-viewed .slider-nav:hover:not(:disabled)::after {
        opacity: 1;
    }

    .recently-viewed .slider-nav:active:not(:disabled) {
        transform: scale(0.96);
        box-shadow: var(--m3-elevation-0);
    }

    .recently-viewed .slider-nav:active:not(:disabled)::after {
        background-color: var(--m3-state-layer-press);
        opacity: 1;
    }

    .recently-viewed .slider-nav:focus {
        outline: none;
    }

    .recently-viewed .slider-nav:focus-visible {
        outline: 2px solid var(--m3-primary);
        outline-offset: 2px;
    }

    .recently-viewed .slider-nav:disabled {
        opacity: 0.38;
        cursor: not-allowed;
        box-shadow: var(--m3-elevation-0);
        background-color: var(--m3-surface-variant);
        color: var(--m3-on-surface-variant);
    }

    .recently-viewed .slider-nav .material-icons {
        position: relative;
        z-index: 1;
        font-size: 24px;
    }

    /* Hide desktop filters on mobile for category pages */
    .category-page .category-sidebar {
        display: none !important;
    }
    
    .category-page .category-content {
        display: block !important;
    }
    
    .category-page .category-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Reduce spacing on category pages for mobile */
    .category-page .container {
        padding: 0 8px !important;
    }
    
    .category-page .category-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .category-page .breadcrumbs {
        margin-bottom: 8px !important;
        padding: 4px 0 !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    
    .category-page .breadcrumbs .breadcrumb-link {
        font-size: 12px !important;
        padding: 2px 10px !important;
        border-radius: 50px !important;
        background: #f1f3f5 !important;
        color: #4b5563 !important;
        max-width: 180px !important;
        min-width: 0 !important;
    }
    
    .category-page .breadcrumbs .breadcrumb-current {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 50px !important;
        background: #f1f3f5 !important;
        color: #4b5563 !important;
        max-width: 220px !important;
        min-width: 0 !important;
    }
    
    .category-page .breadcrumbs .material-icons {
        font-size: 14px !important;
        margin: 0 2px !important;
    }
    
    .category-page .subcategories-section {
        margin-bottom: 8px !important;
        padding: 0 !important;
        overflow: visible;
    }
    
    .category-page .category-items {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .category-page .section-header {
        margin-bottom: 8px !important;
        padding: 0 !important;
    }
    
    .category-page .section-title {
        margin-bottom: 4px !important;
        font-size: 16px !important;
    }
    
    .category-page .items-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 16px 0 !important;

width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        contain: layout !important;
        /* Ensure responsive behavior */
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .category-page .items-grid .item-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    
    .category-page .pagination {
        margin-top: 16px !important;
        /* padding: 8px 0 !important; */
    }
    
    /* Category page cards use same styles as main page listings-grid */
    .category-page .item-card {
        margin-bottom: 0 !important;
    }
    
    /* ============================================
       SEARCH PAGE - MOBILE STYLES
       ============================================ */
    
    .search-page .search-sidebar {
        display: none !important;
    }
    
    .search-page .search-content {
        display: block !important;
    }
    
    .search-page .search-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .search-page .container {
        padding: 0 8px !important;
    }
    
    .search-page .search-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .search-page .results-header {
        margin-bottom: 12px !important;
        padding: 8px 0 !important;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .search-page .section-title {
        margin-bottom: 0 !important;
        font-size: 16px !important;
    }
    
    .search-page .sort-options {
        width: 100%;
    }
    
    .search-page .sort-select {
        width: 100% !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    .search-page .listings-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 16px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        contain: layout !important;
        /* Ensure responsive behavior */
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .search-page .listings-grid .item-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    
    .search-page .pagination {
        margin-top: 16px !important;
        padding: 8px 0 !important;
    }
    
    /* Search page cards use same styles as main page listings-grid */
    .search-page .item-card {
        margin-bottom: 0 !important;
    }
    
    /* No results state */
    .search-page .no-results {
        padding: 40px 16px !important;
        text-align: center;
    }
    
    .search-page .no-results__icon {
        margin-bottom: 20px !important;
    }
    
    .search-page .no-results__icon .material-icons {
        font-size: 48px !important;
    }
    
    .search-page .no-results__title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    .search-page .no-results__text {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        line-height: 1.5;
    }
    
    .search-page .no-results__suggestions {
        text-align: left;
        margin: 20px auto !important;
        padding: 16px !important;
        background: #f9fafb;
        border-radius: 12px;
        max-width: 400px;
    }
    
    .search-page .no-results__suggestions h4 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .search-page .no-results__suggestions ul {
        padding-left: 20px !important;
    }
    
    .search-page .no-results__suggestions li {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    .search-page .no-results .btn {
        min-width: 200px;
        margin-top: 16px;
    }
    
    /* Search tips state */
    .search-page .search-tips {
        padding: 40px 16px !important;
        text-align: center;
    }
    
    .search-page .search-tips__icon {
        margin-bottom: 20px !important;
    }
    
    .search-page .search-tips__icon .material-icons {
        font-size: 48px !important;
    }
    
    .search-page .search-tips__title {
        font-size: 18px !important;
        margin-bottom: 24px !important;
    }
    
    .search-page .search-tips__content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        text-align: left;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .search-page .tip {
        padding: 16px !important;
        background: #f9fafb;
        border-radius: 12px;
        border-left: 4px solid #4f46e5;
    }
    
    .search-page .tip h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        color: #1f2937;
    }
    
    .search-page .tip p {
        font-size: 13px !important;
        color: #6b7280;
        margin: 0;
    }
    
    /* ============================================
       AD DETAIL PAGE - MOBILE STYLES
       ============================================ */
    
    /* Mobile styles for ad detail page */
    .item-detail-page {
        padding: 8px 0 !important;
    }
    
    .item-detail-page .container {
        padding: 0 8px !important;
    }
    
    .item-detail-page .breadcrumbs {
        margin-bottom: 8px !important;
        padding: 4px 0 !important;
        font-size: 12px !important;
        gap: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    
    .item-detail-page .breadcrumbs .breadcrumb-link {
        font-size: 12px !important;
        padding: 2px 10px !important;
        border-radius: 50px !important;
        background: #f1f3f5 !important;
        color: #4b5563 !important;
        max-width: 180px !important;
        min-width: 0 !important;
    }
    
    .item-detail-page .breadcrumbs .breadcrumb-current {
        font-size: 12px !important;
        padding: 2px 10px !important;
        border-radius: 50px !important;
        background: #f1f3f5 !important;
        color: #4b5563 !important;
        max-width: 220px !important;
        min-width: 0 !important;
    }
    
    .item-detail-page .breadcrumbs .material-icons {
        font-size: 14px !important;
        margin: 0 2px !important;
    }
    
    .item-detail-page .item-detail-content {
        display: block !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .item-detail-page .item-detail-main {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .item-detail-page .item-detail-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Mobile images */
    .item-detail-page .item-images__container {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .item-detail-page .item-images__thumbnails {
        flex-direction: row !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 0 !important;
        gap: 6px !important;
    }
    
    .item-detail-page .thumbnail {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
    }
    
    .item-detail-page .main-image {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    .item-detail-page .item-images__nav {
        width: 32px !important;
        height: 32px !important;
    }
    
    .item-detail-page .item-images__nav--prev {
        left: 8px !important;
    }
    
    .item-detail-page .item-images__nav--next {
        right: 8px !important;
    }
    
    .item-detail-page .item-images__nav .material-icons {
        font-size: 18px !important;
    }
    
    /* Mobile product info */
    .item-detail-page .product-info-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .product-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .item-detail-page .product-price .price-amount {
        font-size: 18px !important;
    }
    
    .item-detail-page .product-price .price-negotiable {
        font-size: 16px !important;
        font-weight: 700;
        color: #111827;
    }
    
    .item-detail-page .product-price .price-free {
        font-size: 16px !important;
        font-weight: 700;
        color: #111827;
    }
    
    .item-detail-page .product-price .price-with-conversion {
        gap: 4px;
    }
    
    .item-detail-page .product-price .price-main {
        font-size: 20px !important;
        font-weight: 700;
    }
    
    .item-detail-page .product-price .price-references {
        font-size: 12px !important;
        gap: 6px;
    }
    
    .item-detail-page .product-meta {
        gap: 6px !important;
    }
    
    .item-detail-page .product-meta__item {
        font-size: 12px !important;
    }
    
    .item-detail-page .product-meta__item .material-icons {
        font-size: 14px !important;
    }
    
    /* Mobile contact card */
    .item-detail-page .contact-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .seller-info {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .seller-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        flex-shrink: 0 !important;
    }
    
    .item-detail-page .seller-name {
        font-size: 14px !important;
    }
    
    .item-detail-page .seller-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .item-detail-page .seller-status {
        display: block !important;
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    
    .item-detail-page .contact-card__actions {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .contact-btn {
        padding: 8px 12px !important;
        font-size: 16px !important;
    }
    
    .item-detail-page .contact-btn .material-icons {
        font-size: 24px !important;
    }
    
    /* Mobile description and details */
    .item-detail-page .item-description,
    .item-detail-page .item-details {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .item-description h2,
    .item-detail-page .item-description h3,
    .item-detail-page .item-details h2,
    .item-detail-page .item-details h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .item-detail-page .description-content {
        padding: 8px !important;
        font-size: 13px !important;
    }
    
    .item-detail-page .details-grid {
        padding: 8px !important;
        gap: 6px !important;
    }
    
    .item-detail-page .detail-item {
        padding: 6px 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    
    .item-detail-page .detail-label {
        font-size: 14px !important;
    }
    
    .item-detail-page .detail-value {
        font-size: 14px !important;
    }
    
    /* Mobile map styles */
    .item-detail-page .map-section {
        margin-top: 16px !important;
        padding: 16px !important;
        background: #f9fafb !important;
        border-radius: 8px !important;
        border: 1px solid #e5e7eb !important;
    }
    
    .item-detail-page .map-section h2,
    .item-detail-page .map-section h3 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        color: #374151 !important;
    }
    
    .item-detail-page .map-container {
        border-radius: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .item-detail-page #property-map {
        height: 250px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .item-detail-page .map-info {
        padding: 6px 8px !important;
    }
    
    .item-detail-page .map-coordinates {
        font-size: 11px !important;
    }
    
    .item-detail-page .map-coordinates a {
        display: inline-block !important;
        margin-top: 4px !important;
        font-size: 10px !important;
    }
    
    .item-detail-page .map-coordinates .material-icons {
        font-size: 14px !important;
    }
    
    /* Mobile safety tips */
    .item-detail-page .safety-tips {
        padding: 8px !important;
    }
    
    .item-detail-page .safety-tips h4 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .item-detail-page .safety-tips li {
        font-size: 12px !important;
        padding-left: 12px !important;
    }
    
    /* Mobile related ads */
    .item-detail-page .related-ads {
        padding: 12px !important;
        margin-top: 16px !important;
    }
    
    .item-detail-page .related-ads .section-title {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
    
    .item-detail-page .related-ads .items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* Mobile recommendations: four rows maximum, two cards per row. */
    .item-detail-page .related-ads .items-grid > .item-card:nth-child(n + 9) {
        display: none !important;
    }
    
    .item-detail-page .related-ads .item-card__content {
        padding: 6px 0px 0px 0px !important;
    }
    
    .item-detail-page .related-ads .item-card__title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    
    .item-detail-page .related-ads .item-card__price {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
    
    .item-detail-page .related-ads .item-card__meta {
        font-size: 10px !important;
    }

    .site-feedback-card__title {
        font-size: 18px;
    }

    .site-feedback-card__text {
        font-size: 14px;
    }

    .site-feedback-card__stats {
        margin-bottom: 10px;
    }

    .site-feedback-card__avg {
        font-size: 15px;
    }

    .site-feedback-card__count {
        font-size: 13px;
    }

    .site-feedback-popup .modal-content {
        width: calc(100% - 16px) !important;
        max-width: 560px !important;
    }

    .user-reviews-popup .modal-content {
        width: calc(100% - 16px) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        color: #111827 !important;
    }

    .user-reviews-popup .modal-body {
        color: #111827 !important;
    }

    .user-reviews-popup .user-review-item {
        color: #111827 !important;
        background: #ffffff !important;
    }

    .user-reviews-popup .user-review-item__head strong {
        color: #111827 !important;
    }

    .user-reviews-popup .user-review-item__comment {
        color: #374151 !important;
    }

    .user-reviews-list {
        max-height: none !important;
        overflow-y: visible !important;
    }

    .user-rating-inline {
        font-size: 13px;
    }

    .site-feedback-modal__subtitle {
        font-size: 14px;
    }

    .site-feedback-rating__btn {
        height: 56px;
        font-size: 20px;
        border-radius: 8px;
    }

    .site-feedback-rating-labels {
        font-size: 12px;
    }

    .site-feedback-modal__label {
        font-size: 14px;
    }

    .site-feedback-modal__textarea {
        min-height: 80px;
        font-size: 14px;
    }
    
    /* ============================================
       IMAGE MODAL - MOBILE STYLES
       ============================================ */
    
    /* Mobile image modal */
    .image-modal__content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        flex-direction: column !important;
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .image-modal__main {
        order: 1 !important;
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .image-modal__sidebar {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 40vh !important;
        overflow-y: auto !important;
        padding: 8px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 8px !important;
    }
    
    .image-modal__image {
        max-width: 95vw !important;
        max-height: 50vh !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Image modal - full scroll support */
    .image-modal {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .image-modal__overlay {
        position: fixed !important;
    }
    
    .image-modal__content {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        max-height: none !important;
        flex-direction: column !important;
        padding: 60px 16px 24px !important;
        gap: 20px !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    .image-modal__main {
        order: 1 !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }
    
    .image-modal__sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        order: 2 !important;
        gap: 16px !important;
        overflow-y: visible !important;
        flex-shrink: 0 !important;
    }
    
    .image-modal__image {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: 60vh !important;
        object-fit: contain !important;
    }
    
    .image-modal__close {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 10003 !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .image-modal__close .material-icons {
        font-size: 20px !important;
        color: white !important;
    }
    
    .image-modal__nav {
        position: absolute !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 10002 !important;
    }
    
    .image-modal__nav--prev {
        left: 8px !important;
    }
    
    .image-modal__nav--next {
        right: 8px !important;
    }
    
    .image-modal__nav .material-icons {
        font-size: 20px !important;
    }
    
    .image-modal__counter {
        background: rgba(0, 0, 0, 0.7) !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        border-radius: 12px !important;
    }
    
    .image-modal__zoom-hint {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
    }
    
    .image-modal__zoom-hint .material-icons {
        font-size: 12px !important;
    }
    
    /* Mobile sidebar content */
    .image-modal__sidebar .product-info-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 6px !important;
    }
    
    .image-modal__sidebar .product-title {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        color: #111827 !important;
    }
    
    .image-modal__sidebar .product-price .price-amount {
        font-size: 16px !important;
        color: #4f46e5 !important;
    }
    
    .image-modal__sidebar .product-price .price-negotiable {
        font-size: 14px !important;
        font-weight: 700;
        color: #111827 !important;
    }
    
    .image-modal__sidebar .product-price .price-free {
        font-size: 14px !important;
        font-weight: 700;
        color: #111827 !important;
    }
    
    .image-modal__sidebar .product-price .price-with-conversion {
        gap: 3px;
    }
    
    .image-modal__sidebar .product-price .price-main {
        font-size: 18px !important;
        font-weight: 700;
        color: #4f46e5 !important;
    }
    
    .image-modal__sidebar .product-price .price-references {
        font-size: 11px !important;
        gap: 5px;
    }
    
    .image-modal__sidebar .product-meta {
        gap: 4px !important;
    }
    
    .image-modal__sidebar .product-meta__item {
        font-size: 11px !important;
        color: #6b7280 !important;
    }
    
    .image-modal__sidebar .product-meta__item .material-icons {
        font-size: 12px !important;
    }
    
    .image-modal__sidebar .contact-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 6px !important;
    }
    
    .image-modal__sidebar .seller-info {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .image-modal__sidebar .seller-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        flex-shrink: 0 !important;
    }
    
    .image-modal__sidebar .seller-name {
        font-size: 16px !important;
    }
    
    .image-modal__sidebar .seller-status {
        font-size: 10px !important;
    }
    
    .image-modal__sidebar .contact-card__actions {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }
    
    .image-modal__sidebar .contact-btn {
        padding: 6px 8px !important;
        font-size: 24px !important;
        border-radius: 50px !important;
    }
    
    .image-modal__sidebar .contact-btn .material-icons {
        font-size: 24px !important;
    }
    
    /* Mobile loading indicator */
    .image-modal__loading {
        font-size: 24px !important;
    }
    
    /* Mobile zoom functionality */
    .image-modal__image.zoomed {
        transform: scale(1.5) !important;
        cursor: zoom-out !important;
    }
    
    .image-modal__image.zoomed:hover {
        transform: scale(1.6) !important;
    }
    
    /* Mobile photo counter positioning */
    .image-modal__info {
        position: absolute !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10003 !important;
    }
    
    .image-modal__counter {
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 16px !important;
        color: white !important;
        font-weight: 500 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Hide category ads count in header dropdown on mobile */
    .header__categories .category-count {
        display: none !important;
    }
    
    /* M3 — horizontal category & subcategory chips (home + category page; scroll left/right) */
    .category-page .subcategories-section,
    .home-page .subcategories-section {
        margin-bottom: 12px !important;
    }

    .category-page .subcategories-grid,
    .home-page .subcategories-grid {
        display: flex !important;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        padding: 6px 2px 14px;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        cursor: grab;
        user-select: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .category-page .subcategories-grid:active,
    .home-page .subcategories-grid:active {
        cursor: grabbing;
    }

    .category-page .subcategories-grid::-webkit-scrollbar,
    .home-page .subcategories-grid::-webkit-scrollbar,
    .category-page .subcategories-grid::-webkit-scrollbar-track,
    .home-page .subcategories-grid::-webkit-scrollbar-track,
    .category-page .subcategories-grid::-webkit-scrollbar-thumb,
    .home-page .subcategories-grid::-webkit-scrollbar-thumb {
        display: none;
    }

    .category-page .subcategory-card,
    .home-page .subcategory-card {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-shrink: 0 !important;
        box-sizing: border-box;
        scroll-snap-align: start;
        width: max-content;

        padding: 12px 16px !important;
        min-height: 48px;
        border-radius: var(--m3-corner-sm);
        border: 1px solid var(--m3-outline-variant);
        background-color: var(--m3-surface);
        box-shadow: none;
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        overflow: visible;
        transition:
            border-color 0.2s ease,
            transform 0.12s ease,
            background-color 0.2s ease;
    }

    .category-page .subcategory-card:hover,
    .home-page .subcategory-card:hover {
        border-color: var(--m3-outline);
        background-color: var(--m3-surface-variant);
        box-shadow: none;
    }

    .category-page .subcategory-card:active,
    .home-page .subcategory-card:active {
        transform: scale(0.985);
        background-color: var(--m3-surface-variant);
        box-shadow: none;
    }

    .category-page .subcategory-card:focus,
    .home-page .subcategory-card:focus {
        outline: none;
    }

    .category-page .subcategory-card:focus-visible,
    .home-page .subcategory-card:focus-visible {
        outline: 2px solid var(--m3-primary);
        outline-offset: 2px;
    }

    .category-page .subcategory-card__content,
    .home-page .subcategory-card__content {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .category-page .subcategory-card__title,
    .home-page .subcategory-card__title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: 0.01em;
        color: var(--m3-on-surface);
        margin: 0 !important;
        white-space: nowrap;
    }

    .category-page .subcategory-card .material-icons,
    .home-page .subcategory-card .material-icons {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        font-size: 22px;
        color: var(--m3-on-surface-variant);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .category-page .subcategory-card:hover .material-icons,
    .home-page .subcategory-card:hover .material-icons {
        color: var(--m3-primary);
    }

    .category-page .subcategory-card__count,
    .home-page .subcategory-card__count {
        display: none !important;
    }

    .home-page .subcategory-card--all {
        background: rgba(224, 224, 255, 0.6);
        border-color: var(--m3-primary);
    }

    .home-page .subcategory-card--all .material-icons,
    .home-page .subcategory-card--all .subcategory-card__title {
        color: var(--m3-primary);
    }

    /* Public seller profile — reuse the home/category chip strip. The
       sidebar variant on desktop is hidden via `.desktop-only`, so these
       styles only apply on the mobile web profile. */
    .profile-page--public-seller .subcategories-section {
        margin-bottom: 12px !important;
        padding: 0 12px !important;
    }

    .profile-page--public-seller .subcategories-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 0 14px !important;
        margin: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .profile-page--public-seller .subcategories-grid::-webkit-scrollbar {
        display: none;
    }

    .profile-page--public-seller .subcategory-card {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        flex-shrink: 0 !important;
        box-sizing: border-box;
        min-height: 42px;
        padding: 8px 14px !important;
        border-radius: 999px;
        border: 1px solid var(--m3-outline-variant);
        background: var(--m3-surface);
        color: var(--m3-on-surface);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }

    .profile-page--public-seller .subcategory-card .material-icons {
        font-size: 18px;
        color: var(--m3-on-surface-variant);
    }

    .profile-page--public-seller .subcategory-card__title {
        margin: 0 !important;
        color: var(--m3-on-surface);
    }

    .profile-page--public-seller .subcategory-card__count {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        margin-left: 4px;
        border-radius: 999px;
        background: var(--m3-surface-variant);
        color: var(--m3-on-surface-variant);
        font-size: 12px;
        font-weight: 700;
    }

    .profile-page--public-seller .subcategory-card.is-active {
        background: rgba(224, 224, 255, 0.65);
        border-color: var(--m3-primary);
    }

    .profile-page--public-seller .subcategory-card.is-active .subcategory-card__title,
    .profile-page--public-seller .subcategory-card.is-active .material-icons {
        color: var(--m3-primary);
    }

    .profile-page--public-seller .subcategory-card.is-active .subcategory-card__count {
        background: var(--m3-primary);
        color: var(--m3-on-primary);
    }

    .home-page .home-latest-header {
        display: block;
        margin-bottom: 8px;
    }

    .home-page .home-latest-controls {
        width: 100%;
        margin-bottom: 8px;
    }

    .home-page .home-latest-controls .sort-options {
        width: 100%;
    }

    .home-mobile-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .home-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        flex-shrink: 0;
        padding: 8px 14px;
        min-height: 42px;
        min-width: max-content;
        border-radius: 20px;
        border: 1px solid var(--m3-primary);
        background: rgba(224, 224, 255, 0.4);
        color: var(--m3-primary);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .home-mobile-filter-btn .material-icons {
        font-size: 18px;
        color: inherit;
    }

    .home-mobile-sort-scroll {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-mobile-sort-scroll::-webkit-scrollbar {
        display: none;
    }

    .home-mobile-sort-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: max-content;
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-lg);
        background: var(--m3-surface);
        color: var(--m3-on-surface);
        padding: 8px 14px;
        min-height: 42px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

    .home-mobile-sort-chip.is-active {
        border-color: var(--m3-primary);
        background: rgba(224, 224, 255, 0.65);
        color: var(--m3-primary);
    }

    .home-mobile-filters-sheet {
        position: fixed;
        inset: 0;
        z-index: 1200;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .home-mobile-filters-sheet.is-open {
        pointer-events: auto;
        opacity: 1;
    }

    .home-mobile-filters-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    .home-mobile-filters-sheet__panel {
        position: absolute;
        inset: auto 0 0;
        background: var(--m3-surface);
        border-radius: 20px 20px 0 0;
        padding: 20px 16px 24px;
        max-height: 86vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .home-mobile-filters-sheet__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .home-mobile-filters-sheet__title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--m3-on-surface);
    }

    .home-mobile-filters-sheet__close {
        border: none;
        background: transparent;
        color: var(--m3-on-surface-variant);
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .home-mobile-filters-form__label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--m3-on-surface);
        margin: 0 0 8px;
    }

    .home-mobile-filters-form__input {
        width: 100%;
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-md);
        padding: 12px;
        font-size: 15px;
        margin-bottom: 14px;
        background: var(--m3-surface);
    }

    .home-mobile-filters-form__price-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .home-mobile-filters-form__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    .home-mobile-filters-form__chip {
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-pill);
        padding: 8px 12px;
        font-size: 14px;
        color: var(--m3-on-surface);
        background: var(--m3-surface);
    }

    .home-mobile-filters-form__chip input {
        display: none;
    }

    .home-mobile-filters-form__chip.is-active {
        border-color: var(--m3-primary);
        background: rgba(224, 224, 255, 0.65);
        color: var(--m3-primary);
    }

    .home-mobile-filters-form__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .home-mobile-filters-form__clear,
    .home-mobile-filters-form__apply {
        border-radius: var(--m3-corner-md);
        padding: 12px;
        min-height: 44px;
        font-size: 14px;
        font-weight: 600;
    }

    .home-mobile-filters-form__clear {
        border: 1px solid var(--m3-outline-variant);
        background: var(--m3-surface);
        color: var(--m3-on-surface);
    }

    .home-mobile-filters-form__apply {
        border: 1px solid var(--m3-primary);
        background: var(--m3-primary);
        color: var(--m3-on-primary);
    }

    .category-page .category-mobile-header {
        display: block;
        margin-bottom: 8px;
    }

    .category-page .category-mobile-controls {
        width: 100%;
        margin-bottom: 8px;
    }

    .category-page .category-mobile-controls .sort-options {
        width: 100%;
    }

    .category-page #categorySortSelect {
        display: none;
    }

    .category-mobile-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .category-mobile-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        flex-shrink: 0;
        padding: 8px 14px;
        min-height: 42px;
        min-width: max-content;
        border-radius: 20px;
        border: 1px solid var(--m3-primary);
        background: rgba(224, 224, 255, 0.4);
        color: var(--m3-primary);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .category-mobile-filter-btn .material-icons {
        font-size: 18px;
        color: inherit;
    }

    .category-mobile-sort-scroll {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .category-mobile-sort-scroll::-webkit-scrollbar {
        display: none;
    }

    .category-mobile-sort-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: max-content;
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-lg);
        background: var(--m3-surface);
        color: var(--m3-on-surface);
        padding: 8px 14px;
        min-height: 42px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
    }

    .category-mobile-sort-chip.is-active {
        border-color: var(--m3-primary);
        background: rgba(224, 224, 255, 0.65);
        color: var(--m3-primary);
    }

    .category-mobile-filters-sheet {
        position: fixed;
        inset: 0;
        z-index: 1200;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .category-mobile-filters-sheet.is-open {
        pointer-events: auto;
        opacity: 1;
    }

    .category-mobile-filters-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    .category-mobile-filters-sheet__panel {
        position: absolute;
        inset: auto 0 0;
        background: var(--m3-surface);
        border-radius: 20px 20px 0 0;
        padding: 20px 16px 24px;
        max-height: 86vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge legacy */
    }

    .category-mobile-filters-sheet__panel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none; /* Chromium/Safari */
    }

    .category-mobile-filters-sheet__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .category-mobile-filters-sheet__title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--m3-on-surface);
    }

    .category-mobile-filters-sheet__close {
        border: none;
        background: transparent;
        color: var(--m3-on-surface-variant);
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .category-mobile-filters-form__label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--m3-on-surface);
        margin: 0 0 8px;
    }

    .category-mobile-filters-form__input {
        width: 100%;
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-md);
        padding: 12px;
        font-size: 15px;
        margin-bottom: 14px;
        background: var(--m3-surface);
    }

    .category-mobile-filters-form__price-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .category-mobile-filters-form__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    .category-mobile-filters-form__chip {
        border: 1px solid var(--m3-outline-variant);
        border-radius: var(--m3-corner-pill);
        padding: 8px 12px;
        font-size: 14px;
        color: var(--m3-on-surface);
        background: var(--m3-surface);
    }

    .category-mobile-filters-form__chip input {
        display: none;
    }

    .category-mobile-filters-form__chip.is-active {
        border-color: var(--m3-primary);
        background: rgba(224, 224, 255, 0.65);
        color: var(--m3-primary);
    }

    .category-mobile-filters-form__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .category-mobile-filters-form__clear,
    .category-mobile-filters-form__apply {
        border-radius: var(--m3-corner-md);
        padding: 12px;
        min-height: 44px;
        font-size: 14px;
        font-weight: 600;
    }

    .category-mobile-filters-form__clear {
        border: 1px solid var(--m3-outline-variant);
        background: var(--m3-surface);
        color: var(--m3-on-surface);
    }

    .category-mobile-filters-form__apply {
        border: 1px solid var(--m3-primary);
        background: var(--m3-primary);
        color: var(--m3-on-primary);
    }

    /* M3 list cards: stacked layout, large photo, flat surface (no card shadow) */
    .item-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: var(--m3-surface, #fffbfe) !important;
        border-radius: 12px 12px 0px 0px !important;
        overflow: hidden;
        box-shadow: none !important;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        border: 0px solid var(--m3-outline-variant, #cac4d0) !important;
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        contain: layout style;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    
    .item-card:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--m3-outline, #79747e);
    }
    
    .item-card__link {
        display: flex !important;
        flex-direction: column !important;
        text-decoration: none;
        color: inherit;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    
    .item-card__image {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 200px;
        height: 200px;
        overflow: hidden;
        box-sizing: border-box;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .item-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
    }
    
    .item-card:hover .item-card__image img {
        transform: none;
        border-radius: 18px !important;
    }
    
    .no-image {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3f4f6;
        color: #9ca3af;
    }
    
    .no-image .material-icons {
        font-size: 32px;
    }
    
    .item-card__content {
        padding: 14px 0px 0px 0px !important;
        box-sizing: border-box;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0px;
    }
    
    .item-card__title {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        flex-shrink: 0;
    }
    
    .item-card__price {
        font-size: 16px;
        font-weight: 700;
        color: #059669;
        margin-bottom: 6px;
        flex-shrink: 0;
    }
    
    .item-card__meta {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
        color: #6b7280;
        margin-top: auto;
        flex-shrink: 0;
    }
    
    .item-card__location {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .item-card__location .material-icons {
        font-size: 14px;
    }
    
    .item-card__category {
        font-size: 12px;
        color: #9ca3af;
    }
    
    .item-card__actions {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 4px;
        z-index: 2;
    }
    
    .favorite-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(4px);
    }
    
    .favorite-btn .material-icons {
        font-size: 18px;
        color: #6b7280;
    }
    
    .favorite-btn:hover {
        background: white;
        transform: scale(1.1);
    }
    
    .favorite-btn.active .material-icons {
        color: #ef4444;
    }
    
    /* Mobile item card badges */
    .item-card__badge {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .item-card__badge--featured {
        background: #fef3c7;
        color: #92400e;
    }
    
    .item-card__badge--company {
        background: #4f46e5;
        color: #ffffff;
        top: 6px;
        left: 6px;
        padding: 2px 6px;
        font-size: 9px;
        border-radius: 8px;
    }
    
    .item-card__badge--inactive {
        background: #ef4444;
        color: #ffffff;
    }

    /* Черновик (см. /profile?tab=ads): оранжевый бейдж visibility_off. */
    .item-card__badge--draft {
        background: #f59e0b;
        color: #ffffff;
    }

    .item-card__rejection-reason {
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
    }

    /* Profile: footer alert should not break fixed card layout */
    .profile-listings .item-card.item-card--has-footer-alert {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .profile-listings .item-card__rejection-reason.item-card__rejection-reason--footer {
        margin: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid #fecaca;
        border-radius: 0 0 12px 12px;
        padding: 10px 12px;
    }
    
    /* Mobile item card stats */
    .item-card__stats {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #f3f4f6;
    }
    
    .stat {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #9ca3af;
    }
    
    .stat .material-icons {
        font-size: 14px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(4px);
    }
    
    .action-btn .material-icons {
        font-size: 16px;
        color: #6b7280;
    }
    
    .action-btn:hover {
        background: white;
        transform: scale(1.1);
    }
    
    .action-btn--edit {
        color: #3b82f6;
    }
    
    .action-btn--edit:hover {
        background: #dbeafe;
    }
    
    .action-btn--delete {
        color: #ef4444;
    }
    
    .action-btn--delete:hover {
        background: #fee2e2;
    }
    
    /* Mobile item card bottom actions */
    .item-card__actions-bottom {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: none;
    }
    
    .item-card__actions-bottom .btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    
    .item-card__actions-bottom .btn .material-icons {
        font-size: 14px;
    }
    
    .item-card__actions-bottom .btn--bump {
        background: #4f46e5;
        color: white;
    }
    
    .item-card__actions-bottom .btn--bump:hover {
        background: #4338ca;
    }
    
    .item-card__actions-bottom .btn--bump-disabled {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
    }
    
    .item-card__actions-bottom .btn--bump-purge {
        background: rgba(254, 226, 226, 0.95);
        color: #b91c1c;
        border: 1px solid rgba(220, 38, 38, 0.45);
        cursor: not-allowed;
    }
    
    .item-card__actions-bottom .btn--favorite-remove {
        background: #fee2e2;
        color: #ef4444;
    }
    
    .item-card__actions-bottom .btn--favorite-remove:hover {
        background: #fecaca;
    }
    
    /* Mobile section spacing optimization */
    .section-title {
        margin-bottom: 8px !important;
    }
    
    .section-header {
        margin-bottom: 8px !important;
    }
    
    .listings-grid {
        margin-top: 8px !important;
    }
    
    .items-scroll-container {
        margin-top: 8px !important;
    }
    
    /* Mobile item card small variant — same stacked pattern, slightly shorter image for carousels */
    .item-card--small {
        background: var(--m3-surface, #fffbfe);
        border-radius: var(--m3-corner-lg, 12px);
        overflow: hidden;
        box-shadow: none;
        transition: opacity 0.2s ease, border-color 0.2s ease;
        border: 1px solid var(--m3-outline-variant, #cac4d0);
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-shrink: 0;
        box-sizing: border-box;
        contain: layout style;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    
    .item-card--small .item-card__link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    
    .item-card--small .item-card__image {
        position: relative;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 168px;
        height: 168px;
        overflow: hidden;
        box-sizing: border-box;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .item-card--small .item-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .item-card--small .item-card__content {
        padding: 12px 0px 0px 0px !important;
        box-sizing: border-box;
        flex: 1;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .item-card--small .item-card__title {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        flex-shrink: 0;
    }
    
    .item-card--small .item-card__price {
        font-size: 16px;
        font-weight: 700;
        color: #059669;
        margin-bottom: 6px;
        flex-shrink: 0;
    }
    
    .item-card--small .item-card__meta {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
        color: #6b7280;
        margin-top: auto;
        flex-shrink: 0;
    }
    
    .item-card--small .item-card__location {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #6b7280;
    }
    
    .item-card--small .item-card__location .material-icons {
        font-size: 14px;
    }
    
    .item-card--small .item-card__time {
        font-size: 12px;
        color: #9ca3af;
    }
    
    .item-card--small .item-card__category {
        font-size: 12px;
        color: #9ca3af;
    }
}

/* ============================================
   MOBILE FORMS
   ============================================ */

@media (max-width: 1023px) {
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }
    
    .form-label.required::after {
        content: ' *';
        color: #ef4444;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 16px;
        background: white;
        transition: all 0.2s ease;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    
    .form-textarea {
        min-height: 120px;
        resize: vertical;
    }
    
    .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-row.two-columns {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Profile settings page - force single column layout for mobile */
    .profile-page .settings-form .form-row {
        grid-template-columns: 1fr !important;

    }
    
    /* Profile settings page - ensure full width for form groups */
    .profile-page .settings-form .form-row .form-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
    
    .form-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 24px;
        flex-direction: column;
    }
    
    /* Mobile map styles for forms */
    .map-container {
        margin-bottom: 12px !important;
    }
    
    #yandex-map {
        height: 250px !important;
        border-radius: var(--m3-corner-md) !important;
    }
    
    .map-controls {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
        margin-top: 8px !important;
    }
    
    .map-coordinates {
        font-size: 11px !important;
    }
    
    .btn--small {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    
    .btn--small .material-icons {
        font-size: 16px !important;
    }
    
    /* Mobile geocoding styles */
    .map-coordinates {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        background: #f3f4f6 !important;
        margin-top: 8px !important;
        display: inline-block !important;
    }
    
    .map-coordinates[style*="color: #059669"] {
        background: #d1fae5 !important;
        color: #059669 !important;
    }
    
    .map-coordinates[style*="color: #ef4444"] {
        background: #fee2e2 !important;
        color: #ef4444 !important;
    }
    
    .map-coordinates[style*="color: #6b7280"] {
        background: #f3f4f6 !important;
        color: #6b7280 !important;
    }
    
    .btn {
        padding: 12px 24px;
        border-radius: var(--m3-corner-pill);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease,
            border-color 0.2s ease, color 0.2s ease;
        border: none;
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        box-sizing: border-box;
        letter-spacing: 0.04em;
        min-height: 48px;
        justify-content: center;
    }
    
    .btn--primary {
        background: var(--m3-primary);
        color: var(--m3-on-primary);
    }
    
    .btn--primary:hover {
        background: #4338ca;
        transform: translateY(-1px);
    }

    .btn--google {
        margin-top: 12px;
        min-height: 48px;
        width: 100%;
        background: transparent;
        border: 0;
        padding: 0;
        display: block;
    }

    .btn--google > div,
    .btn--google iframe {
        width: 100% !important;
    }

    .btn--google > div {
        margin: 0 auto;
    }
    
    .btn--outline {
        background: transparent;
        color: var(--m3-primary);
        border: 1px solid var(--m3-outline);
        box-shadow: none;
    }
    
    .btn--outline:hover {
        background: rgba(79, 70, 229, 0.08);
        border-color: var(--m3-primary);
    }
    
    .btn--full {
        width: 100%;
        justify-content: center;
    }
    
    /* Mobile form sections — M3 tonal surface */
    .form-section {
        background: var(--m3-surface);
        border-radius: var(--m3-corner-lg);
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: var(--m3-elevation-1);
        border: 1px solid var(--m3-outline-variant);
    }
    
    .form-section__title {
        font-size: 16px;
        font-weight: 600;
        color: var(--m3-on-surface);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .form-section__title .material-icons {
        font-size: 20px;
        color: var(--m3-primary);
    }
    
    /* Mobile file upload */
    .form-file {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 12px 16px;
        border: 2px dashed var(--m3-outline-variant);
        border-radius: var(--m3-corner-md);
        background: var(--m3-surface-variant);
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .form-file:hover {
        border-color: var(--m3-primary);
        background: rgba(79, 70, 229, 0.06);
    }
    
    .form-file input[type="file"] {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .form-file__text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--m3-on-surface-variant);
        font-size: 14px;
    }
    
    .form-file__text .material-icons {
        font-size: 20px;
    }
    
    /* Mobile image preview */
    .image-preview-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 16px;
    }
    
    .image-preview {
        position: relative;
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        background: #f3f4f6;
    }
    
    .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .remove-image {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.7);
        border: none;
        border-radius: 50%;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .remove-image:hover {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .remove-image .material-icons {
        font-size: 16px;
    }
    
    /* Mobile contact method options */
    .contact-method-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 16px;
    }
    
    .contact-method-option {
        position: relative;
        padding: 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: white;
    }
    
    .contact-method-option:hover {
        border-color: #4f46e5;
        background: #f8faff;
    }
    
    .contact-method-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    .contact-method-option:has(input[type="radio"]:checked) {
        border-color: #4f46e5;
        background: #f8faff;
    }
    
    .contact-method-option__content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .contact-method-option__content .material-icons {
        font-size: 24px;
        color: #6b7280;
    }
    
    .contact-method-option:has(input[type="radio"]:checked) .contact-method-option__content .material-icons {
        color: #4f46e5;
    }
    
    .contact-method-option__title {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .contact-method-option__description {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.4;
    }
    
    .contact-method-option:has(input[type="radio"]:checked) .contact-method-option__title {
        color: #4f46e5;
    }
    
    /* Mobile contact warning */
    .contact-warning {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        background: #fef3c7;
        border: 1px solid #f59e0b;
        border-radius: 8px;
        margin-top: 16px;
    }
    
    .contact-warning__icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: #f59e0b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .contact-warning__icon .material-icons {
        font-size: 14px;
        color: white;
    }
    
    .contact-warning__content {
        flex: 1;
    }
    
    .contact-warning__title {
        font-size: 14px;
        font-weight: 600;
        color: #92400e;
        margin-bottom: 4px;
    }
    
    .contact-warning__text {
        font-size: 13px;
        color: #92400e;
        line-height: 1.4;
    }
}

/* ============================================
   MOBILE AUTH PAGES
   ============================================ */

@media (max-width: 1023px) {
    .auth-page {
        padding: 20px 0;
        min-height: 100vh;
        background: var(--m3-background);
    }
    
    .auth-container {
        max-width: 100%;
        padding: 0 0px;
    }
    
    .auth-card {
        background: var(--m3-surface);
        border-radius: var(--m3-corner-xl);
        padding: 16px;
        box-shadow: none;
        border: 1px solid var(--m3-outline-variant);
    }
    
    .auth-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--m3-on-surface);
        margin-bottom: 8px;
        text-align: center;
    }
    
    .auth-subtitle {
        font-size: 14px;
        color: var(--m3-on-surface-variant);
        text-align: center;
        margin-bottom: 24px;
    }
    
    /* Second card: do not grow to fill viewport; show help / benefits on small screens */
    .auth-benefits-card {
        flex: 0 0 auto;
        align-self: stretch;
        max-width: 100%;
    }
    
    .auth-container {
        align-items: stretch;
    }
    
    .benefits-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .auth-benefits-card .auth-card__header {
        margin-bottom: 16px;
    }
    
    .auth-benefits-card .auth-title {
        font-size: 18px;
    }
    
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }
    
    .input-group .form-input {
        padding-left: 44px;
    }
    
    .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        padding: 4px;
    }
    
    .password-toggle:hover {
        color: #6b7280;
    }
    
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #374151;
        cursor: pointer;
    }
    
    .checkbox-custom {
        width: 18px;
        height: 18px;
        border: 2px solid #d1d5db;
        border-radius: 4px;
        position: relative;
        transition: all 0.2s ease;
    }
    
    .checkbox-input:checked + .checkbox-custom {
        background: #4f46e5;
        border-color: #4f46e5;
    }
    
    .checkbox-input:checked + .checkbox-custom::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }
    
    /* Free checkbox styles for mobile */
    .checkbox-label--free {
        padding: 10px 12px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        transition: all 0.2s ease;
    }
    
    .checkbox-label--free:active {
        background: #f3f4f6;
        border-color: #d1d5db;
    }
    
    .checkbox-label--free .checkbox-text {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        color: #374151;
        font-size: 14px;
    }
    
    .checkbox-label--free .checkbox-text .material-icons {
        font-size: 18px;
        color: #059669;
    }
    
    .checkbox-label--free .checkbox-input:checked ~ .checkbox-text {
        color: #059669;
        font-weight: 600;
    }
    
    .checkbox-label--free .checkbox-input:checked + .checkbox-custom {
        background: #059669;
        border-color: #059669;
    }
    
    /* User Type Selection - Mobile */
    .user-type-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .user-type-option {
        padding: 14px;
    }
    
    .user-type-option:active {
        transform: scale(0.98);
    }
    
    .user-type-option__content .material-icons {
        font-size: 42px;
    }
    
    .user-type-option__title {
        font-size: 16px;
    }
    
    .user-type-option__description {
        font-size: 12px;
    }
    
    /* User Type Locked - Mobile */
    .user-type-locked__notification {
        padding: 14px;
        gap: 10px;
        margin-bottom: 14px;
    }
    
    .user-type-locked__notification .material-icons {
        font-size: 22px;
    }
    
    .user-type-locked__title {
        font-size: 13px;
    }
    
    .user-type-locked__description {
        font-size: 12px;
    }
    
    .user-type-option__badge {
        top: 10px;
        right: 10px;
        padding: 3px 6px;
        font-size: 11px;
    }
    
    .user-type-option__badge .material-icons {
        font-size: 14px;
    }
    
    /* User Type Upgrade Info - Mobile */
    .user-type-upgrade-info {
        padding: 10px;
        gap: 8px;
        margin-top: 10px;
    }
    
    .user-type-upgrade-info .material-icons {
        font-size: 18px;
    }
    
    .user-type-upgrade-info small {
        font-size: 12px;
    }
    
    /* Verification Banner - Mobile */
    .verification-banner {
        flex-direction: column;
        padding: 16px;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .verification-banner__icon {
        width: 40px;
        height: 40px;
    }
    
    .verification-banner__icon .material-icons {
        font-size: 24px;
    }
    
    .verification-banner__title {
        font-size: 15px;
    }
    
    .verification-banner__text {
        font-size: 13px;
    }
    
    /* Company info section - Mobile */
    .company-info-section {
        padding: 16px;
        margin-top: 12px;
    }
    
    .company-info-section__header .material-icons {
        font-size: 20px;
    }
    
    .company-info-section__title {
        font-size: 15px;
    }
    
    .company-verified-notice {
        padding: 14px;
        margin-bottom: 16px;
    }
    
    .company-verified-notice__title {
        font-size: 13px;
    }
    
    .company-verified-notice__text {
        font-size: 12px;
    }
    
    .form-locked-indicator {
        gap: 4px;
        margin-top: 4px;
    }
    
    .form-locked-indicator .material-icons {
        font-size: 14px;
    }
    
    .company-document-preview {
        padding: 10px;
        gap: 10px;
    }
    
    .company-document-preview__icon {
        width: 40px;
        height: 40px;
    }
    
    .company-document-preview__icon .material-icons {
        font-size: 24px;
    }
    
    .company-document-preview__name {
        font-size: 13px;
    }
    
    .company-document-preview__meta {
        font-size: 11px;
    }
    
    .company-document-preview__btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .company-document-preview__btn .material-icons {
        font-size: 14px;
    }
    
    .company-verification-status {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    .company-verification-status .material-icons {
        font-size: 14px;
    }
    
    .company-verified-notice {
        padding: 12px;
        margin-bottom: 14px;
    }
    
    .company-verified-notice__title {
        font-size: 12px;
    }
    
    .company-verified-notice__text {
        font-size: 11px;
    }
    
    /* Extra small screens */
    @media (max-width: 480px) {
        .user-type-options {
            gap: 10px;
        }
        
        .user-type-option {
            padding: 12px;
        }
        
        .user-type-option__content .material-icons {
            font-size: 42px;
        }
        
        .user-type-option__title {
            font-size: 16px;
        }
        
        .user-type-option__description {
            font-size: 12px;
        }
        
        .company-info-section {
            padding: 14px;
        }
        
        .company-info-section__header .material-icons {
            font-size: 18px;
        }
        
        .company-info-section__title {
            font-size: 14px;
        }
        
        .company-document-preview {
            padding: 8px;
            flex-direction: column;
            align-items: flex-start;
        }
        
        .company-document-preview__icon {
            width: 36px;
            height: 36px;
        }
        
        .company-document-preview__icon .material-icons {
            font-size: 20px;
        }
        
        .company-document-preview__name {
            font-size: 12px;
        }
        
        .company-document-preview__meta {
            font-size: 10px;
        }
        
        .company-document-preview__actions {
            width: 100%;
        }
        
        .company-document-preview__btn {
            flex: 1;
            justify-content: center;
        }
        
        .company-verification-status {
            font-size: 11px;
            padding: 4px 8px;
        }
        
        .company-verification-status .material-icons {
            font-size: 12px;
        }
    }
    
    /* Very small screens */
    @media (max-width: 360px) {
        .user-type-option {
            padding: 10px;
        }
        
        .user-type-option__content {
            gap: 8px;
        }
        
        .user-type-option__content .material-icons {
            font-size: 40px;
        }
        
        .user-type-option__title {
            font-size: 16px;
        }
        
        .user-type-option__description {
            font-size: 12px;
        }
        
        .company-info-section {
            padding: 12px;
        }
        
        .company-info-section__title {
            font-size: 13px;
        }
        
        .company-document-preview__icon {
            width: 32px;
            height: 32px;
        }
        
        .company-document-preview__icon .material-icons {
            font-size: 18px;
        }
    }
}

/* ============================================
   MOBILE PROFILE & USER PAGES
   ============================================ */

@media (max-width: 1023px) {
    .profile-page {
        padding: 8px 0 80px 0;
    }
    
    .profile-page .container {
        padding: 0 8px;
    }
    
    .profile-header {
        display: none !important;
    }
    
    /* Hide mobile filters on profile page */
    .profile-page + .mobile-filters,
    .profile-page ~ .mobile-filters,
    .profile-page .mobile-filters {
        display: none !important;
    }
    
    /* Hide filters using body class (set by JavaScript) */
    body.profile-page .mobile-filters,
    body.profile-page .mobile-filters-dropdown,
    body:has(.profile-page) .mobile-filters {
        display: none !important;
    }
    
    /* Hide filters button specifically under header on profile page */
    .profile-page .mobile-filters__toggle,
    .profile-page .mobile-filters {
        display: none !important;
    }
    
    /* Additional specificity for filters button */
    .profile-page .container .mobile-filters,
    .profile-page .main .mobile-filters {
        display: none !important;
    }
    
    /* Force hide all mobile filters elements on profile page */
    .profile-page * .mobile-filters,
    .profile-page * .mobile-filters__toggle,
    .profile-page * .mobile-filters-dropdown {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Top mobile filters bar: hidden via layout--no-mobile-top-filters (main.php path flags: ad, auth, home, legal, …) */
    body.layout--no-mobile-top-filters .mobile-filters.mobile-only,
    body.layout--no-mobile-top-filters .mobile-filters-dropdown.mobile-only {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .profile-content {
        display: block;
    }
    
    .item-detail-content {
        display: block !important;
    }
    
    .item-detail-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0px solid #e5e7eb;
    }
    
    .item-detail-sidebar {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: -1;
        margin-bottom: 16px !important;
    }
    
    .profile-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 16px;
    }
    
    .profile-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .profile-avatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
    }

    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar .material-icons {
        font-size: 38px;
        color: #9ca3af;
    }

    .profile-info {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 16px;
    }

    .profile-details {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    .profile-name {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 2px;
        word-break: break-word;
        text-align: left;
    }
    
    .profile-email {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
        word-break: break-all;
    }
    
    .profile-phone {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }
    
    .profile-joined {
        font-size: 11px;
        color: #9ca3af;
    }
    
    .profile-navigation {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding-top: 16px;
        border-top: 1px solid #e5e7eb;
    }
    
    .profile-nav-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 50px;
        text-decoration: none;
        color: #374151;
        transition: all 0.2s ease;
        font-size: 14px;
    }
    
    .profile-nav-btn:hover {
        background: #f3f4f6;
        border-color: #d1d5db;
        color: #1f2937;
        text-decoration: none;
    }
    
    .profile-nav-btn.active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: white;
    }
    
    .profile-nav-btn.active:hover {
        background: #4338ca;
        border-color: #4338ca;
        color: white;
    }
    
    .profile-nav-btn .material-icons {
        font-size: 18px;
        color: #6b7280;
    }
    
    .profile-nav-btn.active .material-icons {
        color: white;
    }
    
    .nav-label {
        flex: 1;
        font-weight: 500;
        font-size: 16px;
    }
    
    .nav-count {
        background: #e5e7eb;
        color: #374151;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        min-width: 20px;
        text-align: center;
    }
    
    .profile-nav-btn.active .nav-count {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }
    
    /* Profile Tabs */
    .profile-tabs {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        margin-bottom: 16px;
        overflow: visible;
    }
    
    .tab-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        background: transparent;
    }
    
    .tab-btn {
        padding: 12px 16px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .tab-btn:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }
    
    .tab-btn.active {
        background: #4f46e5;
        color: white;
        border-color: #4f46e5;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }
    
    .tab-btn.active:hover {
        background: #4338ca;
        border-color: #4338ca;
    }
    
    .tab-btn-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .tab-btn-content .material-icons {
        font-size: 18px;
        color: #6b7280;
    }
    
    .tab-btn.active .tab-btn-content .material-icons {
        color: white;
    }
    
    .tab-arrow {
        font-size: 16px;
        color: #9ca3af;
        transition: transform 0.2s ease;
    }
    
    .tab-btn.active .tab-arrow {
        color: white;
    }
    
    .tab-btn:hover .tab-arrow {
        transform: translateX(2px);
    }
    
    /* Tab Content */
    .tab-content {
        display: none;
        padding: 0;
    }
    
    .tab-content.active {
        display: block;
    }
    
    /* Profile Listings */
    .profile-listings {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 40px 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .empty-state__icon {
        margin-bottom: 16px;
    }
    
    .empty-state__icon .material-icons {
        font-size: 48px;
        color: #d1d5db;
    }
    
    .empty-state__title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
    }
    
    .empty-state__text {
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    
    .empty-state .btn {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    /* Profile Item Cards — same stacked card as public listings */
    .profile-listings .item-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: var(--m3-surface, #fffbfe);
        border-radius: 12px 12px 0px 0px !important;
        border: 0px solid var(--m3-outline-variant, #cac4d0);
        box-shadow: none;
        overflow: hidden;
        position: relative;
        transition: border-color 0.2s ease;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    
    .profile-listings .item-card:hover {
        box-shadow: none;
        transform: none;
        border-color: var(--m3-outline, #79747e);
    }
    
    .profile-listings .item-card__link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;
        min-height: 0;
    }
    
    .profile-listings .item-card__image {
        width: 100%;
        min-height: 200px;
        height: 200px;
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-listings .item-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .profile-listings .item-card__content {
        flex: 1;
        padding: 12px 0px 0px 0px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
    }
    
    .profile-listings .item-card__title {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 6px;
        line-height: 1.3;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .profile-listings .item-card__price {
        font-size: 14px;
        font-weight: 600;
        color: #059669;
        margin-bottom: 6px;
    }
    
    .profile-listings .item-card__meta {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .profile-listings .item-card__location {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
    }
    
    .profile-listings .item-card__location .material-icons {
        font-size: 12px;
    }
    
    .profile-listings .item-card__time {
        font-size: 13px;
        color: #9ca3af;
    }
    
    .profile-listings .item-card__stats {
        display: flex;
        gap: 8px;
        margin-top: auto;
    }

    /* Profile auctions: stabilize numbers + allow timer to drop to next line */
    .profile-listings .item-card__stats--auction {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 6px;
        column-gap: 10px;
    }

    .profile-listings .item-card__stats--auction .stat {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .profile-listings .item-card__stats--auction .stat--auction-timer {
        flex-basis: 100%;
        order: 10;
        margin-top: 2px;
    }

    /* (profile auction extras were inlined into `.item-card__stats`) */
    
    .profile-listings .item-card__stats .stat {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #6b7280;
    }
    
    .profile-listings .item-card__stats .stat .material-icons {
        font-size: 13px;
    }

    /* 60-day visibility lifecycle for ordinary ads (mobile breakpoints). */
    .profile-listings .item-card__lifecycle {
        margin-top: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.02);
        border: 1px solid rgba(0, 0, 0, 0.04);
    }
    .profile-listings .item-card__lifecycle-label {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .profile-listings .item-card__lifecycle-bar {
        width: 100%;
        height: 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }
    .profile-listings .item-card__lifecycle-fill {
        display: block;
        height: 100%;
        border-radius: 3px;
    }
    .profile-listings .item-card__lifecycle--green .item-card__lifecycle-fill {
        background: linear-gradient(90deg, #10b981, #34d399);
    }
    .profile-listings .item-card__lifecycle--yellow .item-card__lifecycle-fill {
        background: linear-gradient(90deg, #f59e0b, #fbbf24);
    }
    .profile-listings .item-card__lifecycle--red .item-card__lifecycle-fill {
        background: linear-gradient(90deg, #ef4444, #f87171);
    }
    .profile-listings .item-card__lifecycle--green .item-card__lifecycle-label { color: #047857; }
    .profile-listings .item-card__lifecycle--yellow .item-card__lifecycle-label { color: #b45309; }
    .profile-listings .item-card__lifecycle--red .item-card__lifecycle-label { color: #b91c1c; }
    .profile-listings .item-card__lifecycle-meta {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        margin-top: 4px;
        font-size: 11px;
        color: #6b7280;
        flex-wrap: wrap;
    }
    .profile-listings .item-card__lifecycle-meta-cell {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
    }
    .profile-listings .item-card__lifecycle-meta-cell .material-icons {
        font-size: 12px;
    }
    .profile-listings .item-card__lifecycle-meta-cell--end {
        margin-left: auto;
    }
    
    .profile-listings .item-card__actions-top {
        position: absolute;
        top: 8px;
        right: 8px;
        display: none !important; /* Hide on mobile - use popup instead */
        gap: 4px;
        z-index: 2;
    }
    
    .profile-listings .action-icon-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(4px);
    }
    
    .profile-listings .action-icon-btn--edit {
        background: rgba(59, 130, 246, 0.9);
        color: white;
    }
    
    .profile-listings .action-icon-btn--delete {
        background: rgba(239, 68, 68, 0.9);
        color: white;
    }
    
    .profile-listings .action-icon-btn .material-icons {
        font-size: 14px;
    }
    
    .profile-listings .item-card__actions-bottom {
        position: absolute;
        bottom: 8px;
        right: 8px;
        display: none !important; /* Hide on mobile - use popup instead */
        z-index: 2;
    }
    
    .profile-listings .btn--bump {
        background: rgba(79, 70, 229, 0.9);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        backdrop-filter: blur(4px);
        transition: all 0.2s ease;
    }
    
    .profile-listings .btn--bump .material-icons {
        font-size: 12px;
    }
    
    .profile-listings .btn--bump-disabled {
        background: rgba(156, 163, 175, 0.9);
        cursor: not-allowed;
    }
    
    .profile-listings .btn--bump-purge {
        background: rgba(220, 38, 38, 0.18);
        color: #b91c1c;
        border: 1px solid rgba(220, 38, 38, 0.45);
        cursor: not-allowed;
    }
    
    .profile-listings .btn--favorite-remove {
        background: rgba(239, 68, 68, 0.9);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        backdrop-filter: blur(4px);
        transition: all 0.2s ease;
    }
    
    .profile-listings .btn--favorite-remove .material-icons {
        font-size: 12px;
    }
    
    /* Settings Form */
    .settings-form {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .settings-section {
        margin-bottom: 24px;
    }
    
    .settings-section:last-child {
        margin-bottom: 0;
    }
    
    .settings-section h4 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .settings-section h4 .material-icons {
        font-size: 18px;
        color: #6b7280;
    }
    
    /* Avatar Upload */
    .avatar-upload {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        padding: 16px;
        background: #f9fafb;
        border-radius: 8px;
    }
    
    .avatar-preview {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .avatar-preview .material-icons {
        font-size: 24px;
        color: #9ca3af;
    }
    
    .avatar-upload-info h5 {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }
    
    .avatar-upload-info p {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 8px;
        line-height: 1.4;
    }
    
    .avatar-upload-info .btn {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    /* Form Styles */
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }
    
    /* Profile settings page - ensure single column layout */
    .profile-page .settings-form .form-row {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
    
    /* Profile settings page - ensure full width for form groups */
    .profile-page .settings-form .form-row .form-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
    
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 6px;
    }
    
    .form-label.required::after {
        content: ' *';
        color: #ef4444;
    }
    
    .form-input {
        width: 100%;
        padding: 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }
    
    .form-help {
        font-size: 12px;
        color: #6b7280;
        margin-top: 4px;
        display: block;
    }
    
    .form-help.success {
        color: #059669;
    }
    
    .form-help.error {
        color: #ef4444;
    }
    
    .input-group {
        position: relative;
    }
    
    .password-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #6b7280;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .password-toggle:hover {
        color: #374151;
        background: #f3f4f6;
    }
    
    .password-toggle .material-icons {
        font-size: 18px;
    }
    
    .password-strength {
        margin-top: 8px;
        height: 4px;
        background: #e5e7eb;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .password-strength-bar {
        height: 100%;
        width: 0%;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    .password-strength-bar.weak {
        width: 25%;
        background: #ef4444;
    }
    
    .password-strength-bar.fair {
        width: 50%;
        background: #f59e0b;
    }
    
    .password-strength-bar.good {
        width: 75%;
        background: #3b82f6;
    }
    
    .password-strength-bar.strong {
        width: 100%;
        background: #059669;
    }
    
    .password-strength-text {
        font-size: 12px;
        margin-top: 4px;
        font-weight: 500;
    }
    
    .password-strength-text.weak {
        color: #ef4444;
    }
    
    .password-strength-text.fair {
        color: #f59e0b;
    }
    
    .password-strength-text.good {
        color: #3b82f6;
    }
    
    .password-strength-text.strong {
        color: #059669;
    }
    
    .form-actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        flex-wrap: wrap;
    }
    
    .form-actions .btn {
        flex: 1;
        min-width: 120px;
        padding: 12px 16px;
        font-size: 14px;
        justify-content: center;
    }
    
    /* Account Info */
    .account-info {
        background: #f9fafb;
        border-radius: 8px;
        padding: 16px;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .info-item:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-size: 14px;
        color: #6b7280;
    }
    
    .info-value {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
    }
    
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .status-badge--verified {
        background: #d1fae5;
        color: #065f46;
    }
    
    .status-badge--unverified {
        background: #fef3c7;
        color: #92400e;
    }
    
    .status-badge .material-icons {
        font-size: 14px;
    }
    
    /* Pagination */
    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    
    .pagination-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 8px 16px;
        background: #f3f4f6;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        color: #6b7280;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    
    .pagination-btn:hover {
        background: #e5e7eb;
        color: #374151;
    }
    
    .pagination-btn .material-icons {
        font-size: 16px;
    }
    
    .pagination-info {
        font-size: 14px;
        color: #6b7280;
        text-align: center;
    }
    
    /* Notifications */
    .notification {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        margin-bottom: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border-left: 4px solid;
        position: relative;
        animation: slideInFromTop 0.3s ease;
    }
    
    .notification--success {
        border-left-color: #059669;
    }
    
    .notification--error {
        border-left-color: #ef4444;
    }
    
    .notification--warning {
        border-left-color: #f59e0b;
    }
    
    .notification--info {
        border-left-color: #3b82f6;
    }
    
    .notification .material-icons {
        font-size: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }
    
    .notification-message a {
        color: inherit;
        text-decoration: none;
        font-weight: inherit;
    }
    
    .notification-message a:hover {
        text-decoration: underline;
    }
    
    .notification--success .material-icons {
        color: #059669;
    }
    
    .notification--error .material-icons {
        color: #ef4444;
    }

    .notification--error .material-icons {
        color: #fff;
    }
    
    .notification--warning .material-icons {
        color: #f59e0b;
    }
    
    .notification--info .material-icons {
        color: #3b82f6;
    }
    
    .notification-content {
        flex: 1;
        min-width: 0;
    }
    
    .notification-title {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 2px;
    }
    
    .notification-message {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.4;
    }
    
    .notification-close {
        background: none;
        border: none;
        cursor: pointer;
        color: #9ca3af;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .notification-close:hover {
        background: #f3f4f6;
        color: #6b7280;
    }
    
    .notification-close .material-icons {
        font-size: 16px;
    }
.profile-listings .item-card--draft-strip .item-card__image {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 200px !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .profile-listings .item-card--draft-strip .item-card__image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .profile-listings .item-card--draft-strip .item-card__image .no-image {
        height: 200px;
    }
    
    .profile-listings .item-card--draft-strip .item-card__image .no-image .material-icons {
        font-size: 32px;
    }
    
    .profile-listings .item-card--draft-strip .item-card__content {
        padding: 8px 12px !important;
        gap: 4px !important;
    }
    
    .profile-listings .item-card--draft-strip .item-card__title {
        font-size: 14px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .profile-listings .item-card--draft-strip .item-card__category {
        font-size: 12px !important;
    }
    
    .profile-listings .item-card--draft-strip .item-card__price {
        font-size: 16px !important;
        margin-top: 2px;
    }
    
    .profile-listings .item-card--draft-strip .item-card__meta,
    .profile-listings .item-card--draft-strip .item-card__stats {
        display: flex !important;
    }
    
    .profile-listings .item-card--draft-strip .item-card__actions-strip {
        display: none !important;
    }
    
    .profile-listings .item-card--draft-strip .item-card__actions-bottom {
        display: flex;
        gap: 8px;
        padding: 8px 12px;
        border-top: 1px solid #e5e7eb;
    }
    
    .profile-listings .item-card--draft-strip.item-card--manage {
        flex-direction: column !important;
        border-radius: 12px 12px 0px 0px !important;
        overflow: hidden;
        height: auto !important;
        max-height: none !important;
        padding: 0;
    }
    
    .profile-listings .item-card--draft-strip.item-card--manage .item-card__link {
        flex-direction: column !important;
        width: 100% !important;
    }
}


/* ============================================
   PROFILE PAGE - RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
    .profile-page {
        padding: 4px 0 80px 0;
    }
    
    .profile-page .container {
        padding: 0 4px;
    }
    
    .profile-page .profile-header {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    .profile-header .page-title {
        font-size: 18px;
    }
    
    .profile-header .page-subtitle {
        font-size: 13px;
    }
    
    .profile-card {
        padding: 12px;
        margin-bottom: 12px;
    }

    .profile-management {
        padding: 14px 12px;
    }

    .profile-legend {
        margin-top: 12px;
        padding: 14px 12px;
    }

    .profile-legend__items {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-legend__item {
        font-size: 13px;
        gap: 8px;
    }

    .profile-management.item-detail-main {
        padding: 14px 12px !important;
    }
    
    .profile-info {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .profile-avatar {
        width: 85px;
        height: 85px;
    }

    .profile-avatar .material-icons {
        font-size: 36px;
    }
    
    .profile-name {
        font-size: 15px;
    }
    
    .profile-email {
        font-size: 11px;
    }
    
    .profile-phone {
        font-size: 11px;
    }
    
    .profile-joined {
        font-size: 10px;
    }
    
    .profile-navigation {
        gap: 6px;
        margin-top: 10px;
        padding-top: 12px;
    }
    
    .profile-nav-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .profile-nav-btn .material-icons {
        font-size: 16px;
    }
    
    .nav-label {
        font-size: 16px;
    }
    
    .nav-count {
        font-size: 12px;
        padding: 1px 6px;
    }
    
    .profile-tabs {
        padding: 0;
        margin-bottom: 16px;
    }
    
    .tab-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .tab-btn-content .material-icons {
        font-size: 16px;
    }
    
    .tab-arrow {
        font-size: 14px;
    }
    
    .profile-listings {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .profile-listings .item-card__image {
        width: 100%;
        min-height: 184px;
        height: 184px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .profile-listings .item-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    .profile-listings .item-card__content {
        padding: 10px 0px 0px 0px !important;
    }
    
    .profile-listings .item-card__title {
        font-size: 13px;
        margin-bottom: 4px;
    }
    
    .profile-listings .item-card__price {
        font-size: 13px;
        margin-bottom: 4px;
    }
    
    .profile-listings .item-card__meta {
        font-size: 10px;
        margin-bottom: 4px;
    }
    
    .profile-listings .item-card__location {
        font-size: 12px;
    }
    
    .profile-listings .item-card__location .material-icons {
        font-size: 10px;
    }
    
    .profile-listings .item-card__time {
        font-size: 12px;
    }
    
    .profile-listings .item-card__stats .stat {
        font-size: 12px;
    }
    
    .profile-listings .item-card__stats .stat .material-icons {
        font-size: 13px;
    }
    
    .profile-listings .action-icon-btn {
        width: 24px;
        height: 24px;
    }
    
    .profile-listings .action-icon-btn .material-icons {
        font-size: 12px;
    }
    
    .profile-listings .btn--bump,
    .profile-listings .btn--favorite-remove {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .profile-listings .btn--bump .material-icons,
    .profile-listings .btn--favorite-remove .material-icons {
        font-size: 10px;
    }
    
    .settings-form {
        padding: 12px;
    }
    
    .settings-section {
        margin-bottom: 20px;
    }
    
    .settings-section h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .settings-section h4 .material-icons {
        font-size: 16px;
    }
    
    .avatar-upload {
        gap: 12px;
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .avatar-preview {
        width: 50px;
        height: 50px;
    }
    
    .avatar-preview .material-icons {
        font-size: 20px;
    }
    
    .avatar-upload-info h5 {
        font-size: 13px;
    }
    
    .avatar-upload-info p {
        font-size: 11px;
    }
    
    .avatar-upload-info .btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    /* Profile settings page - ensure single column layout on small screens */
    .profile-page .settings-form .form-row {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 12px !important;
    }
    
    /* Profile settings page - ensure full width for form groups on small screens */
    .profile-page .settings-form .form-row .form-group {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
    
    .form-label {
        font-size: 13px;
        margin-bottom: 4px;
    }
    
    .form-input {
        padding: 10px;
        font-size: 13px;
    }
    
    .form-help {
        font-size: 11px;
    }
    
    .password-toggle .material-icons {
        font-size: 16px;
    }
    
    .password-strength-text {
        font-size: 11px;
    }
    
    .form-actions {
        gap: 8px;
        margin-top: 16px;
    }
    
    .form-actions .btn {
        padding: 10px 12px;
        font-size: 13px;
        min-width: 100px;
    }
    
    .account-info {
        padding: 12px;
    }
    
    .info-item {
        padding: 6px 0;
    }
    
    .info-label {
        font-size: 13px;
    }
    
    .info-value {
        font-size: 13px;
    }
    
    .status-badge {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    .status-badge .material-icons {
        font-size: 12px;
    }
    
    .pagination {
        padding: 12px;
        margin-top: 16px;
    }
    
    .pagination-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .pagination-btn .material-icons {
        font-size: 14px;
    }
    
    .pagination-info {
        font-size: 13px;
    }
    
    .notification {
        padding: 12px;
        margin-bottom: 12px;
    }
    
    .notification .material-icons {
        font-size: 18px;
    }
    
    .notification-title {
        font-size: 13px;
    }
    
    .notification-message {
        font-size: 12px;
    }
    
    .notification-close .material-icons {
        font-size: 14px;
    }
    
    .empty-state {
        padding: 30px 16px;
    }
    
    .empty-state__icon .material-icons {
        font-size: 40px;
    }
    
    .empty-state__title {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .empty-state__text {
        font-size: 13px;
        margin-bottom: 16px;
    }
    
    .empty-state .btn {
        padding: 10px 20px;
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .profile-page .container {
        padding: 0 2px;
    }
    
    .profile-page .profile-header {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    .profile-card {
        padding: 10px;
    }

    .profile-management {
        padding: 12px 10px;
    }

    .profile-management.item-detail-main {
        padding: 12px 10px !important;
    }
    
    .profile-info {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
    }

    .profile-avatar .material-icons {
        font-size: 34px;
    }
    
    .profile-name {
        font-size: 14px;
    }
    
    .profile-email {
        font-size: 10px;
    }
    
    .profile-phone {
        font-size: 10px;
    }
    
    .profile-joined {
        font-size: 9px;
    }
    
    .profile-navigation {
        gap: 4px;
        margin-top: 8px;
        padding-top: 10px;
    }
    
    .profile-nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .profile-nav-btn .material-icons {
        font-size: 14px;
    }
    
    .nav-label {
        font-size: 16px;
    }
    
    .nav-count {
        font-size: 12px;
        padding: 1px 5px;
    }
    
    .profile-tabs {
        padding: 0;
        margin-bottom: 12px;
    }
    
    .tab-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .tab-btn-content {
        gap: 8px;
    }
    
    .tab-btn-content .material-icons {
        font-size: 14px;
    }
    
    .tab-arrow {
        font-size: 12px;
    }
    
    .profile-listings {
        gap: 10px;
    }
    
    .profile-listings .item-card__image {
        width: 100%;
        min-height: 168px;
        height: 168px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .profile-listings .item-card__content {
        padding: 8px 0px 0px 0px !important;;
    }
    
    .profile-listings .item-card__title {
        font-size: 12px;
    }
    
    .profile-listings .item-card__price {
        font-size: 12px;
    }
    
    .profile-listings .item-card__meta {
        font-size: 9px;
    }
    
    .profile-listings .item-card__location {
        font-size: 12px;
    }
    
    .profile-listings .item-card__location .material-icons {
        font-size: 9px;
    }
    
    .profile-listings .item-card__time {
        font-size: 12px;
    }
    
    .profile-listings .item-card__stats .stat {
        font-size: 12px;
    }
    
    .profile-listings .item-card__stats .stat .material-icons {
        font-size: 13px;
    }
    
    .profile-listings .action-icon-btn {
        width: 22px;
        height: 22px;
    }
    
    .profile-listings .action-icon-btn .material-icons {
        font-size: 11px;
    }
    
    .profile-listings .btn--bump,
    .profile-listings .btn--favorite-remove {
        padding: 3px 6px;
        font-size: 9px;
    }
    
    .profile-listings .btn--bump .material-icons,
    .profile-listings .btn--favorite-remove .material-icons {
        font-size: 9px;
    }
    
    .settings-form {
        padding: 10px;
    }
    
    .settings-section h4 {
        font-size: 14px;
    }
    
    .settings-section h4 .material-icons {
        font-size: 15px;
    }
    
    .avatar-upload {
        gap: 10px;
        padding: 10px;
    }
    
    .avatar-preview {
        width: 45px;
        height: 45px;
    }
    
    .avatar-preview .material-icons {
        font-size: 18px;
    }
    
    .avatar-upload-info h5 {
        font-size: 12px;
    }
    
    .avatar-upload-info p {
        font-size: 10px;
    }
    
    .avatar-upload-info .btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .form-label {
        font-size: 12px;
    }
    
    .form-input {
        padding: 8px;
        font-size: 12px;
    }
    
    .form-help {
        font-size: 10px;
    }
    
    .password-toggle .material-icons {
        font-size: 14px;
    }
    
    .password-strength-text {
        font-size: 10px;
    }
    
    .form-actions .btn {
        padding: 8px 10px;
        font-size: 12px;
        min-width: 80px;
    }
    
    .account-info {
        padding: 10px;
    }
    
    .info-label {
        font-size: 12px;
    }
    
    .info-value {
        font-size: 12px;
    }
    
    .status-badge {
        padding: 2px 4px;
        font-size: 10px;
    }
    
    .status-badge .material-icons {
        font-size: 11px;
    }
    
    .pagination {
        padding: 10px;
    }
    
    .pagination-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .pagination-btn .material-icons {
        font-size: 12px;
    }
    
    .pagination-info {
        font-size: 12px;
    }
    
    .notification {
        padding: 10px;
    }
    
    .notification .material-icons {
        font-size: 16px;
    }
    
    .notification-title {
        font-size: 12px;
    }
    
    .notification-message {
        font-size: 11px;
    }
    
    .notification-close .material-icons {
        font-size: 12px;
    }
    
    .empty-state {
        padding: 20px 12px;
    }
    
    .empty-state__icon .material-icons {
        font-size: 32px;
    }
    
    .empty-state__title {
        font-size: 16px;
    }
    
    .empty-state__text {
        font-size: 12px;
    }
    
    .empty-state .btn {
        padding: 8px 16px;
        font-size: 16px;
    }
}

/* ============================================
   MOBILE MESSAGES
   ============================================ */

@media (max-width: 1023px) {
    .messages-page {
        height: calc(100vh - 60px); /* Account for mobile bottom nav */
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .messages-page .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Hide mobile filters on messages page - they are not relevant here */
    .messages-page + .mobile-filters,
    .messages-page ~ .mobile-filters {
        display: none !important;
    }
    
    /* Hide filters using body class (set by JavaScript) */
    body.messages-page-active .mobile-filters,
    body.messages-page-active .mobile-filters-dropdown,
    body.messages-page-active .mobile-sort-buttons {
        display: none !important;
    }
    
    /* Adjust messages page height without filters */
    body.messages-page-active .messages-page {
        height: calc(100vh - 60px);
        margin-top: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    body.messages-page-active .messages-layout {
        height: calc(100vh - 60px);
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    /* Ensure no extra spacing */
    body.messages-page-active .conversations-list {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    body.messages-page-active .chat-messages {
        margin-bottom: 0 !important;
        padding-bottom: 8px !important; /* Минимальный отступ */
    }
    
    body.messages-page-active .chat-input-container {
        margin-bottom: 0 !important;
        padding-bottom: 12px !important; /* Фиксированный отступ */
    }
    
    /* Remove all bottom spacing from messages page elements */
    body.messages-page-active .messages-layout,
    body.messages-page-active .conversations-sidebar,
    body.messages-page-active .messages-content {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure header doesn't add extra spacing on messages page */
    body.messages-page-active .header + .messages-page {
        margin-top: 0 !important;
    }
    
    .messages-layout {
        display: block;
        position: relative;
        width: 100%;
        height: calc(100vh - 60px);
        overflow: hidden;
    }
    
    /* Conversations sidebar - shown by default on mobile */
    .conversations-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        z-index: 2;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    /* Hide sidebar when chat is active */
    .messages-layout.show-chat .conversations-sidebar {
        transform: translateX(-100%);
    }
    
    .conversations-header {
        padding: 16px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .conversations-title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
    }
    
    .conversations-list {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .conversation-item {
        padding: 16px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        color: inherit;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    
    .conversation-item:active {
        background: #f3f4f6;
        transform: scale(0.98);
    }
    
    .conversation-item.active {
        background: #eff6ff;
        border-left: 3px solid #4f46e5;
        padding-left: 13px; /* Compensate for border */
    }
    
    .conversation-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 3px;
        background: #4f46e5;
    }
    
    .conversation-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .conversation-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .conversation-avatar .material-icons {
        font-size: 20px;
        color: #9ca3af;
    }
    
    .conversation-content {
        flex: 1;
        min-width: 0;
    }
    
    .conversation-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    
    .conversation-name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
    }
    
    .conversation-time {
        font-size: 12px;
        color: #9ca3af;
    }
    
    .conversation-preview {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }
    
    .conversation-ad-title {
        font-size: 12px;
        color: #4f46e5;
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
    }
    
    .conversation-ad-title .material-icons {
        font-size: 14px;
    }
    
    .conversation-unread {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        min-width: 20px;
        height: 20px;
        background: #4f46e5;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        color: #ffffff;
    }
    
    .conversation-unread:empty {
        display: none !important;
    }
    
    /* Dynamic chat container for loading chats when no conversations exist */
    #dynamicChatContainer {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    
    #dynamicChatContainer .chat-header {
        flex-shrink: 0;
    }
    
    #dynamicChatContainer .chat-messages {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #dynamicChatContainer .chat-input-container {
        flex-shrink: 0;
    }
    
    /* Messages content - chat area (hidden by default on mobile) */
    .messages-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        z-index: 3;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    /* Show chat when active */
    .messages-layout.show-chat .messages-content {
        transform: translateX(0);
    }
    
    .chat-header {
        flex-shrink: 0;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        background: #ffffff;
        min-height: 60px;
    }
    
    .chat-back-btn {
        display: flex !important; /* Always show on mobile */
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .chat-back-btn:hover,
    .chat-back-btn:active {
        background: #f3f4f6;
    }
    
    .chat-back-btn .material-icons {
        font-size: 24px;
        color: #374151;
    }
    
    .chat-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .chat-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .chat-avatar .material-icons {
        font-size: 18px;
        color: #9ca3af;
    }
    
    .chat-user-info {
        flex: 1;
        min-width: 0;
    }
    
    .chat-user-name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 2px;
    }
    
    .chat-ad-link {
        font-size: 12px;
        color: #6b7280;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .chat-ad-link:hover {
        color: #4f46e5;
    }
    .chat-user-name--link,
    .chat-user-name--link:visited,
    .chat-user-name--link:hover,
    .chat-user-name--link:focus { font-size: 14px; color: #111827; text-decoration: none; }
    .chat-user-status {
        display: block;
        font-size: 13px;
        color: #9ca3af;
        margin-top: 2px;
    }
    .chat-ad-container { order: 3; flex: 0 0 100%; padding: 0; }
    .chat-ad-badge { gap: 5px; margin-top: 0; padding: 5px 7px; }
    .chat-ad-badge__price, .chat-ad-badge__title { font-size: 11px; }
    .chat-ad-badge__status { font-size: 10px; }
    
    .chat-messages {
        flex: 1;
        padding: 16px;
        padding-bottom: 8px; /* Минимальный отступ снизу */
        overflow-y: auto;
        overflow-x: hidden;
        background: #f9fafb;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    
    .message {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        max-width: 85%;
        animation: messageSlideIn 0.2s ease;
    }
    
    @keyframes messageSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .message--sent {
        align-self: flex-end;
        flex-direction: row-reverse;
        margin-left: auto;
    }
    
    .message--received {
        align-self: flex-start;
        margin-right: auto;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .message-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .message-avatar .material-icons {
        font-size: 16px;
        color: #9ca3af;
    }
    
    .message-content {
        flex: 1;
        min-width: 0;
    }
    
    .message-bubble {
        background: white;
        padding: 12px 16px;
        border-radius: 18px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        word-wrap: break-word;
    }
    
    .message--sent .message-bubble {
        background: #4f46e5;
        color: white;
    }
    
    .message--received .message-bubble {
        background: white;
        color: #111827;
    }
    
    .message-text {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .message-time {
        font-size: 11px;
        color: #9ca3af;
        margin-top: 4px;
        text-align: right;
    }
    
    .message--received .message-time {
        text-align: left;
    }
    
    .chat-input-container {
        flex-shrink: 0;
        padding: 12px 16px;
        padding-bottom: 12px; /* Минимальный отступ снизу */
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        margin-bottom: 0;
    }
    
    .chat-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 10px 14px;
        background: #f9fafb;
        border-radius: 24px;
        border: 1px solid #e5e7eb;
        transition: border-color 0.2s ease;
    }
    
    .chat-input-wrapper:focus-within {
        border-color: #4f46e5;
        background: #ffffff;
    }
    
    .chat-input {
        flex: 1;
        border: none;
        background: none;
        padding: 6px 0;
        font-size: 15px;
        line-height: 1.5;
        resize: none;
        max-height: 120px;
        outline: none;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    
    .chat-input::placeholder {
        color: #9ca3af;
    }
    
    .chat-attach-btn,
    .chat-send-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    
    .chat-attach-btn .material-icons,
    .chat-send-btn .material-icons {
        font-size: 22px;
        color: #6b7280;
    }
    
    .chat-send-btn {
        background: #4f46e5;
    }
    
    .chat-send-btn .material-icons {
        color: #ffffff;
    }
    
    .chat-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .chat-attach-btn:active,
    .chat-send-btn:active {
        transform: scale(0.9);
    }
    
    /* Empty states */
    .empty-conversations,
    .empty-messages {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        min-height: 300px;
    }
    
    .empty-conversations__icon,
    .empty-messages__icon {
        width: 80px;
        height: 80px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }
    
    .empty-conversations__icon .material-icons,
    .empty-messages__icon .material-icons {
        font-size: 40px;
        color: #9ca3af;
    }
    
    .empty-conversations__title,
    .empty-messages__title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
    }
    
    .empty-conversations__text,
    .empty-messages__text {
        font-size: 14px;
        color: #6b7280;
        line-height: 1.5;
    }
    
    /* Message bubbles */
    .message-bubble {
        background: #ffffff;
        padding: 10px 14px;
        border-radius: 16px;
        word-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    
    .message--sent .message-bubble {
        background: #4f46e5;
        color: #ffffff;
        border-bottom-right-radius: 4px;
    }
    
    .message--received .message-bubble {
        background: #ffffff;
        color: #111827;
        border-bottom-left-radius: 4px;
    }
    
    .message-text {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
    }
    
    .message-time {
        font-size: 11px;
        color: #9ca3af;
        margin-top: 4px;
        display: block;
    }
    
    .message--sent .message-time {
        text-align: right;
    }
    
    .message--received .message-time {
        text-align: left;
    }
    
    /* Message images */
    .message-image {
        max-width: 250px;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 4px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    
    .message-image:active {
        transform: scale(0.98);
    }
    
    .message-image img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Chat image preview */
    .chat-image-preview {
        position: relative;
        margin-bottom: 12px;
        max-width: 200px;
    }
    
    .chat-image-preview img {
        width: 100%;
        border-radius: 12px;
        display: block;
    }
    
    .chat-image-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        background: rgba(0, 0, 0, 0.7);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .chat-image-remove .material-icons {
        font-size: 18px;
        color: #ffffff;
    }
    
    .chat-image-remove:active {
        transform: scale(0.9);
    }
    
    /* Chat blocked warning */
    .chat-blocked-warning {
        padding: 16px;
        background: #fef3c7;
        border-left: 4px solid #f59e0b;
        margin: 16px;
        border-radius: 8px;
    }
    
    .chat-blocked-warning--danger {
        background: #fee2e2;
        border-left-color: #ef4444;
    }
    
    .chat-blocked-icon {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    
    .chat-blocked-icon .material-icons {
        font-size: 24px;
        color: #f59e0b;
    }
    
    .chat-blocked-warning--danger .chat-blocked-icon .material-icons {
        color: #ef4444;
    }
    
    .chat-blocked-title {
        font-size: 15px;
        font-weight: 600;
        color: #78350f;
        margin-bottom: 4px;
    }
    
    .chat-blocked-warning--danger .chat-blocked-title {
        color: #7f1d1d;
    }
    
    .chat-blocked-text {
        font-size: 13px;
        color: #92400e;
        line-height: 1.5;
    }
    
    .chat-blocked-warning--danger .chat-blocked-text {
        color: #991b1b;
    }
    
    /* Smooth transitions for mobile navigation */
    .messages-layout,
    .conversations-sidebar,
    .messages-content {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Optimize animations */
    @media (prefers-reduced-motion: reduce) {
        .messages-layout,
        .conversations-sidebar,
        .messages-content,
        .message {
            transition: none !important;
            animation: none !important;
        }
    }
    
    /* Support conversation styling */
    .support-conversation {

    }
    
    .support-conversation .conversation-name,
    .support-conversation .conversation-time,
    .support-conversation .conversation-preview {
        
    }
    
    .support-conversation.active {

    }
    
    .support-conversation .conversation-avatar {

    }
    
    .support-conversation .conversation-avatar .material-icons {

    }
    
    .support-conversation .conversation-unread {
        background: #ffffff;
        color: #4f46e5;
    }
    
    /* Swipe indicator for going back */
    .swipe-back-indicator {
        position: fixed;
        top: 50%;
        left: -50px;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(79, 70, 229, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: left 0.2s ease;
        pointer-events: none;
        z-index: 10;
    }
    
    .swipe-back-indicator.visible {
        left: 10px;
    }
    
    .swipe-back-indicator .material-icons {
        font-size: 24px;
        color: #ffffff;
    }
}

/* Smaller mobile screens - additional optimizations */
@media (max-width: 480px) {
    body:has(.messages-page),
    body.messages-page-active {
        padding-bottom: 0 !important;
    }
    
    .messages-page {
        height: calc(100vh - 60px) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .chat-messages {
        padding: 12px;
        padding-bottom: 4px !important;
        margin-bottom: 0 !important;
    }
    
    .chat-input-container {
        padding: 10px 12px;
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }
    
    .message {
        margin-bottom: 12px;
        max-width: 90%;
    }
    
    .message-bubble {
        padding: 10px 12px;
    }
    
    .conversations-list {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    body:has(.messages-page),
    body.messages-page-active {
        padding-bottom: 0 !important;
    }
    
    .messages-page {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .chat-messages {
        padding: 10px;
        padding-bottom: 4px !important;
        margin-bottom: 0 !important;
    }
    
    .chat-input-container {
        padding: 8px 10px;
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .message {
        margin-bottom: 10px;
    }
    
    .conversations-list {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1023px) {
    .chat-send-btn:hover {
        background: #4338ca;
        transform: scale(1.05);
    }
    
    .chat-send-btn:disabled {
        background: #d1d5db;
        cursor: not-allowed;
        transform: none;
    }
    
    .chat-send-btn .material-icons {
        font-size: 18px;
        color: white;
    }
    
    /* Mobile message typing indicator */
    .typing-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f3f4f6;
        border-radius: 18px;
        margin: 8px 0;
        font-size: 12px;
        color: #6b7280;
    }
    
    .typing-indicator .material-icons {
        font-size: 16px;
        animation: pulse 1.5s ease-in-out infinite;
    }
    
    /* Mobile message status indicators */
    .message-status {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
        font-size: 10px;
        color: #9ca3af;
    }
    
    .message-status .material-icons {
        font-size: 12px;
    }
    
    .message-status--sent .material-icons {
        color: #6b7280;
    }
    
    .message-status--delivered .material-icons {
        color: #3b82f6;
    }
    
    .message-status--read .material-icons {
        color: #059669;
    }
    
    /* Mobile message reactions */
    .message-reactions {
        display: flex;
        gap: 4px;
        margin-top: 8px;
        flex-wrap: wrap;
    }
    
    .message-reaction {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: #f3f4f6;
        border-radius: 12px;
        font-size: 12px;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .message-reaction:hover {
        background: #e5e7eb;
    }
    
    .message-reaction.active {
        background: #dbeafe;
        color: #3b82f6;
    }
    
    /* Mobile message search */
    .chat-search {
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    
    .chat-search-input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 20px;
        font-size: 14px;
        background: white;
    }
    
    .chat-search-input:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }
    
    /* Mobile message filters */
    .chat-filters {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        overflow-x: auto;
    }
    
    .chat-filter-btn {
        padding: 6px 12px;
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 16px;
        font-size: 12px;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .chat-filter-btn:hover {
        border-color: #4f46e5;
        color: #4f46e5;
    }
    
    .chat-filter-btn.active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: white;
    }
    
    /* Mobile message date separator */
    .message-date-separator {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 16px 0;
        font-size: 12px;
        color: #9ca3af;
    }
    
    .message-date-separator::before,
    .message-date-separator::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }
    
    /* Mobile message loading states */
    .message-loading {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f3f4f6;
        border-radius: 18px;
        margin: 8px 0;
        font-size: 12px;
        color: #6b7280;
    }
    
    .message-loading .material-icons {
        font-size: 16px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    /* Mobile message error states */
    .message-error {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #fee2e2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        margin: 8px 0;
        font-size: 12px;
        color: #ef4444;
    }
    
    .message-error .material-icons {
        font-size: 16px;
    }
    
    /* Mobile message retry button */
    .message-retry {
        padding: 4px 8px;
        background: #ef4444;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .message-retry:hover {
        background: #b91c1c;
    }
    
    /* Mobile message context menu */
    .message-context-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        min-width: 120px;
        overflow: hidden;
    }
    
    .message-context-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12px;
        color: #374151;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .message-context-item:hover {
        background: #f3f4f6;
    }
    
    .message-context-item--danger {
        color: #ef4444;
    }
    
    .message-context-item--danger:hover {
        background: #fee2e2;
    }
    
    .message-context-item .material-icons {
        font-size: 16px;
    }
    
    /* Mobile message forwarding */
    .message-forward {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 8px;
        margin: 8px 0;
        font-size: 12px;
        color: #0369a1;
    }
    
    .message-forward .material-icons {
        font-size: 16px;
    }
    
    /* Mobile message reply */
    .message-reply {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #f9fafb;
        border-left: 3px solid #4f46e5;
        border-radius: 0 8px 8px 0;
        margin: 8px 0;
        font-size: 12px;
        color: #6b7280;
    }
    
    .message-reply .material-icons {
        font-size: 16px;
    }
    
    .message-reply-content {
        flex: 1;
        min-width: 0;
    }
    
    .message-reply-author {
        font-weight: 500;
        color: #374151;
        margin-bottom: 2px;
    }
    
    .message-reply-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }
    
    /* Mobile message editing */
    .message-editing {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #fef3c7;
        border: 1px solid #fbbf24;
        border-radius: 8px;
        margin: 8px 0;
        font-size: 12px;
        color: #92400e;
    }
    
    .message-editing .material-icons {
        font-size: 16px;
    }
    
    .message-editing-input {
        flex: 1;
        padding: 4px 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 12px;
        background: white;
    }
    
    .message-editing-actions {
        display: flex;
        gap: 4px;
    }
    
    .message-editing-btn {
        padding: 4px 8px;
        border: none;
        border-radius: 4px;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .message-editing-btn--save {
        background: #059669;
        color: white;
    }
    
    .message-editing-btn--cancel {
        background: #6b7280;
        color: white;
    }
    
    .message-editing-btn:hover {
        opacity: 0.8;
    }
}

/* ============================================
   MOBILE NOTIFICATIONS & MODALS
   ============================================ */

@media (max-width: 1023px) {
    /* Mobile notifications */
    .notification {
        position: fixed;
        top: 20px;
        left: 16px;
        right: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 3000;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        animation: slideInFromTop 0.3s ease;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        box-sizing: border-box;
    }
    
    .notification--success {
        border-left: 4px solid #059669;
    }
    
    .notification--error {
        border-left: 4px solid #ef4444;
        background: #ef4444 !important;
        color: #fff !important;
    }
    
    .notification--warning {
        border-left: 4px solid #f59e0b;
    }
    
    .notification--info {
        border-left: 4px solid #3b82f6;
    }
    
    .notification .material-icons {
        font-size: 20px;
    }
    
    .notification-message a {
        color: inherit;
        text-decoration: none;
        font-weight: inherit;
    }
    
    .notification-message a:hover {
        text-decoration: underline;
    }
    
    .notification--success .material-icons {
        color: #059669;
    }
    
    .notification--error .material-icons {
        color: #fff;
    }

    .notification--error .notification-title,
    .notification--error .notification-message,
    .notification--error .notification-close,
    .notification--error .notification-close .material-icons {
        color: #fff !important;
    }

    .notification--warning .material-icons {
        color: #f59e0b;
    }
    
    .notification--info .material-icons {
        color: #3b82f6;
    }
    
    .notification-content {
        flex: 1;
    }
    
    .notification-title {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 2px;
    }
    
    .notification-message {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.4;
    }
    
    .notification-close {
        width: 24px;
        height: 24px;
        background: #f3f4f6;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .notification-close:hover {
        background: #e5e7eb;
    }
    
    .notification-close .material-icons {
        font-size: 16px;
        color: #6b7280;
    }
    
    @keyframes slideInFromTop {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Mobile modals */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    
    .modal-content {
        background: white;
        border-radius: 16px;
        width: 100%;
        max-width: 400px;
        max-height: 80vh;
        overflow-y: auto;
        animation: scaleIn 0.3s ease;
        box-sizing: border-box;
    }
    
    .modal-header {
        padding: 20px 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .modal-header h3,
    .modal-header .modal-title-line {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    
    .modal-close {
        width: 32px;
        height: 32px;
        background: #f3f4f6;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .modal-close:hover {
        background: #e5e7eb;
    }
    
    .modal-close .material-icons {
        font-size: 18px;
        color: #6b7280;
    }
    
    /* Phone Modal Mobile Styles */
    .phone-modal .modal-body {
        padding: 0 !important;
    }
    
    .phone-modal .modal-footer {
        padding: 12px 16px !important;
        border-top: none !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .phone-modal-number {
        gap: 8px !important;
        padding: 16px !important;
        max-width: 260px !important;
    }
    
    .phone-modal-number .material-icons {
        font-size: 18px !important;
    }
    
    .phone-modal-number span:not(.material-icons) {
        font-size: 18px !important;
        letter-spacing: 0.5px !important;
    }
    
    .phone-modal-disclaimer {
        font-size: 12px !important;
        margin: 0 !important;
    }
    
    .phone-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
    }
    
    .phone-modal .modal-footer .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        border: 1px solid #22c55e !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        transition: all 0.2s ease !important;
        background: #22c55e !important;
        color: #ffffff !important;
        height: auto !important;
        width: 100% !important;
    }
    
    .phone-modal .modal-footer .btn:hover {
        background: #16a34a !important;
        color: #ffffff !important;
    }
    
    /* Hide all modals by default */
    .modal {
        display: none;
    }
    
    /* Show modal when JavaScript sets display: flex */
    .modal[style*="display: flex"] {
        display: flex !important;
    }
    
    .modal-footer {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }
    
    /* Mobile Map Styles - Hide map and show button */
    .mobile-map-iframe {
        display: none !important;
    }
    
    #property-map {
        display: none !important;
    }
    
    .map-section .map-container {
        display: none !important;
    }
    
    .mobile-open-maps-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: #4f46e5;
        color: white;
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s ease;
        margin-top: 12px;
    }
    
    .mobile-open-maps-btn:hover {
        background: #4338ca;
        color: white;
        text-decoration: none;
    }
    
    .mobile-open-maps-btn .material-icons {
        font-size: 18px;
    }
    
    .modal-footer .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-body p {
        font-size: 14px;
        color: #6b7280;
        line-height: 1.5;
        margin: 0 0 16px 0;
    }
    
    .modal-body p:last-child {
        margin-bottom: 0;
    }
    
    .modal-footer {
        padding: 0 20px 20px;
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }
    
    .modal-footer .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    @keyframes scaleIn {
        from {
            transform: scale(0.9);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    /* Mobile loading states */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid #f3f4f6;
        border-radius: 50%;
        border-top-color: #4f46e5;
        animation: spin 1s ease-in-out infinite;
    }
    
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        z-index: 4000;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
    }
    
    .loading-overlay .loading-spinner {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }
    
    .loading-text {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }
    
    /* Mobile pull-to-refresh */
    .pull-to-refresh {
        position: fixed;
        top: -60px;
        left: 0;
        right: 0;
        height: 60px;
        background: #f9fafb;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        transition: top 0.3s ease;
    }
    
    .pull-to-refresh.active {
        top: 0;
    }
    
    .pull-to-refresh .material-icons {
        font-size: 24px;
        color: #6b7280;
        animation: spin 1s linear infinite;
    }
    
    .pull-to-refresh-text {
        font-size: 14px;
        color: #6b7280;
        margin-left: 8px;
    }
    
    /* Mobile swipe gestures */
    .swipeable {
        touch-action: pan-y;
        user-select: none;
    }
    
    .swipe-indicator {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 4px;
        height: 40px;
        background: #d1d5db;
        border-radius: 2px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .swipeable:hover .swipe-indicator {
        opacity: 1;
    }
    
    /* Mobile touch feedback */
    .touch-feedback {
        position: relative;
        overflow: hidden;
    }
    
    .touch-feedback::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(79, 70, 229, 0.1);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s ease, height 0.3s ease;
        pointer-events: none;
    }
    
    .touch-feedback:active::before {
        width: 200px;
        height: 200px;
    }
    
    /* Mobile haptic feedback simulation */
    .haptic-light {
        animation: hapticLight 0.1s ease;
    }
    
    .haptic-medium {
        animation: hapticMedium 0.15s ease;
    }
    
    .haptic-heavy {
        animation: hapticHeavy 0.2s ease;
    }
    
    @keyframes hapticLight {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(0.98); }
    }
    
    @keyframes hapticMedium {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(0.96); }
    }
    
    @keyframes hapticHeavy {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(0.94); }
    }
}

/* ============================================
   MOBILE FOOTER
   ============================================ */

@media (max-width: 1023px) {
    .footer {
        background: #111827;
        color: #9ca3af;
        padding: 32px 0 16px;
    }
    
    .footer__content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    
    .footer__logo .logo {
        height: 32px;
        margin-bottom: 16px;
    }
    
    .footer__description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 0;
        text-align: left;
    }

    .footer__payments {
        margin-top: 16px;
        text-align: left;
    }

    .footer__payments-img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
    
    .footer__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        text-align: left;
    }
    
    .footer__column h4 {
        font-size: 16px;
        font-weight: 600;
        color: white;
        margin-bottom: 12px;
    }
    
    .footer__column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .footer__column li {
        margin-bottom: 8px;
    }
    
    .footer__column a {
        color: #9ca3af;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }
    
    .footer__column a:hover {
        color: white;
    }
    
    .footer__bottom {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #374151;
        text-align: left;
        font-size: 12px;
    }

    .footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================
   MOBILE UTILITIES
   ============================================ */

@media (max-width: 1023px) {
    .mobile-feedback-prompt.mobile-only {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-bottom: 20px;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: flex !important;
    }
    
    /* Show mobile sort buttons */
    .mobile-sort-buttons {
        display: flex !important;
        flex-wrap: nowrap; /* Prevent wrapping */
        scroll-snap-type: x mandatory; /* Enhanced snap scrolling */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overflow-x: auto !important; /* Force horizontal scrolling */
        overflow-y: hidden !important; /* Hide vertical scroll */
        -webkit-overflow-scrolling: touch !important; /* iOS smooth scrolling */
    }
    
    
    /* Ensure mobile bottom navigation is always visible */
    .mobile-bottom-nav {
        display: flex !important;
        -webkit-display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    
    /* Force mobile bottom nav items to display properly */
    .mobile-bottom-nav__item {
        display: flex !important;
        -webkit-display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Prevent other elements from interfering with mobile bottom nav */
    .mobile-bottom-nav * {
        display: flex !important;
        -webkit-display: flex !important;
    }
    
    .mobile-bottom-nav .material-icons {
        display: inline-flex !important;
        -webkit-display: inline-flex !important;
    }
    
    .mobile-bottom-nav__label {
        display: block !important;
        -webkit-display: block !important;
    }
    
    /* Ensure mobile header actions are visible */
    .mobile-header-actions {
        display: flex !important;
        -webkit-display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .mobile-header-btn {
        display: flex !important;
        -webkit-display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        isolation: isolate;
        overflow: hidden;
        background: #2563eb !important;
        border: 1px solid #d1d5db !important;
    }

    /* The mobile create button owns the highlight; never paint it on the header surface. */
    .mobile-header-btn::before {
        content: '';
        position: absolute;
        top: -20%;
        left: -28%;
        width: 24%;
        height: 140%;
        background: rgba(255, 255, 255, 0.28);
        transform: skewX(-24deg) translateX(0);
        pointer-events: none;
        z-index: 1;
        animation: shine 3s linear infinite;
    }

    .mobile-header-btn > * {
        position: relative;
        z-index: 2;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        -webkit-display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        background: transparent !important;
        border: none !important;
        color: #4f46e5 !important;
        margin-top: 5px;
    }
    
    /* Fix mobile layout issues */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Ensure fixed header works on all mobile devices */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Prevent horizontal scroll */
    .container,
    .header__content,
    .mobile-nav,
    .item-card,
    .form-input,
    .form-select,
    .form-textarea,
    .btn,
    .modal-content,
    .notification {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile spacing */
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: 4px !important; }
    .mobile-p-2 { padding: 8px !important; }
    .mobile-p-3 { padding: 12px !important; }
    .mobile-p-4 { padding: 16px !important; }
    .mobile-p-5 { padding: 20px !important; }
    .mobile-p-6 { padding: 24px !important; }
    
    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: 4px !important; }
    .mobile-m-2 { margin: 8px !important; }
    .mobile-m-3 { margin: 12px !important; }
    .mobile-m-4 { margin: 16px !important; }
    .mobile-m-5 { margin: 20px !important; }
    .mobile-m-6 { margin: 24px !important; }
    
    /* Mobile text sizes */
    .mobile-text-xs { font-size: 12px !important; }
    .mobile-text-sm { font-size: 14px !important; }
    .mobile-text-base { font-size: 16px !important; }
    .mobile-text-lg { font-size: 18px !important; }
    .mobile-text-xl { font-size: 20px !important; }
    .mobile-text-2xl { font-size: 24px !important; }
    
    /* Mobile flex utilities */
    .mobile-flex { display: flex !important; }
    .mobile-flex-col { flex-direction: column !important; }
    .mobile-flex-row { flex-direction: row !important; }
    .mobile-items-center { align-items: center !important; }
    .mobile-justify-center { justify-content: center !important; }
    .mobile-justify-between { justify-content: space-between !important; }
    
    /* Mobile grid utilities */
    .mobile-grid { display: grid !important; }
    .mobile-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .mobile-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .mobile-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    
    /* Mobile width utilities */
    .mobile-w-full { width: 100%; }
    .mobile-w-1-2 { width: 50% !important; }
    .mobile-w-1-3 { width: 33.333% !important; }
    .mobile-w-2-3 { width: 66.666% !important; }
    
    /* Mobile height utilities */
    .mobile-h-full { height: 100% !important; }
    .mobile-h-screen { height: 100vh !important; }
    
    /* Mobile positioning */
    .mobile-relative { position: relative !important; }
    .mobile-absolute { position: absolute !important; }
    .mobile-fixed { position: fixed !important; }
    .mobile-sticky { position: sticky !important; }
    
    /* Mobile overflow */
    .mobile-overflow-hidden { overflow: hidden !important; }
    .mobile-overflow-auto { overflow: auto !important; }
    .mobile-overflow-x-auto { overflow-x: auto !important; }
    .mobile-overflow-y-auto { overflow-y: auto !important; }
}

/* ============================================
   MOBILE ANIMATIONS
   ============================================ */

@media (max-width: 1023px) {
    /* Smooth transitions for mobile */
    * {
        transition: all 0.2s ease;
    }
    
    /* Mobile-specific animations */
    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideInFromRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideInFromBottom {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    @keyframes scaleIn {
        from {
            transform: scale(0.9);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    /* Apply animations to common elements */
    .item-card {
        animation: fadeIn 0.3s ease;
    }
    
    .conversation-item {
        animation: slideInFromLeft 0.3s ease;
    }
    
    .message {
        animation: slideInFromBottom 0.3s ease;
    }
    
    .modal-overlay {
        animation: fadeIn 0.3s ease;
    }
    
    .modal-content {
        animation: scaleIn 0.3s ease;
    }
}

/* ============================================
   MOBILE ACCESSIBILITY
   ============================================ */

@media (max-width: 1023px) {
    /* Ensure touch targets are at least 44px */
    button, .btn, .header-action-btn, .favorite-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improve focus states for mobile */
    button:focus,
    .btn:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid #4f46e5;
        outline-offset: 2px;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .item-card {
            border: 0px solid #000;
        }
        
        .btn--primary {
            background: #000;
            color: #fff;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .header {
            background: #1f2937;
            color: white;
        }
        
        .item-card {
            background: #374151;
            color: white;
        }
        
        .form-input,
        .form-select,
        .form-textarea {
            background: #374151;
            color: white;
            border-color: #4b5563;
        }
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 1023px) {
    /* Optimize images for mobile */
    .item-card__image img {
        will-change: transform;
    }
    
    /* Use hardware acceleration for animations */
    .item-card:hover {
        will-change: transform;
    }
    
    /* Optimize scrolling performance */
    .conversations-list,
    .chat-messages {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Reduce repaints */
    .floating-shapes {
        transform: translateZ(0);
    }
    
    /* Optimize touch interactions */
    .item-card,
    .conversation-item,
    .btn {
        touch-action: manipulation;
    }
}

/* ============================================
   MOBILE SPECIFIC FIXES
   ============================================ */

@media (max-width: 1023px) {
    /* Fix iOS Safari viewport issues */
    .messages-page {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix Android keyboard issues */
    .chat-input {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* Fix touch scrolling on iOS */
    .conversations-list,
    .chat-messages {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent zoom on input focus (iOS) */
    .form-input,
    .form-select,
    .form-textarea,
    .chat-input {
        font-size: 16px;
    }
    
    /* Fix fixed positioning on iOS */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* iOS Safari specific fixes */
    @supports (-webkit-touch-callout: none) {
        .header {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        
        .mobile-header-actions {
            display: flex !important;
            -webkit-display: flex !important;
        }
        
        .mobile-header-btn {
            display: flex !important;
            -webkit-display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .mobile-menu-toggle {
            display: flex !important;
            -webkit-display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            background: transparent !important;
            border: none !important;
            color: #4f46e5 !important;
            -webkit-appearance: none;
            appearance: none;
        }
    }
    
    /* Fix flexbox issues on older Android */
    .messages-layout {
        display: -webkit-flex;
        display: flex;
    }
    
    /* Fix grid issues on older browsers */
    .listings-grid {
        display: -webkit-grid;
        display: grid;
    }
    
    /* Fix mobile layout issues */
    .header__content > * {
        flex-shrink: 0;
    }
    
    .header__logo {
        flex-shrink: 0;
    }
    
    /* Ensure cards don't overflow on mobile */
    .listings-grid {
        contain: layout;
        overflow: hidden;
        /* Responsive grid behavior */
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    
    .item-card {
        contain: layout style;
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        /* Ensure responsive behavior */
        flex-shrink: 0;
    }
    
    /* Responsive adjustments for larger mobile screens */
    @media (min-width: 481px) and (max-width: 768px) {
        .listings-grid {
            gap: 16px;
            padding: 20px 0;
        }
        
        .item-card {
            border-radius: 16px 16px 0px 0px !important;
        }
        
        .item-card__image {
            min-height: 216px;
            height: 216px;
        }
        
        .item-card--small .item-card__image {
            min-height: 180px;
            height: 180px;
        }
        
        .item-card__content {
            padding: 16px 0px 0px 0px !important;
        }
        
        .item-card__title {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .item-card__price {
            font-size: 18px;
        }
    }
    
    /* Responsive adjustments for medium mobile screens */
    @media (min-width: 361px) and (max-width: 480px) {
        .listings-grid {
            gap: 14px;
            padding: 18px 0;
        }
        
        .item-card__image {
            min-height: 200px;
            height: 200px;
        }
        
        .item-card--small .item-card__image {
            min-height: 168px;
            height: 168px;
        }
        
        .item-card__content {
            padding: 14px 0px 0px 0px !important;
        }
        
        .item-card__title {
            font-size: 14px;
        }
        
        .item-card__price {
            font-size: 17px;
        }
    }
    
    /* Fix overflow for screens 280px-557px */
    @media (min-width: 280px) and (max-width: 557px) {
        .container {
            padding: 0 8px !important;
            max-width: 100% !important;
            width: 100% !important;
            overflow-x: hidden !important;
            box-sizing: border-box !important;
        }
        
        .listings-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px !important;
            padding: 12px 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            contain: layout !important;
            min-width: 0 !important;
            flex-shrink: 0 !important;
        }
        
        .listings-grid .item-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
        }
        
        .item-card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            contain: layout style !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }
        
        .item-card__image {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            min-height: 172px !important;
            height: 172px !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            flex-shrink: 0 !important;
        }
        
        .item-card__content {
            flex: 1 !important;
            padding: 8px 0px 0px 0px !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            hyphens: auto !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
        }
        
        .item-card__title {
            font-size: 14px !important;
            line-height: 1.3 !important;
            margin-bottom: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            hyphens: auto !important;
        }
        
        .item-card__price {
            font-size: 14px !important;
            margin-bottom: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
        }
        
        .item-card__meta {
            font-size: 10px !important;
            gap: 8px !important;
            margin-top: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            display: flex !important;
            align-items: flex-start !important;
        }
        
        .item-card__location {
            font-size: 12px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
        }
        
        .item-card__time {
            font-size: 12px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
        }
        
        .item-card__category {
            font-size: 12px !important;
            margin-top: 2px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
        }
        
        .item-card__location .material-icons {
            font-size: 10px !important;
        }
        
        /* Ensure no horizontal overflow */
        body {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        html {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .main {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Fix sort buttons for small screens */
        .mobile-sort-buttons {
            gap: 6px !important;
            padding: 0;
            display: flex !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
            white-space: nowrap !important;
            width: 100% !important;
            max-width: 100% !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }
        
        .mobile-sort-buttons::-webkit-scrollbar {
            display: none !important;
        }
        
        .mobile-sort-btn {
            width: 70px !important;
            font-size: 14px !important;
            gap: 2px !important;
            flex-shrink: 0 !important;
            white-space: nowrap !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 6px 8px !important;
        }
        
        .mobile-sort-btn .material-icons {
            font-size: 16px !important;
        }
        
        .mobile-sort-btn span:not(.material-icons) {
            font-size: 10px !important;
        }
        
        /* Small cards for medium mobile screens - make identical to regular cards */
        .item-card--small {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 255px !important;
            flex-shrink: 0 !important;
            box-sizing: border-box !important;
            contain: layout style !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: row !important;
            height: 120px !important;
            min-height: 120px !important;
            max-height: 120px !important;
        }
        
        .item-card--small .item-card__image {
            width: 80px !important;
            min-width: 80px !important;
            max-width: 80px !important;
            height: 120px !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
            flex-shrink: 0 !important;
        }
        
        .item-card--small .item-card__content {
            flex: 1 !important;
            padding: 8px 0px 0px 0px !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            hyphens: auto !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
        }
        
        .item-card--small .item-card__title {
            font-size: 14px !important;
            line-height: 1.3 !important;
            margin-bottom: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            hyphens: auto !important;
        }
        
        .item-card--small .item-card__price {
            font-size: 14px !important;
            margin-bottom: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
        }
        
        .item-card--small .item-card__meta {
            font-size: 10px !important;
            gap: 8px !important;
            margin-top: 4px !important;
            word-wrap: break-word !important;
            word-break: break-word !important;
            display: flex !important;
            align-items: flex-start !important;
        }
        
    }
    
    /* Desktop header actions are hidden on mobile */
    
    /* Mobile nav is shown only on mobile devices */
    
    /* Mobile menu toggle is now shown via HTML classes */
    
    /* Hide desktop elements that cause horizontal scroll */
    .categories-mega-menu {
        display: none !important;
    }
    
    .region-dropdown {
        display: none !important;
    }
    
    .user-menu__dropdown {
        display: none !important;
    }
    
    /* Hide categories hero section on mobile */
    .categories-hero {
        display: none !important;
    }
}

/* ============================================
   MOBILE FINAL OPTIMIZATIONS
   ============================================ */

@media (max-width: 1023px) {
    /* Mobile viewport optimizations */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Mobile touch optimizations */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Mobile scroll optimizations */
    .conversations-list,
    .chat-messages,
    .items-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Mobile image optimizations */
    img {
        max-width: 100%;
        height: auto;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Mobile button optimizations */
    button,
    .btn,
    .header-action-btn,
    .favorite-btn,
    .action-btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    /* Mobile input optimizations */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
    }
    
    /* Mobile focus optimizations */
    *:focus {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Mobile selection optimizations */
    ::selection {
        background: rgba(79, 70, 229, 0.2);
        color: #111827;
    }
    
    ::-moz-selection {
        background: rgba(79, 70, 229, 0.2);
        color: #111827;
    }
    
    /* Mobile scrollbar optimizations */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    /* Mobile performance optimizations */
    .item-card,
    .conversation-item,
    .message {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Mobile accessibility optimizations */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    
    /* Mobile high contrast mode */
    @media (prefers-contrast: high) {
        .item-card {
            border: 0px solid #000;
        }
        
        .btn--primary {
            background: #000;
            color: #fff;
            border: 2px solid #000;
        }
        
        .notification {
            border: 2px solid #000;
        }
    }
    
    /* Mobile dark mode support */
    @media (prefers-color-scheme: dark) {
        .header {
            background: #ffffff !important;
            color: #111827;
        }
        
        .item-card {
            background: #374151;
            color: white;
            border-color: #4b5563;
        }
        
        .form-input,
        .form-select,
        .form-textarea {
            background: #374151;
            color: white;
            border-color: #4b5563;
        }
        
        .modal-content {
            background: #374151;
            color: white;
        }

        .user-reviews-popup .modal-content {
            background: #ffffff !important;
            color: #111827 !important;
        }

        .user-reviews-popup .user-review-item {
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
            color: #111827 !important;
        }

        .user-reviews-popup .user-review-item__head strong {
            color: #111827 !important;
        }

        .user-reviews-popup .user-review-item__head span {
            color: #6b7280 !important;
        }

        .user-reviews-popup .user-review-item__rating {
            color: #1f2937 !important;
        }

        .user-reviews-popup .user-review-item__comment {
            color: #374151 !important;
        }

        .user-reviews-popup .user-reviews-summary {
            color: #111827 !important;
        }

        .user-reviews-popup .modal-header h3,
        .user-reviews-popup .modal-header .modal-title-line {
            color: #111827 !important;
        }
        
        .notification {
            background: #374151;
            color: white;
        }
    }
    
    /* Mobile print optimizations */
    @media print {
        .header,
        .footer,
        .mobile-nav,
        .chat-input-container,
        .item-card__actions {
            display: none !important;
        }
        
        .item-card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
    }
    
    /* Price with conversion - Mobile Styles */
    .price-with-conversion {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    
    .price-main {
        font-size: 16px !important;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.2;
    }
    
    .price-references {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px !important;
        color: #6b7280;
        font-weight: 400;
        line-height: 1.3;
    }
    
    .price-ref {
        color: #6b7280;
    }
    
    .price-ref-separator {
        color: #d1d5db;
        font-size: 9px;
    }
    
    .price-negotiable {
        font-size: 16px !important;
        font-weight: 700;
        color: #111827;
    }
    
    .price-free {
        font-size: 16px !important;
        font-weight: 700;
        color: #111827;
    }
    
    .item-card .price-with-conversion .price-main {
        font-size: 18px !important;
        font-weight: 700;
        color: #111827;
    }
    
    .item-card .price-references {
        font-size: 12px !important;
    }
    
    .item-card--small .price-with-conversion .price-main {
        font-size: 14px !important;
    }
    
    .item-card--small .price-references {
        font-size: 9px !important;
        gap: 3px;
    }
    
    /* Mobile specific price variations */
    @media (max-width: 480px) {
        .price-with-conversion {
            gap: 2px;
        }
        
        .price-main {
            font-size: 15px !important;
        }
        
        .price-references {
            font-size: 10px !important;
        }
        
        .item-card--small .price-main {
            font-size: 18px !important;
        }
        
        .item-card--small .price-references {
            font-size: 9px !important;
        }
    }
    
    @media (max-width: 360px) {
        .price-main {
            font-size: 14px !important;
        }
        
        .price-references {
            font-size: 9px !important;
            gap: 3px;
        }
        
        .price-ref-separator {
            font-size: 8px;
        }
    }
    
    @media (max-width: 320px) {
        .price-main {
            font-size: 18px !important;
        }
        
        .price-references {
            font-size: 12px !important;
            gap: 4px;
        }
    }
}

/* ==========================================
   MOBILE AD ACTIONS POPUP
   ========================================== */

/* Hide popup on desktop and tablet */
@media (min-width: 769px) {
    .mobile-ad-popup {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
}

@media (max-width: 1023px) {
    .mobile-ad-popup {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999 !important;
        display: flex !important;
        align-items: flex-end;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-ad-popup.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .mobile-ad-popup__overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
    }

    .mobile-ad-popup__content {
        position: relative !important;
        background: #ffffff !important;
        border-radius: 16px 16px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-ad-popup.active .mobile-ad-popup__content {
        transform: translateY(0) !important;
    }

    .mobile-ad-popup__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        background: #ffffff;
        border-radius: 16px 16px 0 0;
        z-index: 1;
    }

    .mobile-ad-popup__title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    .mobile-ad-popup__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: #f3f4f6;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-ad-popup__close:hover {
        background: #e5e7eb;
    }

    .mobile-ad-popup__close .material-icons {
        font-size: 18px;
        color: #6b7280;
    }

    .mobile-ad-popup__body {
        padding: 20px;
    }

    .mobile-ad-popup__ad-info {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e5e7eb;
    }

    .mobile-ad-popup__ad-image {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background: #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-ad-popup__ad-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-ad-popup__no-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: #f3f4f6;
    }

    .mobile-ad-popup__no-image .material-icons {
        font-size: 24px;
        color: #9ca3af;
    }

    .mobile-ad-popup__ad-details {
        flex: 1;
        min-width: 0;
    }

    .mobile-ad-popup__ad-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin: 0 0 4px 0;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .mobile-ad-popup__ad-price {
        font-size: 14px;
        font-weight: 600;
        color: #059669;
        margin-bottom: 4px;
    }

    .mobile-ad-popup__ad-location {
        font-size: 12px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-ad-popup__ad-location .material-icons {
        font-size: 14px;
    }

    .mobile-ad-popup__actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-ad-popup__charge-hint {
        font-size: 13px;
        font-weight: 600;
        color: #7c3aed;
        text-align: center;
        margin-bottom: 8px;
    }

    .mobile-ad-popup__btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
        min-height: 56px;
    }

    .mobile-ad-popup__btn .material-icons {
        font-size: 20px;
        flex-shrink: 0;
    }

    .mobile-ad-popup__btn span:not(.material-icons) {
        flex: 1;
    }

    .mobile-ad-popup__btn--edit {
        background: #dbeafe;
        color: #1e40af;
    }

    .mobile-ad-popup__btn--edit:hover {
        background: #bfdbfe;
        color: #1e3a8a;
    }

    .mobile-ad-popup__btn--edit:active {
        transform: scale(0.98);
    }

    .mobile-ad-popup__btn--bump {
        background: #ede9fe;
        color: #7c3aed;
    }

    .mobile-ad-popup__btn--bump:hover:not(:disabled) {
        background: #ddd6fe;
        color: #6d28d9;
    }

    .mobile-ad-popup__btn--bump:active:not(:disabled) {
        transform: scale(0.98);
    }

    .mobile-ad-popup__btn--bump:disabled {
        background: #f3f4f6;
        color: #9ca3af;
        cursor: not-allowed;
    }

    .mobile-ad-popup__btn--delete {
        background: #fee2e2;
        color: #ef4444;
    }

    .mobile-ad-popup__btn--delete:hover {
        background: #fecaca;
        color: #b91c1c;
    }

    .mobile-ad-popup__btn--delete:active {
        transform: scale(0.98);
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 480px) {
        .mobile-ad-popup__content {
            max-height: 85vh;
        }

        .mobile-ad-popup__header {
            padding: 14px 16px;
        }

        .mobile-ad-popup__title {
            font-size: 16px;
        }

        .mobile-ad-popup__close {
            width: 28px;
            height: 28px;
        }

        .mobile-ad-popup__close .material-icons {
            font-size: 16px;
        }

        .mobile-ad-popup__body {
            padding: 16px;
        }

        .mobile-ad-popup__ad-info {
            gap: 10px;
            margin-bottom: 20px;
            padding-bottom: 16px;
        }

        .mobile-ad-popup__ad-image {
            width: 50px;
            height: 50px;
        }

        .mobile-ad-popup__no-image .material-icons {
            font-size: 20px;
        }

        .mobile-ad-popup__ad-title {
            font-size: 14px;
        }

        .mobile-ad-popup__ad-price {
            font-size: 13px;
        }

        .mobile-ad-popup__ad-location {
            font-size: 11px;
        }

        .mobile-ad-popup__actions {
            gap: 10px;
        }

        .mobile-ad-popup__btn {
            padding: 14px 16px;
            font-size: 15px;
            min-height: 50px;
        }

        .mobile-ad-popup__btn .material-icons {
            font-size: 18px;
        }
    }

    @media (max-width: 360px) {
        .mobile-ad-popup__content {
            max-height: 90vh;
        }

        .mobile-ad-popup__header {
            padding: 12px 14px;
        }

        .mobile-ad-popup__title {
            font-size: 15px;
        }

        .mobile-ad-popup__body {
            padding: 14px;
        }

        .mobile-ad-popup__ad-info {
            gap: 8px;
            margin-bottom: 18px;
            padding-bottom: 14px;
        }

        .mobile-ad-popup__ad-image {
            width: 45px;
            height: 45px;
        }

        .mobile-ad-popup__no-image .material-icons {
            font-size: 18px;
        }

        .mobile-ad-popup__ad-title {
            font-size: 13px;
        }

        .mobile-ad-popup__ad-price {
            font-size: 12px;
        }

        .mobile-ad-popup__ad-location {
            font-size: 10px;
        }

        .mobile-ad-popup__actions {
            gap: 8px;
        }

        .mobile-ad-popup__btn {
            padding: 12px 14px;
            font-size: 14px;
            min-height: 46px;
        }

        .mobile-ad-popup__btn .material-icons {
            font-size: 16px;
        }
    }
}

/* VIN Section - Hide copy button on mobile */
@media (max-width: 1023px) {
    .btn-copy-vin {
        display: none !important;
    }
    
    .vin-number {
        cursor: pointer;
        transition: background-color 0.2s ease;
        padding: 8px 12px;
        border-radius: 8px;
        display: inline-block;
        min-width: 200px;
    }
    
    .vin-number:hover {
        background-color: #f3f4f6;
    }
    
    .vin-number:active {
        background-color: #e5e7eb;
    }
}

/* ============================================
   AD CREATE/EDIT PAGE - MOBILE STYLES
   ============================================ */

@media (max-width: 1023px) {
    .create-item-page {
        padding: 16px 0;
        background: var(--m3-background);
    }
    
    .create-item-header {
        margin-bottom: 24px;
        padding: 0 8px;
    }

    .create-ad-layout__header.create-item-header {
        margin-bottom: 12px;
    }
    
    .page-title {
        font-size: 20px !important;
        gap: 8px !important;
    }
    
    .page-title .material-icons {
        font-size: 24px !important;
    }
    
    .page-subtitle {
        font-size: 14px !important;
    }
    
    .create-item-form {
        padding: 0 0 24px !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .create-ad-layout {
        gap: 20px !important;
    }

    .create-item-page .form-section {
        padding: 16px !important;
    }

    .ad-form-progress {
        padding: 16px !important;
    }

    .ad-form-progress__percent {
        font-size: 1rem !important;
    }
    
    .create-ad-layout__main > .form-section + .form-section {
        margin-top: 20px !important;
    }

    .form-section {
        padding: 16px !important;
        margin-bottom: 0 !important;
    }
    
    .form-section__title {
        font-size: 16px !important;
        margin-bottom: 16px !important;
        padding-bottom: 8px !important;
    }
    
    .form-section__title .material-icons {
        font-size: 18px !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .form-row--category {
        grid-template-columns: 1fr !important;
    }

    /* Material 3 — category suggestions on create/edit ad */
    .category-suggestions {
        margin-bottom: 16px !important;
    }

    .category-suggestions__label {
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.04em !important;
        color: var(--md-sys-color-on-surface-variant, #49454f) !important;
        margin-bottom: 8px !important;
    }

    .category-suggestions__list {
        gap: 8px !important;
    }

    .category-suggestions__tag {
        min-height: 40px !important;
        padding: 10px 16px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        background: var(--md-sys-color-surface-container-high, #ece6f0) !important;
        color: var(--md-sys-color-on-surface, #1d1b20) !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .category-suggestions__tag:active {
        background: var(--md-sys-color-surface-container-highest, #e6e0e9) !important;
    }
    
    .form-actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 24px !important;
        padding-top: 16px !important;
    }
    
    .form-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Map Controls Mobile */
    .map-controls {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .map-coordinates {
        font-size: 11px !important;
    }
    
    /* Existing Images Grid Mobile */
    .images-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 12px !important;
    }
    
    .image-item .image-preview {
        height: 100px !important;
    }
    
    .image-item .remove-image {
        width: 28px !important;
        height: 28px !important;
    }
    
    .image-item .remove-image .material-icons {
        font-size: 16px !important;
    }
    
    /* Image Preview Mobile */
    .preview-item img {
        height: 100px !important;
    }
    
    .preview-remove {
        width: 28px !important;
        height: 28px !important;
    }
    
    .preview-remove .material-icons {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    .create-item-page {
        padding: 8px 0 !important;
    }
    
    .create-item-header {
        margin-bottom: 16px !important;
        padding: 0 4px !important;
    }

    .create-ad-layout__header.create-item-header {
        margin-bottom: 8px !important;
    }
    
    .page-title {
        font-size: 18px !important;
        gap: 6px !important;
    }
    
    .page-title .material-icons {
        font-size: 20px !important;
    }
    
    .page-subtitle {
        font-size: 13px !important;
    }
    
    .create-item-form {
        padding: 12px !important;
    }
    
    .create-ad-layout__main > .form-section + .form-section {
        margin-top: 16px !important;
    }

    .form-section {
        padding: 12px !important;
    }
    
    .form-section__title {
        font-size: 14px !important;
        margin-bottom: 12px !important;
        padding-bottom: 6px !important;
    }
    
    .form-section__title .material-icons {
        font-size: 16px !important;
    }
    
    .images-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
        gap: 8px !important;
    }
    
    .image-item .image-preview {
        height: 80px !important;
    }
    
    .preview-item img {
        height: 80px !important;
    }
}

@media (max-width: 360px) {
    .page-title {
        font-size: 16px !important;
    }
    
    .page-title .material-icons {
        font-size: 18px !important;
    }
    
    .page-subtitle {
        font-size: 12px !important;
    }
    
    .create-item-form {
        padding: 10px !important;
    }
    
    .form-section {
        padding: 10px !important;
    }
    
    .form-section__title {
        font-size: 13px !important;
    }
    
    .form-section__title .material-icons {
        font-size: 15px !important;
    }
    
    /* Map Section Mobile */
    #yandex-map {
        height: 250px !important;
    }
    
    #map-loading {
        font-size: 12px !important;
    }
    
    .map-coordinates {
        font-size: 10px !important;
    }
    
    /* Map Error Container Mobile */
    .map-error-container {
        padding: 16px !important;
        font-size: 12px !important;
    }
    
    .map-error-container__message {
        margin-bottom: 8px !important;
        font-size: 12px !important;
    }
    
    .map-error-container__text {
        font-size: 11px !important;
    }
}

/* ===== Ad form photo tiles — mobile (Material 3, compact rails) ===== */
@media (max-width: 1023px) {
    .ad-form-photo__rail {
        width: 26px;
    }

    .ad-form-photo__rail .material-icons {
        font-size: 15px;
    }

    .ad-form-photo__badge {
        left: 30px;
        top: 5px;
        height: 18px;
        line-height: 18px;
        font-size: 10px;
        min-width: 18px;
        padding: 0 5px;
    }

    .image-item .remove-image.ad-form-photo__remove,
    .preview-remove.ad-form-photo__remove {
        width: 26px;
        height: 26px;
        top: 5px;
        right: 5px;
    }

    .drag-drop-feedback {
        padding: 14px 20px;
        font-size: 14px;
        border-radius: var(--m3-corner-lg, 16px);
        max-width: min(420px, 92vw);
        text-align: center;
        background: rgba(28, 27, 31, 0.88);
    }

    .sortable-placeholder {
        min-height: 88px;
        margin: 6px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .ad-form-photo-grid__hint {
        font-size: 13px;
        line-height: 1.45;
        color: var(--m3-on-surface-variant, #49454f);
        margin: 0 0 12px;
    }
}

/* ========================================
   NOTIFICATIONS SYSTEM - MOBILE STYLES
   ======================================== */

/* Mobile notification bell button */
@media (max-width: 768px) {
    .header-notifications-btn {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }
    
    .header-notifications-btn .material-icons {
        font-size: 18px;
    }
    
    .header-notifications-btn .notification-badge {
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .header-notifications-btn {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }
    
    .header-notifications-btn .material-icons {
        font-size: 16px;
    }
    
    .header-notifications-btn .notification-badge {
        top: -4px;
        right: -4px;
        min-width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }
}

/* Mobile notifications backdrop */
@media (max-width: 768px) {
    .notifications-backdrop {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    
    /* Mobile header notifications corner positioning - hidden on mobile */
    .header-notifications-corner {
        display: none !important;
    }
    
    /* Mobile tabs switcher — M3 segmented (flat) */
    .mobile-nav__tabs {
        display: flex;
        border: 1px solid var(--m3-surface-variant);
        border-radius: 50px;
        padding: 4px;
        margin-bottom: 16px;
        gap: 4px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .mobile-nav__tab {
        flex: 1;
        padding: 10px 16px;
        border: none;
        background: transparent;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        color: var(--m3-on-surface-variant);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    
    .mobile-nav__tab:hover {
        color: var(--m3-on-surface);
        background-color: rgba(255, 255, 255, 0.35);
    }
    
    .mobile-nav__tab.mobile-nav__tab--active {
        background: #f1f3f5;
        color: #111827;
        box-shadow: none;
    }
    
    .mobile-nav__tab .notification-badge {
        background: #dc3545;
        color: white;
        border-radius: 50%;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        margin-left: 4px;
    }
    
    /* Mobile section header */
    .mobile-nav__section-header {
        margin-bottom: 12px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile notifications content */
    .mobile-nav__notifications-content {
        height: calc(100vh - 200px);
        min-height: 300px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        display: none !important;
        width: 100%;
        box-sizing: border-box;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db #f3f4f6;
    }
    
    .mobile-nav__notifications-content.active {
        display: block !important;
    }
    
    .mobile-nav__notifications-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: #6c757d;
        font-size: 14px;
    }
    
    .mobile-nav__notifications-loading .material-icons {
        margin-right: 8px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Mobile notification items */
    .mobile-nav__notification-item {
        padding: 16px;
        border-bottom: 1px solid #e9ecef;
        cursor: pointer;
        transition: background-color 0.2s ease;
        position: relative;
        display: flex;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }
    
    .mobile-nav__notification-item:last-child {
        border-bottom: none;
    }
    
    .mobile-nav__notification-item:hover {
        background-color: #f8f9fa;
    }
    
    .mobile-nav__notification-item.unread {
        background-color: #f0f8ff;
    }
    
    .mobile-nav__notification-content {
        flex: 1;
        width: 100%;
        min-width: 0;
    }
    
    .mobile-nav__notification-type {
        font-size: 11px;
        color: #6c757d;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    .mobile-nav__notification-title {
        font-weight: 600;
        font-size: 14px;
        color: #495057;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    
    .mobile-nav__notification-desc {
        font-size: 13px;
        color: #6c757d;
        line-height: 1.4;
        margin-bottom: 4px;
        word-wrap: break-word;
        white-space: pre-wrap;
    }

    .mobile-nav__notification-text {
        font-size: 13px;
        color: #6c757d;
        line-height: 1.4;
        margin-bottom: 4px;
        word-wrap: break-word;
        white-space: pre-wrap;
    }
    
    .mobile-nav__notification-time {
        font-size: 11px;
        color: #adb5bd;
    }
    
    .mobile-nav__notification-dot {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 8px;
        height: 8px;
        background: #dc3545;
        border-radius: 50%;
    }
    
    .mobile-nav__notifications-empty,
    .mobile-nav__notifications-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        color: #6c757d;
    }
    
    .mobile-nav__notifications-empty .material-icons,
    .mobile-nav__notifications-error .material-icons {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }
    
    .mobile-nav__notifications-empty p,
    .mobile-nav__notifications-error p {
        font-size: 14px;
        margin: 0;
    }

    /* Notifications footer (mark all + go to news) */
    .mobile-nav__notifications-footer {
        display: none;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid #e9ecef;
        background: #f8f9fa;
    }

    .mobile-nav__notifications-footer .btn {
        width: 100%;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
    }

    .mobile-nav__notifications-footer .btn .material-icons {
        font-size: 17px;
        line-height: 1;
    }
}

/* Mobile notifications dropdown */
@media (max-width: 768px) {
    .notifications-dropdown {
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: 70vh;
        border-radius: 8px;
    }
    
    .notifications-dropdown__header {
        padding: 12px 16px;
        border-radius: 8px 8px 0 0;
    }
    
    .notifications-dropdown__header h3,
    .notifications-dropdown__header .notifications-dropdown__headline {
        font-size: 1rem;
    }
    
    .notifications-dropdown__content {
        max-height: calc(70vh - 120px);
    }
    
    .notification-item {
        padding: 8px 12px;
    }
    
    .notification-item__title {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }
    
    .notification-item__description {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .notification-item__header {
        margin-bottom: 3px;
    }
    
    .notification-item__type {
        font-size: 0.7rem;
        padding: 1px 6px;
    }
    
    .notification-item__date {
        font-size: 0.75rem;
    }
    
    .notifications-dropdown__footer {
        padding: 10px 16px;
        border-radius: 0 0 8px 8px;
    }
    
    .notifications-dropdown__footer .btn {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .notifications-dropdown {
        top: 50px;
        right: 5px;
        left: 5px;
        max-height: 80vh;
        border-radius: 6px;
    }
    
    .notifications-dropdown__header {
        padding: 10px 12px;
        border-radius: 6px 6px 0 0;
    }
    
    .notifications-dropdown__header h3,
    .notifications-dropdown__header .notifications-dropdown__headline {
        font-size: 0.95rem;
    }
    
    .notifications-dropdown__content {
        max-height: calc(80vh - 100px);
    }
    
    .notification-item {
        padding: 6px 10px;
    }
    
    .notification-item__title {
        font-size: 0.8rem;
        margin-bottom: 2px;
    }
    
    .notification-item__description {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    .notification-item__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 2px;
    }
    
    .notification-item__type {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
    
    .notification-item__date {
        font-size: 0.7rem;
    }
    
    .notifications-dropdown__footer {
        padding: 8px 12px;
        border-radius: 0 0 6px 6px;
    }
    
    .notifications-dropdown__footer .btn {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    
    .notifications-empty {
        padding: 30px 12px;
    }
    
    .notifications-empty .material-icons {
        font-size: 2.5rem;
    }
    
    .notifications-empty h4 {
        font-size: 1rem;
    }
    
    .notifications-empty p {
        font-size: 0.85rem;
    }
}

/* Touch-friendly interactions */
@media (max-width: 1023px) {
    /* Listing cards — flat tonal surface (shadows handled in card rules above) */
    .item-card__title {
        font-weight: 500 !important;
        letter-spacing: 0.015em !important;
        color: var(--m3-on-surface) !important;
    }

    .section-title,
    .section-header .section-title {
        color: var(--m3-on-surface);
        letter-spacing: 0.015em;
        line-height: normal;
    }

    .listings-grid {
        gap: 14px !important;
    }

    .create-item-page {
        background: var(--m3-background) !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .header-notifications-btn:active {
        transform: scale(0.95);
        background: rgba(79, 70, 229, 0.12);
        color: #4f46e5;
        border-color: #cac4d0;
    }
    
    .notification-item:active {
        background: #e3f2fd;
        transform: scale(0.98);
    }
    
    .notifications-dropdown__close:active {
        background: rgba(0, 0, 0, 0.2);
        transform: scale(0.9);
    }
}

/* =============================================================================
   Mobile listing strips — side gutters aligned to useful width targets
   (304px @ 320, 359 @ 375, 409 @ 425, 736 @ 768) and uniform 5px column gap.
   Desktop styles (style.css) are unchanged — this stylesheet is mobile-only.
   ============================================================================= */
@media (max-width: 1023px) {
    :root {
        --hapai-mobile-listing-gutter-inline: clamp(
            8px,
            calc(8px + (100vw - 425px) * 8 / 343),
            16px
        );
        --hapai-mobile-listings-gap: 5px;
    }

    .home-page > .container,
    .category-page .container,
    .search-page .container,
    .section-page .container,
    .profile-page .container,
    .legal-page .container {
        padding-left: var(--hapai-mobile-listing-gutter-inline) !important;
        padding-right: var(--hapai-mobile-listing-gutter-inline) !important;
    }

    .home-page .listings-grid,
    .search-page .listings-grid,
    .section-page .listings-grid {
        gap: var(--hapai-mobile-listings-gap) !important;
    }

    .category-page .items-grid {
        gap: var(--hapai-mobile-listings-gap) !important;
    }

    .profile-page .profile-listings {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--hapai-mobile-listings-gap) !important;
    }

    .profile-page .profile-drafts-section .profile-listings {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--hapai-mobile-listings-gap) !important;
    }
}

/* Final mobile search contract: keep the voice control inside the M3 search field. */
@media (max-width: 1023px) {
    .mobile-search__input-group { box-sizing: border-box; min-width: 0; }
    .mobile-search__input { box-sizing: border-box; min-width: 0; flex: 1 1 auto; }
    .mobile-search__voice-btn { box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; margin: 0 !important; border: 0; overflow: hidden; }
    .mobile-search__voice-btn .material-icons { display: block; line-height: 1; font-size: 22px; }
}

/* Category tree overrides are intentionally last so generic mobile rules cannot reset them. */
@media (max-width: 1023px) {
    .mobile-nav .mobile-nav__tree-node .mobile-nav__tree-toggle {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid #4f46e5 !important;
        border-radius: 12px !important;
        background: #4f46e5 !important;
        color: #ffffff !important;
        font-size: 24px !important;
    }
    .mobile-nav .mobile-nav__tree-node .mobile-nav__tree-toggle > .material-icons {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        color: #ffffff !important;
        font-family: 'Material Icons', sans-serif !important;
        font-size: 22px !important;
        line-height: 24px !important;
        font-weight: normal !important;
        font-style: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        white-space: nowrap !important;
        letter-spacing: normal !important;
    }
    .mobile-nav .mobile-nav__tree-node .mobile-nav__category-link {
        min-height: 44px !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex: 1 1 auto !important;
    }
    .mobile-nav .mobile-nav__tree-node .mobile-nav__tree-children {
        /* Compact M3 hierarchy: preserve the connector while keeping all
           nested labels comfortably inside narrow phone viewports. */
        gap: 8px !important;
        margin: 8px 0 8px 14px !important;
        padding-left: 8px !important;
        border-left: 1px solid var(--m3-outline-variant) !important;
    }
    .mobile-nav .mobile-nav__tree-node--nested > .mobile-nav__category,
    .mobile-nav .mobile-nav__tree-node--leaf > .mobile-nav__category {
        background: var(--m3-surface) !important;
    }
    .mobile-nav .mobile-nav__tree-node--leaf > .mobile-nav__category {
        margin-left: 0 !important;
    }
}

/* Category-page subcategory rail: a dedicated horizontal gesture region.
   Keep this at the end to prevent generic grid rules from disabling scroll. */
@media (max-width: 1023px) {
    .category-page .subcategories-grid--scrollable {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-page .subcategories-grid--scrollable::-webkit-scrollbar {
        display: none;
    }

    .category-page .subcategories-grid--scrollable > .subcategory-card {
        flex: 0 0 auto !important;
    }
}

/* Mobile navigation app download: compact M3 filled button, independent of
   the legacy image-based home APK promotion. */
@media (max-width: 1023px) {
    .mobile-nav__app-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin: 0 0 12px;
        padding: 10px 16px;
        box-sizing: border-box;
        border-radius: 50px;
        background: #ef4444;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
    }

    .mobile-nav__app-download .material-icons {
        width: 20px;
        height: 20px;
        margin: 0;
        font-size: 20px;
        line-height: 20px;
        color: currentColor;
    }

    .mobile-nav__app-download:active {
        background: #4338ca;
        box-shadow: var(--m3-elevation-0);
    }

    .mobile-nav__app-download--ios {
        display: none;
        border: 0;
        font-family: inherit;
        cursor: pointer;
    }

    .mobile-nav__apple-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    html.hapai-ios-browser .mobile-nav__app-download--android {
        display: none;
    }

    html.hapai-ios-browser .mobile-nav__app-download--ios:not([hidden]) {
        display: inline-flex;
    }

    .ios-install-guide[hidden] {
        display: none;
    }

    .ios-install-guide {
        position: fixed;
        z-index: 11000;
        inset: 0;
        display: flex;
        align-items: flex-end;
        color: var(--m3-on-surface);
    }

    .ios-install-guide__scrim {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
    }

    .ios-install-guide__sheet {
        position: relative;
        width: 100%;
        max-height: min(80dvh, 620px);
        overflow-y: auto;
        padding: 10px 24px calc(24px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        border-radius: 28px 28px 0 0;
        background: var(--m3-surface);
        box-shadow: var(--m3-elevation-3);
    }

    .ios-install-guide__handle {
        width: 32px;
        height: 4px;
        margin: 0 auto 16px;
        border-radius: var(--m3-corner-pill);
        background: var(--m3-on-surface-variant);
    }

    .ios-install-guide__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
    }

    .ios-install-guide__eyebrow {
        margin: 0 0 4px;
        color: var(--m3-primary);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ios-install-guide__title {
        margin: 0;
        font-size: 23px;
        line-height: 30px;
    }

    .ios-install-guide__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--m3-on-surface);
    }

    .ios-install-guide__steps {
        display: grid;
        gap: 14px;
        margin: 24px 0 16px;
        padding-left: 25px;
        font-size: 16px;
        line-height: 24px;
    }

    .ios-install-guide__steps li::marker {
        color: var(--m3-primary);
        font-weight: 700;
    }

    .ios-install-guide__share-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0 2px;
        vertical-align: middle;
        border-radius: var(--m3-corner-xs);
        background: var(--m3-primary-container);
        color: var(--m3-on-primary-container);
    }

    .ios-install-guide__share-icon .material-icons {
        font-size: 19px;
    }

    .ios-install-guide__note {
        margin: 0 0 20px;
        color: var(--m3-on-surface-variant);
        font-size: 13px;
        line-height: 18px;
    }

    .ios-install-guide__action {
        width: 100%;
        min-height: 48px;
        border: 0;
        border-radius: var(--m3-corner-pill);
        background: var(--m3-primary);
        color: var(--m3-on-primary);
        font: 600 14px/20px inherit;
    }
}

/* Final add-action contract: keep the FAB circular and the label outside it
   after all legacy responsive overrides above. */
@media (max-width: 1023px) {
    .profile-page .profile-legend {
        display: block;
        width: 100%;
        margin: 12px 0 0 !important;
        padding: 16px !important;
        box-sizing: border-box;
        border: 1px solid var(--m3-outline-variant) !important;
        border-radius: var(--m3-corner-lg) !important;
        color: #9ca3af;
        background: #f8fafc;
    }

    .profile-page .profile-legend__header {
        margin: 0 0 12px;
    }

    .profile-page .profile-legend__header .section-title {
        margin: 0 !important;
        font-size: 20px !important;
        color: var(--m3-on-surface) !important;
    }

    .profile-page .profile-legend__items {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-page .profile-legend__item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 32px;
        color: var(--m3-on-surface-variant);
        font-size: 13px;
        line-height: 18px;
    }

    .profile-page .profile-legend__item .material-icons {
        flex: 0 0 20px;
        color: #6b7280;
        font-size: 24px;
    }

    .mobile-bottom-nav__item--primary,
    .mobile-bottom-nav__item--primary:hover,
    .mobile-bottom-nav__item--primary:focus {
        background: transparent !important;
        color: #ef4444 !important;
        box-shadow: none !important;
        transform: none;
    }

    .mobile-bottom-nav__item--primary .material-icons {
        flex: 0 0 auto !important;
        width: 88px !important;
        height: 48px !important;
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        margin: 0 0 2px !important;
        border-radius: 12px !important;
        background: #4f46e5 !important;
        color: var(--m3-on-primary) !important;
        box-shadow: var(--m3-elevation-2) !important;
    }

    .mobile-bottom-nav__item--primary .mobile-bottom-nav__label {
        color: #ef4444 !important;
    }

    .mobile-bottom-nav__item--primary[title*="верификация"] .material-icons {
        background: #7c5800 !important;
    }
}

@media (max-width: 480px) {
    .mobile-bottom-nav__item--primary .material-icons {
        width: 80px !important;
        height: 40px !important;
        aspect-ratio: 1 / 1;
    }
}

/* ============================================
   PROFILE CABINET — quick actions as four big square tiles (mobile only).

   Graphite fill, white icon with a white label underneath, no colour accents.
   The active tab is highlighted by a ring drawn *outside* the tile (2px ring,
   3px gap) — the fill never changes and nothing shifts when switching tabs.

   Scoped to the personal cabinet only: the same `.profile-navigation` markup is
   reused by the public seller profile and the seller blog pages, which keep the
   original pill list.
   ============================================ */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* Every cell (link or <form>) is exactly a quarter of the row. */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation > * {
    flex: 0 0 calc(25% - 6px);
    max-width: calc(25% - 6px);
    min-width: 0;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 58px;
    padding: 6px 2px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    color: #374151;
    font-size: clamp(9px, 2.7vw, 11px);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn:hover,
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn:focus-visible {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #1f2937;
}

/* Selection outline: drawn *inside* the block, so the highlight never spills
   over the neighbouring tiles (and nothing shifts when tabs switch). */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 15px;
    pointer-events: none;
    transition: border-color .16s ease;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active::after {
    border-color: #9ca3af;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .material-icons {
    font-size: clamp(20px, 6.4vw, 24px);
    line-height: 1;
    color: #6b7280;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active .material-icons {
    color: #6b7280;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .nav-label {
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(9px, 2.7vw, 11px);
    font-weight: 600;
    line-height: 1.15;
    color: #374151;
}

/* Counts become a small neutral badge in the tile corner and hide at zero. */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .nav-count {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e5e7eb;
    color: #374151;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn.active .nav-count {
    background: #e5e7eb;
    color: #374151;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-btn .nav-count--zero {
    display: none;
}

/* ============================================
   PROFILE CABINET — personal blog entry: one large tonal button above the tabs
   grid (the same size/role as the blog CTA in the app). Only the extra
   section/card wrapper is gone — the button itself stays big and full-width.
   ============================================ */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form {
    order: -1;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--m3-secondary-container, #e8def8);
    color: var(--m3-on-secondary-container, #1d192b);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:hover,
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn:focus-visible {
    background: var(--m3-secondary-container, #e8def8);
    border-color: transparent;
    box-shadow: inset 0 0 0 100px rgba(29, 25, 43, 0.08);
}

/* Plain button, not a tab — no external selection ring. */
.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn::after {
    content: none;
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .material-icons {
    font-size: 22px;
    line-height: 1;
    color: var(--m3-on-secondary-container, #1d192b);
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .nav-label {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--m3-on-secondary-container, #1d192b);
}

.profile-page:not(.profile-page--public-seller):not(.seller-blog-page) .profile-navigation .profile-nav-form .profile-nav-btn .nav-count {
    position: static;
    top: auto;
    right: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: rgba(29, 25, 43, 0.12);
    color: var(--m3-on-secondary-container, #1d192b);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
}

/* ============================================
   HOME (mobile) — categories exactly like the app: hero art + two-line name on
   a transparent tile. Six categories per screen (a plain 2×3 grid inside one
   full-width "page"); the next six come with a free horizontal swipe.
   ============================================ */
/* The shared `.mobile-only` rule forces `display: flex`, which would put the
   heading *next to* the grid (row) — keep the section a column so the title
   always sits above the tiles at full width. */
.home-page .subcategories-section {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.home-page .subcategories-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 6px 8px;
}

.home-page .subcategories-section .section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--m3-on-surface);
}

.home-page .subcategories-section .subcategories-grid {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px 2px;
    margin: 0;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* One screen = one page: a plain two-column grid, so every row has exactly two
   categories in natural reading order (1,2 / 3,4 / 5,6) and the next six come
   with a horizontal swipe. */
.home-page .subcategories-section .subcategory-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
    row-gap: 4px;
    align-content: start;
    box-sizing: border-box;
}

.home-page .subcategories-section .subcategories-grid::-webkit-scrollbar {
    display: none;
}

.home-page .subcategories-section .subcategory-card {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 1 !important;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    scroll-snap-align: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.16s ease, opacity 0.16s ease;
}

.home-page .subcategories-section .subcategory-card:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.home-page .subcategories-section .subcategory-card:active {
    opacity: 0.9;
    background: transparent;
    transform: none;
}

.home-page .subcategories-section .subcategory-card:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
}

/* Hero art — same scale as the app, with a two-line label next to it. */
.home-page .subcategories-section .subcategory-card__image {
    flex: 0 0 auto;
    display: block;
    width: clamp(42px, 13vw, 62px);
    height: clamp(42px, 13vw, 62px);
}

.home-page .subcategories-section .subcategory-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.home-page .subcategories-section .subcategory-card__content {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.home-page .subcategories-section .subcategory-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0;
    white-space: normal;
    /* Wrap strictly at word boundaries — never inside a word. */
    word-break: normal;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
    color: var(--m3-on-surface);
}