/* ============================================================
   ThaiDeals — Custom Styles
   ============================================================ */

/* --- BASE --- */
body {
    background-color: #030304;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* --- AURA BACKGROUND --- */
.bg-mesh-gradient {
    background: radial-gradient(ellipse at 50% 20%, rgba(45, 55, 100, 0.85) 0%, rgba(25, 20, 55, 0.5) 50%, transparent 90%);
}
@keyframes bg-shift {
    0%, 100% { transform: scale(1) translate(0, -2%); opacity: 0.85; }
    33%      { transform: scale(1.08) translate(1.5%, 3%); opacity: 1; }
    66%      { transform: scale(0.92) translate(-1.5%, 1%); opacity: 0.9; }
}
.animate-bg-shift { animation: bg-shift 45s infinite ease-in-out; }

/* --- SCROLLBAR HIDE --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- GLASSMORPHISM --- */
.glass-panel {
    background: rgba(10, 11, 13, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* --- THAILAND FLAG PULSE --- */
@keyframes thailandPulse {
    0%   { fill: #ED1C24; filter: drop-shadow(0 0 12px rgba(237, 28, 36, 0.75)); }
    33%  { fill: #FFFFFF; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.75)); }
    66%  { fill: #1E3A8A; filter: drop-shadow(0 0 16px rgba(30, 58, 138, 0.85)); }
    100% { fill: #ED1C24; filter: drop-shadow(0 0 12px rgba(237, 28, 36, 0.75)); }
}
.animate-thai-pulse { animation: thailandPulse 3.5s infinite ease-in-out; }

/* --- RANGE SLIDERS --- */
input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 100%; background: transparent; height: 12px;
    cursor: pointer; margin: 0;
}
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 2px; border-radius: 999px;
    background: linear-gradient(to right, rgba(255,255,255,0.5) var(--progress, 50%), rgba(255,255,255,0.08) var(--progress, 50%));
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    height: 14px; width: 6px; border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0,0,0,0.5);
    margin-top: -6px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover  { transform: scaleY(1.4) scaleX(1.2); background-color: #e4e4e7; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(0.9); }

/* Discount slider — red accent */
#filterMinDiscount::-webkit-slider-runnable-track {
    background: linear-gradient(to right, rgba(248,113,113,0.6) var(--progress, 50%), rgba(255,255,255,0.08) var(--progress, 50%));
}
#filterMinDiscount::-webkit-slider-thumb {
    box-shadow: 0 0 10px rgba(248,113,113,0.3), 0 2px 4px rgba(0,0,0,0.5);
}

/* Grid slider — circle thumb */
#gridSlider::-webkit-slider-thumb { height: 12px; width: 12px; border-radius: 50%; margin-top: -5px; }
#gridSlider::-webkit-slider-thumb:hover  { transform: scale(1.25); background-color: #e4e4e7; }
#gridSlider::-webkit-slider-thumb:active { transform: scale(0.9); }
#gridSlider::-moz-range-thumb {
    height: 12px; width: 12px; border-radius: 50%; background: #FFFFFF; border: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0,0,0,0.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
#gridSlider::-moz-range-thumb:hover  { transform: scale(1.25); background-color: #e4e4e7; }
#gridSlider::-moz-range-thumb:active { transform: scale(0.9); }

/* --- NUMBER INPUT --- */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* --- SIDEBAR CARDS --- */
.sidebar-card {
    position: relative;
    background: rgba(10, 11, 13, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 24px 20px;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
}
.sidebar-card.sidebar-animate {
    animation: sidebarSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes sidebarSlideIn { to { opacity: 1; visibility: visible; transform: translateX(0); } }
@keyframes sidebarSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-20px); }
}
.sidebar-card.sidebar-slide-out {
    animation: sidebarSlideOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/* Tier tabs row animation */
#seller-tabs-wrapper {
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.4s ease;
    overflow: hidden;
}
#seller-tabs-wrapper.tier-hidden {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0 !important;
    pointer-events: none;
}
#seller-tabs-wrapper.tier-visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 80px;
    pointer-events: auto;
}
.sidebar-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(10, 11, 13, 0.6);
}

