/* Hide banner section before JS loads images — !important beats any Tailwind class */
#bannerSection { display: none !important; }

.filter-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 999px; font-size: 13px;
    font-weight: 500; white-space: nowrap; cursor: pointer;
    border: 1.5px solid #e5e7eb; background: #fff; color: #4b5563;
    transition: all .2s;
}
.filter-chip:hover { border-color: #FF6B00; color: #FF6B00; }
.filter-chip.active { background: #FF6B00; border-color: #FF6B00; color: #fff; }

.product-img-wrap { aspect-ratio: 3/4; overflow: hidden; background: #f9f9f9; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.banner-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer; transition: all .2s;
}
.banner-dot.active { width: 18px; border-radius: 3px; background: #fff; }

/* Favorite button active state on product cards */
.fav-btn-active {
    border: 2px solid #FF6B00;
    background-color: #fff7ed;
}
.cart-btn-active {
    background-color: #f97316 !important; /* orange-500 */
}
.cart-btn-active:hover {
    background-color: #ea580c !important; /* orange-600 */
}