/* ======================================================================
   Category — Cohort 2 (Ghorer Organic — green/amber grocer)
   Bootstrap-first: breadcrumb / form-control / btn / row+col / form-check
   come from Bootstrap. This file carries the cohort-2 layout (no boutique
   sidebar) — green hero band, amber chip filters, full-width 5-up grid.
   ====================================================================== */

/* ---------- Breadcrumb ---------- */
.category-2-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--bs-secondary, var(--bs-secondary-color));
    padding: 0 8px;
    font-weight: 700;
}
.category-2-breadcrumb .breadcrumb-item a { transition: color 0.2s ease; }
.category-2-breadcrumb .breadcrumb-item a:hover { color: var(--bs-primary) !important; }
.category-2-breadcrumb .breadcrumb-item.active { color: var(--bs-primary) !important; font-weight: 600; }

/* ---------- Hero ---------- */
.category-2-hero {
    background: linear-gradient(135deg, var(--bs-light-primary, var(--bs-tertiary-bg)), rgba(255, 217, 128, 0.18));
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.category-2-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.category-2-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.78) 0%, rgba(var(--bs-primary-rgb), 0.55) 60%, rgba(var(--bs-primary-rgb), 0.32) 100%);
    z-index: 0;
}
.category-2-hero-image .container { position: relative; z-index: 1; }

.category-2-hero-eyebrow {
    color: var(--bs-primary, var(--bs-link-color));
    letter-spacing: 0.06em;
}
.category-2-hero-image .category-2-hero-eyebrow { color: rgba(var(--bs-body-bg-rgb), 0.92); }

.category-2-hero-title { color: var(--bs-body-color); }
.category-2-hero-image .category-2-hero-title { color: var(--bs-body-bg); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }

.category-2-hero-desc { max-width: 640px; }
.category-2-hero-image .category-2-hero-desc { color: rgba(var(--bs-body-bg-rgb), 0.92); }

.category-2-hero-count {
    color: var(--bs-primary, var(--bs-link-color));
    background: rgba(var(--bs-body-bg-rgb), 0.7);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}
.category-2-hero-image .category-2-hero-count {
    color: var(--bs-body-bg);
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(var(--bs-body-bg-rgb), 0.25);
}
.category-2-hero-count-dot {
    width: 8px;
    height: 8px;
    background: var(--bs-secondary, var(--bs-border-accent));
    box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), 0.18);
}

/* ---------- Promo strip ---------- */
.category-2-promo {
    background: var(--bs-body-bg, var(--bs-body-bg));
}
.category-2-promo-list li { color: var(--bs-secondary-color, var(--bs-secondary-color)); }

/* ---------- Filter chips ---------- */
.category-2-chipbar {
    background: var(--bs-light-primary, var(--bs-tertiary-bg));
    border-bottom: 1px solid var(--bs-border-color);
}
.category-2-chipgroup-label {
    letter-spacing: 0.06em;
    color: var(--bs-primary, var(--bs-link-color)) !important;
    flex-shrink: 0;
}

.category-2-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bs-body-bg, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color, var(--bs-border-color));
    color: var(--bs-body-color, var(--bs-body-color));
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    margin: 0;
    user-select: none;
}
.category-2-chip:hover {
    background: var(--bs-light-primary, var(--bs-tertiary-bg));
    border-color: var(--bs-primary, var(--bs-link-color));
    color: var(--bs-primary, var(--bs-link-color));
    transform: translateY(-1px);
}
.category-2-chip.is-active,
.category-2-chip-toggle:has(.category-2-chip-input:checked) {
    background: var(--bs-primary, var(--bs-link-color));
    color: var(--bs-body-bg);
    border-color: var(--bs-primary, var(--bs-link-color));
}
.category-2-chip.is-active:hover,
.category-2-chip-toggle:has(.category-2-chip-input:checked):hover {
    background: var(--bs-secondary, var(--bs-border-accent));
    border-color: var(--bs-secondary, var(--bs-border-accent));
    color: var(--bs-body-bg);
}

/* ---------- Toolbar ---------- */
.category-2-toolbar {
    background: var(--bs-body-bg, var(--bs-body-bg));
}
.category-2-toolbar .form-control:focus,
.category-2-toolbar .form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12) !important;
}
.category-2-price .input-group-text {
    background: var(--bs-light-primary, var(--bs-tertiary-bg));
    color: var(--bs-primary, var(--bs-link-color));
    border-color: var(--bs-border-color);
    font-weight: 600;
}

/* ---------- Empty state + paging ---------- */
.category-2-empty-title { color: var(--bs-primary, var(--bs-link-color)); }
.category-2-pagination .page-link {
    color: var(--bs-primary, var(--bs-link-color));
    border-color: var(--bs-border-color);
}
.category-2-pagination .page-item.active .page-link {
    background: var(--bs-primary, var(--bs-link-color));
    border-color: var(--bs-primary, var(--bs-link-color));
    color: var(--bs-body-bg);
}
.category-2-pagination .page-link:hover {
    background: var(--bs-light-primary, var(--bs-tertiary-bg));
    color: var(--bs-primary, var(--bs-link-color));
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 575.98px) {
    .category-2-hero-title { font-size: 1.4rem; }
    .category-2-promo-list { gap: 12px !important; }
    .category-2-promo-list li { font-size: 0.78rem; }
    .category-2-chip { font-size: 0.78rem; padding: 5px 12px; }
    .category-2-toolbar .form-control,
    .category-2-toolbar .form-select { font-size: 0.78rem; }
}