/* --- DROPDOWNS --- */
.custom-select-container { position: relative; width: 100%; }
.z-boost { z-index: 50 !important; }
.custom-select-btn {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 0 16px; height: 44px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px; cursor: pointer;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 600; color: #a1a1aa;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-select-btn:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.custom-select-options {
    position: absolute; top: 115%; left: 0; right: 0;
    background: rgba(10, 11, 13, 0.98); backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    display: none; z-index: 60; overflow: hidden; padding: 0;
}
.custom-select-options.open { display: flex; flex-direction: column; animation: dropdownIn 0.2s ease-out; }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.custom-option {
    padding: 8px 12px; border-radius: 8px;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-size: 12px; font-weight: 600;
    cursor: pointer; color: #a1a1aa; display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s;
}
.custom-option:hover { background: rgba(255,255,255,0.04); color: #fff; }
.custom-option.selected { background: rgba(255,255,255,0.08); color: #fff; }

.dropdown-items-list {
    max-height: 250px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
/* Premium Scrollbar */
.dropdown-items-list::-webkit-scrollbar { width: 4px; }
.dropdown-items-list::-webkit-scrollbar-track { background: transparent; }
.dropdown-items-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
.dropdown-items-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* --- CAPSULE CONTROLS --- */
.capsule-control {
    background: rgba(255,255,255,0.03); border-radius: 9999px; height: 44px;
    display: flex; align-items: center; padding: 0 20px;
    border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s;
}
.capsule-control:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

/* --- TAB ANIMATIONS --- */
@keyframes tab-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.92); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes tab-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
    50%  { box-shadow: 0 0 18px 2px rgba(255,255,255,0.15); }
    100% { box-shadow: 0 0 15px 0 rgba(255,255,255,0.08); }
}
.seller-cat-tab { cursor: pointer; }
.seller-cat-tab:active { transform: scale(0.95); }
.tab-animate {
    animation: tab-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), tab-glow 0.4s ease-out;
}

/* --- SEARCH GLOW BORDER --- */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes glow-rotate { 0% { --glow-angle: 0deg; } 100% { --glow-angle: 360deg; } }
.glow-border-wrap {
    position: relative; border-radius: 12px; padding: 1.5px;
    background: conic-gradient(from var(--glow-angle),
        transparent 0%, rgba(239,68,68,0) 20%, rgba(239,68,68,0.45) 30%,
        rgba(248,113,113,0.55) 38%, rgba(255,255,255,0.35) 42%,
        rgba(248,113,113,0.45) 46%, rgba(239,68,68,0.35) 52%, transparent 65%, transparent 100%
    );
    animation: glow-rotate 6s linear infinite;
}
.glow-border-wrap::before {
    content: ''; position: absolute; inset: -4px; border-radius: 16px;
    background: conic-gradient(from var(--glow-angle),
        transparent 0%, transparent 20%, rgba(239,68,68,0.15) 30%,
        rgba(248,113,113,0.25) 38%, rgba(255,255,255,0.1) 42%,
        rgba(248,113,113,0.2) 46%, rgba(239,68,68,0.12) 52%, transparent 65%, transparent 100%
    );
    filter: blur(8px); z-index: -1; pointer-events: none;
    animation: glow-rotate 6s linear infinite;
}

