/* Budicool — panel "odjela": zaglavlje + podkategorije kao chipovi + (opcionalno) rail proizvoda kao tijelo (DEPT).
 * Scope: .bc-chips (blocks/listing_block/categories_chips.tpl) i `.bc-chips + .bc-hscroll--unframed` (hscroll rail bez
 * naslova ODMAH ispod = tijelo istog panela). Ništa drugo na stranici ne podudara ove selektore; Framed ON railovi
 * (rođendan, tajice…) nemaju klasu --unframed pa se nikad ne lijepe.
 * Red chipova koristi hscroll engine (hscroll.css/js): .bc-hscroll korijen + .bc-hscroll-track + .bc-hscroll-arrow;
 * ovdje se dodaje scroller (.bc-chips-row), usklađuje položaj strelica (-10 px od inseta) i SKRIVAJU strelice ≤767
 * (chip je nizak i uzak pa bi ih strelica prekrila; redovi proizvoda ih zadržavaju). Veličina, stil
 * i pilula položaja (.bc-hscroll-bar, centrirana u donjem paddingu scrollera; rubovi reda su simetrični pa
 * 50 % = sredina reda) = hscroll.css. Donji paddinzi ovdje = ritam na desktopu, uži na mobitelu.
 * Redoslijed učitavanja chips.css / hscroll.css NIJE bitan (podržana su oba, ovisno koji se blok renderira prvi):
 * sva preklapanja su riješena specifičnošću — pravila koja pregazuju hscroll.css imaju (0,3,0) > (0,2,0).
 * `:has()` u ZASEBNIM pravilima (otvara dno panela zaglavlja + pokazuje oznaku "Izdvajamo"); bez podrške = tanki šav
 * između dva panela i bez oznake, ništa ne puca. Bočni padding .container-fluid = 0 (style.css guard, Faza C) — inset
 * daje token --bc-dept-inset (20 / 12 / 8 px) na unutarnjim elementima. Tokeni iz card.css (s fallbackom). */

.bc-chips,
.bc-chips + .bc-hscroll--unframed {
    --bc-dept-inset: 20px;
    --bc-dept-radius: 18px;
}

/* Razmak od bloka iznad: .mt20 je u style.css zakomentiran (margin-top 0 sitewide) — sekcije se vizualno razdvajaju
 * marginama NASLOVA sljedeće sekcije. Panel s rubom nema naslov iznad ruba pa bi dodirivao kartice bloka iznad
 * (vlasnikov nalaz @390, 2026-09-14). section.bc-chips (0,1,1) = ista specifičnost kao section.row{margin:0}, a
 * chips.css se učitava poslije → pobjeđuje. Rail-tijelo ispod ostaje margin-top 0 (pravilo niže, (0,2,0)). */
section.bc-chips {
    margin-top: 20px;
}

/* ---------- Panel zaglavlja ---------- */
.bc-chips .container-fluid {
    background: #fff;
    border: 1px solid #e8edf0;
    border-radius: var(--bc-dept-radius);
    padding-top: 18px;
    padding-bottom: 6px; /* + 12 px donjeg paddinga reda chipova (pilula) = 18 px chip → donji rub kao prije */
}

/* ---------- Zaglavlje: naslov + "Cijela ponuda" ---------- */
.bc-chips .bc-chips-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--bc-dept-inset);
    margin: 0 0 8px;
}

/* naslov bloka: vlastiti stil (style.css h2 = 24px + text-align:center → eksplicitno pregaženo) */
.bc-chips .bc-chips-h {
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #222;
    overflow-wrap: anywhere;
}

