/**
 * HM Classifieds - Archive Styles
 * Loaded on archive and taxonomy pages.
 *
 * Contains:
 * - Archive layout + grid
 * - Search bar + autocomplete
 * - Category chips
 * - Sort controls
 * - Listing cards
 * - Filter drawer (mobile bottom sheet)
 * - Pagination
 * - Empty state
 *
 * @requires classifieds-shared.css
 * @layer components
 * @package HM_Classifieds
 */

/* Note: No @layer wrapper — see classifieds-shared.css for explanation. */

    /* =========================================================================
       ARCHIVE LAYOUT
       ========================================================================= */

    .hm-classifieds-archive {
        background: var(--hm-bg);
        padding: var(--space-6) 0 var(--space-12);
        min-height: 60vh;
    }

    /* =========================================================================
       HERO BANNER
       ========================================================================= */

    .hm-archive-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        background: var(--hm-primary-50, var(--hm-bg-subtle));
        border-radius: var(--radius-lg);
        padding: var(--space-5) var(--space-6);
        margin-bottom: var(--space-4);
    }

    .hm-archive-hero__content {
        min-width: 0;
    }

    .hm-archive-hero__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--hm-text);
        line-height: var(--leading-snug);
    }

    .hm-archive-hero__subtitle {
        margin: var(--space-1) 0 0;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-muted);
    }

    .hm-archive-hero__cta {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2-5) var(--space-5);
        background: linear-gradient(145deg, var(--hm-classifieds-accent) 0%, var(--hm-classifieds-accent-hover) 100%);
        color: var(--hm-text-inverse);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--radius-md);
        flex-shrink: 0;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--hm-classifieds-accent) 30%, transparent);
        transition: transform var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    .hm-archive-hero__cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px color-mix(in srgb, var(--hm-classifieds-accent) 40%, transparent);
        color: var(--hm-text-inverse);
    }

    .hm-archive-hero__cta i {
        font-size: 1.1em;
    }

    @media (max-width: 767px) {
        .hm-archive-hero {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
            padding: var(--space-4);
        }

        .hm-archive-hero__cta {
            justify-content: center;
        }
    }

    /* =========================================================================
       SEARCH BAR
       ========================================================================= */

    .hm-search-bar {
        margin-bottom: var(--space-3);
    }

    .hm-search-bar__form {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-lg);
        padding: var(--space-2) var(--space-4);
        min-height: 48px;
        box-shadow: var(--shadow-sm);
        transition: border-color var(--duration-fast) var(--ease-out),
                    box-shadow var(--duration-fast) var(--ease-out);
    }

    .hm-search-bar__form:focus-within {
        border-color: var(--hm-border-focus);
        box-shadow: var(--shadow-glow);
    }

    .hm-search-bar__input-wrap {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex: 1;
        min-width: 0;
    }

    .hm-search-bar__icon {
        color: var(--hm-text-muted);
        flex-shrink: 0;
    }

    .hm-search-bar__input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-family: var(--font-body);
        font-size: var(--text-base);
        color: var(--hm-text);
        padding: var(--space-2) 0;
        min-width: 0;
    }

    .hm-search-bar__input::placeholder {
        color: var(--hm-text-muted);
    }

    .hm-search-bar__filter-btn {
        display: flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        background: var(--hm-bg-subtle);
        color: var(--hm-text-secondary);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .hm-search-bar__filter-btn:hover {
        border-color: var(--hm-border-strong);
        background: var(--hm-bg-muted);
    }

    .hm-search-bar__form .hm-search-bar__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-1-5);
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: var(--space-1-5) var(--space-3);
        border: none;
        border-radius: var(--radius-md);
        background: var(--hm-classifieds-accent);
        color: var(--hm-text-inverse);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .hm-search-bar__form .hm-search-bar__submit:hover {
        background: var(--hm-classifieds-accent-hover);
    }

    .hm-search-bar__submit-text {
        display: none;
    }

    @media (min-width: 768px) {
        .hm-search-bar__submit-text {
            display: inline;
        }
    }

    @media (min-width: 768px) {
        .hm-search-bar__filter-btn {
            display: none;
        }
    }

    /* =========================================================================
       AUTOCOMPLETE DROPDOWN
       ========================================================================= */

    .hm-autocomplete-dropdown {
        position: absolute;
        top: calc(100% + var(--space-1));
        left: 0;
        right: 0;
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-dropdown);
        overflow: hidden;
    }

    .hm-autocomplete-header {
        padding: var(--space-2) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--hm-text-muted);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        border-bottom: 1px solid var(--hm-border);
    }

    .hm-autocomplete-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2-5) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .hm-autocomplete-item:hover,
    .hm-autocomplete-item--active {
        background: var(--hm-bg-subtle);
        color: var(--hm-text);
    }

    .hm-autocomplete-item i {
        color: var(--hm-text-muted);
        font-size: 0.85rem;
    }

    /* =========================================================================
       CATEGORY CHIPS
       ========================================================================= */

    /* =========================================================================
       CATEGORY CHIP BAR — Horizontal-scroll segmented filter
       Single row, never wraps, app-like on mobile.
       Mirrors Events chip bar pattern (hm-cat-filter / hm-cat-btn).
       ========================================================================= */

    .hm-category-chips {
        position: relative;
        padding-bottom: var(--space-4);
    }

    .hm-category-chips__scroll {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        border-bottom: 1px solid var(--hm-border, #e5e7eb);

        /* Hide scrollbar for cleaner mobile look */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hm-category-chips__scroll::-webkit-scrollbar {
        display: none;
    }

    .hm-category-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 18px;
        border-radius: 999px;
        font-family: var(--font-body, -apple-system, BlinkMacSystemFont, sans-serif);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid var(--hm-border, #d1d5db);
        background: transparent;
        color: var(--hm-text-secondary, #4b5563);
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Hover / tap feedback */
    .hm-category-chip:hover {
        background: var(--hm-bg-subtle, #f3f4f6);
        color: var(--hm-text, #1f2937);
        border-color: var(--hm-border-hover, #9ca3af);
    }

    .hm-category-chip:active {
        opacity: 0.8;
    }

    /* Active / selected state — matches Events chip bar (#2C5234) */
    .hm-category-chip--active,
    .hm-category-chip--active:hover {
        background: #2C5234;
        color: var(--hm-text-inverse, #fff);
        border-color: #2C5234;
        font-weight: 600;
    }

    /* Responsive — smaller on mobile */
    @media (max-width: 600px) {
        .hm-category-chips__scroll {
            gap: 8px;
            padding: 10px 12px;
        }
        .hm-category-chip {
            font-size: 13px;
            padding: 9px 14px;
        }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .hm-category-chips__scroll {
            scroll-behavior: auto;
        }
        .hm-category-chip {
            transition: none;
        }
    }

    /* =========================================================================
       CATEGORY COLOR CODING
       Per-category tinted backgrounds for listing card labels ONLY.
       Chips use uniform styling; card badges get category tints.
       To add a new category: add one [data-category="slug"] rule with --cat-color.
       ========================================================================= */

    /* --- Color definitions (slug → hsl triplet, modern space syntax) --- */
    [data-category="furniture"]            { --cat-color: 217 91% 60%; }   /* blue */
    [data-category="electronics"]          { --cat-color: 263 70% 50%; }   /* purple */
    [data-category="free-stuff"]           { --cat-color: 142 71% 45%; }   /* green */
    [data-category="sports-outdoors"]      { --cat-color: 25 95% 53%; }    /* orange */
    [data-category="lawn-garden"]          { --cat-color: 168 76% 42%; }   /* teal */
    [data-category="home-kitchen"]         { --cat-color: 38 92% 50%; }    /* amber */
    [data-category="clothing-accessories"] { --cat-color: 330 81% 60%; }   /* pink */
    [data-category="tools-hardware"]       { --cat-color: 215 14% 34%; }   /* slate */
    [data-category="baby-kids"]            { --cat-color: 347 77% 50%; }   /* rose */
    [data-category="vehicles"]             { --cat-color: 239 84% 67%; }   /* indigo */
    [data-category="books-media"]          { --cat-color: 189 94% 43%; }   /* cyan */
    [data-category="pets"]                 { --cat-color: 160 84% 39%; }   /* emerald */
    [data-category="services"]             { --cat-color: 258 90% 66%; }   /* violet */
    [data-category="curb-alert"]           { --cat-color: 25 95% 53%; }    /* orange */
    [data-category="firearms"]             { --cat-color: 220 9% 46%; }    /* neutral gray */
    [data-category="jobs"]                 { --cat-color: 217 91% 60%; }   /* blue */
    [data-category="boats-fishing"]        { --cat-color: 199 89% 48%; }   /* sky */
    [data-category="golf-carts"]           { --cat-color: 84 81% 44%; }    /* lime */
    [data-category="iso"]                  { --cat-color: 217 91% 60%; }   /* blue */
    [data-category="other"]                { --cat-color: 220 9% 46%; }    /* gray */

    /* --- Listing card category pill: tinted to match --- */
    .hm-listing-card[data-category] .hm-listing-card__category {
        background: hsl(var(--cat-color) / 0.10);
        color: hsl(var(--cat-color));
        border: 1px solid hsl(var(--cat-color) / 0.18);
    }

    /* =========================================================================
       SORT CONTROLS
       ========================================================================= */

    .hm-sort-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        padding-bottom: var(--space-4);
    }

    .hm-sort-controls__count {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-muted);
    }

    .hm-sort-controls__new-count {
        color: var(--hm-success);
        font-weight: var(--font-medium);
    }

    .hm-sort-controls__new-count::before {
        content: '\00b7';
        margin: 0 var(--space-1-5);
        color: var(--hm-neutral-300);
    }

    .hm-sort-controls__select {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        background: var(--hm-bg-elevated);
        border: var(--hm-border-width) solid var(--hm-border);
        border-radius: var(--radius-md);
        padding: var(--space-1-5) var(--space-8) var(--space-1-5) var(--space-3);
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357534E' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-2) center;
        transition: border-color var(--duration-fast) var(--ease-out);
    }

    .hm-sort-controls__select:hover,
    .hm-sort-controls__select:focus {
        border-color: var(--hm-primary);
        outline: none;
    }

    .hm-sort-controls__actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-shrink: 0;
    }

    .hm-sort-controls__post-btn {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--space-1-5);
        padding: var(--space-2) var(--space-4);
        background: var(--hm-classifieds-accent, var(--hm-primary-600));
        color: #fff;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-decoration: none;
        white-space: nowrap;
        border-radius: var(--radius-md);
        transition: background var(--duration-fast) var(--ease-out),
                    transform var(--duration-fast) var(--ease-out);
    }

    .hm-sort-controls__post-btn:hover {
        background: var(--hm-classifieds-accent-hover, var(--hm-primary));
        color: #fff;
        transform: translateY(-1px);
    }

    .hm-sort-controls__post-btn i {
        font-size: 1.1em;
    }

    /* =========================================================================
       LISTING GRID
       ========================================================================= */

    .hm-classifieds-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        padding: var(--space-5);
        background: var(--hm-bg-subtle);
        border-radius: var(--radius-lg);
        border: 1px solid var(--hm-border);
    }

    @media (min-width: 768px) {
        .hm-classifieds-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-5);
        }
    }

    @media (min-width: 1024px) {
        .hm-classifieds-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* =========================================================================
       LISTING CARD
       ========================================================================= */

    .hm-listing-card {
        background: var(--hm-bg-elevated);
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--hm-border);
        transition: transform var(--duration-normal) var(--ease-out),
                    box-shadow var(--duration-normal) var(--ease-out);
        display: flex;
        flex-direction: column;
    }

    .hm-listing-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--hm-border-strong);
    }

    /* Status overlays reduce card opacity */
    .hm-card-status--sold,
    .hm-card-status--on_hold,
    .hm-card-status--pending_pickup {
        opacity: 0.75;
    }

    .hm-card-status--sold:hover,
    .hm-card-status--on_hold:hover,
    .hm-card-status--pending_pickup:hover {
        opacity: 0.9;
    }

    /* ---------- Thumbnail ---------- */

    .hm-listing-card__thumb {
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--hm-bg-subtle);
    }

    .hm-listing-card__thumb a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .hm-listing-card__no-photo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        color: var(--hm-text-muted);
        text-decoration: none;
        background: linear-gradient(145deg, var(--hm-bg-subtle), var(--hm-bg-muted));
    }

    .hm-listing-card__no-photo i {
        font-size: 2rem;
        opacity: 0.5;
        color: var(--hm-classifieds-accent);
    }

    .hm-listing-card__no-photo span {
        font-family: var(--font-body);
        font-size: var(--text-xs);
        opacity: 0.6;
    }

    .hm-listing-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--duration-slow) var(--ease-out);
    }

    .hm-listing-card:hover .hm-listing-card__img {
        transform: scale(1.04);
    }

    /* ---------- Save / Favorite Heart ---------- */

    .hm-listing-card__thumb .hm-listing-card__save {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        z-index: var(--z-raised);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 0;
        min-height: 0;
        border: none;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(4px);
        color: var(--hm-text-muted);
        cursor: pointer;
        padding: 0;
        transition: transform var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out),
                    background var(--duration-fast) var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .hm-listing-card__save:hover {
        background: rgba(255, 255, 255, 0.95);
        color: var(--hm-danger);
    }

    .hm-listing-card__save--active {
        color: var(--hm-danger);
    }

    .hm-listing-card__save--active:hover {
        color: var(--hm-danger);
    }

    /* Ensure heart doesn't overlap with condition badge */
    .hm-card-badge--condition ~ .hm-listing-card__save {
        top: calc(var(--space-2) + 26px);
    }

    @media (max-width: 767px) {
        .hm-listing-card__save {
            width: 44px;
            height: 44px;
        }
    }

    .hm-listing-card__photo-count {
        position: absolute;
        bottom: var(--space-2);
        right: var(--space-2);
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-0-5) var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: #fff;
        background: rgba(0, 0, 0, 0.6);
        border-radius: var(--radius-sm);
        backdrop-filter: blur(4px);
    }

    .hm-listing-card__status-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-family: var(--font-body);
        font-size: var(--text-lg);
        font-weight: var(--font-extrabold);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        backdrop-filter: blur(2px);
    }

    /* ---------- Body ---------- */

    .hm-listing-card__body {
        display: flex;
        flex-direction: column;
        gap: var(--space-1-5);
        padding: var(--space-3);
        flex: 1;
    }

    .hm-listing-card__title {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        line-height: var(--leading-snug);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hm-listing-card__title a {
        color: var(--hm-text);
        text-decoration: none;
        transition: color var(--duration-fast) var(--ease-out);
    }

    .hm-listing-card:hover .hm-listing-card__title a {
        color: var(--hm-classifieds-accent);
    }

    .hm-listing-card__price {
        font-family: var(--hm-price-font);
        font-size: var(--hm-price-card);
        font-weight: var(--font-bold);
        color: var(--hm-price-color);
        letter-spacing: var(--tracking-tight);
    }

    .hm-listing-card__price small {
        font-size: 0.75em;
        font-weight: var(--font-medium);
        color: var(--hm-text-muted);
        text-transform: uppercase;
    }

    .hm-listing-card__obo {
        display: inline-block;
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--hm-classifieds-accent);
        background: var(--hm-classifieds-accent-light);
        border-radius: var(--radius-sm);
        padding: 0 var(--space-1-5);
        vertical-align: middle;
        line-height: 1.5;
    }

    .hm-listing-card__price--free {
        color: var(--hm-success);
        font-weight: var(--font-extrabold);
    }

    .hm-listing-card__price--trade {
        color: var(--hm-accent);
        font-family: var(--font-body);
        font-weight: var(--font-semibold);
    }

    .hm-listing-card__category {
        display: inline-block;
        width: fit-content;
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        background: var(--hm-bg-muted);
        border-radius: var(--radius-sm);
        padding: var(--space-0-5) var(--space-2);
        line-height: 1.4;
    }

    .hm-listing-card__excerpt {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        line-height: var(--leading-normal);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ---------- Meta line ---------- */

    .hm-card-meta-line {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
        flex-wrap: wrap;
    }

    .hm-card-location {
        display: inline-flex;
        align-items: center;
        gap: var(--space-0-5);
    }

    .hm-card-location i {
        font-size: 0.85rem;
        color: var(--hm-classifieds-accent);
    }

    .hm-card-time {
        white-space: nowrap;
    }

    .hm-card-meta-line .hm-card-location + .hm-card-time::before {
        content: '\00b7';
        margin-right: var(--space-2);
        color: var(--hm-neutral-300);
    }

    /* ---------- Seller footer ---------- */

    .hm-listing-card__seller {
        display: flex;
        align-items: center;
        gap: var(--space-1-5);
        margin-top: auto;
        padding-top: var(--space-2);
        border-top: 1px solid var(--hm-border);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        color: var(--hm-text-muted);
    }

    .hm-listing-card__seller-avatar {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .hm-listing-card__seller-avatar img {
        width: 100%;
        height: 100%;
        border-radius: var(--radius-full);
        object-fit: cover;
    }

    /* =========================================================================
       FILTER DRAWER (Mobile Bottom Sheet)
       ========================================================================= */

    .hm-filter-drawer {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        pointer-events: none;
    }

    .hm-filter-drawer[aria-hidden="false"],
    .hm-filter-drawer--open {
        pointer-events: auto;
    }

    .hm-filter-drawer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-out);
    }

    .hm-filter-drawer--open .hm-filter-drawer__backdrop {
        opacity: 1;
    }

    .hm-filter-drawer__sheet {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        background: var(--hm-bg-elevated);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 0 var(--space-5) var(--space-6);
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
        transition: transform var(--duration-normal) var(--ease-out);
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
    }

    .hm-filter-drawer--open .hm-filter-drawer__sheet {
        transform: translateY(0);
    }

    .hm-filter-drawer--closing .hm-filter-drawer__sheet {
        transform: translateY(100%);
    }

    .hm-filter-drawer__handle {
        display: flex;
        justify-content: center;
        padding: var(--space-3) 0 var(--space-2);
        cursor: grab;
        touch-action: none;
    }

    .hm-filter-drawer__handle::before {
        content: '';
        width: 36px;
        height: 4px;
        background: var(--hm-neutral-300);
        border-radius: var(--radius-full);
    }

    .hm-filter-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--hm-border);
        margin-bottom: var(--space-4);
    }

    .hm-filter-drawer__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-xl);
        color: var(--hm-text);
    }

    .hm-filter-drawer__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: var(--hm-bg-subtle);
        border-radius: var(--radius-full);
        color: var(--hm-text-muted);
        font-size: 1.2rem;
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease-out);
    }

    .hm-filter-drawer__close:hover {
        background: var(--hm-bg-muted);
        color: var(--hm-text);
    }

    /* Filter groups */
    .hm-filter-group {
        margin-bottom: var(--space-5);
    }

    .hm-filter-group__label {
        display: block;
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--hm-text-muted);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wider);
        margin-bottom: var(--space-2-5);
    }

    .hm-filter-group select,
    .hm-filter-group input[type="number"] {
        width: 100%;
        padding: var(--space-2-5) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text);
        background: var(--hm-bg);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        outline: none;
        transition: border-color var(--duration-fast) var(--ease-out);
    }

    .hm-filter-group select:focus,
    .hm-filter-group input:focus {
        border-color: var(--hm-border-focus);
        box-shadow: var(--shadow-glow);
    }

    .hm-filter-price-range {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: var(--space-2);
        align-items: center;
    }

    .hm-filter-price-range__sep {
        color: var(--hm-text-muted);
        font-size: var(--text-sm);
    }

    .hm-filter-condition-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .hm-filter-condition-list label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        cursor: pointer;
    }

    .hm-filter-radio-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .hm-filter-radio-group label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1-5);
        padding: var(--space-1-5) var(--space-3);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--hm-text-secondary);
        background: var(--hm-bg);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-full);
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-out);
    }

    .hm-filter-radio-group input:checked + label,
    .hm-filter-radio-group label:has(input:checked) {
        background: var(--hm-classifieds-accent-light);
        border-color: var(--hm-classifieds-accent);
        color: var(--hm-classifieds-accent);
    }

    .hm-filter-radio-group input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Drawer actions */
    .hm-filter-drawer__actions {
        display: flex;
        gap: var(--space-3);
        padding-top: var(--space-4);
        border-top: 1px solid var(--hm-border);
    }

    .hm-filter-drawer__btn {
        flex: 1;
        padding: var(--space-3) var(--space-4);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        border-radius: var(--radius-md);
        cursor: pointer;
        border: none;
        transition: all var(--duration-fast) var(--ease-out);
    }

    .hm-filter-drawer__btn--clear {
        background: var(--hm-bg-subtle);
        color: var(--hm-text-secondary);
    }

    .hm-filter-drawer__btn--apply {
        background: var(--hm-classifieds-accent);
        color: var(--hm-text-inverse);
    }

    .hm-filter-drawer__btn--apply:hover {
        background: var(--hm-classifieds-accent-hover);
    }

    /* =========================================================================
       PAGINATION
       ========================================================================= */

    .hm-classifieds-pagination {
        margin-top: var(--space-8);
        display: flex;
        justify-content: center;
    }

    .hm-classifieds-pagination .nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .hm-classifieds-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text-secondary);
        background: var(--hm-bg-elevated);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: all var(--duration-fast) var(--ease-out);
    }

    .hm-classifieds-pagination .page-numbers:hover {
        border-color: var(--hm-classifieds-accent);
        color: var(--hm-classifieds-accent);
    }

    .hm-classifieds-pagination .page-numbers.current {
        background: var(--hm-classifieds-accent);
        border-color: var(--hm-classifieds-accent);
        color: var(--hm-text-inverse);
        font-weight: var(--font-semibold);
    }

    .hm-classifieds-pagination .prev,
    .hm-classifieds-pagination .next {
        font-weight: var(--font-semibold);
    }

    /* =========================================================================
       EMPTY STATE
       ========================================================================= */

    .hm-empty-state {
        text-align: center;
        padding: var(--space-16) var(--space-6);
    }

    .hm-empty-state__icon {
        font-size: 3.5rem;
        margin-bottom: var(--space-4);
        opacity: 0.4;
    }

    .hm-empty-state__title {
        font-family: var(--font-display);
        font-size: var(--text-2xl);
        color: var(--hm-text);
        margin: 0 0 var(--space-2);
    }

    .hm-empty-state__text {
        font-family: var(--font-body);
        font-size: var(--text-base);
        color: var(--hm-text-muted);
        margin: 0 0 var(--space-6);
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .hm-empty-state__actions {
        display: flex;
        gap: var(--space-3);
        justify-content: center;
        flex-wrap: wrap;
    }

    /* =========================================================================
       HERO ACTIONS (Favorites link)
       ========================================================================= */

    .hm-archive-hero__actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .hm-archive-hero__my-ads-link,
    .hm-archive-hero__fav-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-4);
        border: 1px solid var(--hm-border);
        border-radius: var(--radius-md);
        color: var(--hm-text);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        text-decoration: none;
        white-space: nowrap;
        transition: border-color var(--duration-fast) var(--ease-out),
                    color var(--duration-fast) var(--ease-out);
    }

    .hm-archive-hero__my-ads-link:hover {
        border-color: var(--hm-classifieds-accent);
        color: var(--hm-classifieds-accent);
    }

    .hm-archive-hero__fav-link:hover {
        border-color: var(--hm-danger);
        color: var(--hm-danger);
    }

    /* =========================================================================
       CURB ALERT CATEGORY STYLING
       ========================================================================= */

    .hm-card-badge--curb-alert {
        position: absolute;
        top: var(--space-2);
        left: var(--space-2);
        padding: var(--space-1) var(--space-2);
        background: #f97316;
        color: #fff;
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-radius: var(--radius-sm);
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
        animation: curb-pulse 2s ease-in-out infinite;
    }

    @keyframes curb-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.85; }
    }

    /* Card border accent for curb alerts. */
    .hm-listing-card[data-category="curb-alert"] {
        border-color: #fed7aa;
    }

    .hm-listing-card[data-category="curb-alert"]:hover {
        border-color: #f97316;
    }

    /* =========================================================================
       ISO (IN SEARCH OF) — WANTED STYLING
       ========================================================================= */

    .hm-card-badge--wanted {
        position: absolute;
        top: var(--space-2);
        left: var(--space-2);
        padding: var(--space-1) var(--space-2);
        background: var(--hm-primary, #2563eb);
        color: #fff;
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-radius: var(--radius-sm);
        z-index: 2;
    }

    .hm-listing-card__price--wanted {
        color: var(--hm-primary, #2563eb);
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
        text-transform: uppercase;
    }

    .hm-listing-card[data-category="iso"] {
        border-color: #bfdbfe;
    }

    .hm-listing-card[data-category="iso"]:hover {
        border-color: var(--hm-primary, #2563eb);
    }

    /* =========================================================================
       FIREARMS — Distinctive styling
       ========================================================================= */

    .hm-listing-card[data-category="firearms"] {
        border-color: #e5e7eb;
    }

    /* =========================================================================
       SOLD → POST ANOTHER CTA
       ========================================================================= */

    .hm-sold-cta {
        margin-top: var(--space-3);
        animation: fadeInUp 0.3s ease-out;
    }

    .hm-sold-cta__inner {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--hm-success-light, #f0fdf4);
        border: 1px solid var(--hm-success, #22c55e);
        border-radius: var(--radius-md);
    }

    .hm-sold-cta__text {
        flex: 1;
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--hm-text);
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* =========================================================================
       FIREARMS AGE GATE (Form)
       ========================================================================= */

    .hm-firearms-gate {
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: #fef3c7;
        border: 1px solid #fbbf24;
        border-radius: var(--radius-md);
    }

    .hm-firearms-gate .hm-form-field__checkbox {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--hm-text);
    }

    .hm-firearms-gate .hm-form-field__checkbox input {
        margin-top: 3px;
        flex-shrink: 0;
    }