/* --- PRODUCT CARD ENTRANCE --- */
.product-card {
    opacity: 0; transform: translateY(40px) scale(0.97);
    position: relative;
}
.product-card.card-revealed {
    animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cardReveal { to { opacity: 1; transform: translateY(0) scale(1); } }

/* --- PAGINATION --- */
.pagination-btn {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: #a1a1aa;
}
.pagination-btn:hover:not(:disabled):not(.active) {
    border-color: rgba(255,255,255,0.2); color: #fff; transform: translateY(-1px);
    background: rgba(255,255,255,0.06);
}
.pagination-btn.active {
    background: #fff; color: #000; border-color: #fff;
    box-shadow: 0 4px 20px rgba(255,255,255,0.2);
}
.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- DROPDOWN SEARCH WRAPPER & INPUT --- */
.dropdown-search-wrapper {
    background: #0f1013;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dropdown-search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.dropdown-search-icon {
    position: absolute;
    left: 10px;
    color: rgba(255, 255, 255, 0.35);
    width: 12px;
    height: 12px;
    pointer-events: none;
}
.dropdown-search-input {
    width: 100%;
    padding: 8px 30px 8px 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #e4e4e7;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: all 0.2s;
}
.dropdown-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
.dropdown-search-input:focus {
    border-color: rgba(75, 136, 255, 0.3);
    background: rgba(75, 136, 255, 0.03);
}
.dropdown-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.dropdown-search-clear:hover {
    color: #fff;
}
.dropdown-search-clear svg {
    width: 12px;
    height: 12px;
}

/* --- CATEGORY HIERARCHY --- */
.category-l1 {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-top: 8px;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
}
.category-l1:first-of-type {
    margin-top: 0;
}
.category-l1:hover {
    color: #fff !important;
}
.category-l1.selected {
    color: #fff !important;
}
.category-l2 {
    padding-left: 20px !important;
}
.category-l3 {
    padding-left: 32px !important;
    font-size: 11px !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}
.option-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
}
.option-count {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.25);
    margin-left: auto;
    margin-right: 6px;
}
.custom-option.selected .option-count {
    color: rgba(255, 255, 255, 0.5);
}
.option-check {
    color: #4B88FF;
    flex-shrink: 0;
}

