/* Adaptat după design real (`D:\Evia assets\homepage\homepage ce e popular acum\`,
   desktop+tabletă+mobil), cerut explicit de utilizator ca `custom-tabs-collection`.
   Structură: cap (titlu + descriere, stivuite — NU pe același rând ca la ProductSlider/
   CategorySlider) + rând de tab-uri orizontale cu scroll (reutilizează chrome-ul generic
   `.item-slider-rail`/`.item-slider-nav`/fade din `item-slider.css` — pe Mobil săgețile
   sunt ascunse, `d-none d-md-flex`, doar swipe, ca-n design) + grilă STATICĂ Bootstrap
   nativă (`row-cols-2/md-3/lg-6`, NU un rail — design-ul chiar arată o grilă fixă, nu un
   carusel) de ProductCard-uri + o ultimă celulă „Vezi mai multe". */
.custom-tabs-collection-description {
    font-size: var(--text-m-size);
    line-height: var(--text-m-line);
    color: var(--color-content-tertiary);
    margin-top: 0.25rem;
}

/* pastilă „✦ AI-Powered" opțională lângă titlu (`homepage recomandari pentru tine`) —
   token-uri semantice AI deja definite (--color-bg-ai/--color-border-ai/
   --color-content-ai-primary), neutilizate până acum; `sparkle.svg` e deja mov
   (`stroke="#661C91"` = exact --color-content-ai-primary), fără nevoie de asset nou */
.custom-tabs-collection-ai-badge {
    background-color: var(--color-bg-ai);
    border: 1px solid var(--color-border-ai);
    color: var(--color-content-ai-primary);
    font-size: var(--text-xs-size);
    font-weight: var(--font-weight-semibold);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
}

/* Variantă „smart-grid" (`Model.SmartGrid=true`, ex. „Recomandări pentru tine"):
   grid bento pe Desktop, re-analizat pe mockup — cardurile „mari" (produs 1 și 8) NU
   sunt doar „1 coloană din 3, 2 rânduri" (asta dădea ~33% lățime, prea îngust); sunt
   late cât **60%** din rând (3 din 5 track-uri egale) ȘI înalte 2 rânduri, cu cardurile
   normale (20% fiecare) umplând restul — iar blocul „mare" e în STÂNGA pentru
   produsele 1-5 (rânduri 1-2) și în DREAPTA pentru produsele 6-10 (rânduri 3-4),
   asimetric (nu același șablon oglindit). De-aia `grid-template-areas` explicit
   (poziționare pe `nth-child`, ca la Footer), NU auto-placement — algoritmul „sparse"
   nu poate reproduce o coloană lată care alternează stânga/dreapta. Poziția e FIXĂ,
   dedusă din acest design (10 produse exact) — nu generalizată pentru alt număr.
   Pe Tabletă/Mobil devine o grilă simplă, fără spanning (design-ul confirmă: nicio
   celulă „mare" pe ecrane mai mici). */
.smart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .smart-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .smart-grid {
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas:
            "a a a b c"
            "a a a d e"
            "f g h h h"
            "i j h h h";
    }

    .smart-grid > *:nth-child(1) { grid-area: a; }
    .smart-grid > *:nth-child(2) { grid-area: b; }
    .smart-grid > *:nth-child(3) { grid-area: c; }
    .smart-grid > *:nth-child(4) { grid-area: d; }
    .smart-grid > *:nth-child(5) { grid-area: e; }
    .smart-grid > *:nth-child(6) { grid-area: f; }
    .smart-grid > *:nth-child(7) { grid-area: g; }
    .smart-grid > *:nth-child(8) { grid-area: h; }
    .smart-grid > *:nth-child(9) { grid-area: i; }
    .smart-grid > *:nth-child(10) { grid-area: j; }
}

/* fără padding-bottom „de rezervă pentru scrollbar" al `.item-slider-rail` — aici rândul
   de tab-uri trebuie centrat vertical exact pe săgețile prev/next (`align-items-center`
   pe wrapper-ul comun), nu decalat de padding-ul asimetric */
.custom-tabs-collection-tabs {
    padding-bottom: 0;
}

.custom-tabs-collection-tab {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-content-primary);
    padding: 0.625rem 1.25rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.custom-tabs-collection-tab:hover {
    background-color: var(--color-bg-secondary);
}

.custom-tabs-collection-tab-active,
.custom-tabs-collection-tab-active:hover {
    background-color: var(--color-bg-button-secondary-active);
    border-color: var(--color-bg-button-secondary-active);
    color: var(--color-content-button-secondary-active);
}

.custom-tabs-collection-more {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semibold);
}

.custom-tabs-collection-more:hover {
    background-color: var(--color-bg-tertiary);
}

/* Mesaj „produse indisponibile" afișat de `initTabsFilter` (app.js) când e apăsat un
   tab fără date reale hardcodate — doar tab-ul marcat activ inițial are produse; restul
   comută pe acest placeholder. `.d-flex` e utility Bootstrap cu !important, deci
   suprascrierea „ascuns" (`[hidden]`) are nevoie și ea de !important ca să câștige. */
.custom-tabs-collection-empty {
    min-height: 320px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
}

.custom-tabs-collection-empty[hidden] {
    display: none !important;
}

.custom-tabs-collection-empty-text {
    font-size: var(--text-m-size);
    color: var(--color-content-tertiary);
    font-weight: var(--font-weight-medium);
}