body{
    background:#f4f7fb;
    overflow-x:hidden;
    color:#1f2937;
}

.hero-gradient{
    background:linear-gradient(135deg,#059669 0%,#0f766e 100%);
}

.glass{
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,.92);
}

.product-card{
    transition:.35s ease;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.product-card img{
    transition:.5s ease;
}

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

.hero-slide{
    display:none;
}

.hero-slide.active{
    display:block;
    animation:fade .6s ease;
}

@keyframes fade{
    from{
        opacity:.3;
    }

    to{
        opacity:1;
    }
}

.category-pill{
    transition:.3s ease;
}

.category-pill:hover{
    transform:translateY(-4px);
    background:#059669;
    color:white;
}

.sponsored-bg{
    background:
        radial-gradient(circle at top left,#6ee7b7 0%,transparent 35%),
        radial-gradient(circle at bottom right,#34d399 0%,transparent 30%),
        linear-gradient(135deg,#064e3b 0%,#065f46 100%);
}

.feature-card{
    transition:.3s ease;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.blog-card:hover img{
    transform:scale(1.05);
}

.blog-card img{
    transition:.4s ease;
}

.favorite-btn.active {
    background: #ef4444;
}

.favorite-btn.active .heart-icon {
    fill: white;
    stroke: white;
}

html{
    scroll-behavior:smooth;
}

.animate-modal{
    animation: modalShow .35s ease;
}

@keyframes modalShow{
    from{
        opacity:0;
        transform:translateY(30px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.suggestion-item {
    transition: .2s;
    color: #111827;
}

.suggestion-item:hover {
    background: #f3f4f6;
}

#searchSuggestions,
#locationSuggestions {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#searchSuggestions::-webkit-scrollbar,
#locationSuggestions::-webkit-scrollbar {
    width: 8px;
}

#searchSuggestions::-webkit-scrollbar-thumb,
#locationSuggestions::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.highlight {
    font-weight: 800;
    color: #0f766e;
}

.suggestions-hide {
    animation: hideSuggestions .22s ease forwards;
}

@keyframes hideSuggestions {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
}

.animate-fade {
    animation: fade .25s ease;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subcategory-item:hover {
    background: white;
    transform: translateY(-2px);
}

.homepage-promoted-carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.homepage-promoted-carousel::-webkit-scrollbar {
    display: none;
}

.listing-search-filter-columns {
    column-count: 1;
    column-gap: .75rem;
}

@media (min-width: 768px) {
    .listing-search-filter-columns {
        column-count: 2;
    }
}

@media (min-width: 1280px) {
    .listing-search-filter-columns {
        column-count: 3;
    }
}

.listing-search-filter-card {
    break-inside: avoid;
    margin-bottom: .75rem;
}

.listing-search-filter-control {
    min-height: 44px;
}

body.app-theme-dark .listing-search-filter-card {
    background: #111827;
    border-color: #334155;
}

body.app-theme-dark .listing-search-filter-card input,
body.app-theme-dark .listing-search-filter-card select {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

body.app-theme-dark .listing-search-filter-card input::placeholder {
    color: #94a3b8;
}

body.app-theme-dark .hero-gradient {
    background:
        radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .16) 0%, transparent 34%),
        radial-gradient(circle at 84% 72%, rgba(16, 185, 129, .12) 0%, transparent 36%),
        linear-gradient(135deg, #042f2e 0%, #064238 46%, #0f172a 100%);
}

body.app-theme-dark .hero-gradient > .absolute.inset-0 {
    opacity: .1;
}

body.app-theme-dark .hero-gradient .glass {
    background: rgba(15, 23, 42, .88);
    border: 1px solid rgba(51, 65, 85, .82);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

body.app-theme-dark #homeSearchForm {
    color: #f8fafc;
}

body.app-theme-dark #searchInput,
body.app-theme-dark #locationButton,
body.app-theme-dark #locationInput {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.app-theme-dark #searchInput::placeholder,
body.app-theme-dark #locationInput::placeholder {
    color: #94a3b8 !important;
}

body.app-theme-dark #locationButton:hover,
body.app-theme-dark #searchInput:focus,
body.app-theme-dark #locationInput:focus {
    background: #0f172a !important;
}

body.app-theme-dark #locationButton span {
    color: #f8fafc;
}

body.app-theme-dark #searchSuggestions,
body.app-theme-dark #locationPanel,
body.app-theme-dark #locationSuggestions {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e5e7eb;
}

body.app-theme-dark #locationAll {
    background: #1e293b !important;
    color: #f8fafc !important;
}

body.app-theme-dark .suggestion-item {
    color: #e5e7eb;
}

body.app-theme-dark .suggestion-item:hover,
body.app-theme-dark .subcategory-item:hover {
    background: #1e293b;
}

body.app-theme-dark .highlight {
    color: #34d399;
}

body.app-theme-dark [data-hero-promoted-slide] .bg-emerald-100 {
    background: rgba(16, 185, 129, .16) !important;
    color: #6ee7b7 !important;
}

body.app-theme-dark [data-hero-promoted-slide] .bg-emerald-500 {
    background: #059669 !important;
}

body.app-theme-dark [data-hero-promoted-slide] .bg-emerald-500:hover {
    background: #047857 !important;
}

body.app-theme-dark .hero-gradient #prevSlide,
body.app-theme-dark .hero-gradient #nextSlide,
body.app-theme-dark #homepagePromotedPrev,
body.app-theme-dark #homepagePromotedNext {
    background: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, .36) !important;
    color: #f8fafc !important;
}

body.app-theme-dark .hero-gradient #prevSlide:hover,
body.app-theme-dark .hero-gradient #nextSlide:hover,
body.app-theme-dark #homepagePromotedPrev:hover,
body.app-theme-dark #homepagePromotedNext:hover {
    background: #1e293b !important;
}

body.app-theme-dark .hero-gradient #prevSlide svg,
body.app-theme-dark .hero-gradient #nextSlide svg,
body.app-theme-dark #homepagePromotedPrev svg,
body.app-theme-dark #homepagePromotedNext svg {
    color: #f8fafc !important;
    stroke: #f8fafc !important;
}