/* --- PRICE HISTORY POPUP --- */
.price-history-btn {
    position: relative;
}
.price-history-popup {
    position: fixed; z-index: 9999;
    pointer-events: auto;
    background: rgba(12, 13, 17, 0.95);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 14px 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    min-width: 240px;
    opacity: 0; transform: translateY(6px) scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.price-history-popup.visible {
    opacity: 1; transform: translateY(0) scale(1);
}
.price-history-popup .popup-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-bottom: 8px;
}
.price-history-popup .popup-prices {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 8px; gap: 12px;
}
.price-history-popup .popup-price-label {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.3);
}
.price-history-popup .popup-price-value {
    font-size: 13px; font-weight: 700; color: #fff;
}
.price-history-popup .sparkline-path {
    fill: none; stroke: url(#sparkGradient); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.price-history-popup .sparkline-area {
    fill: url(#sparkAreaGradient); opacity: 0.3;
}
.price-history-popup .sparkline-dot {
    fill: #4B88FF; filter: drop-shadow(0 0 4px rgba(75,136,255,0.6));
}

/* ============================================================
   S-TIER MOTION DESIGN UPGRADES
   ============================================================ */

/* --- HEADER SCROLL MORPHING --- */
.header-transition {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-scrolled {
    background: rgba(10, 11, 13, 0.8) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}
.logo-container {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-scrolled .logo-container {
    transform: scale(0.9);
}

/* --- SKELETON LOADING --- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton-card {
    background: linear-gradient(to right, rgba(255,255,255,0.03) 8%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.03) 33%);
    background-size: 1000px 100%;
    animation: shimmer 2s linear infinite forwards;
    border-radius: 16px;
    height: 380px; 
    border: 1px solid rgba(255, 255, 255, 0.03);
    opacity: 1;
    transition: opacity 0.3s ease;
}
.skeleton-card.skeleton-fade-out {
    opacity: 0;
}
.cards-exiting {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* --- MULTI-LAYER CARD HOVER --- */
.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 10;
}
.product-card:hover::before {
    opacity: 1;
}
.product-card-image-container img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-card-image-container img {
    transform: scale(1.05) translate(calc(var(--mouse-x-norm, 0) * -5px), calc(var(--mouse-y-norm, 0) * -5px));
}

/* --- SLIDER INTERACTION JUICE --- */
@keyframes valuePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.value-changed {
    animation: valuePop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}
input[type=range]:active::-webkit-slider-runnable-track {
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

/* --- TOGGLE SWITCH SQUISH --- */
.toggle-thumb {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s !important;
}
.toggle-checkbox:active + .toggle-label .toggle-thumb {
    transform: scaleX(1.3) scaleY(0.85);
}
.toggle-checkbox:checked:active + .toggle-label .toggle-thumb {
    transform: translateX(16px) scaleX(1.3) scaleY(0.85); /* Adjust based on current translate */
}

/* --- LOGO HOVER INTERACTION --- */
.logo-container:hover {
    transform: scale(1.05);
}
.header-scrolled .logo-container:hover {
    transform: scale(0.95);
}
.logo-container:hover .animate-thai-pulse {
    animation-duration: 1.5s;
}
.brand-text {
    background: linear-gradient(90deg, #fff, #fff, #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}
.logo-container:hover .brand-text {
    background: linear-gradient(90deg, #fff, #4B88FF, #fff);
    background-size: 200% auto;
    animation: textShine 2s linear infinite;
}
@keyframes textShine {
    to { background-position: 200% center; }
}

/* --- FAB ENTRANCE & WIGGLE --- */
@keyframes fabEntrance {
    0% { transform: translateY(40px) scale(0.8); opacity: 0; }
    60% { transform: translateY(-10px) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.fab-animate {
    animation: fabEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
#scrollToTopBtn {
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#scrollToTopBtn.fab-visible {
    opacity: 1; pointer-events: auto;
}
#scrollToTopBtn:hover {
    animation: wiggle 0.4s ease-in-out;
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* --- PREFERS REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- RESET FILTERS BUTTON --- */
.reset-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.reset-filters-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}
.reset-filters-btn:hover svg {
    animation: resetSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reset-filters-btn:active {
    transform: scale(0.97);
}
.reset-filters-btn.hidden {
    display: none;
}
.reset-filters-btn.reset-slide-in {
    display: flex;
    animation: resetSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.reset-filters-btn.reset-slide-out {
    animation: resetSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes resetSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); max-height: 0; padding: 0 16px; margin-bottom: -24px; }
    to   { opacity: 1; transform: translateY(0) scale(1); max-height: 50px; padding: 10px 16px; margin-bottom: 0; }
}
@keyframes resetSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); max-height: 50px; padding: 10px 16px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateY(-10px) scale(0.95); max-height: 0; padding: 0 16px; margin-bottom: -24px; }
}
@keyframes resetSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* --- PRODUCT GRID RESPONSIVENESS --- */
#product-grid {
    --grid-cols: 2; /* Mobile default */
}
@media (min-width: 768px) {
    #product-grid {
        --grid-cols: 6; /* Desktop override */
    }
}

/* --- MOBILE FILTER BUTTON ALIGNMENT --- */
#mobile-filter-btn {
    justify-content: center;
}
@media (min-width: 1024px) {
    #mobile-filter-btn {
        display: none;
    }
}

/* --- EXCLUDE ✕ BUTTONS (on card hover) --- */
.exclude-hover-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.exclude-x {
    display: flex;
    opacity: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.exclude-x:hover {
    background: rgba(255, 59, 48, 0.4);
    transform: scale(1.2);
}
.product-card:hover .exclude-x {
    opacity: 1;
}

/* Always show on mobile (touch devices) */
@media (hover: none) and (pointer: coarse) {
    .exclude-x {
        opacity: 0.7;
    }
}

/* --- EXCLUDED CHIPS (stats bar) --- */
.excluded-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.25);
    color: #ff6b63;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.excluded-chip:hover {
    background: rgba(255, 59, 48, 0.25);
    border-color: rgba(255, 59, 48, 0.5);
}