/* ═══════════════════════════════════════════════════════
   ECOBAZAR — Product.css
   Only styles that Bootstrap 5 cannot provide natively.
═══════════════════════════════════════════════════════ */

:root {
    --bs-success:      #2e9e45;
    --bs-success-rgb:  46, 158, 69;
    --eco-green-dark:  #1f7a32;
    --eco-green-light: #f0faf0;
    --eco-amber:       #f5a623;
    --eco-red:         #e53935;
}

/* ── Page header ────────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, #165a25 0%, #2e9e45 60%, #5cb85c 100%);
    padding: 2.5rem 0 2rem;
}
.page-header h1{ color: #fff; }
.page-header .lead{ color: rgba(255,255,255,.75); }
.breadcrumb-item a{ color: rgba(255,255,255,.8); text-decoration: none; }
.breadcrumb-item.active { color: rgba(255,255,255,.55); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* ── Sidebar sticky ─────────────────────────────────── */
.filter-card { position: sticky; top: 70px; }

/* ── Category list ──────────────────────────────────── */
.category-list { list-style: none; padding: 0; margin: 0; }

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .75rem;
    border-radius: .375rem;
    cursor: pointer;
    font-size: .875rem;
    transition: background .15s, color .15s;
}
.category-item:hover              { background: var(--eco-green-light); color: var(--eco-green-dark); }
.category-item.active             { background: var(--bs-success); color: #fff; font-weight: 600; }
.category-item.active .badge      { background: rgba(255,255,255,.25) !important; }

/* ── Star rating ────────────────────────────────────── */
.stars { color: var(--eco-amber); letter-spacing: 1px; }

/* ── Products grid / list ───────────────────────────── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.products-list { display: flex; flex-direction: column; gap: 1rem; }

/* ── Product card ───────────────────────────────────── */
.product-card {
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}

/* Image wrapper with zoom on hover */
.product-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--eco-green-light);
}
.product-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.product-card:hover .product-img { transform: scale(1.06); }

/* Hover overlay with action buttons */
.product-hover-actions {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}
.product-card:hover .product-hover-actions { opacity: 1; }

.hover-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, background .15s;
}
.hover-btn:nth-child(2)               { transition-delay: .06s; }
.product-card:hover .hover-btn        { opacity: 1; transform: translateY(0); }

.hover-btn.wishlist-btn               { background: #fff; color: #555; }
.hover-btn.wishlist-btn:hover,
.hover-btn.wishlist-btn.wishlisted    { background: var(--eco-red); color: #fff; }

.hover-btn.details-btn                { background: var(--bs-success); color: #fff; }
.hover-btn.details-btn:hover          { background: var(--eco-green-dark); }

/* Multi-line text clamping (no Bootstrap utility for this) */
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── List-view card overrides ───────────────────────── */
.products-list .product-card          { flex-direction: row; max-height: 180px; }
.products-list .product-image-wrapper { width: 180px; flex-shrink: 0; aspect-ratio: unset; }

/* ── Toast notification ─────────────────────────────── */
#toastContainer {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 9999;
    display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none;
}
.eco-toast {
    background: #212529;
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: .375rem;
    font-size: .875rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .35s, transform .35s;
    max-width: 260px;
}
.eco-toast.show { opacity: 1; transform: translateX(0); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 767px) {
    .filter-card                          { position: static; }
    .products-grid                        { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .products-list .product-card          { flex-direction: column; max-height: none; }
    .products-list .product-image-wrapper { width: 100%; aspect-ratio: 4/3; }
}