.bc-chips .bc-chips-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan-d, #007b9c);
    background: #fff;
    border: 1px solid #cfe3ea;
    border-radius: 999px;
    padding: 7px 14px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bc-chips .bc-chips-all:hover {
    background: var(--cyan-d, #007b9c);
    border-color: var(--cyan-d, #007b9c);
    color: #fff;
    text-decoration: none;
}

.bc-chips .bc-chips-all:focus-visible {
    outline: 2px solid var(--cyan-d, #007b9c);
    outline-offset: 2px;
}

/* ---------- Red alata: "Podkategorije" + gumb proširenja ---------- */
.bc-chips .bc-chips-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 0 var(--bc-dept-inset);
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #566973;
}

.bc-chips .bc-hscroll-expand {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 0 7px 8px;
    border: 0;
    border-radius: 5px;
    background: none;
    font: 600 12px/1.5 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    color: var(--cyan-d, #007b9c);
    cursor: pointer;
}

/* [hidden] mora pobijediti display:inline-flex (hscroll.js skriva gumb kad popis stane u širinu) */
.bc-chips .bc-hscroll-expand[hidden] {
    display: none;
}

.bc-chips .bc-hscroll-expand:focus-visible {
    outline: 2px solid var(--cyan-d, #007b9c);
    outline-offset: 2px;
}

/* ---------- Track + scroller chipova ---------- */
/* strelice su position:absolute prema .bc-hscroll-track (hscroll.css) → track nosi inset kao margin, strelice vire -10px */
.bc-chips .bc-chips-scroll .bc-hscroll-track {
    margin: 0 var(--bc-dept-inset);
}

.bc-chips .bc-chips-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 12px; /* pilula položaja (.bc-hscroll-bar, hscroll.css): chip 7 px → pilula 3 px → 2 px; ≤767 14 px */
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bc-chips .bc-chips-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* prošireno stanje (hscroll.js gumb): više redova, bez skrola, bez strelica (hscroll.js ne postavlja bc-can-*) */
.bc-chips .bc-chips-row.is-expanded {
    flex-wrap: wrap;
    overflow: visible;
}

.bc-chips .bc-chips-row > li {
    flex: 0 0 auto;
    max-width: 100%;
}

.bc-chips .bc-chip {
    display: flex;
    align-items: center;
    min-height: 40px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1.5px solid #d5dfe4;
    border-radius: 999px;
    background: #fff;
    color: var(--card-ink, #33434a);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    padding: 8px 14px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.bc-chips .bc-chips-row.is-expanded .bc-chip {
    white-space: normal;
    overflow: visible;
}

.bc-chips .bc-chip:hover {
    background: var(--cyan-d, #007b9c);
    border-color: var(--cyan-d, #007b9c);
    color: #fff;
    text-decoration: none;
}

/* :focus-visible u ZASEBNOM pravilu (engine bez podrške bi odbacio cijelu selector-listu, pa i hover) */
.bc-chips .bc-chip:focus-visible {
    outline: 2px solid var(--cyan-d, #007b9c);
    outline-offset: -4px;
}

/* "Cijela ponuda" kao chip = fallback kad blok nema zaglavlje (Framed OFF) */
.bc-chips .bc-chip--all {
    border-color: var(--cyan, #00A1CB);
    color: var(--cyan-d, #007b9c);
    font-weight: 600;
}

/* ---------- Strelice: stil i veličina (40 px) = hscroll.css; ovdje položaj i skrivanje ≤767 ---------- */
.bc-chips .bc-chips-scroll .bc-hscroll-arrow {
    top: 50%; /* red chipova je nizak → centrirano (railovi: 38% = poravnato sa slikom kartice) */
}

.bc-chips .bc-chips-scroll .bc-hscroll-prev {
    left: -10px;
}

.bc-chips .bc-chips-scroll .bc-hscroll-next {
    right: -10px;
}

/* ---------- Oznaka iznad proizvoda: vidljiva SAMO kad slijedi tijelo (:has dolje) ---------- */
.bc-chips .bc-chips-next-label {
    display: none;
    margin: 2px var(--bc-dept-inset) 0; /* 2 + 12 (donji padding reda chipova) = 14 px; ≤767 4 + 14 = 18 (pilula između) */
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: #566973;
}

/* ---------- Rail bez naslova odmah ispod = tijelo istog panela ---------- */
/* (0,2,0) > .mt20 (0,1,0) i section.row (0,1,1) → bez razmaka između zaglavlja i kartica */
.bc-chips + .bc-hscroll--unframed {
    margin-top: 0;
}

/* (0,3,0) > guard (0,2,1); bočni padding ostaje 0 (guard), inset daje .bc-hscroll-track */
.bc-chips + .bc-hscroll--unframed > .container-fluid {
    background: #fff;
    border: 1px solid #e8edf0;
    border-top: 0;
    border-radius: 0 0 var(--bc-dept-radius) var(--bc-dept-radius);
    padding-top: 6px;
    padding-bottom: 2px; /* + 12 px donjeg paddinga grida (pilula) = 14 px kartica → donji rub (vlasnik 4b); ≤767 4 + 14 = 18 */
}

.bc-chips + .bc-hscroll--unframed .bc-hscroll-track {
    padding-left: var(--bc-dept-inset);
    padding-right: var(--bc-dept-inset);
}

/* jednaki bočni rubovi oba reda: strelice raila na istom mjestu kao strelice chipova (inset - 10) */
.bc-chips + .bc-hscroll--unframed .bc-hscroll-prev {
    left: calc(var(--bc-dept-inset) - 10px);
}

.bc-chips + .bc-hscroll--unframed .bc-hscroll-next {
    right: calc(var(--bc-dept-inset) - 10px);
}

/* native trake skriva hscroll.css na svim railovima; pilula je centrirana (left: 50 %) i inset je simetričan
   (track raila nosi inset kao padding, track chipova kao margin) → bez posebnih pravila ovdje */

/* zaglavlje kojem slijedi tijelo: otvori dno + pokaži oznaku (:has() ZASEBNO; bez podrške ostaje tanki šav) */
.bc-chips:has(+ .bc-hscroll--unframed) > .container-fluid {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0;
}

.bc-chips:has(+ .bc-hscroll--unframed) .bc-chips-next-label {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .bc-chips .bc-chip,
    .bc-chips .bc-chips-all {
        transition: none;
    }
}

/* ---------- ≤767: mobitel ---------- */
@media (max-width: 767px) {
    /* Red chipova nema strelice na mobitelu: chip je nizak i uzak pa bi strelica prekrila tekst.
       Redovi PROIZVODA ih zadržavaju (hscroll.css, kao na live-u). Specifičnost (0,4,0) > (0,3,0)
       pravila prikaza u hscroll.css, pa ne treba !important ni ovisnost o redoslijedu učitavanja. */
    .bc-chips .bc-chips-scroll.bc-can-prev .bc-hscroll-prev,
    .bc-chips .bc-chips-scroll.bc-can-next .bc-hscroll-next {
        display: none;
    }
    .bc-chips,
    .bc-chips + .bc-hscroll--unframed {
        --bc-dept-inset: 12px;
        --bc-dept-radius: 14px;
    }
    section.bc-chips {
        margin-top: 12px;
    }
    .bc-chips .container-fluid {
        padding-top: 14px;
        padding-bottom: 6px; /* + 14 (red chipova, pilula uvijek vidljiva) = 20 */
    }
    .bc-chips .bc-chips-row {
        padding-bottom: 14px; /* kao .products-grid ≤767 (hscroll.css): chip 7 px → pilula 3 px → 4 px */
    }
    .bc-chips .bc-chips-next-label {
        margin-top: 4px; /* 4 + 14 = 18 (pilula između) */
    }
    .bc-chips + .bc-hscroll--unframed > .container-fluid {
        padding-bottom: 4px; /* + 14 (grid) = 18 */
    }
    .bc-chips .bc-chips-head {
        gap: 10px;
    }
    .bc-chips .bc-chips-h {
        font-size: 20px;
    }
    .bc-chips .bc-chips-all {
        padding: 7px 10px;
        font-size: 12px;
    }
    .bc-chips .bc-chip {
        min-height: 44px; /* dodirna meta */
        font-size: 13px;
        padding: 7px 12px;
    }
}

/* ---------- ≤480: portrait phone (isti inset kao catgrid) ---------- */
@media (max-width: 480px) {
    .bc-chips,
    .bc-chips + .bc-hscroll--unframed {
        --bc-dept-inset: 8px;
    }
    .bc-chips .bc-chips-row {
        gap: var(--card-gap, 6px);
    }
}