/*
 * search.css - Shop Genius search page styles
 * Version: 1.0.0
 * Last Updated: 2026-07-04
 * Extracted from app/Views/search.blade.php inline <style> block (v6.5.0 perf sprint).
 */

    /* Search Page Design System - Uses theme variables from theme.css */
    :root {
        --ali-red: #ff4747;
        --ali-bg: #f2f2f2;
        /* Note: --ali-blue replaced with var(--theme-primary) throughout */
    }

    /* v2.44.33: Global fix for blue tap highlight on mobile */
    * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    .search-page {
        background: var(--ali-bg);
        min-height: calc(100vh - 200px);
        padding-top: 0;
        overflow-x: hidden;
    }

    /* Search Content (v5.18.0 - Smaller sidebar) */
    .search-content {
        display: block;
        padding: 2rem 0 2rem 220px; /* Left padding for fixed sidebar */
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Mobile Filter Toggle Button (v4.2) */
    .mobile-filter-toggle {
        display: none;
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 100;
        background: var(--theme-primary, #667eea);
        color: white;
        border: none;
        border-radius: 2rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        align-items: center;
        gap: 0.5rem;
    }

    .mobile-filter-toggle svg {
        width: 18px;
        height: 18px;
    }

    /* Sidebar Overlay (v4.2) */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }

    .sidebar-overlay.open {
        display: block;
    }

    /* Filters Sidebar - Fixed on left, vertically centered (v5.18.2) */
    .filters-sidebar {
        background: white;
        padding: 0.75rem;
        border-radius: 0 0.75rem 0.75rem 0;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        position: fixed;
        left: 0;
        top: calc(50% + 50px);
        transform: translateY(-50%);
        width: 200px;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 100;
        font-size: 0.55rem;
        transition: top 0.15s ease-out;
    }

    /* Collapsible filter groups (v4.1) */
    .filter-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        user-select: none;
    }

    .filter-group-toggle {
        transition: transform 0.2s;
        font-size: 0.7rem;
        color: #666;
    }

    .filter-group.collapsed .filter-group-toggle {
        transform: rotate(-90deg);
    }

    .filter-group-content {
        max-height: 500px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .filter-group.collapsed .filter-group-content {
        max-height: 0;
    }

    /* Desktop: No collapse functionality (v4.1) */
    @media (min-width: 769px) {
        .filter-group-toggle {
            display: none;
        }
        .filter-group-header {
            cursor: default;
            pointer-events: none;
        }
        .filter-group-header label {
            pointer-events: auto;
        }
    }

    .filters-sidebar h3 {
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--gray-900);
    }

    .filter-group {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .filter-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .filter-group label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.7rem;
        font-weight: 700;
        color: #191919;
        margin-bottom: 0.6rem;
    }

    .filter-clear {
        font-size: 0.75rem;
        color: var(--theme-primary);
        font-weight: 400;
        cursor: pointer;
        text-decoration: none;
    }

    .filter-clear:hover {
        text-decoration: underline;
    }

    /* Pill-style filter buttons */
    .filter-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-pill {
        display: inline-block;
        padding: 0.3rem 0.6rem;
        background: #f5f5f5;
        border: 1px solid #e8e8e8;
        border-radius: 1rem;
        font-size: 0.65rem;
        color: #666;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
    }

    .filter-pill:hover {
        background: #e8e8e8;
        border-color: #d0d0d0;
    }

    .filter-pill.active {
        background: var(--theme-primary);
        border-color: var(--theme-primary);
        color: white;
        font-weight: 600;
    }

    .filter-group input,
    .filter-group select {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid var(--gray-300);
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .price-range-inputs {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0.5rem;
        align-items: center;
    }

    .btn-clear-filters {
        width: 100%;
        padding: 0.5rem;
        background: transparent;
        color: var(--gray-600);
        border: none;
        font-size: 0.875rem;
        cursor: pointer;
        text-decoration: underline;
    }

    /* Results Area */
    .results-area {
        background: transparent;
        padding: 0;
    }

    .results-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 0.5rem;
        border: 1px solid #e8e8e8;
    }

    .results-info {
        font-size: 0.875rem;
        color: #666;
    }

    .results-info strong {
        color: #191919;
        font-weight: 700;
    }

    .sort-options {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .sort-options label {
        font-size: 0.875rem;
        color: #666;
        font-weight: 500;
    }

    /* v2.44.71: Custom sort dropdown (replaces native select) */
    .sort-dropdown-wrapper {
        position: relative;
    }

    .sort-dropdown-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid #e8e8e8;
        border-radius: 0.375rem;
        background: white;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 500;
        color: #191919;
        transition: all 0.2s;
    }

    .sort-dropdown-btn:hover {
        border-color: #d0d0d0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .sort-dropdown-btn svg {
        width: 12px;
        height: 12px;
        fill: #666;
        transition: transform 0.2s;
    }

    .sort-dropdown-btn.active svg {
        transform: rotate(180deg);
    }

    .sort-dropdown {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 0;
        left: auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
        padding: 0.5rem;
        z-index: 9999;
        min-width: 180px;
        display: none;
    }

    .sort-dropdown.active {
        display: block;
        animation: sortDropdownFade 0.2s ease;
    }

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

    .sort-dropdown-item {
        padding: 0.625rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.875rem;
        color: #333;
        transition: background 0.15s;
    }

    .sort-dropdown-item:hover {
        background: #f5f5f5;
    }

    .sort-dropdown-item.selected {
        background: var(--theme-primary-lighter);
        color: var(--theme-primary);
        font-weight: 500;
    }

    [dir="rtl"] .sort-dropdown {
        right: auto;
        left: 0;
    }

    /* Recommended Product Card (v2.44.15) */
    /* v2.44.113: Recommendations grid - 3 per-platform cards */
    .recommendations-grid {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        max-width: 100%;
    }
    .recommendations-grid .recommended-product-card {
        flex: 1;
        margin-bottom: 0;
        max-width: none;
    }

    .recommended-product-card {
        margin-bottom: 1.5rem;
        background: var(--white);
        border: 2px solid var(--gray-200, #e5e7eb);
        border-radius: var(--radius-lg);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        overflow: hidden;
        max-width: 56rem;
        margin-left: auto;
        margin-right: auto;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .recommended-product-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
        transform: translateY(-1px);
    }

    /* v2.46.7: Platform-specific left border accent + border color */
    .recommended-product-card.rec-lazada { border-color: #f57dbe; border-left: 4px solid #f57dbe; }
    .recommended-product-card.rec-shopee { border-color: #ee4d2d; border-left: 4px solid #ee4d2d; }
    .recommended-product-card.rec-aliexpress { border-color: #222; border-left: 4px solid #222; }

    /* v2.46.7: Tinted header background per platform */
    .rec-lazada .recommended-product-header { background: rgba(245, 125, 190, 0.07); }
    .rec-shopee .recommended-product-header { background: rgba(238, 77, 45, 0.07); }
    .rec-aliexpress .recommended-product-header { background: rgba(34, 34, 34, 0.05); }

    /* v6.2.2: AI Best Match highlight — overrides platform border */
    .recommended-product-card.rec-best-match {
        border: 3px solid #fbbf24 !important;
        box-shadow: 0 0 0 4px #fef3c7;
    }
    .rec-best-match .recommended-product-header { background: rgba(251, 191, 36, 0.12); }
    .rec-best-match-reason {
        padding: 0.5rem 1rem;
        font-style: italic;
        color: #374151;
        font-size: 0.875rem;
        border-bottom: 1px solid #e5e7eb;
        /* v6.2.8: Fixed min-height so 1-line and 2-line reasons keep all */
        /* downstream card elements (image, title, price, button) aligned across cards */
        min-height: 4.25rem;
        display: flex;
        align-items: center;
        line-height: 1.4;
    }
    .rec-best-match-reason .quote { color: #9ca3af; }
    /* Best Match keeps amber bottom border to match its theme */
    .rec-best-match .rec-best-match-reason { border-bottom-color: #fde68a; }

    /* v6.2.5: Placeholder card for platform with no real matching product */
    .recommended-product-card.rec-no-product { opacity: 0.85; }
    .rec-no-product-body {
        padding: 2rem 1rem;
        text-align: center;
        color: #6b7280;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        min-height: 220px;
        justify-content: center;
    }
    .rec-no-product-icon { width: 2.5rem; height: 2.5rem; opacity: 0.5; color: #9ca3af; }
    .rec-no-product-msg { font-style: italic; font-size: 0.95rem; color: #4b5563; margin: 0; line-height: 1.4; max-width: 90%; }
    .rec-no-product-hint { font-size: 0.8rem; color: #9ca3af; margin: 0; }

    /* v2.44.113: No-results placeholder */
    .recommended-no-results {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        text-align: center;
        color: var(--gray-500);
        font-size: 0.875rem;
        min-height: 8rem;
    }

    .recommended-product-header {
        background: transparent;
        color: var(--gray-900);
        padding: 0.625rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-bottom: 1px solid var(--gray-200, #e5e7eb);
    }

    .recommended-product-header .sparkle-icon {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        color: var(--theme-primary);
        animation: pulse 2s ease-in-out infinite;
    }
    /* v6.2.6: Best Match trophy icon — gold, no pulse, slightly larger */
    .rec-best-match .recommended-product-header .sparkle-icon {
        color: #d97706;
        width: 1.5rem;
        height: 1.5rem;
        animation: none;
    }
    /* v6.2.6: Placeholder info icon — neutral gray, no pulse */
    .rec-no-product .recommended-product-header .sparkle-icon {
        color: #6b7280;
        animation: none;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    .recommended-product-header .header-text {
        flex: 1;
        min-width: 0;
    }

    .recommended-product-header .header-title {
        font-size: 0.875rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recommended-product-header .header-subtitle {
        font-size: 0.7rem;
        color: var(--gray-500);
    }

    .recommended-product-header .score-badge {
        background: var(--theme-primary-lighter, #f0f7ff);
        color: var(--theme-primary);
        border: 1px solid var(--theme-primary-light, #d0e3ff);
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
        text-align: center;
    }

    .recommended-product-header .score-label {
        font-size: 0.6rem;
        opacity: 0.65;
        display: block;
    }

    .recommended-product-content {
        padding: 1rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .recommended-product-image {
        flex-shrink: 0;
        width: 8rem;
        height: 8rem;
        position: relative;
    }

    .recommended-product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        transition: transform 0.3s ease;
    }

    .recommended-product-image:hover img {
        transform: scale(1.05);
    }

    .recommended-product-image .discount-badge {
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        background: var(--danger-color);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 0.15rem 0.4rem;
        border-radius: var(--radius-sm);
    }

    .recommended-product-details {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .recommended-product-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--gray-900);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
        transition: color 0.2s;
    }

    .recommended-product-title:hover {
        color: var(--theme-primary);
    }

    .recommended-product-rating {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .recommended-product-rating .stars {
        display: flex;
        gap: 1px;
    }

    .recommended-product-rating .stars svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .recommended-product-rating .rating-value {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--gray-900);
    }

    .recommended-product-rating .reviews-count {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .recommended-product-sales {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        font-size: 0.7rem;
        width: 100%;
    }

    .recommended-product-sales svg {
        width: 0.75rem;
        height: 0.75rem;
        color: var(--success-color);
    }

    .recommended-product-sales .sales-label {
        color: var(--gray-500);
    }

    .recommended-product-sales .sales-value {
        font-weight: 700;
        color: var(--gray-900);
    }

    .recommended-product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
        padding: 0.5rem 1rem 0.75rem;
    }

    .recommended-platform-badge {
        background: #f0f0f0;
        color: #fff;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .recommended-platform-badge.rec-badge-lazada { background: #f57dbe; }
    .recommended-platform-badge.rec-badge-shopee { background: #ee4d2d; }
    .recommended-platform-badge.rec-badge-aliexpress { background: #000000; }

    .recommended-product-price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 0.5rem 1rem 0;
        border-top: 1px solid var(--gray-200, #e5e7eb);
    }

    .recommended-product-price .current-price {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--theme-primary);
    }

    .recommended-product-price .original-price {
        font-size: 0.8rem;
        color: var(--gray-400);
        text-decoration: line-through;
    }

    .recommended-product-actions {
        display: flex;
        gap: 0.5rem;
    }

    .recommended-product-actions .btn-buy {
        background: var(--theme-primary);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        transition: background 0.2s;
        text-decoration: none;
    }

    .recommended-product-actions .btn-buy:hover {
        background: var(--theme-primary-dark);
    }

    .recommended-product-actions .compare-btn {
        background: transparent;
        border: 1px solid var(--gray-300);
        padding: 0.5rem;
        border-radius: var(--radius);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        position: relative;
    }

    .recommended-product-actions .compare-btn:hover {
        border-color: var(--theme-primary);
        background: var(--theme-primary-lighter);
    }

    .recommended-product-actions .compare-btn svg {
        width: 1rem;
        height: 1rem;
        color: var(--gray-600);
    }

    .recommended-product-actions .compare-btn[data-compared="true"] {
        background: #3b82f6;
        border-color: #3b82f6;
    }

    .recommended-product-actions .compare-btn[data-compared="true"]:hover {
        background: #2563eb;
        border-color: #2563eb;
    }

    .recommended-product-actions .compare-btn[data-compared="true"] svg {
        color: white;
    }

    /* Responsive - Mobile */
    @media (max-width: 640px) {
        /* v2.46.7: Keep horizontal layout (override old vertical stacking) */
        .recommended-product-content {
            flex-direction: row;
            align-items: flex-start;
            text-align: left;
        }

        .recommended-product-image {
            width: 5rem;
            height: 5rem;
        }

        .recommended-product-details {
            align-items: flex-start;
        }

        .recommended-product-rating {
            justify-content: flex-start;
        }

        /* v2.46.7: Footer stays as row, left-aligned */
        .recommended-product-footer {
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            gap: 0.4rem;
        }

        .recommended-product-actions {
            justify-content: flex-start;
        }

        /* v2.44.57: Keep header same as 768px - title left, badge right */
        .recommended-product-header {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .recommended-product-header .header-text {
            flex: none;
            order: 1;
        }

        .recommended-product-header .score-badge {
            order: 2;
        }
    }

    /* Product Grid */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
    }

    /* Grid item wrapper (v5.17.11) */
    .products-grid > div {
        min-width: 0;
    }

    /* Product Card CSS (v2.44.13 - Moved here so it's not lost when JS filters) */
    .product-card {
        background: white;
        border: 1px solid #e8e8e8;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-width: 0;
    }

    .product-card:hover {
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
        transform: translateY(-2px);
        border-color: rgba(102, 126, 234, 0.3);
    }

    .product-card[data-platform="lazada"] {
        border: 2px solid var(--platform-lazada-color, #f57dbe);
    }

    .product-card[data-platform="aliexpress"] {
        border: 2px solid var(--platform-aliexpress-color, #000000);
    }

    .product-card[data-platform="shopee"] {
        border: 2px solid var(--platform-shopee-color, #ee4d2d);
    }

    .product-card-image {
        position: relative;
        width: 100%;
        height: 180px;
        background: #f5f5f5;
        overflow: hidden;
    }

    .product-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .product-card-image img.loaded {
        opacity: 1;
    }

    .product-card:hover .product-card-image img {
        transform: scale(1.08);
    }

    .product-card-body {
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        flex: 1;
    }

    .product-title {
        font-size: 0.75rem;
        font-weight: 400;
        color: #191919;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        min-height: 2.3em;
    }

    .product-brand-category {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.7rem;
        color: #999;
    }

    .product-brand { font-weight: 600; color: #666; }
    .product-category-dot { color: #ccc; }
    .product-category { font-weight: 400; color: #999; }

    .product-rating {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.75rem;
        color: #666;
    }

    .product-stars { color: #ff9f00; display: flex; gap: 0.125rem; }
    .product-reviews { color: #999; }
    .product-rating-original { color: #888; font-size: 0.7rem; }

    .product-price-section { margin-top: auto; }

    .product-price {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .product-current-price {
        font-size: 14px;
        font-weight: 700;
        color: #000;
        line-height: 1;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .product-original-price {
        font-size: 0.75rem;
        color: #999;
        text-decoration: line-through;
        font-weight: 400;
    }

    .product-discount-badge-inline {
        background: #ff4747;
        color: white;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
        white-space: nowrap;
        direction: ltr; /* Keep minus sign on left in RTL */
    }

    .product-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.5rem;
        border-top: 1px solid #e8e8e8;
        font-size: 0.75rem;
        color: #999;
    }

    .product-card-actions {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 0.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 3;
    }

    .product-card:hover .product-card-actions { opacity: 1; }

    .product-action-btn {
        width: 40px;
        height: 40px;
        background: var(--white, #fff);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
        color: var(--gray-700, #374151);
    }

    .product-action-btn:hover {
        background: var(--primary-color, #667eea);
        color: var(--white, #fff);
        transform: scale(1.1);
    }

    /* Image Analysis */
    .image-analysis-box {
        background: var(--gradient-info);
        border: 2px solid var(--primary-light);
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .image-analysis-box h4 {
        color: var(--primary-dark);
        font-weight: 700;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .image-features {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .feature-tag {
        background: white;
        padding: 0.375rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        color: var(--gray-700);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
    }

    .empty-state-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        font-size: 1.5rem;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: var(--gray-600);
        margin-bottom: 1.5rem;
    }

    /* Loading State */
    .loading-spinner {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 4px solid var(--gray-200);
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Responsive - Products page with sidebar (v5.17.6) */
    @media (max-width: 1600px) {
        .products-grid {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    @media (max-width: 1400px) {
        .products-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (max-width: 1200px) {
        .products-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 1024px) {
        .search-content {
            padding-left: 160px; /* Narrower sidebar */
        }

        .filters-sidebar {
            width: 140px;
            padding: 0.6rem;
            max-height: 75vh;
        }

        .filters-sidebar h3 {
            font-size: 0.8rem;
        }

        .filter-group label {
            font-size: 0.65rem;
        }

        .filter-pill {
            padding: 0.2rem 0.4rem;
            font-size: 0.6rem;
        }
    }

    @media (max-width: 890px) {
        .products-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        /* v2.44.48: Fix compare button icon visibility - ensure blue bg shows on mobile */
        .compare-btn[data-compared="true"] {
            background: #3b82f6 !important;
            color: white !important;
        }
    }

    @media (max-width: 768px) {
        .search-content {
            padding-left: 120px; /* Even narrower sidebar */
        }

        .filters-sidebar {
            width: 100px;
            padding: 0.4rem;
            top: calc(50% + 50px);
            transform: translateY(-50%);
            height: auto;
            max-height: 70vh;
        }

        .filters-sidebar h3 {
            font-size: 0.55rem;
            margin-bottom: 0.4rem;
        }

        .filter-group {
            margin-bottom: 0.4rem;
            padding-bottom: 0.4rem;
        }

        .filter-group label {
            font-size: 0.55rem;
            margin-bottom: 0.4rem;
        }

        .filter-pill {
            width: 100%;
            padding: 0.3rem 0.4rem;
            font-size: 0.55rem;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .filter-pills {
            flex-direction: column;
            gap: 0.2rem;
        }

        .search-input-group {
            flex-direction: column;
        }

        .platform-selector {
            gap: 0.5rem;
        }

        .results-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem;
        }

        .results-info {
            font-size: 0.75rem;
        }

        /* v2.44.71: Mobile sort dropdown styles */
        .sort-dropdown-btn {
            padding: 0.375rem 0.75rem;
            font-size: 0.8125rem;
        }

        .sort-dropdown {
            min-width: 160px;
        }

        .sort-dropdown-item {
            padding: 0.5rem 0.75rem;
            font-size: 0.8125rem;
        }

        /* v2.44.113: Stack recommendation cards vertically on mobile */
        .recommendations-grid {
            flex-direction: column;
        }

        /* v2.44.54: Redesigned Top Recommendation card - mobile vertical layout */
        .recommended-product-card {
            margin-bottom: 1rem;
        }

        /* Header: Title + Badge in same row, hide subtitle/sparkle */
        .recommended-product-header {
            padding: 0.5rem 0.75rem;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
        }

        /* v2.46.7: Keep sparkle icon visible on mobile (small recommended signal) */
        .recommended-product-header .sparkle-icon {
            display: block;
            width: 0.85rem;
            height: 0.85rem;
        }

        .recommended-product-header .header-text {
            flex: none;
            order: 1;
        }

        .recommended-product-header .score-badge {
            order: 2;
            padding: 0.25rem 0.5rem;
            font-size: 0.7rem;
        }

        .recommended-product-header .header-title {
            font-size: 0.85rem;
        }

        .recommended-product-header .header-subtitle {
            display: none;
        }

        /* v2.46.7: Horizontal layout - image left, details right */
        .recommended-product-content {
            flex-direction: row;
            align-items: flex-start;
            padding: 0.5rem 0.75rem;
            gap: 0.75rem;
        }

        /* v2.46.7: Compact image */
        .recommended-product-image {
            width: 5rem;
            height: 5rem;
            flex-shrink: 0;
        }

        /* v2.46.7: Details left-aligned */
        .recommended-product-details {
            width: auto;
            flex: 1;
            min-width: 0;
            align-items: flex-start;
            text-align: left;
            gap: 0.25rem;
        }

        .recommended-product-title {
            font-size: 0.8rem;
            -webkit-line-clamp: 2;
            text-align: left;
        }

        /* v2.46.7: Rating + Sales row compact */
        .rating-sales-row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center;
            justify-content: flex-start;
            gap: 0.75rem;
            width: 100%;
        }

        .recommended-product-rating {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center;
            gap: 0.25rem;
            flex-shrink: 0;
        }

        .recommended-product-sales {
            margin-left: auto;
            width: auto;
        }

        /* v2.46.7: Price row - compact, left-aligned, no border */
        .recommended-product-price {
            justify-content: flex-start;
            padding: 0 0.75rem;
            border-top: none;
        }

        .recommended-product-price .current-price {
            font-size: 1rem !important;
        }

        .recommended-product-price .original-price {
            font-size: 0.75rem;
        }

        .recommended-product-price .discount-badge-inline {
            font-size: 0.65rem !important;
        }

        /* v2.46.7: Footer row - single line, left-aligned */
        .recommended-product-footer {
            padding: 0.25rem 0.75rem 0.5rem;
            gap: 0.5rem;
            flex-direction: row;
            justify-content: space-between;
        }

        .recommended-product-actions {
            gap: 0.35rem;
        }

        .recommended-product-actions .btn-buy {
            padding: 0.35rem 0.65rem;
            font-size: 0.7rem;
        }
    }

    /* Mobile - Sidebar fixed, always visible (v5.18.0) */
    @media (max-width: 480px) {
        .search-content {
            padding-left: 90px; /* Narrow sidebar */
        }

        .filters-sidebar {
            width: 80px;
            padding: 0.3rem;
            top: calc(50% + 50px);
            transform: translateY(-50%);
            height: auto;
            max-height: 65vh;
        }

        .filters-sidebar h3 {
            font-size: 0.5rem;
            margin-bottom: 0.3rem;
        }

        .filter-group {
            margin-bottom: 0.3rem;
            padding-bottom: 0.3rem;
        }

        .filter-group label {
            font-size: 0.5rem;
        }

        .filter-pill {
            padding: 0.2rem 0.3rem;
            font-size: 0.5rem;
        }

        .mobile-filter-toggle {
            display: none;  /* Hide floating button - sidebar always visible */
        }

        /* Scale product cards proportionally */
        .products-grid .product-card-image {
            height: 140px !important;
        }

        .products-grid .product-current-price {
            font-size: 14px !important;
        }

        .products-grid .product-title {
            font-size: 0.7rem !important;
        }

        .results-header {
            padding: 0.5rem;
        }
    }

    /* Load More Button */
    .load-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 2rem;
        background: var(--gradient-primary);
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: var(--shadow-glow-blue);
    }

    .load-more-btn:hover {
        background: linear-gradient(135deg, var(--theme-secondary), var(--theme-primary));
        transform: translateY(-2px);
        box-shadow: var(--shadow-glow-purple);
    }

    .load-more-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* AI Suggestions Card - Theme Aware (v4.0.4) */
    .ai-suggestions-card {
        background: var(--card-bg, white);
        border: 1px solid var(--border-light, #e5e7eb);
        border-radius: 0.5rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .ai-suggestion-text {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        font-size: 0.9rem;
        color: var(--text-color, #1f2937);
        margin-bottom: 0.75rem;
    }

    .ai-suggestion-keyword {
        font-weight: 600;
        color: var(--theme-primary);
    }

    .ai-feedback-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 0.75rem;
    }

    .ai-feedback-label {
        font-size: 0.85rem;
        color: var(--text-muted, #6b7280);
        margin-right: 0.25rem;
    }

    .ai-btn-yes {
        border: 1px solid #22c55e;
        color: #22c55e;
        background: transparent;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        cursor: pointer;
        transition: background 0.2s;
    }
    .ai-btn-yes:hover {
        background: rgba(34, 197, 94, 0.1);
    }

    .ai-btn-no {
        border: 1px solid #ef4444;
        color: #ef4444;
        background: transparent;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        cursor: pointer;
        transition: background 0.2s;
    }
    .ai-btn-no:hover {
        background: rgba(239, 68, 68, 0.1);
    }

    .ai-keywords-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ai-keywords-label {
        font-size: 0.75rem;
        color: var(--text-muted, #6b7280);
    }

    .ai-keyword-tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .ai-keyword-tag {
        background: var(--surface-light, #f3f4f6);
        color: var(--text-color, #374151);
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        text-decoration: none;
    }
    .ai-keyword-tag:hover {
        background: var(--theme-primary);
        color: white;
    }

    /* v6.3.0: Compact AI Suggestions card on mobile — previously used desktop
       spacing/fonts and took up ~half the viewport. Tighten padding, margins,
       fonts and inter-row gaps so it stays out of the way. */
    @media (max-width: 768px) {
        .ai-suggestions-card {
            padding: 0.6rem 0.75rem;
            margin-bottom: 0.75rem;
        }
        .ai-suggestion-text {
            font-size: 0.8rem;
            gap: 0.3rem;
            margin-bottom: 0.4rem;
        }
        .ai-feedback-row {
            gap: 0.35rem;
            margin-bottom: 0.4rem;
        }
        .ai-feedback-label {
            font-size: 0.75rem;
            margin-right: 0;
        }
        .ai-btn-yes,
        .ai-btn-no {
            padding: 0.2rem 0.6rem;
            font-size: 0.7rem;
        }
        /* Feature tags row (Unsweetened / Dried / …) inside the card */
        .ai-suggestions-card .image-features {
            margin-top: 0.4rem !important;
            gap: 0.35rem;
        }
        .ai-suggestions-card .feature-tag {
            padding: 0.2rem 0.55rem;
            font-size: 0.7rem;
        }
        .ai-keywords-section {
            gap: 0.3rem;
            margin-top: 0.4rem;
        }
        .ai-keywords-label {
            font-size: 0.7rem;
        }
        .ai-keyword-tags {
            gap: 0.35rem;
        }
        .ai-keyword-tag {
            padding: 0.2rem 0.6rem;
            font-size: 0.7rem;
        }
    }

    /* Keyword Confirmation Modal (v2.44.66: full viewport coverage for mobile) */
    .keyword-confirm-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for mobile */
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.7); /* No blur - causes rendering glitches on mobile */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .keyword-confirm-modal.show {
        opacity: 1;
        visibility: visible;
    }

    .keyword-confirm-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        padding: 1.5rem 2rem;
        max-width: 20rem;
        margin: 0 1rem;
        text-align: center;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .keyword-confirm-modal.show .keyword-confirm-card {
        transform: scale(1);
    }

    #keywordConfirmText {
        font-size: 1rem;
        color: var(--text-color, #374151);
        margin-bottom: 1.5rem;
    }

    .keyword-confirm-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .keyword-confirm-yes,
    .keyword-confirm-no {
        padding: 0.5rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
        border: none;
    }

    .keyword-confirm-yes {
        background: var(--theme-primary, #667eea);
        color: white;
    }

    .keyword-confirm-yes:hover {
        transform: scale(1.05);
    }

    .keyword-confirm-no {
        background: #e5e7eb;
        color: #374151;
    }

    .keyword-confirm-no:hover {
        background: #d1d5db;
    }

    /* RTL Support */
    [dir="rtl"] .results-header {
        flex-direction: row-reverse;
    }

    [dir="rtl"] .sort-options {
        flex-direction: row;
    }

    /* v2.44.71: RTL support for custom sort dropdown */
    [dir="rtl"] .sort-dropdown-btn {
        flex-direction: row-reverse;
    }

    /* v2.44.72: RTL mobile - override above rule */
    @media (max-width: 768px) {
        [dir="rtl"] .sort-dropdown-btn {
            flex-direction: row;
        }
        [dir="rtl"] .results-header {
            align-items: center;
        }
    }

    /* Keep products grid LTR order in RTL mode (v2.3.4) */
    [dir="rtl"] .products-grid {
        direction: ltr;
    }

    /* ===========================================
     * MOBILE PRODUCTS PAGE REDESIGN (v2.44.26)
     * Like Lazada/Shopee/AliExpress:
     * - Hidden filters (accessed via bottom sheet)
     * - Full-width 2-column product grid
     * - Larger product images
     * =========================================== */

    /* v2.44.26: Hide mobile-only elements on desktop */
    .filter-sheet-handle,
    .filter-sheet-close {
        display: none;
    }

    /* v2.47.0: Mobile filter bar - hidden on desktop */
    .mobile-filter-bar {
        display: none;
    }

    /* v2.47.0: Sort group inside overlay - hidden on desktop */
    .overlay-sort-group {
        display: none;
    }

    /* v2.47.1: Overlay Apply button - hidden on desktop */
    .overlay-apply-wrapper {
        display: none;
    }

    @media (max-width: 768px) {
        /* v3.0.3: overflow-x: clip allows sticky to work (hidden creates scroll container) */
        .search-page {
            overflow-x: clip !important;
        }
        .search-content {
            overflow-x: clip !important;
        }

        /* v3.0.3: Hide breadcrumb on mobile to save space */
        .search-page .breadcrumbs {
            display: none !important;
        }

        /* v2.47.0: Full-screen filter overlay (replaces bottom sheet) */
        .filters-sidebar {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            bottom: auto !important;
            left: auto !important;
            transform: translateX(100%) !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100vh !important;
            max-height: 100vh !important;
            border-radius: 0 !important;
            box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
            z-index: 1001 !important;
            padding: 1rem !important;
            transition: transform 0.3s ease !important;
            overflow-y: auto !important;
        }

        /* v2.47.0: Show full-screen overlay when open (slide from right) */
        .filters-sidebar.open {
            transform: translateX(0) !important;
        }

        /* v2.47.0: RTL - slide from left */
        [dir="rtl"] .filters-sidebar {
            right: auto !important;
            left: 0 !important;
            transform: translateX(-100%) !important;
        }
        [dir="rtl"] .filters-sidebar.open {
            transform: translateX(0) !important;
        }

        /* v2.44.26: Full-width content - no sidebar padding */
        .search-content {
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding: 0 !important;
        }

        /* v2.47.0: Hide old floating filter button on mobile */
        .mobile-filter-toggle {
            display: none !important;
        }

        /* v2.47.0: Hide drag handle (not needed for full-screen) */
        .filter-sheet-handle {
            display: none !important;
        }

        /* v2.47.0: Hide sort from results header (moved to filter bar) */
        .results-header .sort-options {
            display: none !important;
        }

        /* v2.47.0: Show sort group inside overlay */
        .overlay-sort-group {
            display: block !important;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e8e8e8;
        }

        .overlay-sort-group label {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            color: #191919;
            margin-bottom: 0.6rem;
        }

        .overlay-sort-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .overlay-sort-pill {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: #f5f5f5;
            border: 1px solid #e8e8e8;
            border-radius: 1rem;
            font-size: 0.8125rem;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
        }

        .overlay-sort-pill:hover {
            background: #e8e8e8;
            border-color: #d0d0d0;
        }

        .overlay-sort-pill.active {
            background: var(--theme-primary);
            border-color: var(--theme-primary);
            color: white;
            font-weight: 600;
        }

        /* v2.47.2: Overlay Reset + Apply buttons — Grab-style sticky bottom */
        .overlay-apply-wrapper {
            display: flex !important;
            gap: 0.75rem;
            position: sticky;
            bottom: 0;
            padding: 1rem;
            background: white;
            border-top: 1px solid #e8e8e8;
            margin: 0 -1rem -1rem;
        }

        .overlay-reset-btn {
            flex: 1;
            padding: 0.875rem;
            background: #f0faf5;
            color: #1a1a1a;
            border: none;
            border-radius: 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
        }

        .overlay-apply-btn {
            flex: 1;
            padding: 0.875rem;
            background: #e8e8e8;
            color: #b0b0b0;
            border: none;
            border-radius: 1.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }

        .overlay-apply-btn.has-changes {
            background: var(--theme-primary, #667eea);
            color: white;
        }

        /* v2.47.0: Mobile filter bar */
        /* v3.0.2: Sticky below site header instead of top:0 */
        .mobile-filter-bar {
            display: flex !important;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            background: white;
            border-bottom: 1px solid #e8e8e8;
            overflow-x: auto;
            white-space: nowrap;
            position: sticky;
            top: var(--mobile-header-height, 0px);
            z-index: 100;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        /* v2.47.3: Allow dropdown to overflow filter bar when open */
        .mobile-filter-bar.dropdown-open {
            overflow: visible;
        }

        .mobile-filter-bar::-webkit-scrollbar {
            display: none;
        }

        /* Filter icon button */
        .mfb-filter-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            min-width: 36px;
            border-radius: 50%;
            background: var(--theme-primary, #667eea);
            color: white;
            border: none;
            cursor: pointer;
            flex-shrink: 0;
        }

        .mfb-filter-btn svg {
            width: 18px;
            height: 18px;
        }

        .mfb-filter-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: #ef4444;
            color: white;
            font-size: 0.6rem;
            font-weight: 700;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 8px;
            padding: 0 4px;
        }

        [dir="rtl"] .mfb-filter-badge {
            right: auto;
            left: -4px;
        }

        /* Sort chip + dropdown in filter bar */
        .mfb-sort-wrapper {
            position: relative;
            flex-shrink: 0;
        }

        .mfb-chip {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.375rem 0.75rem;
            background: #f5f5f5;
            border: 1px solid #e8e8e8;
            border-radius: 1rem;
            font-size: 0.8125rem;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
            font-weight: 500;
        }

        .mfb-chip svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        .mfb-chip:hover {
            background: #e8e8e8;
        }

        .mfb-sort-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            min-width: 180px;
            background: white;
            border: 1px solid #e8e8e8;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            z-index: 200;
            overflow: hidden;
        }

        [dir="rtl"] .mfb-sort-dropdown {
            left: auto;
            right: 0;
        }

        .mfb-sort-dropdown.active {
            display: block;
        }

        .mfb-sort-item {
            padding: 0.625rem 1rem;
            font-size: 0.8125rem;
            color: #333;
            cursor: pointer;
            white-space: nowrap;
        }

        .mfb-sort-item:hover {
            background: #f5f5f5;
        }

        .mfb-sort-item.selected {
            color: var(--theme-primary);
            font-weight: 600;
        }

        /* Platform chips in filter bar */
        .mfb-platform-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            background: #f5f5f5;
            border: 1px solid #e8e8e8;
            border-radius: 1rem;
            font-size: 0.8125rem;
            color: #666;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .mfb-platform-chip:hover {
            background: #e8e8e8;
        }

        .mfb-platform-chip.active {
            background: var(--theme-primary);
            border-color: var(--theme-primary);
            color: white;
            font-weight: 600;
        }

        /* v2.44.26: Filter count badge (kept for overlay badge) */
        .filter-count-badge {
            background: #ef4444 !important;
            color: white !important;
            font-size: 0.625rem !important;
            font-weight: 700 !important;
            padding: 0.125rem 0.375rem !important;
            border-radius: 10px !important;
            min-width: 18px !important;
            text-align: center !important;
            margin-left: 0.25rem !important;
        }

        /* v2.44.26: Overlay styling */
        .sidebar-overlay {
            position: fixed !important;
            inset: 0 !important;
            background: rgba(0,0,0,0.5) !important;
            z-index: 1000 !important;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease !important;
        }

        .sidebar-overlay.open {
            display: block !important;
            opacity: 1;
            pointer-events: auto;
        }

        /* v2.47.0: Close button for full-screen overlay */
        .filter-sheet-close {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 50% !important;
            background: #f3f4f6 !important;
            border: none !important;
            cursor: pointer !important;
            color: #6b7280 !important;
        }

        .filter-sheet-close:hover {
            background: #e5e7eb !important;
            color: #374151 !important;
        }

        /* v2.44.26: Bottom sheet header styling */
        .filters-sidebar h3 {
            font-size: 1rem !important;
            margin-bottom: 0.75rem !important;
        }

        .filter-group {
            margin-bottom: 1rem !important;
            padding-bottom: 1rem !important;
        }

        .filter-group label {
            font-size: 0.875rem !important;
            margin-bottom: 0.5rem !important;
        }

        .filter-pills {
            flex-direction: row !important;
            flex-wrap: wrap !important;
            gap: 0.5rem !important;
        }

        .filter-pill {
            width: auto !important;
            padding: 0.5rem 1rem !important;
            font-size: 0.8125rem !important;
        }

        /* v2.44.26: Full-width product grid like Lazada/Shopee */
        /* v2.44.28: Minimal side padding for wider cards */
        .products-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 4px !important;
            padding: 4px 1px !important; /* top/bottom 4px, sides 1px */
        }

        /* v2.44.26: Larger square-ish product images */
        .product-card-image {
            height: 0 !important;
            padding-bottom: 100% !important; /* 1:1 aspect ratio */
            position: relative !important;
        }

        .product-card-image img {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
        }

        /* v2.44.26: Compact card body */
        .product-card-body {
            padding: 0.5rem !important;
        }

        .product-title {
            font-size: 0.75rem !important;
            -webkit-line-clamp: 2 !important;
            min-height: auto !important;
        }

        .product-current-price {
            font-size: 0.875rem !important;
            color: #000 !important; /* v2.44.67: Match desktop color */
        }

        .product-original-price {
            font-size: 0.6875rem !important;
        }

        /* v2.44.26: Hide less important info on mobile for cleaner cards */
        .product-brand-category {
            display: none !important;
        }

        .product-rating-original {
            display: none !important;
        }

        /* v2.44.32: Product action buttons always visible, top-right on mobile */
        .product-card-actions {
            position: absolute !important;
            top: 8px !important;
            right: 8px !important;
            left: auto !important;
            transform: none !important;
            opacity: 1 !important;
            flex-direction: column !important;
            gap: 6px !important;
        }

        .product-action-btn {
            width: 32px !important;
            height: 32px !important;
            background: rgba(255, 255, 255, 0.9) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
        }

        .product-action-btn svg {
            width: 16px !important;
            height: 16px !important;
        }

        /* v2.44.26: Compact results header */
        /* v2.44.28: Minimal side margins */
        .results-header {
            margin: 0 1px 4px !important;
            padding: 0.75rem !important;
            border-radius: 0.5rem !important;
        }

        /* v2.44.120: Tighter grid gap on small screens */
        .recommendations-grid {
            gap: 0.5rem;
        }

        /* v2.44.26: Recommended card mobile optimization */
        /* v2.44.28: Minimal side margins */
        .recommended-product-card {
            margin: 4px 1px !important;
            margin-bottom: 0.75rem !important;
        }

        /* v2.44.30: 1% side padding for cards */
        .search-page .container {
            padding: 0 1% !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
        }
    }

    /* v2.44.26: Very small screens */
    /* v2.44.27: Tighter spacing */
    @media (max-width: 360px) {
        .products-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 3px !important;
            padding: 3px !important;
        }

        .product-card-body {
            padding: 0.375rem !important;
        }

        .product-title {
            font-size: 0.6875rem !important;
        }

        .product-current-price {
            font-size: 0.8125rem !important;
        }
    }