* {
    box-sizing: border-box;
}

html {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
    color: #1d1d1f;
    background: #ffffff;
}

body {
    margin: 0;
}

/*
 * Poveznice filtera završavaju na #katalog-vrh. Ljepljivo zaglavlje bi
 * bez odmaka prekrilo prvi red "Robne marke", pa bi nakon odabira marke
 * izgledalo kao da je popis nestao.
 */
#katalog-vrh {
    scroll-margin-top: 118px;
}

@media (max-width: 760px) {
    #katalog-vrh {
        scroll-margin-top: 72px;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.okvir {
    width: min(1400px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================================
   ZAGLAVLJE
   ========================================================= */

.zaglavlje {
    border-bottom: 1px solid #e7e7e7;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 20;
}

.zaglavlje-red {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* V7.9.75 - gornja traka prati vizualnu grupu odabrane marke */
.zaglavlje-gornja-traka {
    --zaglavlje-pozadina: #ffffff;
    --zaglavlje-tekst: #171717;
    background: var(--zaglavlje-pozadina);
    color: var(--zaglavlje-tekst);
    transition: background-color 160ms ease, color 160ms ease;
}

.zaglavlje-brend-upim .zaglavlje-gornja-traka {
    --zaglavlje-pozadina: #575b60;
    --zaglavlje-tekst: #ffffff;
}

.zaglavlje-brend-blukids .zaglavlje-gornja-traka {
    --zaglavlje-pozadina: #122354;
    --zaglavlje-tekst: #ffffff;
}

.zaglavlje-gornja-traka .logo,
.zaglavlje-gornja-traka .zaglavlje-ikona-link,
.zaglavlje-gornja-traka .zaglavlje-tekst-link,
.zaglavlje-gornja-traka .kupac-dropdown-summary,
.zaglavlje-gornja-traka .mobilni-top-prijava,
.zaglavlje-gornja-traka .mobilni-top-ikona {
    color: var(--zaglavlje-tekst);
}

.zaglavlje-brend-upim .zaglavlje-gornja-traka .zaglavlje-ikona-link:hover,
.zaglavlje-brend-upim .zaglavlje-gornja-traka .kupac-dropdown-summary:hover,
.zaglavlje-brend-upim .zaglavlje-gornja-traka .zaglavlje-tekst-link:hover,
.zaglavlje-brend-upim .zaglavlje-gornja-traka .mobilni-top-prijava:hover,
.zaglavlje-brend-upim .zaglavlje-gornja-traka .mobilni-top-ikona:hover {
    color: #e5e7e9;
}

.zaglavlje-brend-blukids .zaglavlje-gornja-traka .zaglavlje-ikona-link:hover,
.zaglavlje-brend-blukids .zaglavlje-gornja-traka .kupac-dropdown-summary:hover,
.zaglavlje-brend-blukids .zaglavlje-gornja-traka .zaglavlje-tekst-link:hover,
.zaglavlje-brend-blukids .zaglavlje-gornja-traka .mobilni-top-prijava:hover,
.zaglavlje-brend-blukids .zaglavlje-gornja-traka .mobilni-top-ikona:hover {
    color: #d9e4ff;
}

.logo {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.zaglavlje-info,
.povratak {
    font-size: 14px;
    color: #666;
}


/* =========================================================
   KATALOG
   ========================================================= */

.naslov-sekcije {
    padding: 34px 0 24px;
}

.naslov-sekcije h1 {
    margin: 0 0 6px;
    font-size: 31px;
}

.naslov-sekcije p {
    margin: 0;
    color: #777;
}

.mreza-proizvoda {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 18px;
}

.kartica {
    min-width: 0;
}

.slika-link {
    display: block;
    background: #f5f5f5;
    overflow: hidden;
}

.slika-proizvoda {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform 180ms ease;
}

.kartica:hover .slika-proizvoda {
    transform: scale(1.015);
}

.kartica-sadrzaj {
    padding-top: 12px;
}

.sitno {
    color: #777;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.naziv-proizvoda {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    margin: 6px 0 9px;
}

.naziv-proizvoda a:hover {
    text-decoration: underline;
}

.cijena {
    font-size: 16px;
    font-weight: 700;
}

.dostupnost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
}

.dostupno {
    color: #2e6e42;
}

.nedostupno {
    color: #8a8a8a;
}


/* =========================================================
   PAGINACIJA
   ========================================================= */

.paginacija {
    padding: 42px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.paginacija-gumb {
    border: 1px solid #d8d8d8;
    padding: 10px 16px;
    border-radius: 4px;
}

.paginacija-gumb:hover {
    background: #f5f5f5;
}

.paginacija-broj {
    color: #666;
    font-size: 14px;
}


/* =========================================================
   DETALJ
   ========================================================= */

.detalj {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 54px;
    padding: 38px 0 60px;
}

.galerija {
    min-width: 0;
}

.glavna-slika-detalj {
    width: 100%;
    max-height: 780px;
    object-fit: contain;
    background: #f7f7f7;
}

.male-slike {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.male-slike img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f5f5f5;
}

.detalj-podaci h1 {
    font-size: 30px;
    line-height: 1.2;
    margin: 9px 0 8px;
}

.sifra {
    color: #777;
    font-size: 13px;
}

.cijena-velika {
    font-size: 25px;
    margin: 24px 0;
}

.atribut {
    margin: 9px 0;
    line-height: 1.45;
}

.podnaslov {
    margin: 28px 0 12px;
    font-size: 18px;
}

.varijante {
    border-top: 1px solid #e5e5e5;
}

.varijanta {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 13px 0;
}

.varijanta-velicina {
    font-weight: 700;
}

.varijanta-cijena,
.varijanta-stanje {
    font-size: 13px;
}

.varijanta-stanje {
    color: #2e6e42;
}

.varijanta-nema {
    color: #999;
}

.varijanta-nema .varijanta-stanje {
    color: #999;
}

.opis {
    margin-top: 34px;
    line-height: 1.6;
}

.opis h2 {
    font-size: 18px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.podnozje {
    border-top: 1px solid #e7e7e7;
    margin-top: 20px;
    padding: 30px 0;
    color: #777;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .mreza-proizvoda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detalj {
        gap: 30px;
    }
}

@media (max-width: 760px) {
    .mreza-proizvoda {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .detalj {
        grid-template-columns: 1fr;
    }

    .detalj-podaci h1 {
        font-size: 25px;
    }
}


/* ============================================================
   V7.9.59 - MCARD U PROFILU I GOTOVINSKO PLAĆANJE
   ============================================================ */

.checkout-mcard-nedostupan,
[data-mcard-gotovina] {
    margin-top: 16px;
}

.profil-mcard-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #d7dde1;
    border-radius: 999px;
    background: #f5f6f7;
    color: #60686d;
    font-size: 12px;
    font-weight: 700;
}

.profil-mcard-status-povezan {
    border-color: #b9d8c3;
    background: var(--profil-zelena-svijetla);
    color: var(--profil-zelena);
}

.profil-mcard-stanje {
    display: grid;
    gap: 4px;
    margin: 4px 0 16px;
    padding: 18px;
    border: 1px solid var(--profil-plava-border);
    background: var(--profil-plava-svijetla);
}

.profil-mcard-stanje > span,
.profil-mcard-stanje > small {
    color: #587080;
}

.profil-mcard-stanje > strong {
    color: var(--profil-plava-tamna);
    font-size: clamp(24px, 4vw, 34px);
}

.profil-mcard-akcije {
    margin-top: 16px;
}

.profil-mcard-napomena {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e5eaed;
    color: #56646d;
    font-size: 13px;
    line-height: 1.55;
}

.placanje-mcard-pravilo {
    margin: 14px 0 18px;
}

@media (max-width: 760px) {
    .profil-mcard-status {
        margin-top: 10px;
    }
}

@media (max-width: 420px) {
    .okvir {
        width: min(100% - 20px, 1400px);
    }

    .zaglavlje-red {
        min-height: 58px;
    }

    .logo {
        font-size: 17px;
    }

    .mreza-proizvoda {
        gap: 22px 9px;
    }

    .naziv-proizvoda {
        font-size: 14px;
    }

    .cijena {
        font-size: 15px;
    }

    .varijanta {
        grid-template-columns: 1fr auto;
    }

    .varijanta-stanje {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   V4 - KOREKCIJE STRANICE PROIZVODA
   ========================================================= */

.zaglavlje-desno {
    display: flex;
    align-items: center;
    gap: 20px;
}

.kosara-link {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.glavna-slika-okvir {
    position: relative;
    width: 100%;
    background: transparent;
}

.glavna-slika-detalj {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: initial;
    background: transparent;
}

.kataloski-broj-slika {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1;
}

.kataloski-broj-tekst {
    margin-top: 8px;
    color: #777;
    font-size: 13px;
}

.varijanta-gumb {
    width: 100%;
    font: inherit;
    color: inherit;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    cursor: pointer;
    text-align: left;
}

.varijanta-gumb:hover:not(:disabled) {
    background: #f7f7f7;
}

.varijanta-gumb:active:not(:disabled) {
    background: #eeeeee;
}

.varijanta-gumb:disabled {
    cursor: default;
}

.varijanta-lijevo {
    min-width: 0;
}

.varijanta-sifra {
    margin-top: 3px;
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 400;
}

.kosara-poruka {
    min-height: 22px;
    margin-top: 12px;
    color: #2e6e42;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   V5 - KOŠARA
   ========================================================= */

.kosara-stranica {
    padding: 34px 0 60px;
}

.kosara-naslov-red h1 {
    margin: 0 0 6px;
    font-size: 31px;
}

.kosara-naslov-red p {
    margin: 0 0 26px;
    color: #777;
}

.kosara-prazna {
    padding: 34px 0;
    color: #777;
}

.kosara-stavke {
    border-top: 1px solid #e5e5e5;
}

.kosara-stavka {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto 130px;
    gap: 22px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #e5e5e5;
}

.kosara-stavka-slika img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f5f5f5;
}

.kosara-stavka-naziv {
    margin-bottom: 7px;
    font-weight: 700;
}

.kosara-stavka-detalji {
    color: #777;
    font-size: 12px;
    line-height: 1.5;
}

.kosara-kolicina {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kosara-kolicina-gumb {
    width: 32px;
    height: 32px;
    border: 1px solid #d7d7d7;
    background: #fff;
    cursor: pointer;
}

.kosara-kolicina-gumb:hover {
    background: #f5f5f5;
}

.kosara-kolicina-broj {
    min-width: 24px;
    text-align: center;
}

.kosara-stavka-desno {
    text-align: right;
}

.kosara-stavka-cijena {
    font-weight: 700;
}

.kosara-obrisi {
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}

.kosara-ukupno-okvir {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
}

.kosara-ukupno-red {
    min-width: 280px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-top: 18px;
    border-top: 2px solid #1d1d1f;
    font-size: 18px;
}

@media (max-width: 760px) {
    .kosara-stavka {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 14px;
    }

    .kosara-kolicina {
        grid-column: 2;
    }

    .kosara-stavka-desno {
        grid-column: 2;
        text-align: left;
    }

    .kosara-ukupno-red {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   V6 - VARIJANTE I GALERIJA
   ========================================================= */

/* Cijena ostaje u istoj koloni bez obzira piše li
   "Dostupno" ili "Nema na stanju". */
.varijanta {
    grid-template-columns:
        minmax(180px, 1fr)
        120px
        140px;
}

.varijanta-cijena {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.varijanta-stanje {
    width: 140px;
    text-align: right;
    white-space: nowrap;
}

/* Male slike sada su gumbi koji mijenjaju glavnu sliku. */
.mala-slika-gumb {
    display: block;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.mala-slika-gumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f5f5f5;
}

.mala-slika-gumb:hover {
    border-color: #bdbdbd;
}

.mala-slika-gumb.aktivna-slika {
    border-color: #1d1d1f;
}

@media (max-width: 760px) {
    .varijanta {
        grid-template-columns:
            minmax(120px, 1fr)
            95px
            125px;
        gap: 8px;
    }

    .varijanta-cijena {
        width: 95px;
        text-align: right;
    }

    .varijanta-stanje {
        width: 125px;
        text-align: right;
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .varijanta {
        grid-template-columns:
            minmax(95px, 1fr)
            85px
            108px;
        gap: 6px;
    }

    .varijanta-cijena {
        width: 85px;
        font-size: 12px;
    }

    .varijanta-stanje {
        width: 108px;
        font-size: 11px;
    }

    .varijanta-sifra {
        font-size: 10px;
    }
}


/* =========================================================
   V7 - TRAJNI WEBSHOP SLOJ
   ========================================================= */

a { color: inherit; }

.glavna-navigacija {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
}

.glavna-navigacija a,
.link-gumb {
    text-decoration: none;
}

.glavna-navigacija a:hover,
.link-gumb:hover {
    text-decoration: underline;
}

.inline-form { display: inline; margin: 0; }
.link-gumb {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.kupac-ime {
    font-weight: 700;
}

.katalog-naslov {
    margin-bottom: 18px;
}

.filteri {
    display: grid;
    grid-template-columns: 2fr repeat(6, minmax(120px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 28px;
    border: 1px solid #e6e6e6;
    background: #fafafa;
}

.filter-polje {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.filter-polje label,
.filter-check {
    font-size: 12px;
    color: #666;
}

.filter-polje input,
.filter-polje select,
.web-forma input,
.web-forma select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
    font: inherit;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
}

.filter-akcije {
    display: flex;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.primarni-gumb,
.sekundarni-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #1d1d1f;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.primarni-gumb {
    background: #1d1d1f;
    color: #fff;
}

.sekundarni-gumb {
    background: #fff;
    color: #1d1d1f;
}

.inline-blok { display: inline-flex; }

.kartica { position: relative; }

.srce-forma {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.srce-gumb {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    font-size: 22px;
    cursor: pointer;
}

.srce-gumb.aktivno { color: #b51f2e; }
.srce-detalj { width: 44px; height: 44px; }

.proizvod-vrh {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.povratak-red {
    padding: 22px 0 4px;
}

/*
 * Zajedničke obavijesti.
 * Prostor je stalno rezerviran kako se sadržaj stranice ne bi
 * pomicao kada se pojavi rezultat neke radnje.
 */
.shop-globalna-obavijest {
    position: relative;
}

.shop-obavijest-slot {
    box-sizing: border-box;
    min-height: 82px;
    padding: 12px 0;
    display: flex;
    align-items: flex-start;
}

.shop-obavijest {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .045);
    font-size: 14px;
    line-height: 1.4;
}

.shop-obavijest-ikona {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 15px;
}

.shop-obavijest-tekst {
    min-width: 0;
}

.shop-obavijest-uspjeh {
    color: #245d36;
    background: #edf8f0;
    border-color: #a6d5b2;
    border-left-color: #3b8f57;
}

.shop-obavijest-uspjeh .shop-obavijest-ikona {
    color: #ffffff;
    background: #3b8f57;
}

.shop-obavijest-info {
    color: #24547a;
    background: #eef6ff;
    border-color: #accdea;
    border-left-color: #3f7faf;
}

.shop-obavijest-info .shop-obavijest-ikona {
    color: #ffffff;
    background: #3f7faf;
}

.shop-obavijest-upozorenje {
    color: #76551a;
    background: #fff8e8;
    border-color: #e7cf8d;
    border-left-color: #bd8425;
}

.shop-obavijest-upozorenje .shop-obavijest-ikona {
    color: #ffffff;
    background: #bd8425;
}

.shop-obavijest-greska {
    color: #7e3030;
    background: #fff0f0;
    border-color: #e8b3b3;
    border-left-color: #c64b4b;
}

.shop-obavijest-greska .shop-obavijest-ikona {
    color: #ffffff;
    background: #c64b4b;
}

/* Stariji blokovi ostaju kompatibilni, ali vizualno prate novi sustav. */
.uspjeh-poruka,
.info-poruka,
.upozorenje-poruka,
.greska-poruka,
.dev-link {
    padding: 12px 14px;
    margin: 14px 0;
    border: 1px solid #dedede;
    border-radius: 8px;
}

.uspjeh-poruka {
    color: #245d36;
    border-color: #a6d5b2;
    background: #edf8f0;
}

.info-poruka {
    color: #24547a;
    border-color: #accdea;
    background: #eef6ff;
}

.greska-poruka {
    color: #7e3030;
    border-color: #e8b3b3;
    background: #fff0f0;
}

.upozorenje-poruka {
    color: #76551a;
    border-color: #e7cf8d;
    background: #fff8e8;
}

.dev-link {
    background: #fafafa;
    overflow-wrap: anywhere;
}

.atributi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 20px;
    margin: 18px 0;
}

.atribut-sastav {
    grid-column: 1 / -1;
}

.blog-pojam-link {
    color: #236b3b;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.blog-pojam-link:hover,
.blog-pojam-link:focus-visible {
    color: #174a29;
    text-decoration-style: solid;
}

.velicine-naslov-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

.velicine-naslov-red .podnaslov {
    margin: 0;
}

.vodic-velicine-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #2f7b4a;
    border-radius: 999px;
    color: #236b3b;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.vodic-velicine-link:hover,
.vodic-velicine-link:focus-visible {
    background: #236b3b;
    color: #fff;
}

.velicine-vodic-stranica {
    padding-top: 36px;
    padding-bottom: 64px;
}

.velicine-vodic-uvod {
    max-width: 820px;
    margin-bottom: 28px;
}

.velicine-vodic-eyebrow {
    margin: 0 0 8px;
    color: #2f7b4a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.velicine-vodic-uvod h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 5vw, 3.4rem);
}

.velicine-vodic-uvod > p:last-child {
    color: #5b5b5b;
    font-size: 1.05rem;
    line-height: 1.65;
}

.velicine-vodic-navigacija {
    position: sticky;
    top: 8px;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding: 10px;
    border: 1px solid #e1e8e3;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(28, 61, 39, 0.08);
}

.velicine-vodic-navigacija a {
    padding: 9px 16px;
    border-radius: 999px;
    background: #edf6f0;
    color: #205f35;
    font-weight: 700;
}

.mjerenje-kartica {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}

.mjerenje-korak {
    padding: 20px;
    border: 1px solid #e2e8e4;
    border-radius: 16px;
    background: #fafcfb;
}

.mjerenje-korak span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #236b3b;
    color: #fff;
    font-weight: 800;
}

.mjerenje-korak strong,
.mjerenje-korak small {
    display: block;
}

.mjerenje-korak small {
    margin-top: 6px;
    color: #626262;
    line-height: 1.5;
}

.velicine-vodic-sekcija {
    scroll-margin-top: 130px;
    margin-top: 44px;
}

.velicine-vodic-sekcija > h2 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.velicine-vodic-sekcija > p {
    margin: 0 0 20px;
    color: #666;
}

.velicine-tablica-blok {
    margin: 0 0 22px;
    padding: 22px;
    border: 1px solid #e1e6e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(35, 70, 46, 0.06);
}

.velicine-tablica-blok h3 {
    margin: 0 0 14px;
    font-size: 1.08rem;
}

.velicine-tablica-okvir {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.velicine-tablica {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.velicine-tablica th,
.velicine-tablica td {
    padding: 10px 12px;
    border-bottom: 1px solid #e8ece9;
    text-align: center;
    white-space: nowrap;
}

.velicine-tablica th:first-child,
.velicine-tablica td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 155px;
    background: #f4f8f5;
    color: #294f36;
    font-weight: 700;
    text-align: left;
}

.velicine-napomena {
    margin-top: 28px;
    padding: 18px 20px;
    border-left: 4px solid #2f7b4a;
    border-radius: 0 12px 12px 0;
    background: #f1f8f3;
    color: #36523f;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .velicine-naslov-red {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .mjerenje-kartica {
        grid-template-columns: 1fr;
    }

    .velicine-tablica-blok {
        padding: 16px 12px;
    }
}


/* ============================================================
   V7.9.66 - PROŠIRENI FOOTER
   ============================================================ */

.podnozje {
    margin-top: 48px;
    padding: 46px 0 18px;
    border-top: 0;
    background: #173f29;
    color: #eef5f0;
}

.podnozje-mreza {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(140px, 1fr));
    gap: 34px;
}

.podnozje-brand > a {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.podnozje-brand p {
    max-width: 300px;
    margin: 14px 0 0;
    color: #bed0c4;
    line-height: 1.6;
}

.podnozje-drustvene {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.podnozje-drustvene a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    color: #fff;
    transition: background-color 160ms ease, border-color 160ms ease,
        transform 160ms ease;
}

.podnozje-drustvene a:hover,
.podnozje-drustvene a:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.podnozje-drustvene svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
}

.podnozje-drustvene .drustvena-slova {
    color: currentColor;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1;
}

.podnozje-drustvene rect,
.podnozje-drustvene circle {
    fill: none;
}

.podnozje-drustvene circle:last-child {
    fill: currentColor;
    stroke: none;
}

.podnozje-stupac {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
}

.podnozje-stupac strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.podnozje-stupac a {
    color: #d6e2da;
    text-decoration: none;
}

.podnozje-stupac a:hover,
.podnozje-stupac a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.podnozje-dno {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 38px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #aebfb4;
    font-size: 0.8rem;
}

@media (max-width: 850px) {
    .podnozje-mreza {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .podnozje {
        padding-top: 36px;
    }

    .podnozje-mreza {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .podnozje-dno {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* ============================================================
   V7.9.78 - PROMJENJIVI POSLOVNI FOOTER I OZNAKE PLAĆANJA
   ============================================================ */

.podnozje-poslovni {
    margin-top: 34px;
    padding-top: 27px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.podnozje-tvrtka {
    margin: 0 auto;
    max-width: 980px;
    color: #fff;
    font-weight: 700;
    line-height: 1.55;
}

.podnozje-banke {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
    color: #d6e2da;
    font-size: 0.9rem;
    line-height: 1.5;
}

.podnozje-placanja {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.oznaka-placanja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 46px;
    padding: 7px 11px;
    border-radius: 7px;
    background: #fff;
    color: #182022;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.oznaka-mastercard,
.oznaka-maestro {
    flex-direction: column;
    gap: 2px;
    font-size: 0.63rem;
    font-weight: 600;
    text-transform: lowercase;
}

.oznaka-mastercard i,
.oznaka-maestro i {
    position: relative;
    display: block;
    width: 39px;
    height: 22px;
}

.oznaka-mastercard i::before,
.oznaka-mastercard i::after,
.oznaka-maestro i::before,
.oznaka-maestro i::after {
    position: absolute;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    content: "";
}

.oznaka-mastercard i::before { left: 0; background: #e9242b; }
.oznaka-mastercard i::after { right: 0; background: rgba(247, 151, 29, 0.88); }
.oznaka-maestro i::before { left: 0; background: #e71937; }
.oznaka-maestro i::after { right: 0; background: rgba(0, 143, 213, 0.88); }

.oznaka-visa b {
    color: #172b85;
    font-size: 1.35rem;
    font-style: italic;
    letter-spacing: -0.04em;
}

.oznaka-monri {
    gap: 6px;
    min-width: 128px;
}

.oznaka-monri svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #c6212b;
    stroke-width: 1.8;
}

.oznaka-monri b {
    color: #c6212b;
    font-size: 0.85rem;
}

.oznaka-monri small {
    max-width: 42px;
    color: #4b5557;
    font-size: 0.52rem;
    line-height: 1.1;
}

.oznaka-monri:has(img) {
    min-width: 150px;
    padding: 5px 9px;
}

.oznaka-monri img {
    display: block;
    width: auto;
    max-width: 180px;
    height: auto;
    max-height: 52px;
    object-fit: contain;
}

.podnozje-kontakt-traka {
    margin-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.12);
}

.podnozje-kontakti {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    min-height: 58px;
}

.podnozje-kontakti a,
.podnozje-kontakti span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    font-size: 0.84rem;
    text-align: center;
    text-decoration: none;
}

.podnozje-kontakti a:hover,
.podnozje-kontakti a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.podnozje-kontakti svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

@media (max-width: 850px) {
    .podnozje-kontakti {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (max-width: 520px) {
    .podnozje-poslovni {
        text-align: left;
    }

    .podnozje-placanja {
        justify-content: flex-start;
    }

    .podnozje-kontakti {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 11px;
    }

    .podnozje-kontakti a,
    .podnozje-kontakti span {
        justify-content: flex-start;
        text-align: left;
    }
}

/* ============================================================
   V7.9.73 - UVJETI KORIŠTENJA WEBSHOPA
   ============================================================ */

.uvjeti-stranica {
    padding-top: 34px;
    padding-bottom: 34px;
}

.uvjeti-uvod {
    max-width: 790px;
    margin-bottom: 28px;
}

.uvjeti-eyebrow {
    margin: 0 0 8px;
    color: #2f7a46;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.uvjeti-uvod h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
}

.uvjeti-uvod > p {
    margin: 0 0 12px;
    color: #4f5b53;
    font-size: 1.05rem;
    line-height: 1.7;
}

.uvjeti-uvod small {
    color: #728078;
}

.uvjeti-sazetak {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.uvjeti-sazetak article {
    padding: 18px;
    border: 1px solid #dce7df;
    border-radius: 14px;
    background: #f5faf6;
}

.uvjeti-sazetak strong,
.uvjeti-sazetak span {
    display: block;
}

.uvjeti-sazetak strong {
    margin-bottom: 5px;
    color: #215e36;
    font-size: 1.05rem;
}

.uvjeti-sazetak span {
    color: #536159;
    line-height: 1.45;
}

.uvjeti-raspored {
    display: grid;
    grid-template-columns: 230px minmax(0, 780px);
    align-items: start;
    gap: 38px;
}

.uvjeti-navigacija {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid #e0e6e2;
    border-radius: 12px;
    background: #fff;
}

.uvjeti-navigacija strong {
    margin-bottom: 5px;
    color: #17251c;
}

.uvjeti-navigacija a {
    color: #41634d;
    text-decoration: none;
}

.uvjeti-navigacija a:hover,
.uvjeti-navigacija a:focus-visible {
    color: #1f6b39;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uvjeti-sadrzaj {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.uvjeti-sadrzaj > section {
    scroll-margin-top: 96px;
    padding: 24px;
    border: 1px solid #e2e7e3;
    border-radius: 14px;
    background: #fff;
}

.uvjeti-sadrzaj h2 {
    margin: 0 0 13px;
    color: #17251c;
    font-size: 1.22rem;
}

.uvjeti-sadrzaj p,
.uvjeti-sadrzaj li,
.uvjeti-sadrzaj dd {
    color: #455149;
    line-height: 1.7;
}

.uvjeti-sadrzaj p {
    margin: 0 0 12px;
}

.uvjeti-sadrzaj p:last-child {
    margin-bottom: 0;
}

.uvjeti-sadrzaj ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.uvjeti-sadrzaj a {
    color: #176b37;
}

.uvjeti-podaci {
    margin: 0;
}

.uvjeti-podaci > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0ee;
}

.uvjeti-podaci > div:last-child {
    border-bottom: 0;
}

.uvjeti-podaci dt {
    color: #66736b;
    font-weight: 700;
}

.uvjeti-podaci dd {
    margin: 0;
}

.uvjeti-napomena {
    margin-top: 16px;
    padding: 16px;
    border-left: 4px solid #3b8a52;
    border-radius: 0 10px 10px 0;
    background: #f4f9f5;
}

.uvjeti-napomena strong {
    display: block;
    margin-bottom: 5px;
    color: #245f37;
}

@media (max-width: 820px) {
    .uvjeti-sazetak {
        grid-template-columns: 1fr;
    }

    .uvjeti-raspored {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .uvjeti-navigacija {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uvjeti-navigacija strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .uvjeti-stranica {
        padding-top: 24px;
    }

    .uvjeti-navigacija {
        grid-template-columns: 1fr;
    }

    .uvjeti-sadrzaj > section {
        padding: 18px;
    }

    .uvjeti-podaci > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.varijanta-forma {
    display: block;
    padding: 0;
}

.varijanta-forma .varijanta-gumb {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 120px 140px;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
}

.varijanta-forma .varijanta-gumb:disabled {
    cursor: default;
}

.varijanta-forma:not(.varijanta-nema) .varijanta-gumb:hover {
    background: #f7f7f7;
}

.odrzavanje-tablica {
    width: 100%;
    border-collapse: collapse;
}

.odrzavanje-tablica th,
.odrzavanje-tablica td {
    padding: 9px 0;
    border-bottom: 1px solid #ececec;
    text-align: left;
    vertical-align: top;
}

.odrzavanje-tablica th {
    width: 42%;
    font-weight: 600;
}

.slicni-sekcija {
    margin: 60px 0 30px;
    padding-top: 30px;
    border-top: 1px solid #e6e6e6;
}

.slicni-zaglavlje {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 18px;
}

.slicni-zaglavlje h2,
.slicni-zaglavlje p { margin: 0; }
.slicni-zaglavlje p { color: #777; margin-top: 4px; }
.vidi-sve-link { font-weight: 700; text-decoration: none; }

.slider-okvir { position: relative; }
.slider-proizvoda {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding: 2px 0 12px;
}

.slider-kartica {
    flex: 0 0 210px;
    scroll-snap-align: start;
}

.slider-kartica img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f4f4f4;
}

.slider-kartica-sadrzaj { padding-top: 8px; }
.slider-naziv {
    display: block;
    min-height: 42px;
    margin: 3px 0 7px;
    text-decoration: none;
    line-height: 1.35;
}

.slider-strelica {
    position: absolute;
    top: 36%;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    font-size: 25px;
    cursor: pointer;
}
.slider-strelica.lijevo { left: -18px; }
.slider-strelica.desno { right: -18px; }

.prazan-rezultat {
    padding: 50px 0;
    color: #777;
}

.kosara-jedinicna-cijena {
    margin-top: 4px;
    color: #777;
    font-size: 11px;
}

.kosara-nastavak-info {
    margin-top: 22px;
    padding: 12px 0;
    color: #666;
    font-size: 13px;
    text-align: right;
}

.uski-okvir { max-width: 620px; }
.forma-kartica {
    margin: 42px 0 70px;
    padding: 28px;
    border: 1px solid #e3e3e3;
}
.forma-kartica h1 { margin-top: 0; }
.web-forma {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.web-forma label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.forma-dva {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.forma-linkovi {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    font-size: 13px;
}

@media (max-width: 1100px) {
    .filteri {
        grid-template-columns: repeat(3, 1fr);
    }
    .filter-pretraga { grid-column: span 2; }
}

@media (max-width: 760px) {
    .zaglavlje-red {
        align-items: flex-start;
        gap: 14px;
    }

    .glavna-navigacija {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        font-size: 12px;
    }

    .filteri {
        grid-template-columns: 1fr 1fr;
    }
    .filter-pretraga { grid-column: 1 / -1; }
    .filter-akcije { justify-content: stretch; }
    .filter-akcije > * { flex: 1; }

    .atributi-grid { grid-template-columns: 1fr; }

    .varijanta-forma .varijanta-gumb {
        grid-template-columns: minmax(110px, 1fr) 90px 115px;
        gap: 8px;
    }

    .slicni-zaglavlje {
        align-items: flex-start;
        flex-direction: column;
    }

    .slider-strelica { display: none; }
    .slider-kartica { flex-basis: 175px; }
    .forma-dva { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .filteri { grid-template-columns: 1fr; }
    .filter-pretraga { grid-column: auto; }

    .varijanta-forma .varijanta-gumb {
        grid-template-columns: minmax(90px, 1fr) 80px 105px;
        font-size: 12px;
    }
}

/* V7.2 - prijava i ponovna potvrda emaila */
.info-poruka,
.dev-link-blok {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #d7d7d7;
    background: #fafafa;
}

.dev-link-blok a {
    display: inline-block;
    margin-left: 6px;
}

.potvrda-forma {
    margin-top: 12px;
}

.siroki-gumb {
    width: 100%;
    text-align: center;
}


/* V7.3 - kada nema dodatne raspoložive količine. */
.kosara-kolicina-gumb:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* =========================================================
   V7.7 - DOSTUPNE VELIČINE U KATALOGU
   ========================================================= */

.dostupne-velicine {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.velicina-oznaka {
    min-width: 25px;
    padding: 3px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    background: #fff;
    color: #444;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

/* =========================================================
   V7.7.3 - ŽELJENA VELIČINA U LISTI ŽELJA
   ========================================================= */

.varijanta-red {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: stretch;
    border-bottom: 1px solid #e5e5e5;
}

.varijanta-red .varijanta-forma .varijanta-gumb {
    border-bottom: 0;
    height: 100%;
}

.varijanta-zelja-forma {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-left: 1px solid #efefef;
}

.varijanta-srce {
    width: 100%;
    height: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 0;
    font-size: 22px;
}

.varijanta-srce:hover {
    background: #f7f7f7;
}

.kartica-zelja .zeljena-velicina {
    margin-top: 8px;
    font-size: 14px;
}

.kartica-zelja .bez-varijante {
    color: #777;
}

.zelja-kosara-forma {
    margin-top: 12px;
}

.zelja-obavijest-forma {
    margin-top: 12px;
}

.zelja-obavijest-aktivna {
    margin-bottom: 8px;
    color: #2f6b3b;
    font-size: 13px;
    font-weight: 600;
}

.odaberi-velicinu-link {
    font-weight: 600;
    text-decoration: none;
}

.odaberi-velicinu-link:hover {
    text-decoration: underline;
}

@media (max-width: 500px) {
    .varijanta-red {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .varijanta-srce {
        font-size: 20px;
    }
}


/* =========================================================
   V7.7.4 - DOBNA SKUPINA + FILTER VELIČINE
   ========================================================= */


/* ============================================================
   V7.7.5 - PAMETNI / FACETED FILTERI
   Vrijednosti i brojevi dolaze sa servera; promjena selecta
   automatski šalje GET formu bez dodatnog vizualnog sloja.
   ============================================================ */

/* ============================================================
   V7.8.1 - CHECKOUT
   ============================================================ */

.kosara-nastavak-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.primarni-gumb:disabled,
.sekundarni-gumb:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.checkout-okvir {
    padding-bottom: 70px;
}

.checkout-zaglavlje {
    padding: 18px 0 0;
}

.checkout-zaglavlje h1 {
    margin: 0 0 7px;
    font-size: 31px;
}

.checkout-zaglavlje p {
    margin: 0;
    color: #777;
}

.checkout-poruka {
    margin-top: 0;
}

.checkout-mreza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 28px;
    align-items: start;
}

.checkout-glavni {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.checkout-kartica {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 24px;
    border: 1px solid #e3e3e3;
    background: #fff;
}

.checkout-korak {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1d1d1f;
    color: #fff;
    font-weight: 700;
}

.checkout-kartica-sadrzaj {
    min-width: 0;
    flex: 1;
}

.checkout-kartica h2,
.checkout-sazetak h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.checkout-pomoc,
.checkout-sigurnost,
.checkout-pravilo-dostave,
.checkout-info {
    color: #707070;
    font-size: 13px;
    line-height: 1.5;
}

.checkout-pomoc {
    margin: -6px 0 18px;
}

.checkout-polja label,
.checkout-pogodnost-polje label,
.checkout-bonitet-polje,
.checkout-napomena {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.checkout-polja input,
.checkout-polja select,
.checkout-pogodnost-polje input,
.checkout-pogodnost-polje select,
.checkout-bonitet-polje input,
.checkout-napomena textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: inherit;
    font: inherit;
}

.checkout-polja input:disabled,
.checkout-polja input:read-only {
    background: #f5f5f5;
    color: #666;
}

.forma-cijeli-red {
    grid-column: 1 / -1;
}

.checkout-ista-adresa {
    margin: 6px 0 18px;
}

.checkbox-red {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
}

.checkbox-red input {
    width: 17px;
    height: 17px;
}

.checkout-pravilo-dostave {
    margin-top: 16px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #ededed;
}

.checkout-pogodnosti,
.checkout-placanja {
    display: grid;
    gap: 8px;
}

.checkout-pogodnosti {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkout-placanja {
    margin-top: 20px;
}

.radio-kartica {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #dedede;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.radio-kartica input {
    margin: 0;
}

.radio-kartica:has(input:checked) {
    border-color: #1d1d1f;
    background: #fafafa;
}

.radio-kartica-onemogucena {
    opacity: .5;
    cursor: not-allowed;
}

.checkout-pogodnost-polje {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ededed;
}

.checkout-inline-polje {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.checkout-primijeni {
    margin-top: 10px;
}

.bonitet-stanje {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #d9e5dc;
    background: #f7fbf8;
    font-size: 14px;
}

.checkout-bonitet-polje {
    max-width: 280px;
}

.checkout-labela {
    font-size: 13px;
    font-weight: 600;
}

.checkout-napomena {
    margin-top: 20px;
}

.checkout-napomena textarea {
    resize: vertical;
}

.checkout-sazetak {
    position: sticky;
    top: 90px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.checkout-sazetak-unutra {
    padding: 22px;
}

.checkout-mini-stavke {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e9e9e9;
}

.checkout-mini-stavka,
.potvrda-stavka {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.checkout-mini-stavka > div,
.potvrda-stavka > div {
    min-width: 0;
}

.checkout-mini-stavka strong,
.potvrda-stavka strong {
    display: block;
}

.checkout-mini-stavka span,
.potvrda-stavka span {
    display: block;
    margin-top: 3px;
    color: #777;
    font-size: 12px;
}

.checkout-iznosi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
}

.checkout-iznosi > div,
.potvrda-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.checkout-umanjenje strong {
    font-weight: 600;
}

.checkout-ukupno {
    margin-top: 5px;
    padding-top: 14px;
    border-top: 1px solid #dcdcdc;
    font-size: 18px !important;
}

.checkout-akcije {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.checkout-sigurnost {
    margin: 14px 0 0;
}

/* Potvrda narudžbe */
.potvrda-narudzbe-okvir {
    padding: 48px 0 70px;
}

.potvrda-narudzbe {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.potvrda-ikona {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #fff;
    font-size: 27px;
}

.potvrda-nadnaslov {
    margin: 0 0 7px;
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.potvrda-narudzbe h1 {
    margin: 0 0 10px;
}

.potvrda-narudzbe > p:last-child {
    color: #666;
}

.potvrda-mreza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.potvrda-kartica {
    display: block;
}

.potvrda-sazetak {
    position: static;
}

.potvrda-stavke {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.potvrda-stavka {
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}

.potvrda-stavka:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.potvrda-meta {
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.potvrda-adrese {
    margin-top: 24px;
}

.potvrda-adrese p {
    margin-bottom: 0;
    line-height: 1.6;
}

.potvrda-zavrsetak {
    margin-top: 24px;
    text-align: right;
}

@media (max-width: 1000px) {
    .checkout-mreza,
    .potvrda-mreza {
        grid-template-columns: 1fr;
    }

    .checkout-sazetak {
        position: static;
    }
}

@media (max-width: 700px) {
    .checkout-kartica {
        padding: 18px;
        gap: 12px;
    }

    .checkout-korak {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .checkout-pogodnosti {
        grid-template-columns: 1fr;
    }

    .checkout-inline-polje {
        grid-template-columns: 1fr;
    }

    .forma-cijeli-red {
        grid-column: auto;
    }

    .kosara-nastavak-info {
        justify-content: stretch;
        text-align: left;
    }

    .kosara-nastavak-info .primarni-gumb {
        width: 100%;
    }
}

.checkout-provjeri-bonitet {
    margin-top: 10px;
}


/* V7.8.3 - na uskim ekranima ostavljamo nešto više prostora
   jer se duža obavijest može prelomiti u tri retka. */
@media (max-width: 640px) {
    .shop-obavijest-slot {
        min-height: 96px;
        padding: 10px 0;
    }

    .shop-obavijest {
        min-height: 70px;
        align-items: flex-start;
    }
}


/* ---------------------------------------------------------
   V7.8.4 - fiksne toast obavijesti
   ---------------------------------------------------------
   Toast ne sudjeluje u rasporedu stranice pa ne pomiče sadržaj.
   Stalni rezervirani blok .shop-obavijest-slot ostaje iznad sadržaja.
*/
.shop-toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2200;
    width: min(430px, calc(100vw - 36px));
    pointer-events: none;
}

.shop-toast {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 28px;
    gap: 11px;
    align-items: center;
    padding: 13px 12px 13px 14px;
    border: 1px solid transparent;
    border-left-width: 5px;
    border-radius: 11px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    animation: shop-toast-ulaz .18s ease-out;
}

.shop-toast-ikona {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
}

.shop-toast-tekst {
    min-width: 0;
    font-weight: 650;
}

.shop-toast-zatvori {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .68;
}

.shop-toast-zatvori:hover,
.shop-toast-zatvori:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
    outline: none;
}

.shop-toast-uspjeh {
    color: #1f5f35;
    background: #e8f7ed;
    border-color: #91cda2;
    border-left-color: #2f8b50;
}

.shop-toast-uspjeh .shop-toast-ikona {
    color: #fff;
    background: #2f8b50;
}

.shop-toast-info {
    color: #1d5278;
    background: #e9f5ff;
    border-color: #98c6e8;
    border-left-color: #337bad;
}

.shop-toast-info .shop-toast-ikona {
    color: #fff;
    background: #337bad;
}

.shop-toast-upozorenje {
    color: #6f4d11;
    background: #fff4d9;
    border-color: #dfc270;
    border-left-color: #b97912;
}

.shop-toast-upozorenje .shop-toast-ikona {
    color: #fff;
    background: #b97912;
}

.shop-toast-greska {
    color: #7b2929;
    background: #ffebeb;
    border-color: #df9d9d;
    border-left-color: #bd3d3d;
}

.shop-toast-greska .shop-toast-ikona {
    color: #fff;
    background: #bd3d3d;
}

.shop-toast-izlaz {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
}

@keyframes shop-toast-ulaz {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .shop-toast-container {
        top: 12px;
        left: 12px;
        right: 12px;
        width: auto;
    }

    .shop-toast {
        grid-template-columns: 30px minmax(0, 1fr) 28px;
        padding: 12px 10px 12px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-toast,
    .shop-toast-izlaz {
        animation: none;
        transition: none;
    }
}

/* ---------------------------------------------------------
   V7.8.6 - narudžba vraćena kupcu na dopunu
   --------------------------------------------------------- */
.dopuna-katalog-banner,
.dopuna-banner {
    margin: 18px 0 24px;
    padding: 16px 18px;
    border: 1px solid #dfc270;
    border-left: 5px solid #b97912;
    border-radius: 12px;
    background: #fff8e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.dopuna-katalog-banner > div,
.dopuna-banner > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dopuna-katalog-banner strong,
.dopuna-banner h1 {
    margin: 0;
}

.dopuna-katalog-banner span,
.dopuna-banner p {
    color: #6f5a2e;
    line-height: 1.5;
}

.dopuna-nadnaslov {
    color: #8b641c;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
}

.moje-narudzbe-okvir,
.dopuna-okvir {
    padding-bottom: 42px;
}

.moje-narudzbe-lista {
    display: grid;
    gap: 16px;
}

.moja-narudzba-kartica {
    padding: 20px;
    border: 1px solid #e3e3e3;
    border-radius: 14px;
    background: #fff;
}

.moja-narudzba-dopuna {
    border-color: #dfc270;
    box-shadow: 0 0 0 1px rgba(185, 121, 18, .06);
}

.moja-narudzba-vrh,
.dopuna-sekcija-vrh,
.potvrda-akcije-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.moja-narudzba-vrh h2 {
    margin: 2px 0 0;
    font-size: 20px;
}

.status-oznaka {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f2f2f2;
    color: #4f4f4f;
    font-size: 13px;
    font-weight: 750;
}

.status-ceka-potvrdu-kupca {
    background: #fff1cd;
    color: #75500d;
}

.status-placena {
    background: #e8f7ed;
    color: #1f5f35;
}

.status-otkazana {
    background: #ffebeb;
    color: #7b2929;
}

.moja-narudzba-podaci {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.moja-narudzba-podaci > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    background: #f7f7f7;
}

.moja-narudzba-podaci span {
    color: #707070;
    font-size: 13px;
}

.moja-narudzba-poruka {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff8e7;
    color: #6f4d11;
    line-height: 1.5;
}

.moja-narudzba-akcije {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.dopuna-problemi {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #df9d9d;
    border-left: 5px solid #bd3d3d;
    border-radius: 10px;
    background: #ffebeb;
    color: #7b2929;
}

.dopuna-problemi ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.dopuna-mreza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    align-items: start;
}

.dopuna-glavni {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dopuna-stavke {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dopuna-stavka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: #fff;
}

.dopuna-stavka-problem {
    border-color: #dfc270;
    background: #fffaf0;
}

.dopuna-stavka-opis {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dopuna-stavka-opis span {
    color: #666;
    font-size: 13px;
}

.tekst-upozorenje {
    color: #9b6110 !important;
    font-weight: 750;
}

.dopuna-kolicina-forma {
    display: grid;
    grid-template-columns: 82px auto;
    gap: 8px;
    align-items: end;
}

.dopuna-kolicina-forma label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #666;
}

.dopuna-kolicina-forma input {
    width: 82px;
}

.dopuna-ukloni {
    grid-column: 1 / -1;
    justify-self: end;
    color: #9a3333;
}

.dopuna-pogodnosti-forma {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dopuna-bonitet-placanje small {
    display: block;
    margin-top: 6px;
    color: #777;
    line-height: 1.4;
}

.dopuna-sazetak {
    position: sticky;
    top: 18px;
}

.dopuna-zavrsna-akcija {
    margin-top: 18px;
}

@media (max-width: 1000px) {
    .dopuna-mreza {
        grid-template-columns: 1fr;
    }

    .dopuna-sazetak {
        position: static;
    }
}

@media (max-width: 700px) {
    .dopuna-katalog-banner,
    .dopuna-banner,
    .moja-narudzba-vrh,
    .dopuna-sekcija-vrh,
    .potvrda-akcije-red {
        align-items: stretch;
        flex-direction: column;
    }

    .moja-narudzba-podaci {
        grid-template-columns: 1fr;
    }

    .dopuna-stavka {
        grid-template-columns: 1fr;
    }

    .dopuna-kolicina-forma {
        grid-template-columns: minmax(90px, 1fr) auto;
    }

    .dopuna-kolicina-forma input {
        width: 100%;
    }
}

.dopuna-stavka-akcije {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.dopuna-ukloni-forma {
    margin: 0;
}

/* V7.8.10/V7.8.11 - završni odabir načina plaćanja */
.placanje-uvod {
    margin-bottom: 18px;
}

.placanje-forma {
    margin-top: 4px;
}

.placanje-izbori {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.placanje-kartica {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 138px;
    padding: 16px;
    border: 1px solid #d9d9d9;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.placanje-kartica:hover {
    border-color: #999;
}

.placanje-kartica:has(input:checked),
.placanje-kartica-odabrana {
    border-color: #1d1d1f;
    background: #fafafa;
    box-shadow: 0 0 0 1px #1d1d1f inset;
}

.placanje-kartica input {
    margin: 3px 0 0;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.placanje-kartica-sadrzaj {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.placanje-kartica-sadrzaj strong {
    font-size: 15px;
}

.placanje-kartica-sadrzaj > span {
    color: #565656;
    font-size: 13px;
    line-height: 1.45;
}

.placanje-kartica-sadrzaj small {
    color: #6b5a18;
    font-size: 11px;
    line-height: 1.4;
}

.placanje-spremi-red {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.placanje-spremi-red[hidden],
.placanje-sljedeci[hidden],
.placanje-novi-red[hidden] {
    display: none !important;
}

.placanje-odabir-stanje {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
    font-size: 13px;
}

.placanje-stanje-red {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.placanje-stanje-red strong {
    text-align: right;
}

.placanje-novi-red {
    padding-top: 8px;
    border-top: 1px dashed #d9d9d9;
}

.placanje-novi-red strong {
    font-weight: 700;
}

.placanje-spremi-red .primarni-gumb:disabled {
    opacity: .48;
    cursor: default;
}

.placanje-sljedeci {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid #e2e2e2;
    background: #fafafa;
}

.placanje-sljedeci > strong {
    font-size: 14px;
}

.placanje-sljedeci .checkout-pomoc {
    margin: 0;
}

.placanje-gumb-neaktivan {
    justify-self: start;
    opacity: .48;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 900px) {
    .placanje-izbori {
        grid-template-columns: 1fr;
    }

    .placanje-kartica {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .placanje-spremi-red .primarni-gumb {
        width: 100%;
        text-align: center;
    }

    .placanje-stanje-red {
        display: grid;
        gap: 5px;
    }

    .placanje-stanje-red strong {
        text-align: left;
    }
}


/* V7.9.0 - automatska oznaka novih proizvoda */
.oznaka-novo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(29, 29, 31, .92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
}

.proizvod-naslov-red {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.proizvod-naslov-red h1 {
    margin-top: 0;
}

.oznaka-novo-detalj {
    position: static;
    flex: 0 0 auto;
    margin-top: 4px;
}

/* V7.10.0 - univerzalna grupa specifikacija: Održavanje i njega */
.specifikacija-podnaslov {
    margin: 4px 0 10px;
    font-size: 1rem;
    font-weight: 600;
}


/* ============================================================
   V7.9.67 - ČITLJIVO ODRŽAVANJE I NJEGA
   ============================================================ */

.odrzavanje {
    margin-top: 38px;
    padding: 24px;
    border: 1px solid #dce7df;
    border-radius: 18px;
    background: #f4f8f5;
}

.odrzavanje-zaglavlje {
    margin-bottom: 18px;
}

.odrzavanje .odrzavanje-zaglavlje h2 {
    margin: 0;
    color: #183c27;
    font-size: 1.25rem;
}

.odrzavanje-zaglavlje p {
    margin: 6px 0 0;
    color: #627067;
    font-size: 0.9rem;
    line-height: 1.5;
}

.odrzavanje-mreza {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.odrzavanje-stavka {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #e1e8e3;
    border-radius: 12px;
    background: #fff;
}

.odrzavanje-stavka strong {
    display: block;
    margin-bottom: 5px;
    color: #244c32;
    font-size: 0.78rem;
}

.odrzavanje-stavka span {
    display: block;
    color: #303030;
    font-size: 0.88rem;
    line-height: 1.48;
}

@media (max-width: 700px) {
    .odrzavanje {
        padding: 18px 14px;
        border-radius: 14px;
    }

    .odrzavanje-mreza {
        grid-template-columns: 1fr;
    }
}

.atribut-vrijednost {
    display: inline-block;
}

/* Red veličine ima samo vodoravne razdjelnike. */
.varijanta-zelja-forma {
    border-left: 0;
}
/* ============================================================
   V7.9.3 - LINKOVI KROZ CIJELO STABLO KATEGORIJA
   ============================================================ */

.kategorije-navigacija {
    position: relative;
    border-top: 1px solid #eeeeee;
    background: #ffffff;
}

.kategorije-red {
    min-height: 44px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 28px;
}

.kategorije-stavka {
    position: static;
    display: flex;
    align-items: stretch;
}

.kategorije-odjel-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kategorije-odjel-link:hover,
.kategorije-odjel-link:focus-visible {
    color: #555;
    text-decoration: none;
    outline: none;
}

.kategorije-otvarac {
    position: static;
    display: flex;
    align-items: stretch;
}

.kategorije-otvarac > summary {
    width: 28px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.kategorije-otvarac > summary::-webkit-details-marker {
    display: none;
}

.kategorije-otvarac > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 140ms ease;
}

.kategorije-otvarac[open] > summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.kategorije-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .09);
}

.kategorije-stavka:hover .kategorije-panel,
.kategorije-otvarac:focus-within .kategorije-panel,
.kategorije-otvarac[open] .kategorije-panel {
    display: block;
}

.kategorije-panel-unutra {
    width: min(1400px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 28px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 28px 34px;
}

.kategorije-grupa {
    min-width: 0;
}

.kategorije-grupa h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .025em;
}

.kategorije-grupa h3 a:hover,
.kategorije-grupa h3 a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.kategorije-linkovi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.kategorije-linkovi a {
    color: #555;
    font-size: 13px;
    line-height: 1.35;
}

.kategorije-linkovi a:hover,
.kategorije-linkovi a:focus-visible {
    color: #111;
    text-decoration: underline;
    outline: none;
}

.kategorije-linkovi .aktivna-kategorija {
    color: #111;
    font-weight: 750;
    text-decoration: underline;
}


/* Putanja na stranici proizvoda. Sve razine su sada linkovi. */
.proizvod-putanja-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: #777;
    font-size: 13px;
    line-height: 1.45;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: #1d1d1f;
    text-decoration: underline;
    outline: none;
}

.breadcrumb-trenutna {
    color: #444;
    font-weight: 650;
}

.breadcrumb-razdjelnik {
    color: #b0b0b0;
}

.proizvod-putanja-red > .povratak {
    flex: 0 0 auto;
}


/* Tablet i mobitel:
   naziv odjela je link, a zasebna strelica otvara mega-menu. */
@media (max-width: 760px) {
    .kategorije-red {
        min-height: 40px;
        justify-content: center;
        gap: 18px;
    }

    .kategorije-odjel-link {
        min-height: 40px;
        font-size: 12px;
        letter-spacing: .045em;
    }

    .kategorije-otvarac > summary {
        width: 24px;
        min-height: 40px;
    }

    /* Na touch ekranima ne oslanjamo se na hover ni sam fokus.
       Panel ostaje otvoren samo dok je details stvarno [open]. */
    .kategorije-stavka:hover .kategorije-panel,
    .kategorije-otvarac:not([open]):focus-within .kategorije-panel {
        display: none;
    }

    .kategorije-otvarac[open] .kategorije-panel {
        display: block;
    }

    .kategorije-panel {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .kategorije-panel-unutra {
        width: min(100% - 24px, 1400px);
        padding: 20px 0 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px;
    }

    .proizvod-putanja-red {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .kategorije-red {
        gap: 10px;
    }

    .kategorije-odjel-link {
        font-size: 11px;
    }

    .kategorije-otvarac > summary {
        width: 20px;
    }

    .kategorije-panel-unutra {
        grid-template-columns: 1fr 1fr;
    }

    .kategorije-grupa h3 {
        font-size: 12px;
    }

    .kategorije-linkovi a {
        font-size: 12px;
    }

    .breadcrumb {
        font-size: 12px;
    }
}


/* ============================================================
   V7.9.7 - LIJEVI FILTER PANEL KATALOGA
   Desktop: klasični lijevi sidebar.
   Mobitel/tablet: isti filteri se otvaraju kao collapse.
   Logika faceted filtera nije promijenjena.
   ============================================================ */

.katalog-raspored {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.filteri-stupac {
    min-width: 0;
}

.filteri-panel {
    position: sticky;
    top: 124px;
}

.filteri-panel > summary {
    list-style: none;
}

.filteri-panel > summary::-webkit-details-marker {
    display: none;
}

.filteri-mobile-gumb {
    display: none;
}

.filteri-panel-sadrzaj {
    display: block;
}

/* Na desktopu sadržaj filtera ostaje vidljiv iako details nema
   atribut open. Time isti HTML na mobitelu može početno biti zatvoren. */
.filteri-panel:not([open]) > .filteri-panel-sadrzaj {
    display: block;
}

.filteri {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
    margin: 0;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    background: #ffffff;
}

.filteri-desktop-naslov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
}

.filter-polje,
.filter-pretraga {
    width: 100%;
    min-width: 0;
}

.filter-polje label,
.filter-check {
    color: #4e4e4e;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .02em;
}

.filter-polje input,
.filter-polje select {
    min-height: 42px;
    border-color: #d6d6d6;
    border-radius: 3px;
}

.filter-polje input:focus,
.filter-polje select:focus {
    border-color: #777;
    outline: none;
}

.filter-check {
    min-height: auto;
    padding: 2px 0;
}

.filter-check input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.filter-akcije {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.filter-akcije > * {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.katalog-rezultati {
    min-width: 0;
}

/* Uz sidebar, četiri kartice su dobre na širokom ekranu,
   a na srednjem desktopu prelazimo na tri. */
@media (max-width: 1180px) and (min-width: 901px) {
    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet i mobitel: filter postaje jedan gumb iznad proizvoda. */
@media (max-width: 900px) {
    .katalog-raspored {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .filteri-panel {
        position: static;
    }

    .filteri-mobile-gumb {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 14px;
        border: 1px solid #dddddd;
        border-radius: 4px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .filteri-mobile-gumb::after {
        content: "⌄";
        margin-left: auto;
        color: #666666;
        font-size: 17px;
        line-height: 1;
        transition: transform 160ms ease;
    }

    .filteri-panel[open] .filteri-mobile-gumb::after {
        transform: rotate(180deg);
    }

    .filteri-mobile-status {
        margin-left: auto;
        color: #777777;
        font-size: 11px;
        font-weight: 500;
    }

    .filteri-panel:not([open]) > .filteri-panel-sadrzaj {
        display: none;
    }

    .filteri-panel[open] > .filteri-panel-sadrzaj {
        display: block;
    }

    .filteri {
        margin-top: 8px;
    }

    .filteri-desktop-naslov {
        display: none;
    }
}

@media (max-width: 500px) {
    .filteri {
        gap: 13px;
        padding: 14px;
    }

    .filter-akcije {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   V7.9.8 - KATALOG PREKO PUNE ŠIRINE EKRANA
   Sidebar više ne smanjuje kartice kao u prvoj verziji.
   Samo katalog koristi puni ekran; ostale stranice zadržavaju .okvir.
   ============================================================ */

.katalog-okvir {
    width: calc(100% - 32px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.katalog-raspored {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
}

/* Desktop filter je stvarno vidljiv; details je otvoren iz HTML-a. */
.filteri-panel[open] > .filteri-panel-sadrzaj {
    display: block;
}

.filteri {
    padding: 16px;
}

/* Na vrlo širokim ekranima dodajemo petu karticu kako proizvodi
   ne bi postali nepotrebno ogromni. */
@media (min-width: 1850px) {
    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Srednji desktop: tri kartice daju ugodniju veličinu fotografije. */
@media (max-width: 1220px) and (min-width: 901px) {
    .katalog-raspored {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 20px;
    }

    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet/mobitel opet koristi standardnu širinu s malim rubom. */
@media (max-width: 900px) {
    .katalog-okvir {
        width: min(100% - 24px, 1400px);
    }

    .katalog-raspored {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* ============================================================
   V7.9.11 - ELEGANTNI COLLAPSE FILTERI + DOTJERAN KATALOG
   ============================================================ */

/* Četiri velike kartice na desktopu. */
@media (min-width: 1251px) {
    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Malo više zraka u katalogu, ali bez smanjivanja fotografija. */
.katalog-raspored {
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 28px;
}

.katalog-naslov {
    padding-top: 28px;
    padding-bottom: 28px;
}

.katalog-naslov h1 {
    font-size: 30px;
    letter-spacing: -0.02em;
}

.katalog-naslov p {
    margin-top: 5px;
    font-size: 14px;
    color: #777777;
}

/* Sidebar */
.filteri {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.035);
}

.filteri-desktop-naslov {
    padding: 18px 18px 15px;
    border-bottom: 1px solid #ededed;
}

.filteri-desktop-naslov > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.filteri-desktop-naslov strong {
    font-size: 16px;
    letter-spacing: -0.01em;
}

.filteri-desktop-naslov span {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 400;
}

/* Pretraga je uvijek dostupna. */
.filter-pretraga {
    padding: 14px 16px 15px;
    border-bottom: 1px solid #ededed;
}

.filter-pretraga label {
    display: block;
    margin-bottom: 7px;
    color: #626262;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.filter-pretraga input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fafafa;
    font-size: 13px;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.filter-pretraga input:focus {
    outline: none;
    border-color: #9b9b9b;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* Glavne collapse sekcije */
.filter-sekcija {
    border-bottom: 1px solid #ededed;
}

.filter-sekcija > summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 15px;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 140ms ease;
}

.filter-sekcija > summary::-webkit-details-marker {
    display: none;
}

.filter-sekcija > summary:hover {
    background: #fafafa;
}

.filter-sekcija > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #666666;
    border-bottom: 1.5px solid #666666;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 150ms ease;
}

.filter-sekcija[open] > summary::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.filter-sekcija-vrijednost {
    max-width: 88px;
    overflow: hidden;
    color: #999999;
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-sekcija[open] .filter-sekcija-vrijednost {
    color: #5c5c5c;
}

.filter-sekcija-sadrzaj {
    padding: 0 16px 14px;
}

.filter-sekcija-sadrzaj select {
    width: 100%;
    min-height: 40px;
    padding: 0 34px 0 10px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
}

.filter-sekcija-sadrzaj select:focus {
    outline: none;
    border-color: #999999;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.035);
}

/* Kategorija - unutarnji accordion */
.filter-kategorije-sadrzaj {
    padding-top: 2px;
}

.filter-kategorija-sve {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    margin-bottom: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.filter-kategorija-sve:hover {
    background: #f7f7f7;
}

.filter-kategorija-sve input,
.filter-kategorija-opcija input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #1d1d1f;
}

.filter-kategorija-grupa {
    border-top: 1px solid #eeeeee;
}

.filter-kategorija-grupa > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 0 24px 0 6px;
    list-style: none;
    cursor: pointer;
    color: #3c3c3c;
    font-size: 12px;
    font-weight: 700;
}

.filter-kategorija-grupa > summary::-webkit-details-marker {
    display: none;
}

.filter-kategorija-grupa > summary::after {
    content: "+";
    position: absolute;
    right: 5px;
    top: 50%;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    transform: translateY(-50%);
}

.filter-kategorija-grupa[open] > summary::after {
    content: "−";
}

.filter-kategorija-grupa > summary:hover {
    color: #000000;
}

.filter-kategorija-lista {
    padding: 0 0 8px 10px;
}

.filter-kategorija-opcija {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
}

.filter-kategorija-opcija:hover {
    background: #f7f7f7;
}

.filter-kategorija-opcija:has(input:checked) {
    background: #f1f1f1;
    font-weight: 700;
}

.filter-kategorija-broj {
    min-width: 24px;
    color: #999999;
    text-align: right;
    font-size: 10px;
}

/* Dostupnost kao switch */
.filter-dostupno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    border-bottom: 1px solid #ededed;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.filter-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex: 0 0 auto;
}

.filter-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.filter-switch-klizac {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d8d8d8;
    transition: background 160ms ease;
}

.filter-switch-klizac::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 160ms ease;
}

.filter-switch input:checked + .filter-switch-klizac {
    background: #222222;
}

.filter-switch input:checked + .filter-switch-klizac::after {
    transform: translateX(16px);
}

/* Akcije */
.filter-akcije {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 16px 16px;
    margin: 0;
}

.filter-akcije .primarni-gumb,
.filter-akcije .sekundarni-gumb {
    min-height: 40px;
    border-radius: 8px;
    font-size: 12px;
}

/* Kartice proizvoda - diskretno modernije */
.mreza-proizvoda {
    gap: 34px 20px;
}

.kartica {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.kartica:hover {
    transform: translateY(-2px);
}

.slika-link {
    border-radius: 10px;
    background: #f3f3f3;
}

.slika-proizvoda {
    border-radius: 10px;
}

.kartica-sadrzaj {
    padding-top: 11px;
}

.sitno {
    color: #858585;
    font-size: 11px;
    letter-spacing: .075em;
}

.naziv-proizvoda {
    margin-top: 5px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.38;
}

.cijena {
    font-size: 15px;
    letter-spacing: -0.01em;
}

.velicina-oznaka {
    border-radius: 5px;
    background: #ffffff;
}

.oznaka-novo {
    border-radius: 999px;
    padding-left: 11px;
    padding-right: 11px;
    letter-spacing: .045em;
}

.srce-gumb {
    backdrop-filter: blur(4px);
}

/* Responsive */
@media (max-width: 1250px) and (min-width: 901px) {
    .katalog-raspored {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 22px;
    }

    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .filteri {
        margin-top: 10px;
        border-radius: 10px;
        box-shadow: none;
    }

    .filteri-desktop-naslov {
        display: none;
    }

    .filter-sekcija-vrijednost {
        max-width: 120px;
    }
}

@media (max-width: 560px) {
    .filter-akcije {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   V7.10.3 - OBAVIJESTI KUPCA
   ============================================================ */

.obavijesti-zaglavlje-link .zaglavlje-badge,
.mobilni-top-obavijesti .zaglavlje-badge {
    top: 0;
    right: -3px;
}

.obavijesti-stranica {
    padding-top: 42px;
    padding-bottom: 64px;
}

.obavijesti-stranica .naslov-sekcije {
    margin-bottom: 26px;
}

.obavijesti-procitane-gumb {
    min-height: 42px;
    white-space: nowrap;
}

.obavijesti-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.obavijest-kartica {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 17px 18px;
    border: 1px solid #e2e2e2;
    border-left: 3px solid #d4d4d4;
    background: #fff;
}

.obavijest-kartica.obavijest-neprocitana {
    border-left-color: #2f8450;
    background: #f6fbf7;
}

.obavijest-ikona {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f2f2f2;
    color: #555;
}

.obavijest-neprocitana .obavijest-ikona {
    background: #e4f3e8;
    color: #267242;
}

.obavijest-ikona svg,
.obavijesti-prazna-ikona svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.obavijest-sadrzaj {
    min-width: 0;
}

.obavijest-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 5px;
    color: #888;
    font-size: 10px;
}

.obavijest-meta span {
    padding: 3px 6px;
    border-radius: 999px;
    background: #2f8450;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.obavijest-sadrzaj h2 {
    margin: 0 0 5px;
    color: #222;
    font-size: 16px;
    line-height: 1.3;
}

.obavijest-sadrzaj p {
    margin: 0;
    color: #626262;
    font-size: 13px;
    line-height: 1.55;
}

.obavijest-otvori-forma {
    margin: 0;
}

.obavijest-otvori-forma .sekundarni-gumb {
    min-width: 92px;
}

.obavijesti-prazna-ikona {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #edf7f0;
    color: #2f8450;
}

@media (max-width: 760px) {
    .obavijesti-stranica {
        padding-top: 28px;
        padding-bottom: 42px;
    }

    .obavijesti-procitane-gumb {
        width: 100%;
    }

    .obavijest-kartica {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        gap: 11px;
        padding: 15px 13px;
    }

    .obavijest-ikona {
        width: 34px;
        height: 34px;
    }

    .obavijest-otvori-forma {
        grid-column: 2;
    }

    .obavijest-otvori-forma .sekundarni-gumb {
        width: 100%;
        min-height: 38px;
    }
}


/* ============================================================
   V7.9.77 - TRI RAZLOGA PRIJE FOOTERA
   ============================================================ */

.razlozi-kupovine {
    margin-top: 64px;
    padding: 66px 0 70px;
    border-top: 1px solid #eeeeeb;
    background: #fff;
    color: #202020;
}

.razlozi-kupovine-unutra > h2 {
    margin: 0 0 58px;
    text-align: center;
    font-size: clamp(25px, 2.25vw, 36px);
    font-weight: 400;
    line-height: 1.25;
}

.razlozi-kupovine-unutra > h2 strong {
    font-weight: 800;
}

.razlozi-kupovine-mreza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 86px);
}

.razlog-kartica {
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    text-align: center;
}

.razlog-ikona {
    width: clamp(150px, 13vw, 194px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: 32px;
    border-radius: 50%;
    background: #fff;
    color: #10ad71;
    box-shadow: 0 10px 32px rgba(22, 48, 34, .13);
}

.razlog-ikona svg {
    width: 66px;
    height: 66px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.razlog-ikona-certifikat span {
    color: #10ad71;
    font-size: clamp(19px, 1.65vw, 27px);
    font-weight: 850;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.razlog-ikona-certifikat sup {
    position: relative;
    top: -.15em;
    margin-left: 2px;
    font-size: .58em;
}

.razlog-kartica h3 {
    margin: 0 0 10px;
    color: #202020;
    font-size: clamp(19px, 1.45vw, 25px);
    line-height: 1.25;
}

.razlog-kartica p {
    max-width: 460px;
    margin: 0;
    color: #454545;
    font-size: 15px;
    line-height: 1.6;
}

.razlozi-kupovine + .podnozje {
    margin-top: 0;
}

@media (max-width: 850px) {
    .razlozi-kupovine {
        margin-top: 48px;
        padding: 54px 0 58px;
    }

    .razlozi-kupovine-unutra > h2 {
        margin-bottom: 44px;
    }

    .razlozi-kupovine-mreza {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .razlog-ikona {
        width: 150px;
        margin-bottom: 24px;
    }
}

@media (max-width: 520px) {
    .razlozi-kupovine {
        margin-top: 36px;
        padding: 42px 0 48px;
    }

    .razlozi-kupovine-unutra > h2 {
        margin-bottom: 36px;
    }

    .razlog-kartica p {
        font-size: 14px;
    }
}


/* ============================================================
   V7.9.74 - VIDEO U BANNERU POČETNE STRANICE
   ============================================================ */

.pocetna-hero-video {
    display: block;
    width: 100%;
    height: clamp(460px, 52vw, 720px);
    object-fit: cover;
    background: #eeeeee;
}

.pocetna-hero-mod-cover .pocetna-hero-video {
    height: clamp(440px, 42vw, 620px);
    object-fit: cover;
}

.pocetna-hero-mod-contain .pocetna-hero-video {
    height: clamp(440px, 42vw, 620px);
    object-fit: contain;
    background: #f4f4f4;
}

.pocetna-hero-mod-cijela .pocetna-hero-video {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

.pocetna-hero-mod-editorial .pocetna-hero-video {
    grid-area: slika;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 900px) {
    .pocetna-hero-mod-cover .pocetna-hero-video,
    .pocetna-hero-mod-contain .pocetna-hero-video {
        height: min(72vh, 700px);
    }

    .pocetna-hero-mod-cijela .pocetna-hero-video {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .pocetna-hero-mod-editorial .pocetna-hero-video {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
    }
}

@media (max-width: 560px) {
    .pocetna-hero-mod-cover .pocetna-hero-video,
    .pocetna-hero-mod-contain .pocetna-hero-video {
        height: 64vh;
        min-height: 440px;
        max-height: 620px;
    }
}


/* ============================================================
   V7.9.61 - GALERIJE TRGOVINA
   ============================================================ */

.trgovina-galerija {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 8px 0 18px;
}

.trgovina-slika-gumb {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 5px;
    background: #edf2ee;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
}

.trgovina-slika-gumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 180ms ease, opacity 180ms ease;
}

.trgovina-slika-gumb:hover img,
.trgovina-slika-gumb:focus-visible img {
    transform: scale(1.045);
    opacity: .91;
}

.trgovina-slika-gumb:focus-visible {
    outline: 3px solid rgba(47, 132, 80, .35);
    outline-offset: 2px;
}

.trgovina-lightbox {
    width: min(1050px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #151515;
    color: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.trgovina-lightbox::backdrop {
    background: rgba(0, 0, 0, .76);
}

.trgovina-lightbox img {
    width: 100%;
    max-height: calc(100vh - 100px);
    display: block;
    object-fit: contain;
}

.trgovina-lightbox p {
    min-height: 44px;
    margin: 0;
    padding: 12px 54px 12px 16px;
    color: #fff;
    font-size: 13px;
}

.trgovina-lightbox-zatvori {
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    cursor: pointer;
    font-size: 27px;
    line-height: 1;
}

@media (max-width: 560px) {
    .trgovina-galerija {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
   V7.9.62 - BLOG / NOVOSTI
   ============================================================ */

.novosti-stranica,
.novost-stranica {
    padding-top: 48px;
    padding-bottom: 68px;
}

.novosti-uvod {
    max-width: 760px;
    margin-bottom: 26px;
}

.novosti-eyebrow {
    margin: 0 0 8px;
    color: #2f8450;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.novosti-uvod h1,
.novost-zaglavlje h1 {
    margin: 0 0 12px;
    color: #202020;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
}

.novosti-uvod > p:last-child,
.novost-sazetak {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.novosti-kategorije {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.novosti-kategorije a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #d8e2da;
    border-radius: 999px;
    background: #fff;
    color: #4f5c53;
    font-size: 12px;
    font-weight: 750;
}

.novosti-kategorije a:hover,
.novosti-kategorije a.aktivno {
    border-color: #2f8450;
    background: #2f8450;
    color: #fff;
}

.novosti-mreza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.novost-kartica {
    overflow: hidden;
    border: 1px solid #dfe6e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(24, 56, 36, .06);
}

.novost-kartica-slika {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #edf7f0;
    color: #2f8450;
    aspect-ratio: 16 / 10;
}

.novost-kartica-slika img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 220ms ease;
}

.novost-kartica:hover .novost-kartica-slika img {
    transform: scale(1.025);
}

.novost-kartica-slika span {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: .06em;
}

.novost-kartica-sadrzaj {
    padding: 20px;
}

.novost-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
    color: #7a7a7a;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.novost-meta span,
.novost-meta a {
    color: #2f8450;
}

.novost-kartica h2 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}

.novost-kartica h2 a {
    color: #202020;
}

.novost-kartica p {
    margin: 0 0 18px;
    color: #666;
    font-size: 13px;
    line-height: 1.65;
}

.novost-vise {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2f8450;
    font-size: 12px;
    font-weight: 800;
}

.novost-stranica {
    max-width: 940px;
}

.novost-natrag {
    display: inline-flex;
    margin-bottom: 26px;
    color: #2f8450;
    font-size: 12px;
    font-weight: 800;
}

.novost-zaglavlje {
    max-width: 820px;
    margin-bottom: 28px;
}

.novost-naslovna-slika {
    margin: 0 0 34px;
    overflow: hidden;
    border-radius: 10px;
    background: #edf2ee;
}

.novost-naslovna-slika img {
    width: 100%;
    max-height: 620px;
    display: block;
    object-fit: cover;
}

.novost-tekst {
    max-width: 780px;
    color: #3f3f3f;
    font-size: 15px;
    line-height: 1.8;
}

.novost-tekst p,
.novost-tekst ul,
.novost-tekst ol {
    margin: 0 0 20px;
}

.novost-tekst h2,
.novost-tekst h3 {
    margin: 34px 0 12px;
    color: #202020;
    line-height: 1.3;
}

.novost-tekst h2 {
    font-size: 24px;
}

.novost-tekst h3 {
    font-size: 19px;
}

.novost-tekst li + li {
    margin-top: 7px;
}

@media (max-width: 900px) {
    .novosti-mreza {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .novosti-stranica,
    .novost-stranica {
        padding-top: 32px;
        padding-bottom: 44px;
    }

    .novosti-mreza {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   V7.9.12 - DISKRETNA BOJA U FILTER PANELU
   Topla, neutralna paleta da sidebar bude življi bez "šarenila".
   ============================================================ */

/* Gornji dio filtera */
.filteri-desktop-naslov {
    background: #f7f3ed;
}

.filteri-desktop-naslov strong {
    color: #2b2824;
}

.filteri-desktop-naslov span {
    color: #8b7d6d;
}

/* Pretraga */
.filter-pretraga {
    background: #fcfbf9;
}

.filter-pretraga input:focus {
    border-color: #a58b6c;
    box-shadow: 0 0 0 3px rgba(165, 139, 108, 0.10);
}

/* Collapse sekcije */
.filter-sekcija > summary {
    color: #34302c;
}

.filter-sekcija > summary:hover {
    background: #faf7f2;
}

.filter-sekcija[open] > summary {
    background: #f6f1ea;
    color: #6f563c;
}

.filter-sekcija[open] > summary::after {
    border-color: #9b7651;
}

.filter-sekcija[open] .filter-sekcija-vrijednost {
    color: #9b7651;
    font-weight: 600;
}

/* Sadržaj otvorene sekcije */
.filter-sekcija[open] > .filter-sekcija-sadrzaj {
    background: #fffdfa;
}

/* Kategorije */
.filter-kategorija-grupa > summary:hover {
    color: #7e5f3e;
}

.filter-kategorija-grupa[open] > summary {
    color: #7e5f3e;
}

.filter-kategorija-grupa[open] > summary::after {
    color: #9b7651;
}

.filter-kategorija-opcija:hover,
.filter-kategorija-sve:hover {
    background: #faf5ee;
}

.filter-kategorija-opcija:has(input:checked) {
    background: #efe5d8;
    color: #5e442c;
}

.filter-kategorija-opcija input,
.filter-kategorija-sve input {
    accent-color: #9b7651;
}

.filter-kategorija-broj {
    padding: 1px 5px;
    border-radius: 999px;
    background: #f3eee8;
    color: #8a755f;
}

/* Samo dostupno */
.filter-dostupno:hover {
    background: #faf7f2;
}

.filter-switch input:checked + .filter-switch-klizac {
    background: #8a6a49;
}

/* Primijeni kao tamna topla nijansa, Očisti ostaje neutralan */
.filter-akcije .primarni-gumb {
    border-color: #5c4632;
    background: #5c4632;
    color: #ffffff;
}

.filter-akcije .primarni-gumb:hover {
    border-color: #443326;
    background: #443326;
}

.filter-akcije .sekundarni-gumb:hover {
    border-color: #b69a79;
    background: #faf5ee;
    color: #5e442c;
}


/* ============================================================
   V7.9.13 - AKTIVNI FILTER JE JASNO OZNAČEN
   ============================================================ */

:root {
    --filter-akcent: #a85f2d;
    --filter-akcent-tamni: #743d1d;
    --filter-akcent-svijetli: #efd4bf;
    --filter-akcent-vrlo-svijetli: #fbefe6;
}

/* Otvoren, ali bez odabrane vrijednosti = neutralno. */
.filter-sekcija[open]:not(.filter-sekcija-aktivna) > summary {
    background: #fafafa;
    color: #34302c;
}

.filter-sekcija[open]:not(.filter-sekcija-aktivna) > summary::after {
    border-color: #777777;
}

/* Aktivni filter: jača pozadina + lijeva akcentna crta. */
.filter-sekcija-aktivna {
    border-left: 4px solid var(--filter-akcent);
}

.filter-sekcija-aktivna > summary {
    padding-left: 12px;
    background: var(--filter-akcent-svijetli) !important;
    color: var(--filter-akcent-tamni) !important;
}

.filter-sekcija-aktivna > summary::after {
    border-color: var(--filter-akcent) !important;
}

.filter-sekcija-aktivna .filter-sekcija-vrijednost {
    color: var(--filter-akcent-tamni) !important;
    font-weight: 800;
}

.filter-sekcija-aktivna > .filter-sekcija-sadrzaj {
    background: var(--filter-akcent-vrlo-svijetli);
}

.filter-sekcija-aktivna select {
    border-color: #c98c62;
    color: #5f351c;
    font-weight: 650;
}

/* Aktivna pretraga. */
.filter-pretraga-aktivna {
    border-left: 4px solid var(--filter-akcent);
    padding-left: 12px;
    background: var(--filter-akcent-vrlo-svijetli);
}

.filter-pretraga-aktivna label {
    color: var(--filter-akcent-tamni);
}

.filter-pretraga-aktivna input {
    border-color: #c98c62;
    background: #ffffff;
}

/* Odabrana kategorija je još jasnija. */
.filter-kategorija-opcija:has(input:checked) {
    background: #e5b994 !important;
    color: #583117 !important;
    font-weight: 800;
}

.filter-kategorija-opcija:has(input:checked) .filter-kategorija-broj {
    background: var(--filter-akcent);
    color: #ffffff;
}

.filter-kategorija-opcija input,
.filter-kategorija-sve input {
    accent-color: var(--filter-akcent);
}

/* Dostupnost: cijeli red označen kada je uključena. */
.filter-dostupno-aktivno {
    background: var(--filter-akcent-svijetli);
    color: var(--filter-akcent-tamni);
    border-left: 4px solid var(--filter-akcent);
    padding-left: 12px;
}

.filter-dostupno-aktivno .filter-switch-klizac,
.filter-switch input:checked + .filter-switch-klizac {
    background: var(--filter-akcent);
}

/* Primijeni prati isti akcent. */
.filter-akcije .primarni-gumb {
    border-color: var(--filter-akcent);
    background: var(--filter-akcent);
}

.filter-akcije .primarni-gumb:hover {
    border-color: var(--filter-akcent-tamni);
    background: var(--filter-akcent-tamni);
}


/* ============================================================
   V7.9.14 - JASNA, IZRAŽENA BOJA AKTIVNOG FILTERA
   Aktivni filter koristi čistu plavu boju, bez matiranih tonova.
   ============================================================ */

:root {
    --filter-akcent: #1565d8;
    --filter-akcent-tamni: #0f4ea8;
    --filter-akcent-svijetli: #eaf3ff;
}

/* Aktivni collapse: puna, jasna boja zaglavlja */
.filter-sekcija-aktivna {
    border-left: 4px solid var(--filter-akcent-tamni);
}

.filter-sekcija-aktivna > summary {
    background: var(--filter-akcent) !important;
    color: #ffffff !important;
}

.filter-sekcija-aktivna > summary::after {
    border-color: #ffffff !important;
}

.filter-sekcija-aktivna .filter-sekcija-vrijednost {
    color: #ffffff !important;
    font-weight: 800;
}

/* Sadržaj aktivnog filtera ostaje čist i svijetao */
.filter-sekcija-aktivna > .filter-sekcija-sadrzaj {
    background: #ffffff;
}

.filter-sekcija-aktivna select {
    border: 2px solid var(--filter-akcent);
    color: #111111;
    font-weight: 650;
    background: #ffffff;
}

/* Aktivna pretraga */
.filter-pretraga-aktivna {
    border-left: 4px solid var(--filter-akcent);
    background: var(--filter-akcent-svijetli);
}

.filter-pretraga-aktivna label {
    color: var(--filter-akcent-tamni);
}

.filter-pretraga-aktivna input {
    border: 2px solid var(--filter-akcent);
    background: #ffffff;
}

/* Odabrana kategorija: puna plava traka */
.filter-kategorija-opcija:has(input:checked) {
    background: var(--filter-akcent) !important;
    color: #ffffff !important;
    font-weight: 800;
}

.filter-kategorija-opcija:has(input:checked) .filter-kategorija-broj {
    background: #ffffff !important;
    color: var(--filter-akcent-tamni) !important;
    font-weight: 800;
}

.filter-kategorija-opcija:has(input:checked) input {
    accent-color: #ffffff;
}

/* Aktivna unutarnja grupa kategorije */
.filter-kategorija-grupa[open] > summary {
    color: var(--filter-akcent);
    font-weight: 800;
}

.filter-kategorija-grupa[open] > summary::after {
    color: var(--filter-akcent);
}

/* Samo dostupno */
.filter-dostupno-aktivno {
    border-left: 4px solid var(--filter-akcent);
    background: var(--filter-akcent);
    color: #ffffff;
}

.filter-switch input:checked + .filter-switch-klizac {
    background: #ffffff;
}

.filter-switch input:checked + .filter-switch-klizac::after {
    background: var(--filter-akcent);
}

/* Glavni akcijski gumb */
.filter-akcije .primarni-gumb {
    border-color: var(--filter-akcent);
    background: var(--filter-akcent);
    color: #ffffff;
}

.filter-akcije .primarni-gumb:hover {
    border-color: var(--filter-akcent-tamni);
    background: var(--filter-akcent-tamni);
}

/* Aktivno stanje na mobilnom gumbu filtera */
.filteri-panel[open] > .filteri-mobile-gumb {
    border-color: var(--filter-akcent);
}

.filteri-mobile-status {
    color: var(--filter-akcent);
    font-weight: 700;
}


/* ============================================================
   V7.9.15 - NASLOVNICA: HERO + IZDVOJENE KATEGORIJE
   ============================================================ */

.pocetna-naslovnica {
    width: 100%;
    padding-bottom: 28px;
    background: #ffffff;
}

.pocetna-hero {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #eeeeee;
    color: inherit;
}

.pocetna-hero picture {
    display: block;
    width: 100%;
}

.pocetna-hero-slika {
    display: block;
    width: 100%;
    height: clamp(460px, 52vw, 720px);
    object-fit: cover;
}

.pocetna-hero-slika.fokus-desktop-lijevo {
    object-position: left center;
}

.pocetna-hero-slika.fokus-desktop-centar {
    object-position: center center;
}

.pocetna-hero-slika.fokus-desktop-desno {
    object-position: right center;
}

.pocetna-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: clamp(28px, 5vw, 86px);
    pointer-events: none;
}

.pocetna-hero-lijevo {
    justify-content: flex-start;
    text-align: left;
}

.pocetna-hero-centar {
    justify-content: center;
    text-align: center;
}

.pocetna-hero-desno {
    justify-content: flex-end;
    text-align: right;
}

.pocetna-hero-tekst {
    width: min(520px, 58vw);
}

.pocetna-hero-tekst-svijetla {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}

.pocetna-hero-tekst-tamna {
    color: #111111;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.32);
}

.pocetna-hero-kicker {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pocetna-hero h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
}

.pocetna-hero-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
    padding: 0 20px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pocetna-hero-tekst-tamna .pocetna-hero-gumb {
    background: rgba(255, 255, 255, 0.75);
}

.pocetna-kategorije {
    padding-top: 42px;
    padding-bottom: 10px;
}

.pocetna-blok-zaglavlje {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.pocetna-blok-kicker {
    display: block;
    margin-bottom: 5px;
    color: #1565d8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pocetna-blok-zaglavlje h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -.025em;
}

.pocetna-kategorije-mreza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.pocetna-kategorija-kartica {
    display: block;
    min-width: 0;
    color: #111111;
}

.pocetna-kategorija-slika-okvir {
    overflow: hidden;
    border-radius: 12px;
    background: #f1f1f1;
    aspect-ratio: 3 / 4;
}

.pocetna-kategorija-slika-okvir img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.pocetna-kategorija-kartica:hover img {
    transform: scale(1.025);
}

.pocetna-kategorija-tekst {
    padding-top: 12px;
}

.pocetna-kategorija-tekst h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -.015em;
}

.pocetna-kategorija-tekst p {
    margin: 4px 0 0;
    color: #777777;
    font-size: 13px;
}

.pocetna-kategorija-tekst span {
    display: inline-block;
    margin-top: 8px;
    color: #1565d8;
    font-size: 12px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .pocetna-hero-slika {
        height: min(76vh, 760px);
    }

    .pocetna-hero-overlay {
        align-items: flex-end;
        padding: 28px 20px 34px;
    }

    .pocetna-hero-tekst {
        width: min(520px, 88vw);
    }

    .pocetna-kategorije {
        padding-top: 28px;
    }

    .pocetna-kategorije-mreza {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .pocetna-hero-slika.fokus-mobitel-vrh {
        object-position: center top;
    }

    .pocetna-hero-slika.fokus-mobitel-centar {
        object-position: center center;
    }

    .pocetna-hero-slika.fokus-mobitel-dno {
        object-position: center bottom;
    }
}

@media (max-width: 560px) {
    .pocetna-hero-slika {
        height: 70vh;
        min-height: 480px;
        max-height: 680px;
    }

    .pocetna-hero h1 {
        font-size: clamp(34px, 12vw, 52px);
    }

    .pocetna-hero-kicker {
        font-size: 11px;
    }

    .pocetna-kategorije-mreza {
        grid-template-columns: 1fr;
    }

    .pocetna-kategorija-slika-okvir {
        aspect-ratio: 4 / 5;
    }
}


/* ============================================================
   V7.9.16 - TRI NAČINA PRIKAZA HERO BANNERA
   ============================================================ */

/* 1) COVER: puni hero, čuva proporcije, po potrebi reže rubove. */
.pocetna-hero-mod-cover .pocetna-hero-slika {
    width: 100%;
    height: clamp(440px, 42vw, 620px);
    object-fit: cover;
}

/* 2) CONTAIN: cijela fotografija u fiksnom hero okviru. */
.pocetna-hero-mod-contain {
    background: #f4f4f4;
}

.pocetna-hero-mod-contain picture {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(440px, 42vw, 620px);
}

.pocetna-hero-mod-contain .pocetna-hero-slika {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 3) CIJELA: bez cropa i bez fiksne visine. */
.pocetna-hero-mod-cijela .pocetna-hero-slika {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* Kod cijele slike overlay prati stvarnu visinu fotografije. */
.pocetna-hero-mod-cijela picture {
    display: block;
}

/* Fokus vrijedi primarno za COVER. */
.pocetna-hero-mod-cover .pocetna-hero-slika.fokus-desktop-lijevo {
    object-position: left center;
}

.pocetna-hero-mod-cover .pocetna-hero-slika.fokus-desktop-centar {
    object-position: center center;
}

.pocetna-hero-mod-cover .pocetna-hero-slika.fokus-desktop-desno {
    object-position: right center;
}

@media (max-width: 900px) {
    .pocetna-hero-mod-cover .pocetna-hero-slika,
    .pocetna-hero-mod-contain picture {
        height: min(72vh, 700px);
    }

    .pocetna-hero-mod-cijela .pocetna-hero-slika {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .pocetna-hero-mod-cover .pocetna-hero-slika.fokus-mobitel-vrh {
        object-position: center top;
    }

    .pocetna-hero-mod-cover .pocetna-hero-slika.fokus-mobitel-centar {
        object-position: center center;
    }

    .pocetna-hero-mod-cover .pocetna-hero-slika.fokus-mobitel-dno {
        object-position: center bottom;
    }
}

@media (max-width: 560px) {
    .pocetna-hero-mod-cover .pocetna-hero-slika,
    .pocetna-hero-mod-contain picture {
        height: 64vh;
        min-height: 440px;
        max-height: 620px;
    }

    .pocetna-hero-mod-cijela .pocetna-hero-slika {
        height: auto;
        min-height: 0;
        max-height: none;
    }
}


/* ============================================================
   V7.9.17 - 3x3 FOKUS HERO SLIKE
   Fokus radi prvenstveno uz COVER, gdje crop ima smisla.
   ============================================================ */

.pocetna-hero-mod-cover .fokus-desktop-gore-lijevo {
    object-position: left top;
}
.pocetna-hero-mod-cover .fokus-desktop-gore-centar {
    object-position: center top;
}
.pocetna-hero-mod-cover .fokus-desktop-gore-desno {
    object-position: right top;
}

.pocetna-hero-mod-cover .fokus-desktop-centar-lijevo {
    object-position: left center;
}
.pocetna-hero-mod-cover .fokus-desktop-centar-centar {
    object-position: center center;
}
.pocetna-hero-mod-cover .fokus-desktop-centar-desno {
    object-position: right center;
}

.pocetna-hero-mod-cover .fokus-desktop-dolje-lijevo {
    object-position: left bottom;
}
.pocetna-hero-mod-cover .fokus-desktop-dolje-centar {
    object-position: center bottom;
}
.pocetna-hero-mod-cover .fokus-desktop-dolje-desno {
    object-position: right bottom;
}

@media (max-width: 900px) {
    .pocetna-hero-mod-cover .fokus-mobitel-gore-lijevo {
        object-position: left top;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-gore-centar {
        object-position: center top;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-gore-desno {
        object-position: right top;
    }

    .pocetna-hero-mod-cover .fokus-mobitel-centar-lijevo {
        object-position: left center;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-centar-centar {
        object-position: center center;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-centar-desno {
        object-position: right center;
    }

    .pocetna-hero-mod-cover .fokus-mobitel-dolje-lijevo {
        object-position: left bottom;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-dolje-centar {
        object-position: center bottom;
    }
    .pocetna-hero-mod-cover .fokus-mobitel-dolje-desno {
        object-position: right bottom;
    }
}


/* ============================================================
   V7.9.18 - EDITORIAL HERO
   Za kampanjske fotografije približno 3:2 ili 2:3 koje ne želimo rezati.
   Desktop: tekst lijevo, cijela fotografija desno.
   Mobitel: fotografija gore, tekst ispod.
   ============================================================ */

.pocetna-hero-mod-editorial {
    display: grid;
    grid-template-columns: minmax(320px, 38%) minmax(0, 62%);
    grid-template-areas: "tekst slika";
    align-items: stretch;
    background: #f5f7fa;
    overflow: hidden;
}

.pocetna-hero-mod-editorial picture {
    grid-area: slika;
    display: block;
    align-self: stretch;
    width: 100%;
}

.pocetna-hero-mod-editorial .pocetna-hero-slika {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

/*
Slika nije cropana po zadanom hero omjeru.
Visinu reda određuje prirodni omjer slike, a lijevi tekstualni panel
se rastegne na istu visinu.
*/
.pocetna-hero-mod-editorial .pocetna-hero-overlay {
    grid-area: tekst;
    position: static;
    inset: auto;
    min-height: 100%;
    padding: clamp(34px, 5vw, 86px);
    background: #f5f7fa;
    color: #111111;
    text-shadow: none;
    pointer-events: none;
}

.pocetna-hero-mod-editorial.pocetna-hero-tekst-svijetla,
.pocetna-hero-mod-editorial .pocetna-hero-tekst-svijetla {
    color: #111111;
    text-shadow: none;
}

.pocetna-hero-mod-editorial .pocetna-hero-tekst {
    width: min(440px, 100%);
}

.pocetna-hero-mod-editorial .pocetna-hero-kicker {
    color: #1565d8;
}

.pocetna-hero-mod-editorial .pocetna-hero-gumb {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
    text-shadow: none;
}

.pocetna-hero-mod-editorial .pocetna-hero-gumb:hover {
    background: #1565d8;
    border-color: #1565d8;
}

/* U editorial modu položaj teksta bira poravnanje unutar lijevog panela. */
.pocetna-hero-mod-editorial .pocetna-hero-lijevo {
    justify-content: flex-start;
    text-align: left;
}

.pocetna-hero-mod-editorial .pocetna-hero-centar {
    justify-content: center;
    text-align: center;
}

.pocetna-hero-mod-editorial .pocetna-hero-desno {
    justify-content: flex-end;
    text-align: right;
}

@media (max-width: 900px) {
    .pocetna-hero-mod-editorial {
        grid-template-columns: 1fr;
        grid-template-areas:
            "slika"
            "tekst";
    }

    .pocetna-hero-mod-editorial .pocetna-hero-slika {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        object-fit: contain;
    }

    .pocetna-hero-mod-editorial .pocetna-hero-overlay {
        min-height: 0;
        padding: 26px 20px 30px;
        background: #ffffff;
    }

    .pocetna-hero-mod-editorial .pocetna-hero-tekst {
        width: 100%;
    }

    .pocetna-hero-mod-editorial .pocetna-hero-gumb {
        margin-top: 16px;
    }
}


/* ============================================================
   V7.9.19 - KONAČNI MOBILE OVERRIDE KATALOGA
   VAŽNO: ovaj blok je namjerno NA KRAJU datoteke.
   Raniji desktop .katalog-raspored stilovi su dolazili nakon
   responsive pravila i ponovno vraćali bočni stupac na mobitelu.
   ============================================================ */

@media (max-width: 900px) {
    .katalog-okvir {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .katalog-raspored {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        width: 100%;
    }

    .filteri-stupac,
    .filteri-panel,
    .filteri-panel-sadrzaj,
    .katalog-rezultati {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .filteri-panel {
        position: static;
        top: auto;
    }

    .filteri-mobile-gumb {
        display: flex;
        width: 100%;
    }

    .filteri-panel:not([open]) > .filteri-panel-sadrzaj {
        display: none;
    }

    .filteri-panel[open] > .filteri-panel-sadrzaj {
        display: block;
    }

    .katalog-rezultati .mreza-proizvoda {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
        width: 100%;
    }

    .kartica,
    .slika-link,
    .slika-proizvoda {
        min-width: 0;
        max-width: 100%;
    }

    .naziv-proizvoda {
        font-size: 13px;
        line-height: 1.35;
    }

    .cijena {
        font-size: 15px;
    }

    .dostupne-velicine {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}

@media (max-width: 380px) {
    .katalog-okvir {
        padding-left: 10px;
        padding-right: 10px;
    }

    .katalog-rezultati .mreza-proizvoda {
        gap: 22px 9px;
    }

    .naziv-proizvoda {
        font-size: 12.5px;
    }
}


/* ============================================================
   V7.9.20 - KUPAC DROPDOWN + JASNIJE STANJE FILTERA
   ============================================================ */

/* ---------- Header / kupac ---------- */

.logo {
    white-space: nowrap;
}

.zaglavlje-akcije {
    gap: 14px;
    flex-wrap: nowrap;
}

.zaglavlje-tekst-link {
    white-space: nowrap;
}

.zaglavlje-ikona-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    color: #171717;
    text-decoration: none !important;
}

.zaglavlje-ikona-link svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zaglavlje-ikona-link:hover,
.kupac-dropdown-summary:hover {
    color: #1565d8;
}

.zaglavlje-ikona-tekst {
    font-size: 13px;
    font-weight: 650;
}

.zaglavlje-badge {
    position: absolute;
    top: 0;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #d92128;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    line-height: 13px;
    text-align: center;
}

.kupac-dropdown {
    position: relative;
}

.kupac-dropdown > summary {
    list-style: none;
}

.kupac-dropdown > summary::-webkit-details-marker {
    display: none;
}

.kupac-dropdown-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    cursor: pointer;
    user-select: none;
    color: #171717;
}

.kupac-ikona {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kupac-strelica {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 150ms ease;
}

.kupac-dropdown[open] .kupac-strelica {
    transform: rotate(180deg);
}

.kupac-ime {
    max-width: 130px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kupac-dropdown-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 80;
    width: 224px;
    overflow: hidden;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
}

.kupac-dropdown-panel a,
.kupac-dropdown-odjava {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    background: #ffffff;
    color: #262626;
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.kupac-dropdown-panel a:hover,
.kupac-dropdown-odjava:hover {
    background: #f5f7fa;
    color: #1565d8;
}

.kupac-dropdown-razdjelnik {
    height: 1px;
    background: #e9e9e9;
}

.kupac-odjava-forma {
    margin: 0;
}

.kupac-dropdown-odjava {
    gap: 9px;
}

.kupac-dropdown-odjava svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- Aktivni filter ---------- */

/*
Željeni princip:
1. Kriterij (Marka / Spol / Sezona...) = bijela podloga + svijetloplavi okvir.
2. Stvarno odabrana vrijednost = puna plava boja + bijeli tekst.
*/

.filter-sekcija-aktivna {
    border-left: 0 !important;
}

.filter-sekcija-aktivna > summary {
    margin: 5px 8px 0;
    min-height: 42px;
    padding-left: 11px !important;
    padding-right: 11px !important;
    border: 1px solid #9fc3f3;
    border-radius: 7px;
    background: #ffffff !important;
    color: #1764c7 !important;
}

.filter-sekcija-aktivna > summary::after {
    border-color: #1764c7 !important;
}

.filter-sekcija-aktivna .filter-sekcija-vrijednost {
    color: #1764c7 !important;
    font-weight: 800;
}

.filter-sekcija-aktivna > .filter-sekcija-sadrzaj {
    padding-top: 8px;
    background: #ffffff !important;
}

.filter-sekcija-aktivna select {
    border: 1px solid #1764c7 !important;
    background: #1764c7 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: none !important;
}

.filter-sekcija-aktivna select option {
    background: #ffffff;
    color: #111111;
    font-weight: 500;
}

/* Kategorija: konkretno odabrana vrijednost ostaje puna plava. */
.filter-kategorija-opcija:has(input:checked) {
    background: #1764c7 !important;
    color: #ffffff !important;
    font-weight: 800;
}

.filter-kategorija-opcija:has(input:checked) .filter-kategorija-broj {
    background: #ffffff !important;
    color: #1764c7 !important;
}

/* Samo dostupno: okvir kriterija + plavi switch umjesto pune plave trake. */
.filter-dostupno-aktivno {
    margin: 5px 8px;
    min-height: 44px;
    padding-left: 11px !important;
    padding-right: 11px !important;
    border: 1px solid #9fc3f3 !important;
    border-radius: 7px;
    background: #ffffff !important;
    color: #1764c7 !important;
}

.filter-dostupno-aktivno .filter-switch-klizac,
.filter-switch input:checked + .filter-switch-klizac {
    background: #1764c7 !important;
}

.filter-switch input:checked + .filter-switch-klizac::after {
    background: #ffffff !important;
}


/* ---------- Mobitel header ---------- */

@media (max-width: 760px) {
    .zaglavlje-red {
        min-height: 62px;
        align-items: center;
        gap: 10px;
    }

    .logo {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .zaglavlje-akcije {
        gap: 9px;
        margin-left: auto;
    }

    .zaglavlje-akcije .zaglavlje-tekst-link {
        font-size: 12px;
    }

    .zaglavlje-ikona-tekst,
    .kupac-ime {
        display: none;
    }

    .kupac-dropdown-summary {
        min-width: 32px;
        justify-content: center;
    }

    .kupac-strelica {
        width: 13px;
        height: 13px;
    }

    .kupac-dropdown-panel {
        right: -36px;
        width: 210px;
    }
}

@media (max-width: 440px) {
    .registracija-zaglavlje {
        display: none;
    }

    .zaglavlje-akcije {
        gap: 7px;
    }

    .zaglavlje-ikona-link svg,
    .kupac-ikona {
        width: 20px;
        height: 20px;
    }
}


/* ============================================================
   V7.9.22 - BLOKOVI PROIZVODA NA POČETNOJ
   ============================================================ */

.pocetna-proizvod-blokovi {
    padding-top: 26px;
    padding-bottom: 22px;
}

.pocetna-proizvod-blok + .pocetna-proizvod-blok {
    margin-top: 46px;
}

.pocetna-proizvodi-mreza {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 18px;
}

.pocetna-proizvod-kartica {
    min-width: 0;
}

.pocetna-proizvod-kartica .naziv-proizvoda {
    margin-top: 4px;
}

@media (max-width: 980px) {
    .pocetna-proizvodi-mreza {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .pocetna-proizvod-blokovi {
        padding-top: 20px;
    }

    .pocetna-proizvodi-mreza {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pocetna-proizvodi-mreza::-webkit-scrollbar {
        display: none;
    }

    .pocetna-proizvod-kartica {
        flex: 0 0 min(67vw, 300px);
        scroll-snap-align: start;
    }
}

/* ============================================================
   V7.9.21 - VIŠE BANNERA / SLIDER + VIŠE IZDVOJENIH KARTICA
   ============================================================ */

.pocetna-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f4f4f4;
}

.pocetna-slider-slajdovi {
    width: 100%;
}

.pocetna-slide {
    display: none;
    width: 100%;
}

.pocetna-slide.aktivan {
    display: block;
    animation: pocetna-slider-ulaz 360ms ease;
}

@keyframes pocetna-slider-ulaz {
    from {
        opacity: .55;
    }
    to {
        opacity: 1;
    }
}

.pocetna-slider-strelica {
    position: absolute;
    top: 50%;
    z-index: 12;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #111111;
    font-size: 34px;
    font-weight: 300;
    line-height: 40px;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    transform: translateY(-50%);
    transition:
        background 150ms ease,
        transform 150ms ease;
}

.pocetna-slider-strelica:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.04);
}

.pocetna-slider-prethodni {
    left: 22px;
}

.pocetna-slider-sljedeci {
    right: 22px;
}

.pocetna-slider-tocke {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    backdrop-filter: blur(5px);
    transform: translateX(-50%);
}

.pocetna-slider-tocka {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.pocetna-slider-tocka.aktivna {
    background: #ffffff;
}

/* Ako administrator odabere "Cijela slika", nema panoramskog cropa. */
.pocetna-slide .pocetna-hero-mod-cijela .pocetna-hero-slika {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
}

/* Više kartica na desktopu jednostavno ide u nove redove. */
.pocetna-kategorije-mreza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mobitel: kartice se ne slažu u dugačak stupac nego se listaju swipeom. */
@media (max-width: 700px) {
    .pocetna-slider-strelica {
        width: 40px;
        height: 40px;
        font-size: 28px;
        line-height: 34px;
    }

    .pocetna-slider-prethodni {
        left: 10px;
    }

    .pocetna-slider-sljedeci {
        right: 10px;
    }

    .pocetna-slider-tocke {
        bottom: 12px;
    }

    .pocetna-kategorije {
        overflow: hidden;
    }

    .pocetna-kategorije-mreza {
        display: flex !important;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pocetna-kategorije-mreza::-webkit-scrollbar {
        display: none;
    }

    .pocetna-kategorija-kartica {
        flex: 0 0 min(78vw, 360px);
        scroll-snap-align: start;
    }

    .pocetna-kategorija-slika-okvir {
        aspect-ratio: 4 / 5;
    }
}


/* ============================================================
   V7.9.23 - BLOKOVI KAO HORIZONTALNI CAROUSEL
   ============================================================ */

.pocetna-proizvod-blok {
    position: relative;
}

.pocetna-proizvod-blok-zaglavlje {
    align-items: center;
}

.pocetna-proizvod-blok-akcije {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pocetna-prikazi-sve {
    color: #1565d8;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.pocetna-prikazi-sve:hover {
    text-decoration: underline;
}

.pocetna-proizvod-strelice {
    display: flex;
    gap: 7px;
}

.pocetna-proizvod-strelica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease;
}

.pocetna-proizvod-strelica:hover {
    border-color: #1565d8;
    background: #1565d8;
    color: #ffffff;
}

/*
Desktop više NE radi novi red.
Vidljiva su otprilike 4 proizvoda, a ostalih do 10 pomičemo vodoravno.
*/
.pocetna-proizvodi-mreza {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 18px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pocetna-proizvodi-mreza::-webkit-scrollbar {
    display: none;
}

.pocetna-proizvod-kartica {
    flex: 0 0 calc((100% - 54px) / 4);
    min-width: 0;
    scroll-snap-align: start;
}

.izdvojeno-sve-stranica {
    padding-top: 28px;
}

.izdvojeno-sve-povratak {
    margin-bottom: 18px;
}

.izdvojeno-sve-povratak a {
    color: #555555;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .pocetna-proizvod-kartica {
        flex-basis: calc((100% - 28px) / 3);
    }
}

@media (max-width: 700px) {
    .pocetna-proizvod-blok-zaglavlje {
        align-items: flex-end;
    }

    .pocetna-proizvod-strelice {
        display: none;
    }

    .pocetna-prikazi-sve {
        font-size: 12px;
    }

    .pocetna-proizvodi-mreza {
        gap: 12px;
    }

    .pocetna-proizvod-kartica {
        flex: 0 0 min(67vw, 300px);
    }
}

/* ============================================================
   V7.9.24 - MODNI STIH POČETNE STRANICE - V1
   Samo vizualni override početne stranice.
   Ne mijenja katalog, filtere, košaru, prijavu ni ostale stranice.
   ============================================================ */

/* Više zraka između modnih cjelina. */
.pocetna-naslovnica {
    padding-bottom: 54px;
}

/* Hero: veći, mirniji naslov i manje "gumbast" CTA. */
.pocetna-hero-kicker {
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .20em;
}

.pocetna-hero h1 {
    font-size: clamp(42px, 6vw, 88px);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
}

.pocetna-hero-gumb {
    min-height: 0;
    margin-top: 26px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    backdrop-filter: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
}

.pocetna-hero-tekst-tamna .pocetna-hero-gumb {
    background: transparent;
}

/* Slider kontrole: diskretnije, manje nalik klasičnom webshop carouselu. */
.pocetna-slider-strelica {
    width: 48px;
    height: 64px;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .10);
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .38);
    opacity: .82;
}

.pocetna-slider-strelica:hover {
    background: rgba(0, 0, 0, .18);
    transform: translateY(-50%);
    opacity: 1;
}

.pocetna-slider-tocke {
    bottom: 20px;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.pocetna-slider-tocka {
    width: 24px;
    height: 2px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .48);
}

.pocetna-slider-tocka.aktivna {
    background: #ffffff;
}

/* Naslovi sekcija: neutralno crno umjesto webshop-plavog naglaska. */
.pocetna-kategorije {
    padding-top: 68px;
    padding-bottom: 26px;
}

.pocetna-blok-zaglavlje {
    margin-bottom: 24px;
}

.pocetna-blok-kicker {
    color: #777777;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
}

.pocetna-blok-zaglavlje h2 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    letter-spacing: -.035em;
}

/* Kategorije postaju modni vizuali: tekst preko fotografije. */
.pocetna-kategorije-mreza {
    gap: 12px;
}

.pocetna-kategorija-kartica {
    position: relative;
    overflow: hidden;
}

.pocetna-kategorija-slika-okvir {
    position: relative;
    border-radius: 0;
    background: #eeeeee;
}

.pocetna-kategorija-slika-okvir::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .48) 0%,
        rgba(0, 0, 0, .10) 34%,
        rgba(0, 0, 0, 0) 58%
    );
    pointer-events: none;
}

.pocetna-kategorija-tekst {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: 22px;
    padding-top: 0;
    color: #ffffff;
}

.pocetna-kategorija-tekst h3 {
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 500;
    letter-spacing: -.025em;
}

.pocetna-kategorija-tekst p {
    margin-top: 6px;
    color: rgba(255, 255, 255, .84);
    font-size: 13px;
}

.pocetna-kategorija-tekst span {
    margin-top: 12px;
    padding-bottom: 3px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Izdvojeni proizvodi ostaju funkcionalni, ali s mirnijim akcijama. */
.pocetna-proizvod-blokovi {
    padding-top: 54px;
    padding-bottom: 34px;
}

.pocetna-proizvod-blok + .pocetna-proizvod-blok {
    margin-top: 68px;
}

.pocetna-prikazi-sve {
    color: #111111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid #111111;
}

.pocetna-prikazi-sve:hover {
    text-decoration: none;
    opacity: .65;
}

.pocetna-proizvod-strelica {
    border-color: #d9d9d9;
    background: transparent;
}

.pocetna-proizvod-strelica:hover {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

/* Mobitel: isti modni dojam uz čitljiv tekst. */
@media (max-width: 700px) {
    .pocetna-naslovnica {
        padding-bottom: 34px;
    }

    .pocetna-kategorije {
        padding-top: 42px;
        padding-bottom: 18px;
    }

    .pocetna-kategorija-tekst {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .pocetna-kategorija-tekst h3 {
        font-size: 24px;
    }

    .pocetna-slider-strelica {
        width: 38px;
        height: 52px;
        background: rgba(0, 0, 0, .08);
    }

    .pocetna-slider-tocke {
        bottom: 14px;
    }

    .pocetna-proizvod-blokovi {
        padding-top: 38px;
    }
}

/* ============================================================
   V7.9.25 - MODNI STIH POČETNE STRANICE - V2
   Editorial tretman bloka "Novo" / izdvojenih proizvoda.
   Samo početna stranica; katalog i ostale stranice ostaju netaknuti.
   ============================================================ */

/* Više zraka prije proizvoda i jasniji editorial prijelaz. */
.pocetna-proizvod-blokovi {
    padding-top: 78px;
    padding-bottom: 52px;
}

.pocetna-proizvod-blok + .pocetna-proizvod-blok {
    margin-top: 86px;
}

/* Naslov bloka: veći, lakši i mirniji. */
.pocetna-proizvod-blok-zaglavlje {
    align-items: flex-end;
    margin-bottom: 30px;
}

.pocetna-proizvod-blok-zaglavlje .pocetna-blok-kicker {
    margin-bottom: 8px;
    color: #8a8a8a;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .24em;
}

.pocetna-proizvod-blok-zaglavlje h2 {
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.045em;
}

/* Akcije desno: tekstualni link + čisti chevroni bez "gumb" dojma. */
.pocetna-proizvod-blok-akcije {
    align-items: flex-end;
    gap: 18px;
    padding-bottom: 3px;
}

.pocetna-prikazi-sve {
    padding-bottom: 4px;
    border-bottom: 1px solid #111111;
    color: #111111;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
}

.pocetna-prikazi-sve:hover {
    opacity: .55;
}

.pocetna-proizvod-strelice {
    gap: 2px;
}

.pocetna-proizvod-strelica {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111111;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.pocetna-proizvod-strelica:hover {
    border: 0;
    background: transparent;
    color: #111111;
    opacity: .48;
}

/* Proizvodi su bliže jedan drugome i više djeluju kao modni lookbook. */
.pocetna-proizvodi-mreza {
    gap: 12px;
    padding-bottom: 4px;
}

.pocetna-proizvod-kartica {
    flex-basis: calc((100% - 36px) / 4);
}

.pocetna-proizvod-kartica .slika-link {
    background: #f2f2f2;
}

.pocetna-proizvod-kartica .slika-proizvoda {
    transition: transform 320ms ease;
}

.pocetna-proizvod-kartica:hover .slika-proizvoda {
    transform: scale(1.01);
}

.pocetna-proizvod-kartica .kartica-sadrzaj {
    padding-top: 14px;
}

.pocetna-proizvod-kartica .sitno {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .10em;
}

.pocetna-proizvod-kartica .naziv-proizvoda {
    margin: 5px 0 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.pocetna-proizvod-kartica .naziv-proizvoda a:hover {
    text-decoration: none;
    opacity: .62;
}

.pocetna-proizvod-kartica .cijena {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 980px) {
    .pocetna-proizvod-kartica {
        flex-basis: calc((100% - 24px) / 3);
    }
}

@media (max-width: 700px) {
    .pocetna-proizvod-blokovi {
        padding-top: 52px;
        padding-bottom: 40px;
    }

    .pocetna-proizvod-blok + .pocetna-proizvod-blok {
        margin-top: 64px;
    }

    .pocetna-proizvod-blok-zaglavlje {
        margin-bottom: 22px;
    }

    .pocetna-proizvod-blok-zaglavlje h2 {
        font-size: 34px;
    }

    .pocetna-prikazi-sve {
        font-size: 9px;
        letter-spacing: .14em;
    }

    .pocetna-proizvodi-mreza {
        gap: 10px;
    }

    .pocetna-proizvod-kartica {
        flex: 0 0 min(72vw, 310px);
    }

    .pocetna-proizvod-kartica .kartica-sadrzaj {
        padding-top: 12px;
    }
}

/* ============================================================
   V7.9.26 - MODNI STIH POČETNE STRANICE - V3
   Mali korak:
   1) uklanja dupli mali naslov iznad "Novo"
   2) oznaka NOVO na kartici više nije crna kapsula
   3) srce više nije u bijelom krugu
   Samo blokovi proizvoda na početnoj stranici.
   ============================================================ */

/* Dovoljno je jedno "Novo" - veliki naslov ostaje. */
.pocetna-proizvod-blok-zaglavlje .pocetna-blok-kicker {
    display: none;
}

/* Diskretna editorial oznaka proizvoda. */
.pocetna-proizvod-kartica .oznaka-novo {
    top: 14px;
    left: 14px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
}

/* Lista želja ostaje funkcionalna, ali bez klasičnog "shop" kruga. */
.pocetna-proizvod-kartica .srce-forma {
    top: 8px;
    right: 10px;
}

.pocetna-proizvod-kartica .srce-gumb {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    color: #1d1d1f;
    font-size: 23px;
}

.pocetna-proizvod-kartica .srce-gumb:hover {
    opacity: .58;
}

@media (max-width: 700px) {
    .pocetna-proizvod-kartica .oznaka-novo {
        top: 11px;
        left: 11px;
        font-size: 8px;
    }

    .pocetna-proizvod-kartica .srce-forma {
        top: 5px;
        right: 6px;
    }
}

/* ============================================================
   V7.9.27 - MODNI STIH POČETNE STRANICE - V4
   Mali korak:
   1) malo manji razmak prije blokova proizvoda
   2) ravne fotografije proizvoda na početnoj
   Samo početna stranica.
   ============================================================ */

.pocetna-proizvod-blokovi {
    padding-top: 58px;
}

/* Na modnoj naslovnici fotografija je glavni element, bez "kartica" dojma. */
.pocetna-proizvod-kartica .slika-link,
.pocetna-proizvod-kartica .slika-proizvoda {
    border-radius: 0;
}

@media (max-width: 700px) {
    .pocetna-proizvod-blokovi {
        padding-top: 38px;
    }
}

/* ============================================================
   V7.9.28 - MODNI STIL KATALOGA - V5
   Mali korak:
   - prenosi vizualni jezik bloka NOVO na katalog proizvoda
   - ne dira filtere, raspored, pagination ni funkcionalnost
   ============================================================ */

/* Ravne fotografije, bez dojma zaobljene webshop kartice. */
.katalog-rezultati .slika-link,
.katalog-rezultati .slika-proizvoda {
    border-radius: 0;
}

/* Kartica više ne "skače" kao klasična ecommerce kartica. */
.katalog-rezultati .kartica:hover {
    transform: none;
}

/* Diskretan NOVO kao na početnoj. */
.katalog-rezultati .oznaka-novo {
    top: 14px;
    left: 14px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
}

/* Srce ostaje potpuno funkcionalno, ali bez bijelog kruga. */
.katalog-rezultati .srce-forma {
    top: 8px;
    right: 10px;
}

.katalog-rezultati .srce-gumb {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    color: #1d1d1f;
    font-size: 23px;
}

.katalog-rezultati .srce-gumb:hover {
    opacity: .58;
}

/* Mirniji tekst proizvoda, isti jezik kao blok NOVO. */
.katalog-rezultati .kartica-sadrzaj {
    padding-top: 13px;
}

.katalog-rezultati .sitno {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .10em;
}

.katalog-rezultati .naziv-proizvoda {
    margin: 5px 0 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.katalog-rezultati .naziv-proizvoda a:hover {
    text-decoration: none;
    opacity: .62;
}

.katalog-rezultati .cijena {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 700px) {
    .katalog-rezultati .oznaka-novo {
        top: 11px;
        left: 11px;
        font-size: 8px;
    }

    .katalog-rezultati .srce-forma {
        top: 5px;
        right: 6px;
    }
}

/* ============================================================
   V7.9.29 - RAZMAK KATALOGA KAO NOVO - V6
   Mali korak:
   - isti horizontalni razmak između fotografija kao u bloku NOVO
   - vertikalni razmak između redova ostaje dovoljno velik za tekst
   ============================================================ */

.kolekcija-naslovna {
    width: 100%;
    margin: 0 0 30px;
    overflow: hidden;
    background: #f3f3f1;
}

.kolekcija-naslovna picture {
    display: block;
}

.kolekcija-naslovna img {
    display: block;
    width: 100%;
    max-height: 560px;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

@media (max-width: 700px) {
    .kolekcija-naslovna {
        margin-bottom: 22px;
    }

    .kolekcija-naslovna img {
        max-height: none;
        aspect-ratio: 4 / 5;
    }
}

.katalog-rezultati .mreza-proizvoda {
    gap: 34px 12px;
}

/* ============================================================
   V7.9.30 - IZDVOJENI BLOKOVI: PUTANJA + POVRATAK NA POČETAK
   ============================================================ */

.izdvojeno-sve-povratak {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #8a8a8a;
    font-size: 12px;
    letter-spacing: .04em;
}

.izdvojeno-sve-povratak a {
    color: #1d1d1f;
    font-size: inherit;
    font-weight: 500;
    text-decoration: none;
}

.izdvojeno-sve-povratak a:hover {
    opacity: .58;
}

.izdvojeno-sve-separator {
    color: #b5b5b5;
}

.paginacija-pocetak {
    font-weight: 500;
}

/* ============================================================
   V7.9.31 - ELEGANTNIJA PAGINACIJA + POVRATAK
   ============================================================ */

.katalog-povratak-gore {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 24px;
    color: #9a9a9a;
    font-size: 12px;
    letter-spacing: .035em;
}

.katalog-povratak-gore a {
    color: #2a2a2a;
    font-weight: 500;
    text-decoration: none;
}

.katalog-povratak-gore a:hover {
    opacity: .58;
}

/* Paginacija više nije skup klasičnih webshop gumba. */
.paginacija-modna {
    gap: 22px;
    padding: 52px 0 46px;
}

.paginacija-modna .paginacija-gumb {
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #252525;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .035em;
    text-decoration: none;
}

.paginacija-modna .paginacija-gumb:hover {
    background: transparent;
    opacity: .58;
}

.paginacija-modna .paginacija-broj {
    color: #8a8a8a;
    font-size: 12px;
    letter-spacing: .06em;
}

.paginacija-modna .paginacija-pocetna {
    margin-right: 8px;
}

@media (max-width: 700px) {
    .katalog-povratak-gore {
        margin-bottom: 18px;
    }

    .paginacija-modna {
        gap: 14px;
        padding: 38px 0 34px;
        flex-wrap: wrap;
    }

    .paginacija-modna .paginacija-pocetna {
        margin-right: 0;
    }
}

/* ============================================================
   V7.9.32 - SVI PROIZVODI + UJEDNAČENA MODNA PAGINACIJA
   ============================================================ */

/* Naslov kataloga više nalikuje editorial sekciji početne. */
#katalog-vrh > .katalog-naslov {
    margin: 8px 0 42px;
}

#katalog-vrh > .katalog-naslov h1 {
    margin: 0;
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

#katalog-vrh > .katalog-naslov p {
    margin-top: 10px;
    color: #8a8a8a;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .025em;
}

/* I stranica "Prikaži sve" dobiva isti ritam naslova. */
.izdvojeno-sve-stranica > .katalog-naslov {
    margin: 6px 0 38px;
}

.izdvojeno-sve-stranica > .katalog-naslov h1 {
    margin: 0;
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.izdvojeno-sve-stranica > .katalog-naslov p {
    margin-top: 9px;
    color: #8a8a8a;
    font-size: 12px;
}

/* Jedna paginacija za katalog i izdvojene blokove. */
.paginacija-modna {
    border-top: 1px solid #eeeeee;
    margin-top: 18px;
    padding: 30px 0 44px;
}

.paginacija-modna .paginacija-gumb {
    position: relative;
    padding: 7px 0;
    color: #222222;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.paginacija-modna .paginacija-gumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transition: right 160ms ease;
}

.paginacija-modna .paginacija-gumb:hover {
    opacity: 1;
}

.paginacija-modna .paginacija-gumb:hover::after {
    right: 0;
}

.paginacija-modna .paginacija-broj {
    min-width: 64px;
    text-align: center;
    color: #9a9a9a;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .10em;
}

@media (max-width: 700px) {
    #katalog-vrh > .katalog-naslov,
    .izdvojeno-sve-stranica > .katalog-naslov {
        margin-bottom: 28px;
    }

    .paginacija-modna {
        margin-top: 12px;
        padding: 24px 0 34px;
    }

    .paginacija-modna .paginacija-gumb {
        font-size: 10px;
    }
}

/* ============================================================
   V7.9.33 - MODNI FILTER DRAWER
   Prvi korak: postojeća logika filtera ostaje ista.
   Mijenja se samo način prikaza: poziv + desni bočni panel.
   ============================================================ */

.katalog-naslov {
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.katalog-filter-otvori {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 4px;
    padding: 8px 0 7px;
    border: 0;
    border-bottom: 1px solid #2b2b2b;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    cursor: pointer;
}

.katalog-filter-plus {
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
}

.katalog-filter-status {
    color: #8a6a49;
    font-size: 9px;
    letter-spacing: .09em;
}

.katalog-filter-otvori:hover {
    opacity: .58;
}

/* Više nema stalnog lijevog stupca: proizvodi koriste punu širinu. */
.katalog-raspored {
    display: block;
}

.katalog-rezultati {
    width: 100%;
}

/* Tamni, vrlo blagi sloj iza drawer-a. */
.filter-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(0, 0, 0, .22);
    opacity: 1;
}

.filter-drawer-overlay[hidden] {
    display: none;
}

/* Desni bočni filter. */
.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: min(430px, 92vw);
    height: 100dvh;
    max-width: none;
    padding: 0;
    background: #ffffff;
    box-shadow: -18px 0 48px rgba(0, 0, 0, .10);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(102%);
    transition: transform 220ms ease;
}

.filter-drawer.otvoren {
    transform: translateX(0);
}

body.filter-drawer-aktivan {
    overflow: hidden;
}

/* Poništavamo stari sticky/sidebar stil. */
.filter-drawer .filteri-panel {
    position: static;
    top: auto;
    width: 100%;
}

.filter-drawer .filteri-panel-sadrzaj,
.filter-drawer .filteri-panel:not([open]) > .filteri-panel-sadrzaj,
.filter-drawer .filteri-panel[open] > .filteri-panel-sadrzaj {
    display: block;
    width: 100%;
}

.filter-drawer .filteri {
    gap: 0;
    padding: 0 24px 30px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.filter-drawer-zaglavlje {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -24px 8px;
    padding: 22px 24px 17px;
    border-bottom: 1px solid #eeeeee;
    background: rgba(255,255,255,.97);
}

.filter-drawer-zaglavlje > div {
    display: grid;
    gap: 3px;
}

.filter-drawer-zaglavlje strong {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -.02em;
}

.filter-drawer-zaglavlje span {
    color: #8a8a8a;
    font-size: 11px;
}

.filter-drawer-zatvori {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2a2a2a;
    font-size: 30px;
    font-weight: 200;
    line-height: 1;
    cursor: pointer;
}

.filter-drawer-zatvori:hover {
    opacity: .55;
}

/* U draweru postojeće sekcije mogu ostati kakve jesu,
   ali ih malo smirujemo. */
.filter-drawer .filter-pretraga {
    margin: 12px 0 12px;
}

.filter-drawer .filter-sekcija,
.filter-drawer .filter-dostupno {
    border-top: 1px solid #eeeeee;
}

.filter-drawer .filter-akcije {
    position: sticky;
    bottom: 0;
    margin: 18px -24px -30px;
    padding: 14px 24px 18px;
    border-top: 1px solid #e8e8e8;
    background: rgba(255,255,255,.98);
}

@media (max-width: 900px) {
    .katalog-naslov {
        align-items: flex-start;
    }

    .filter-drawer {
        width: min(420px, 100vw);
    }

    .filter-drawer .filteri-mobile-gumb {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .katalog-naslov {
        flex-direction: column;
        gap: 16px;
    }

    .katalog-filter-otvori {
        align-self: flex-start;
    }

    .filter-drawer {
        width: 100vw;
    }

    .filter-drawer .filteri {
        padding-left: 18px;
        padding-right: 18px;
    }

    .filter-drawer-zaglavlje {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .filter-drawer .filter-akcije {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ============================================================
   V7.9.34 - MOBILNI STICKY FILTER + MODNI NOVO "PRIKAŽI SVE"
   ============================================================ */

.katalog-filter-mobile-sticky {
    display: none;
}

@media (max-width: 900px) {
    .katalog-filter-mobile-sticky {
        position: fixed;
        left: 50%;
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 1120;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 170px;
        min-height: 44px;
        padding: 0 18px;
        border: 1px solid #242424;
        border-radius: 0;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 8px 26px rgba(0, 0, 0, .10);
        color: #202020;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .10em;
        transform: translateX(-50%);
        backdrop-filter: blur(10px);
        cursor: pointer;
    }

    .katalog-filter-mobile-sticky > span:last-child {
        font-size: 16px;
        font-weight: 300;
        line-height: 1;
    }

    .katalog-filter-mobile-status {
        color: #8a6a49;
        font-size: 9px !important;
        font-weight: 600 !important;
    }

    body.filter-drawer-aktivan .katalog-filter-mobile-sticky {
        visibility: hidden;
    }

    #katalog-vrh {
        padding-bottom: 68px;
    }
}

/* NOVO -> Prikaži sve: isti modni tretman kao kartice na početnoj/katalogu. */
.izdvojeno-sve-stranica .izdvojeno-proizvodi-mreza {
    gap: 34px 12px;
}

.izdvojeno-sve-stranica .kartica:hover {
    transform: none;
}

.izdvojeno-sve-stranica .slika-link,
.izdvojeno-sve-stranica .slika-proizvoda {
    border-radius: 0;
}

.izdvojeno-sve-stranica .oznaka-novo {
    top: 14px;
    left: 14px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
}

.izdvojeno-sve-stranica .srce-forma {
    top: 8px;
    right: 10px;
}

.izdvojeno-sve-stranica .srce-gumb {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    font-size: 23px;
    backdrop-filter: none;
}

.izdvojeno-sve-stranica .srce-gumb:hover {
    opacity: .58;
}

.izdvojeno-sve-stranica .kartica-sadrzaj {
    padding-top: 13px;
}

.izdvojeno-sve-stranica .sitno {
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .10em;
}

.izdvojeno-sve-stranica .naziv-proizvoda {
    margin: 5px 0 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.izdvojeno-sve-stranica .naziv-proizvoda a:hover {
    text-decoration: none;
    opacity: .62;
}

.izdvojeno-sve-stranica .cijena {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 700px) {
    .izdvojeno-sve-stranica .izdvojeno-proizvodi-mreza {
        gap: 24px 12px;
    }

    .izdvojeno-sve-stranica .oznaka-novo {
        top: 11px;
        left: 11px;
        font-size: 8px;
    }

    .izdvojeno-sve-stranica .srce-forma {
        top: 5px;
        right: 6px;
    }
}

/* ============================================================
   V7.9.35 - FILTER KAO STAVKA MOBILNE DONJE NAVIGACIJE
   ============================================================ */

/* Stari veliki sticky gumb više se ne koristi. */
.katalog-filter-mobile-sticky {
    display: none !important;
}

/* Filter je skriven dok korisnik nije došao do dijela Svi proizvodi. */
.mobilna-nav-filter {
    display: none !important;
}

@media (max-width: 760px) {
    /* U katalogu Filter zamjenjuje Pretragu, pa traka i dalje ima 5 stavki. */
    body.mobilni-filter-dostupan
        .mobilna-donja-traka
        [data-mobilna-nav="pretraga"] {
        display: none !important;
    }

    body.mobilni-filter-dostupan
        .mobilna-nav-filter {
        display: flex !important;
    }

    /* Filter koristi potpuno isti vizualni jezik kao ostale stavke. */
    .mobilna-nav-filter {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .mobilna-nav-filter svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Više ne treba dodatni prostor za lebdeći filter gumb. */
    #katalog-vrh {
        padding-bottom: 0;
    }
}

/* ============================================================
   V7.9.36 - CIJENA + SORTIRANJE + FILTER NA NOVO + MIRNIJE KARTICE
   ============================================================ */

/* Poziv sada jasno obuhvaća i sortiranje. */
.katalog-filter-otvori {
    white-space: nowrap;
}

/* Raspon cijene. */
.filter-sekcija-cijena .filter-sekcija-vrijednost {
    max-width: 150px;
}

.filter-cijena-info {
    margin-bottom: 10px;
    color: #969696;
    font-size: 10px;
    letter-spacing: .04em;
}

.filter-cijena-polja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.filter-cijena-polja label {
    display: grid;
    gap: 6px;
    color: #6e6e6e;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.filter-cijena-polja input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #dddddd;
    border-radius: 0;
    background: #ffffff;
    color: #222222;
    font: inherit;
    font-size: 13px;
}

.filter-cijena-polja input:focus {
    border-color: #777777;
    outline: none;
}

/* Katalog i NOVO koriste isti smireni prikaz dostupnosti. */
.katalog-rezultati .dostupnost,
.izdvojeno-sve-stranica .dostupnost {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 8px;
    color: #858585;
    font-size: 10px;
    line-height: 1.45;
}

.katalog-rezultati .dostupno,
.izdvojeno-sve-stranica .dostupno {
    color: #858585;
    font-size: 10px;
    font-weight: 400;
}

.katalog-rezultati .dostupne-velicine,
.izdvojeno-sve-stranica .dostupne-velicine {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.katalog-rezultati .velicina-oznaka,
.izdvojeno-sve-stranica .velicina-oznaka {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #565656;
    font-size: 10px;
    font-weight: 500;
}

.katalog-rezultati .velicina-oznaka + .velicina-oznaka::before,
.izdvojeno-sve-stranica .velicina-oznaka + .velicina-oznaka::before {
    content: "·";
    margin: 0 5px;
    color: #b0b0b0;
}

/* NOVO / Prikaži sve ima isti drawer i puni katalog ritam. */
.izdvojeno-sve-stranica .filter-drawer-overlay,
.izdvojeno-sve-stranica .filter-drawer {
    display: block;
}

.izdvojeno-sve-stranica .filter-drawer-overlay[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .katalog-filter-otvori {
        font-size: 10px;
        letter-spacing: .08em;
    }

    .filter-cijena-polja {
        gap: 8px;
    }
}

/* ============================================================
   V7.9.37 - WEB ODJELI + ROBNE MARKE IZNAD KATALOGA
   ============================================================ */

.katalog-brzi-pristup {
    display: grid;
    gap: 16px;
    margin: 10px 0 34px;
    padding: 22px 0 24px;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

.katalog-brzi-red {
    display: grid;
    gap: 10px;
}

.katalog-brzi-oznaka {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.katalog-brzi-linkovi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
}

.katalog-brzi-linkovi a {
    color: #1f1f1f;
    text-decoration: none;
}

.katalog-brzi-linkovi a:hover {
    opacity: .58;
}

.katalog-brzi-odjeli a {
    position: relative;
    padding-bottom: 2px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.katalog-brzi-odjeli a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: right 160ms ease;
}

.katalog-brzi-odjeli a:hover::after {
    right: 0;
}

.katalog-brzi-marke a {
    color: #5a5a5a;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .02em;
}

@media (max-width: 760px) {
    .katalog-brzi-pristup {
        margin: 0 0 28px;
        padding: 18px 0 20px;
        gap: 14px;
    }

    .katalog-brzi-linkovi {
        gap: 8px 16px;
    }

    .katalog-brzi-odjeli a {
        font-size: 14px;
    }

    .katalog-brzi-marke a {
        font-size: 12px;
    }
}

/* ============================================================
   V7.9.38 - RESPONSIVE ODJELI / ROBNE MARKE
   Desktop: postojeći glavni odjeli ostaju gore, ovdje samo marke.
   Mobitel: web odjeli + horizontalno klizne robne marke.
   ============================================================ */

/*
 * Na katalogu ne rezerviramo prazan prostor za obavijest ako je
 * obavijest stvarno prazna. Ako poruka postoji, prostor ostaje.
 */
body:has(#katalog-vrh)
.shop-obavijest-slot:not(:has(.shop-obavijest)) {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Desktop: Web odjeli su već u glavnom meniju ispod logotipa. */
@media (min-width: 761px) {
    .katalog-brzi-red-odjeli {
        display: none;
    }

    .katalog-brzi-pristup {
        gap: 0;
        margin: 0 0 38px;
        padding: 14px 0 16px;
        border-top: 0;
    }

    .katalog-brzi-red-marke {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 24px;
    }

    .katalog-brzi-red-marke .katalog-brzi-oznaka {
        white-space: nowrap;
    }

    .katalog-brzi-marke {
        gap: 8px 24px;
    }
}

/* Aktivna marka ostaje diskretno naglašena. */
.katalog-brzi-marke a.aktivan-link {
    color: #1d1d1f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobitel: odjeli ostaju, marke se pomiču vodoravno. */
@media (max-width: 760px) {
    .katalog-brzi-pristup {
        margin: 0 0 28px;
        padding: 14px 0 18px;
        gap: 17px;
        border-top: 0;
    }

    .katalog-brzi-red {
        gap: 9px;
    }

    .katalog-brzi-odjeli {
        gap: 8px 22px;
    }

    .katalog-brzi-marke {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        width: calc(100vw - 24px);
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .katalog-brzi-marke::-webkit-scrollbar {
        display: none;
    }

    .katalog-brzi-marke a {
        flex: 0 0 auto;
        padding-right: 22px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .katalog-brzi-marke a:last-child {
        padding-right: 4px;
    }
}

/* ============================================================
   V7.9.39 - OZNAKA DA SU ROBNE MARKE KLIZNE NA MOBITELU
   ============================================================ */

.katalog-slider-smjer {
    display: none;
}

@media (max-width: 760px) {
    .katalog-brzi-oznaka-marke {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .katalog-slider-smjer {
        display: inline-block;
        color: #777;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1;
    }
}

/* ============================================================
   V7.9.40 - FUNKCIONALNE STRELICE ROBNIH MARKI
   ============================================================ */

.katalog-slider-kontrole {
    display: none;
}

@media (max-width: 760px) {
    .katalog-slider-smjer {
        display: none !important;
    }

    .katalog-slider-kontrole {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .katalog-slider-gumb {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #444;
        font: inherit;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .katalog-slider-gumb:disabled {
        opacity: .24;
        cursor: default;
    }

    .katalog-slider-gumb:not(:disabled):active {
        transform: translateY(1px);
    }
}

/* ============================================================
   V7.9.41 - MOBILNI MENI
   Početna | Meni | Pretraga/Filter | Košarica | Profil
   ============================================================ */

@media (max-width: 760px) {
    /* Web odjeli su sada stalno dostupni kroz donji Meni. */
    .katalog-brzi-red-odjeli {
        display: none !important;
    }

    .katalog-brzi-pristup {
        gap: 0;
        padding-top: 10px;
    }

    /* Glavni panel menija */
    .mobilni-glavni-meni {
        padding-top: 4px;
    }

    .mobilni-meni-sekcija {
        padding: 20px 0;
        border-bottom: 1px solid #ececec;
    }

    .mobilni-meni-sekcija:first-child {
        padding-top: 8px;
    }

    .mobilni-meni-sekcija:last-child {
        border-bottom: 0;
    }

    .mobilni-meni-nadnaslov {
        display: block;
        margin-bottom: 13px;
        color: #8a8a8a;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    /* Web odjeli - odmah vidljivi, bez dodatnog klika */
    .mobilni-meni-odjeli {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
    }

    .mobilni-meni-odjeli a {
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .04em;
        text-decoration: none;
        text-transform: uppercase;
    }

    /* Kategorije ostaju accordion ispod odjela. */
    .mobilni-meni-kategorije {
        display: grid;
        gap: 0;
    }

    /* Marke u dvije kolone, dovoljno mirno za duži popis. */
    .mobilni-meni-marke-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 20px;
    }

    .mobilni-meni-marke-grid a {
        min-width: 0;
        overflow: hidden;
        color: #4f4f4f;
        font-size: 12px;
        line-height: 1.35;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobilni-meni-marke-grid a.aktivan-link {
        color: #1d1d1f;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* ============================================================
   V7.9.42 - SVI PROIZVODI KAO CLEAN-RESET LINK
   ============================================================ */

.svi-proizvodi-link {
    color: inherit;
    text-decoration: none;
}

.svi-proizvodi-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* ============================================================
   V7.9.43 - DINAMIČKI EDITORIAL NASLOV KATALOGA
   ============================================================ */

.katalog-editorial-naslov {
    display: grid;
    justify-items: start;
}

.katalog-reset-link {
    display: inline-block;
    margin-bottom: 15px;
    color: #6d6d6d;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-decoration: none;
}

.katalog-reset-link:hover {
    color: #1d1d1f;
}

.katalog-nadnaslov {
    display: block;
    margin-bottom: 6px;
    color: #898989;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.katalog-editorial-naslov h1 {
    margin-top: 0;
}

@media (max-width: 760px) {
    .katalog-reset-link {
        margin-bottom: 12px;
        font-size: 11px;
    }

    .katalog-nadnaslov {
        margin-bottom: 5px;
        font-size: 9px;
    }
}


/* ============================================================
   V7.9.44 - AKCIJSKE CIJENE U KATALOGU
   - cijene malo veće na desktopu
   - AKCIJA je samo crveni editorial tekst, bez badgea
   - stara cijena crna i precrtana
   - akcijska cijena crvena
   - dodatna cijena određene veličine ostaje u istom redu
   ============================================================ */

.pocetna-proizvod-kartica .cijena,
.katalog-rezultati .cijena,
.izdvojeno-sve-stranica .cijena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: #1d1d1f;
}

.oznaka-akcija {
    position: absolute;
    z-index: 3;
    top: 14px;
    left: 14px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #b3262e;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
}

.oznaka-akcija.oznaka-akcija-ispod {
    top: 29px;
}

.cijena-redovna-akcija {
    color: #1d1d1f;
    text-decoration-line: line-through;
    text-decoration-color: #1d1d1f;
    text-decoration-thickness: 1px;
}

.cijena-akcijska {
    color: #b3262e;
}

.cijena-dodatna {
    color: #1d1d1f;
    white-space: nowrap;
}

.cijena-dodatna-velicine {
    color: #1d1d1f;
}

@media (max-width: 700px) {
    .pocetna-proizvod-kartica .cijena,
    .katalog-rezultati .cijena,
    .izdvojeno-sve-stranica .cijena {
        font-size: 14px;
        gap: 2px 6px;
    }

    .oznaka-akcija {
        top: 11px;
        left: 11px;
        font-size: 8px;
    }

    .oznaka-akcija.oznaka-akcija-ispod {
        top: 24px;
    }
}


/* ============================================================
   V7.9.45 - ČITLJIVIJI TEKST KARTICA
   Malo povećanje tipografije bez gubitka modnog, mirnog izgleda.
   Vrijedi za početne blokove, puni katalog i "Prikaži sve".
   ============================================================ */

.pocetna-proizvod-kartica .sitno,
.katalog-rezultati .sitno,
.izdvojeno-sve-stranica .sitno {
    font-size: 12px;
    line-height: 1.3;
}

.pocetna-proizvod-kartica .naziv-proizvoda,
.katalog-rezultati .naziv-proizvoda,
.izdvojeno-sve-stranica .naziv-proizvoda {
    font-size: 15px;
    line-height: 1.38;
}

.pocetna-proizvod-kartica .cijena,
.katalog-rezultati .cijena,
.izdvojeno-sve-stranica .cijena {
    font-size: 16px;
    font-weight: 500;
}

.pocetna-proizvod-kartica .dostupnost,
.katalog-rezultati .dostupnost,
.izdvojeno-sve-stranica .dostupnost,
.pocetna-proizvod-kartica .dostupno,
.katalog-rezultati .dostupno,
.izdvojeno-sve-stranica .dostupno,
.pocetna-proizvod-kartica .velicina-oznaka,
.katalog-rezultati .velicina-oznaka,
.izdvojeno-sve-stranica .velicina-oznaka {
    font-size: 11px;
}

.pocetna-proizvod-kartica .oznaka-novo,
.katalog-rezultati .oznaka-novo,
.izdvojeno-sve-stranica .oznaka-novo,
.oznaka-akcija {
    font-size: 10px;
}

@media (max-width: 700px) {
    .pocetna-proizvod-kartica .sitno,
    .katalog-rezultati .sitno,
    .izdvojeno-sve-stranica .sitno {
        font-size: 11px;
    }

    .pocetna-proizvod-kartica .naziv-proizvoda,
    .katalog-rezultati .naziv-proizvoda,
    .izdvojeno-sve-stranica .naziv-proizvoda {
        font-size: 14px;
    }

    .pocetna-proizvod-kartica .cijena,
    .katalog-rezultati .cijena,
    .izdvojeno-sve-stranica .cijena {
        font-size: 15px;
    }

    .pocetna-proizvod-kartica .dostupnost,
    .katalog-rezultati .dostupnost,
    .izdvojeno-sve-stranica .dostupnost,
    .pocetna-proizvod-kartica .dostupno,
    .katalog-rezultati .dostupno,
    .izdvojeno-sve-stranica .dostupno,
    .pocetna-proizvod-kartica .velicina-oznaka,
    .katalog-rezultati .velicina-oznaka,
    .izdvojeno-sve-stranica .velicina-oznaka {
        font-size: 10px;
    }

    .pocetna-proizvod-kartica .oznaka-novo,
    .katalog-rezultati .oznaka-novo,
    .izdvojeno-sve-stranica .oznaka-novo,
    .oznaka-akcija {
        font-size: 9px;
    }
}


/* ============================================================
   V7.9.46 - MOBILNI HINT ZA HORIZONTALNO POMICANJE
   - proizvodni blokovi: postojeće funkcionalne strelice su vidljive
     i stoje ispod naziva Novo / Akcija / ...
   - Odabrane kategorije dobivaju iste funkcionalne strelice
   - swipe i dalje normalno radi
   ============================================================ */

.pocetna-kategorije-strelice {
    display: none;
}

.pocetna-kategorija-strelica {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #111111;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 700px) {

    /* ---------- Odabrane kategorije ---------- */

    .pocetna-kategorije-zaglavlje {
        position: relative;
        align-items: flex-start;
        padding-bottom: 30px;
        margin-bottom: 14px;
    }

    .pocetna-kategorije-strelice {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 26px;
    }

    .pocetna-kategorija-strelica {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        color: #555555;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
    }

    .pocetna-kategorija-strelica:active {
        opacity: .45;
    }

    /* ---------- Novo / Akcija / ostali blokovi proizvoda ---------- */

    .pocetna-proizvod-blok-zaglavlje {
        position: relative;
        align-items: flex-start;
        padding-bottom: 30px;
        margin-bottom: 14px;
    }

    .pocetna-proizvod-blok-akcije {
        align-items: flex-start;
        padding-bottom: 0;
    }

    /*
     * Raniji CSS ih je na mobitelu skrivao.
     * Sada su funkcionalne i stoje ispod naslova sekcije.
     */
    .pocetna-proizvod-strelice {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 26px;
    }

    .pocetna-proizvod-strelica {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        color: #555555;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
    }

    .pocetna-proizvod-strelica:active {
        opacity: .45;
    }

    /*
     * Mali dio sljedeće kartice ostaje vidljiv, a strelice dodatno
     * jasno pokazuju da se sadržaj može pomicati lijevo/desno.
     */
    .pocetna-kategorije-mreza,
    .pocetna-proizvodi-mreza {
        scroll-behavior: smooth;
    }
}


/* ============================================================
   V7.9.47 - ROBNE MARKE: ISTI MOBILNI JEZIK POMICANJA
   Sve horizontalne sekcije sada imaju strelice:
       naziv
       ‹ ›
   lijevo poravnato i u istoj veličini.
   ============================================================ */

@media (max-width: 760px) {

    .katalog-brzi-red-marke {
        align-items: flex-start;
    }

    .katalog-brzi-oznaka-marke {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
    }

    .katalog-slider-kontrole {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        height: 26px;
    }

    .katalog-slider-gumb {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #555555;
        font-family: inherit;
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .katalog-slider-gumb:disabled {
        opacity: .24;
        cursor: default;
    }

    .katalog-slider-gumb:not(:disabled):active {
        opacity: .45;
        transform: none;
    }
}


/* ============================================================
   V7.9.48 - DETALJ PROIZVODA: AKCIJA PO VARIJANTI
   - šifra varijante ispod veličine
   - popust u %
   - redovna cijena precrtana samo kod akcijske varijante
   - krajnja cijena jasno istaknuta
   ============================================================ */

.oznaka-akcija-detalj {
    position: static;
    flex: 0 0 auto;
    margin-top: 6px;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: #b3262e;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
}

.detalj-cijena {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.varijanta-forma .varijanta-gumb {
    grid-template-columns:
        minmax(170px, 1fr)
        76px
        120px
        140px;
    gap: 12px;
}

.varijanta-lijevo {
    min-width: 0;
    text-align: left;
}

.varijanta-sifra {
    margin-top: 4px;
    color: #777777;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.varijanta-popust {
    color: #b3262e;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.varijanta-bez-popusta {
    color: #aaaaaa;
    font-weight: 400;
}

.varijanta-cijena {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 120px;
    text-align: right;
}

.varijanta-cijena-redovna {
    color: #555555;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
}

.varijanta-cijena-krajnja {
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.varijanta-cijena-akcija .varijanta-cijena-krajnja {
    color: #b3262e;
}

@media (max-width: 760px) {
    .varijanta-forma .varijanta-gumb {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "lijevo cijena"
            "popust stanje";
        gap: 7px 12px;
        padding: 13px 0;
    }

    .varijanta-lijevo {
        grid-area: lijevo;
    }

    .varijanta-popust {
        grid-area: popust;
        text-align: left;
    }

    .varijanta-cijena {
        grid-area: cijena;
        width: auto;
        min-width: 88px;
    }

    .varijanta-stanje {
        grid-area: stanje;
        width: auto;
        min-width: 100px;
        text-align: right;
    }
}

@media (max-width: 500px) {
    .varijanta-sifra {
        font-size: 10px;
    }

    .varijanta-popust {
        font-size: 12px;
    }

    .varijanta-cijena-krajnja {
        font-size: 13px;
    }

    .varijanta-cijena-redovna {
        font-size: 10px;
    }

    .varijanta-stanje {
        font-size: 10px;
    }
}

/* ============================================================
   V7.9.49 - KOŠARA: KRAJNJA WEB CIJENA I AKCIJA PO VARIJANTI
   - košara koristi već izračunatu krajnju cijenu varijante
   - redovna cijena je precrtana samo kod stvarne akcije
   - AKCIJA i krajnja cijena koriste isti mirni crveni ton kao katalog
   ============================================================ */

.kosara-stavka-naziv {
    font-weight: 500;
}

.kosara-stavka-desno {
    min-width: 150px;
}

.kosara-akcija-oznaka {
    margin-bottom: 7px;
    color: #b3262e;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    white-space: nowrap;
}

.kosara-cijene {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 4px 9px;
}

.kosara-cijena-redovna {
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration-line: line-through;
    text-decoration-color: #1d1d1f;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

.kosara-cijena-krajnja {
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.kosara-cijena-krajnja-akcija {
    color: #b3262e;
}

.kosara-stavka-ukupno {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    margin-top: 9px;
    color: #777777;
    font-size: 11px;
}

.kosara-stavka-ukupno strong {
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.kosara-obrisi {
    margin-top: 12px;
    font-size: 11px;
}

@media (max-width: 760px) {
    .kosara-stavka-desno {
        min-width: 0;
    }

    .kosara-cijene {
        justify-content: flex-start;
    }

    .kosara-cijena-krajnja {
        font-size: 14px;
    }

    .kosara-stavka-ukupno {
        justify-content: flex-start;
    }

    .kosara-stavka-ukupno strong {
        font-size: 14px;
    }

    .kosara-akcija-oznaka {
        font-size: 9px;
    }
}


/* ============================================================
   V7.9.50 - KOŠARA: PRVI DODANI PROIZVOD
   Desktop badge uvijek postoji u DOM-u kako bi ga HTMX mogao
   ažurirati već kod prvog dodavanja. Kod vrijednosti 0 je skriven.
   ============================================================ */

.zaglavlje-badge.nema-broja {
    display: none;
}


/* ============================================================
   V7.9.51 - MOBILNI HEADER + TOAST 2 SEKUNDE
   - u vrhu mobitela ostaju vidljivi Profil i Košara
   - stalna obavijest na stranici ostaje dok je backend prikazuje
   - samo fiksna toast/notifikacija nestaje nakon 2 sekunde
   ============================================================ */

@media (max-width: 760px) {
    .zaglavlje-red {
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .logo {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 17px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .zaglavlje-akcije {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 8px;
        margin-left: auto;
    }

    /* Na uskom vrhu ostavljamo samo Profil i Košaru. */
    .zaglavlje-akcije > a.zaglavlje-ikona-link:not(.kosara-zaglavlje-link) {
        display: none;
    }

    .kupac-dropdown {
        display: block;
        flex: 0 0 auto;
    }

    .kupac-dropdown-summary {
        min-width: 34px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .kupac-ime,
    .kupac-strelica,
    .zaglavlje-ikona-tekst {
        display: none !important;
    }

    .kupac-ikona,
    .kosara-zaglavlje-link svg {
        width: 22px;
        height: 22px;
    }

    .kosara-zaglavlje-link {
        min-width: 36px;
        min-height: 38px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .kosara-zaglavlje-link .zaglavlje-badge {
        top: 0;
        right: -2px;
    }

    .kupac-dropdown-panel {
        right: -44px;
    }
}

@media (max-width: 390px) {
    .logo {
        font-size: 16px;
        letter-spacing: .7px;
    }

    .zaglavlje-akcije {
        gap: 5px;
    }
}


/* ============================================================
   V7.9.52 - STABILAN BADGE KOŠARE + POSEBAN MOBILNI HEADER
   ============================================================ */

.mobilni-zaglavlje-akcije {
    display: none;
}

@media (max-width: 760px) {

    .zaglavlje-red {
        min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
    }

    /*
     * Desktop navigaciju ne pokušavamo više prilagođavati
     * mobilnom prikazu. Mobilni header ima vlastite kontrole.
     */
    .zaglavlje-red > .zaglavlje-akcije {
        display: none !important;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 17px;
        letter-spacing: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobilni-zaglavlje-akcije {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }

    .mobilni-top-prijava {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 3px;
        color: #171717;
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobilni-top-ikona {
        position: relative;
        box-sizing: border-box;
        width: 38px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: #171717;
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }

    .mobilni-top-ikona::-webkit-details-marker {
        display: none;
    }

    .mobilni-top-ikona svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobilni-top-kupac {
        position: relative;
    }

    .mobilni-top-kupac > summary {
        list-style: none;
    }

    .mobilni-top-kupac > summary::-webkit-details-marker {
        display: none;
    }

    .mobilni-top-kupac-panel {
        position: absolute;
        top: calc(100% + 7px);
        right: -46px;
        z-index: 2100;
        width: 190px;
        overflow: hidden;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    }

    .mobilni-top-kupac-panel a,
    .mobilni-top-kupac-panel button {
        box-sizing: border-box;
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 13px;
        border: 0;
        background: #ffffff;
        color: #222222;
        font: inherit;
        font-size: 13px;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
    }

    .mobilni-top-kupac-panel form {
        margin: 0;
        border-top: 1px solid #eeeeee;
    }

    .mobilni-top-kosara .zaglavlje-badge {
        top: 0;
        right: -1px;
    }
}

@media (max-width: 390px) {
    .logo {
        font-size: 16px;
        letter-spacing: .6px;
    }

    .mobilni-zaglavlje-akcije {
        gap: 4px;
    }

    .mobilni-top-ikona {
        width: 35px;
    }
}


/* ============================================================
   V7.9.80 - LOGOTIPI UPIM I BLUKIDS U ZAGLAVLJU
   ============================================================ */

.zaglavlje-identitet {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.zaglavlje-identitet .logo {
    flex: 0 1 auto;
    min-width: 0;
}

.zaglavlje-brand-razdjelnik {
    width: 1px;
    height: 30px;
    flex: 0 0 1px;
    background: currentColor;
    opacity: .22;
}

.zaglavlje-brand-logo {
    height: 34px;
    min-width: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 3px;
}

.zaglavlje-brand-logo img {
    width: auto;
    height: 34px;
    display: block;
    object-fit: contain;
}

@media (max-width: 760px) {
    .zaglavlje-identitet {
        flex: 1 1 auto;
        gap: 7px;
        overflow: hidden;
    }

    .zaglavlje-identitet .logo {
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zaglavlje-brand-razdjelnik {
        height: 24px;
    }

    .zaglavlje-brand-logo,
    .zaglavlje-brand-logo img {
        height: 24px;
    }

    .zaglavlje-brand-logo {
        min-width: 38px;
    }
}

@media (max-width: 420px) {
    .zaglavlje-identitet {
        gap: 5px;
    }

    .zaglavlje-identitet .logo {
        font-size: 13px;
        letter-spacing: .35px;
    }

    .zaglavlje-brand-razdjelnik {
        height: 20px;
    }

    .zaglavlje-brand-logo,
    .zaglavlje-brand-logo img {
        height: 20px;
    }

    .zaglavlje-brand-logo {
        min-width: 32px;
    }
}


/* ============================================================
   V7.9.53 - MOJ PROFIL
   ============================================================ */

.profil-stranica {
    padding: 38px 0 72px;
}

.profil-zaglavlje {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7e7e7;
}

.profil-eyebrow {
    margin: 0 0 8px;
    color: #777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.profil-zaglavlje h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
}

.profil-zaglavlje p:not(.profil-eyebrow) {
    margin: 8px 0 0;
    color: #6d6d6d;
    font-size: 13px;
}

.profil-brzi-linkovi {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    white-space: nowrap;
}

.profil-brzi-linkovi a {
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
}

.profil-brzi-linkovi a:hover,
.profil-brzi-linkovi a.aktivan {
    border-color: #171717;
}

.profil-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.profil-sažetak {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
    border: 1px solid #e5e5e5;
    background: #fff;
}

.profil-sažetak strong {
    margin-top: 4px;
    font-size: 15px;
}

.profil-sažetak span {
    overflow-wrap: anywhere;
    color: #737373;
    font-size: 12px;
    line-height: 1.45;
}

.profil-sažetak a {
    font-size: 13px;
}

.profil-sažetak a:hover {
    text-decoration: underline;
}

.profil-inicijali {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f1f2f4;
    color: #333;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.profil-sažetak-crta {
    height: 1px;
    margin: 10px 0;
    background: #e7e7e7;
}

.profil-glavno {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profil-kartica {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e5e5e5;
    background: #fff;
    scroll-margin-top: 94px;
}

.profil-kartica-zaglavlje {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.profil-kartica-zaglavlje h2 {
    margin: 0;
    font-size: 20px;
}

.profil-kartica-zaglavlje p {
    max-width: 680px;
    margin: 6px 0 0;
    color: #737373;
    font-size: 12px;
    line-height: 1.5;
}

.profil-forma {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profil-forma-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profil-forma label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profil-forma label > span {
    color: #404040;
    font-size: 12px;
    font-weight: 700;
}

.profil-forma input,
.profil-forma select {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0 12px;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #1d1d1f;
    font: inherit;
    font-size: 13px;
}

.profil-forma input:focus,
.profil-forma select:focus {
    border-color: #5f5f5f;
}

.profil-forma input[readonly] {
    background: #f7f7f7;
    color: #666;
}

.profil-forma small {
    color: #858585;
    font-size: 10px;
    line-height: 1.4;
}

.profil-cijeli-red {
    grid-column: 1 / -1;
}

.profil-forma-akcije {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.profil-gumb {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #1d1d1f;
    background: #fff;
    color: #1d1d1f;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.profil-gumb:hover {
    background: #f5f5f5;
}

.profil-gumb-primarni {
    background: #1d1d1f;
    color: #fff;
}

.profil-gumb-primarni:hover {
    background: #3a3a3c;
}

.profil-gumb-sekundarni {
    background: #fff;
}

.profil-gumb-opasnost {
    border-color: #b52d32;
    background: #fff;
    color: #a72329;
}

.profil-gumb-opasnost:hover {
    background: #fff4f4;
}

.profil-dodaj-adresu {
    min-width: 190px;
}

.profil-dodaj-adresu > summary,
.profil-adresa-uredi > summary,
.profil-adresa-ukloni > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.profil-dodaj-adresu > summary::-webkit-details-marker,
.profil-adresa-uredi > summary::-webkit-details-marker,
.profil-adresa-ukloni > summary::-webkit-details-marker {
    display: none;
}

.profil-dodaj-adresu > summary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #1d1d1f;
    font-size: 12px;
    font-weight: 750;
}

.profil-dodaj-adresu[open] {
    width: 100%;
    margin-top: 4px;
}

.profil-dodaj-adresu[open] > summary {
    margin-left: auto;
}

.profil-dodaj-adresu .profil-adresa-forma {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #e4e4e4;
    background: #fafafa;
}

.profil-kartica-zaglavlje-adrese:has(.profil-dodaj-adresu[open]) {
    flex-wrap: wrap;
}

.profil-check-red {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.profil-check-red label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.profil-check-red input {
    width: 16px;
    height: 16px;
}

.profil-info {
    margin: 0;
    padding: 10px 12px;
    background: #f5f6f7;
    color: #626262;
    font-size: 11px;
    line-height: 1.45;
}

.profil-adrese-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profil-adresa-kartica {
    min-width: 0;
    padding: 18px;
    border: 1px solid #dedede;
    background: #fff;
}

.profil-adresa-vrh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.profil-adresa-vrh h3 {
    margin: 0;
    font-size: 15px;
}

.profil-adresa-oznake {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.profil-adresa-oznake span {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    background: #f1f4f8;
    color: #43546a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.profil-adresa-podaci {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 18px;
    color: #646464;
    font-size: 12px;
    line-height: 1.45;
}

.profil-adresa-podaci strong {
    margin-bottom: 3px;
    color: #232323;
}

.profil-adresa-akcije {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.profil-adresa-akcije form {
    margin: 0;
}

.profil-link-gumb {
    padding: 0;
    border: 0;
    background: transparent;
    color: #3e5f85;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.profil-link-gumb:hover {
    text-decoration: underline;
}

.profil-adresa-uredi,
.profil-adresa-ukloni {
    margin-top: 13px;
}

.profil-adresa-uredi > summary,
.profil-adresa-ukloni > summary {
    display: inline-block;
    color: #555;
    font-size: 11px;
    font-weight: 700;
}

.profil-adresa-uredi > summary:hover {
    text-decoration: underline;
}

.profil-adresa-ukloni > summary {
    color: #a72329;
}

.profil-adresa-uredi .profil-forma {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.profil-ukloni-potvrda {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #f0d0d2;
    background: #fff8f8;
}

.profil-ukloni-potvrda p {
    margin: 0 0 10px;
    color: #7d4447;
    font-size: 11px;
}

.profil-prazne-adrese {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 24px;
    border: 1px dashed #d5d5d5;
    color: #6d6d6d;
    font-size: 12px;
}

.profil-prazne-adrese strong {
    color: #2c2c2c;
    font-size: 13px;
}

@media (max-width: 900px) {
    .profil-layout {
        grid-template-columns: 1fr;
    }

    .profil-sažetak {
        position: static;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        align-items: center;
    }

    .profil-sažetak strong,
    .profil-sažetak span,
    .profil-sažetak-crta,
    .profil-sažetak a {
        grid-column: 2;
    }

    .profil-inicijali {
        grid-row: 1 / span 3;
        grid-column: 1;
    }

    .profil-sažetak-crta,
    .profil-sažetak a {
        display: none;
    }
}

@media (max-width: 760px) {
    .profil-stranica {
        padding: 24px 0 86px;
    }

    .profil-zaglavlje {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .profil-zaglavlje h1 {
        font-size: 27px;
    }

    .profil-brzi-linkovi {
        width: 100%;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .profil-kartica {
        padding: 18px 14px;
    }

    .profil-kartica-zaglavlje,
    .profil-kartica-zaglavlje-adrese {
        flex-direction: column;
        align-items: stretch;
    }

    .profil-dodaj-adresu {
        width: 100%;
    }

    .profil-dodaj-adresu > summary {
        width: 100%;
    }

    .profil-dodaj-adresu[open] > summary {
        margin-left: 0;
    }

    .profil-dodaj-adresu .profil-adresa-forma {
        padding: 14px 12px;
    }

    .profil-forma-grid {
        grid-template-columns: 1fr;
    }

    .profil-cijeli-red {
        grid-column: auto;
    }

    .profil-adrese-grid {
        grid-template-columns: 1fr;
    }

    .profil-forma-akcije .profil-gumb {
        width: 100%;
    }

    .profil-check-red {
        flex-direction: column;
        gap: 9px;
    }
}


/* ============================================================
   V7.9.54 - ZAJEDNIČKA NAVIGACIJA KORISNIČKOG RAČUNA
   ============================================================ */

.racun-navigacija {
    background:
        linear-gradient(
            180deg,
            #fafafa 0%,
            #ffffff 100%
        );
    border-bottom: 1px solid #e8e8e8;
}

.racun-navigacija-unutra {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.racun-navigacija-naslov {
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.racun-navigacija-naslov span {
    color: #8a8a8a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.25px;
}

.racun-navigacija-naslov strong {
    color: #202020;
    font-size: 15px;
    font-weight: 700;
}

.racun-navigacija-linkovi {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
}

.racun-navigacija-linkovi > a {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid transparent;
    color: #666;
    font-size: 12px;
    font-weight: 650;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.racun-navigacija-linkovi > a:hover {
    border-color: #dedede;
    background: #fff;
    color: #202020;
}

.racun-navigacija-linkovi > a.aktivan {
    border-color: #d9d9d9;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .035);
}

.racun-navigacija-linkovi > a.aktivan::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: #171717;
}

.racun-navigacija-linkovi svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.racun-navigacija-broj {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #f0f0f0;
    color: #333;
    font-size: 9px;
    font-weight: 800;
}

.racun-navigacija-linkovi > a.aktivan .racun-navigacija-broj {
    background: #1d1d1f;
    color: #fff;
}

.profil-zaglavlje-jednostavno {
    align-items: flex-start;
}

@media (max-width: 760px) {
    .racun-navigacija {
        overflow: hidden;
    }

    .racun-navigacija-unutra {
        min-height: auto;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px 10px 12px;
    }

    .racun-navigacija-naslov {
        padding: 0 4px;
    }

    .racun-navigacija-linkovi {
        width: 100%;
        justify-content: stretch;
        gap: 5px;
    }

    .racun-navigacija-linkovi > a {
        min-width: 0;
        flex: 1 1 0;
        min-height: 54px;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        padding: 7px 4px;
        border-color: #e5e5e5;
        background: #fff;
        text-align: center;
        font-size: 10px;
        line-height: 1.15;
    }

    .racun-navigacija-linkovi > a.aktivan {
        border-color: #cfcfcf;
    }

    .racun-navigacija-linkovi > a.aktivan::after {
        left: 8px;
        right: 8px;
    }

    .racun-navigacija-linkovi svg {
        width: 18px;
        height: 18px;
    }

    .racun-navigacija-broj {
        position: absolute;
        top: 4px;
        right: 7px;
        min-width: 17px;
        height: 17px;
        font-size: 8px;
    }

    .profil-zaglavlje {
        margin-bottom: 20px;
    }
}


/* ============================================================
   V7.9.55 - MOJ RAČUN: NAVIGACIJA KAO KARTICE STRANICA
   ============================================================ */

.racun-navigacija {
    padding: 22px 0;
    background: #f7f7f7;
    border-bottom: 1px solid #e6e6e6;
}

.racun-navigacija-unutra {
    min-height: 0;
    display: block;
}

.racun-navigacija-naslov {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 13px;
}

.racun-navigacija-naslov span {
    color: #777;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.racun-navigacija-naslov strong {
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

.racun-navigacija-linkovi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.racun-navigacija-linkovi > a {
    position: relative;
    min-width: 0;
    min-height: 78px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #dedede;
    background: #fff;
    color: #363636;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

.racun-navigacija-linkovi > a:hover {
    transform: translateY(-1px);
    border-color: #bfbfbf;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .045);
}

.racun-navigacija-linkovi > a.aktivan {
    border-color: #222;
    background: #222;
    color: #fff;
    box-shadow: none;
}

.racun-navigacija-linkovi > a.aktivan::after {
    display: none;
}

.racun-nav-ikona {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e1e1;
    background: #fafafa;
    color: #333;
}

.racun-navigacija-linkovi > a.aktivan .racun-nav-ikona {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.racun-nav-ikona svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.racun-nav-tekst {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.racun-nav-tekst strong {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.racun-nav-tekst small {
    overflow: hidden;
    color: #858585;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.racun-navigacija-linkovi > a.aktivan .racun-nav-tekst small {
    color: #cfcfcf;
}

.racun-nav-strelica {
    color: #999;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}

.racun-navigacija-linkovi > a.aktivan .racun-nav-strelica {
    color: #fff;
}

.racun-navigacija-broj {
    min-width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #ededed;
    color: #333;
    font-size: 9px;
    font-weight: 800;
}

.racun-navigacija-linkovi > a.aktivan .racun-navigacija-broj {
    background: #fff;
    color: #222;
}

@media (max-width: 760px) {
    .racun-navigacija {
        padding: 12px 0 10px;
        background: #fafafa;
    }

    .racun-navigacija-unutra {
        width: min(100% - 20px, 1400px);
        padding: 0;
    }

    .racun-navigacija-naslov {
        margin-bottom: 9px;
        padding: 0 1px;
    }

    .racun-navigacija-naslov strong {
        display: none;
    }

    .racun-navigacija-linkovi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .racun-navigacija-linkovi > a {
        min-height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 8px 4px;
        text-align: center;
    }

    .racun-nav-ikona {
        width: 29px;
        height: 29px;
        border: 0;
        background: transparent;
    }

    .racun-navigacija-linkovi > a.aktivan .racun-nav-ikona {
        border: 0;
        background: transparent;
    }

    .racun-nav-ikona svg {
        width: 18px;
        height: 18px;
    }

    .racun-nav-tekst {
        display: block;
        width: 100%;
    }

    .racun-nav-tekst strong {
        display: block;
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
    }

    .racun-nav-tekst small,
    .racun-nav-strelica {
        display: none;
    }

    .racun-navigacija-broj {
        position: absolute;
        top: 5px;
        right: 6px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 8px;
    }
}


/* ============================================================
   V7.9.56 - MOJ RAČUN: DISKRETNA BOJA U FORMAMA
   ============================================================ */

.profil-stranica {
    --profil-plava: #315f86;
    --profil-plava-tamna: #244763;
    --profil-plava-svijetla: #eef5fa;
    --profil-plava-border: #bfd2e1;
    --profil-zelena-svijetla: #eef7f1;
    --profil-zelena: #467158;
}

/* Lagano odvajanje kartica od bijele pozadine */
.profil-kartica {
    border-color: #dfe6eb;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdfe 100%
        );
    box-shadow: 0 3px 16px rgba(39, 74, 101, .035);
}

.profil-kartica-zaglavlje h2 {
    color: #263f52;
}

.profil-eyebrow {
    color: var(--profil-plava);
}

/* Polja */
.profil-forma input,
.profil-forma select {
    border-color: #ced9e2;
    background: #fbfdff;
}

.profil-forma input:hover,
.profil-forma select:hover {
    border-color: #aebfcb;
}

.profil-forma input:focus,
.profil-forma select:focus {
    border-color: var(--profil-plava);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(49, 95, 134, .09);
}

.profil-forma input[readonly] {
    border-color: #dde3e8;
    background: #f4f6f8;
    color: #6d7378;
}

.profil-forma label > span {
    color: #334b5e;
}

/* Primarni gumb */
.profil-gumb-primarni {
    border-color: var(--profil-plava);
    background: var(--profil-plava);
}

.profil-gumb-primarni:hover {
    border-color: var(--profil-plava-tamna);
    background: var(--profil-plava-tamna);
}

/* Sekundarni gumb */
.profil-gumb-sekundarni {
    border-color: var(--profil-plava-border);
    color: var(--profil-plava-tamna);
    background: #ffffff;
}

.profil-gumb-sekundarni:hover {
    background: var(--profil-plava-svijetla);
}

/* Dodaj adresu */
.profil-dodaj-adresu > summary {
    border-color: var(--profil-plava);
    color: var(--profil-plava-tamna);
    background: var(--profil-plava-svijetla);
}

.profil-dodaj-adresu > summary:hover {
    background: #e3eff7;
}

.profil-dodaj-adresu .profil-adresa-forma {
    border-color: #d6e3ec;
    background: #f7fbfe;
}

/* Informacija */
.profil-info {
    border-left: 3px solid var(--profil-plava);
    background: var(--profil-plava-svijetla);
    color: #456172;
}

/* Kartice adresa */
.profil-adresa-kartica {
    border-color: #dce5eb;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}

.profil-adresa-kartica:hover {
    border-color: #c2d3df;
}

.profil-adresa-oznake span {
    background: var(--profil-zelena-svijetla);
    color: var(--profil-zelena);
}

.profil-link-gumb {
    color: var(--profil-plava);
}

.profil-adresa-uredi > summary {
    color: var(--profil-plava);
}

/* Lijevi sažetak */
.profil-sažetak {
    border-color: #dbe4ea;
    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #ffffff 100%
        );
}

.profil-inicijali {
    background: var(--profil-plava-svijetla);
    color: var(--profil-plava-tamna);
    border: 1px solid var(--profil-plava-border);
}

/* Malo boje i u zajedničkoj navigaciji Moj račun */
.racun-navigacija {
    background:
        linear-gradient(
            180deg,
            #f5f8fa 0%,
            #fafafa 100%
        );
}

.racun-navigacija-linkovi > a {
    border-color: #d9e2e8;
}

.racun-navigacija-linkovi > a:hover {
    border-color: #aebfcb;
}

.racun-navigacija-linkovi > a.aktivan {
    border-color: #315f86;
    background: #315f86;
}

.racun-navigacija-linkovi > a.aktivan .racun-nav-ikona {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .10);
}

@media (max-width: 760px) {
    .profil-kartica {
        box-shadow: none;
    }

    .racun-navigacija-linkovi > a.aktivan {
        background: #315f86;
    }
}


/* ============================================================
   V7.9.57 - MOBILNI HEADER: LISTA ŽELJA
   ============================================================ */

@media (max-width: 760px) {
    .mobilni-top-zelje .zaglavlje-badge {
        top: 0;
        right: -1px;
    }

    .mobilni-top-zelje:hover {
        color: #315f86;
    }
}


/* ============================================================
   V7.9.58 - MOJ PROFIL: NASTAVI KUPOVINU
   ============================================================ */

.profil-zaglavlje-jednostavno {
    align-items: flex-end;
}

.profil-nastavi-kupovinu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #bfd2e1;
    background: #eef5fa;
    color: #315f86;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.profil-nastavi-kupovinu:hover {
    border-color: #315f86;
    background: #e3eff7;
    color: #244763;
}

.profil-nastavi-kupovinu span {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 760px) {
    .profil-zaglavlje-jednostavno {
        align-items: stretch;
    }

    .profil-nastavi-kupovinu {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   V7.9.59 - MOJ RAČUN: NASTAVI KUPOVINU
   ============================================================ */

.naslov-sekcije-sa-akcijom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.racun-nastavi-kupovinu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid #267242;
    border-radius: 3px;
    background: #2f8450;
    color: #fff;
    box-shadow: 0 3px 10px rgba(47, 132, 80, .18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    transition:
        transform 140ms ease,
        background 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

.racun-nastavi-kupovinu:hover {
    transform: translateY(-1px);
    border-color: #1f6037;
    background: #276f44;
    color: #fff;
    box-shadow: 0 5px 14px rgba(47, 132, 80, .24);
}

.racun-nastavi-kupovinu span {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 760px) {
    .naslov-sekcije-sa-akcijom {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .racun-nastavi-kupovinu {
        width: 100%;
    }
}


/* ============================================================
   V7.9.60 - NAŠE TRGOVINE
   ============================================================ */

.trgovine-stranica {
    padding-top: 48px;
    padding-bottom: 64px;
}

.trgovine-uvod {
    max-width: 720px;
    margin-bottom: 30px;
}

.trgovine-eyebrow,
.trgovina-grad {
    margin: 0 0 8px;
    color: #2f8450;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.trgovine-uvod h1 {
    margin: 0 0 12px;
    color: #202020;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
}

.trgovine-uvod > p:last-child {
    margin: 0;
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.trgovine-mreza {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.trgovina-kartica {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #dfe6e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(24, 56, 36, .06);
}

.trgovina-ikona {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #edf7f0;
    color: #2f8450;
}

.trgovina-ikona svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.trgovina-sadrzaj {
    flex: 1;
}

.trgovina-sadrzaj h2 {
    margin: 0 0 16px;
    color: #202020;
    font-size: 21px;
    line-height: 1.25;
}

.trgovina-sadrzaj address {
    margin-bottom: 14px;
    color: #666;
    font-size: 14px;
    font-style: normal;
    line-height: 1.6;
}

.trgovina-telefon {
    display: inline-block;
    margin-bottom: 18px;
    color: #202020;
    font-size: 15px;
    font-weight: 750;
}

.trgovina-telefon:hover {
    color: #2f8450;
}

.trgovina-radno-vrijeme {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 18px;
}

.trgovina-radno-vrijeme span {
    color: #888;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.trgovina-radno-vrijeme strong {
    color: #444;
    font-size: 13px;
}

.trgovina-mapa-gumb {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #2f8450;
    border-radius: 3px;
    background: #2f8450;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.trgovina-mapa-gumb:hover {
    border-color: #276f44;
    background: #276f44;
    color: #fff;
}

.podnozje-unutra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.podnozje-unutra nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.podnozje-unutra a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .trgovine-mreza {
        grid-template-columns: 1fr;
    }

    .trgovina-kartica {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .trgovine-stranica {
        padding-top: 32px;
        padding-bottom: 40px;
    }

    .trgovina-kartica {
        padding: 20px;
    }

    .podnozje-unutra {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Obavijesti su četvrti dio navigacije Moj račun. */
.racun-navigacija-linkovi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .racun-navigacija-linkovi {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .mobilni-zaglavlje-akcije {
        gap: 2px;
    }

    .mobilni-top-ikona {
        width: 33px;
    }
}


/* ============================================================
   V7.10.5 - PRIVOLA ZA KOLAČIĆE
   ============================================================ */

.podnozje-link-gumb {
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.privola-banner {
    position: fixed;
    right: 18px;
    bottom: 18px;
    left: 18px;
    z-index: 3000;
    margin: auto;
    max-width: 1180px;
    padding: 18px 20px;
    border: 1px solid #d8ddd9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
}

.privola-banner-sadrzaj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.privola-banner strong {
    display: block;
    margin-bottom: 5px;
    color: #202020;
    font-size: 15px;
}

.privola-banner p {
    max-width: 660px;
    margin: 0;
    color: #626262;
    font-size: 12px;
    line-height: 1.55;
}

.privola-banner-akcije {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.privola-banner-akcije form {
    margin: 0;
}

.privola-gumb {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 3px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.privola-gumb-primarni {
    border: 1px solid #267242;
    background: #2f8450;
    color: #fff;
}

.privola-gumb-primarni:hover {
    border-color: #1f6037;
    background: #276f44;
}

.privola-gumb-sekundarni {
    border: 1px solid #c9c9c9;
    background: #fff;
    color: #333;
}

.privola-gumb-sekundarni:hover {
    border-color: #777;
    background: #f7f7f7;
}

.privola-dijalog {
    width: min(92vw, 570px);
    max-height: min(88vh, 720px);
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #262626;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
}

.privola-dijalog::backdrop {
    background: rgba(10, 10, 10, .55);
}

.privola-dijalog-vrh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 15px;
    border-bottom: 1px solid #ececec;
}

.privola-dijalog-vrh span {
    color: #2f8450;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.privola-dijalog-vrh h2 {
    margin: 5px 0 0;
    font-size: 23px;
    line-height: 1.2;
}

.privola-zatvori {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 50%;
    background: #fff;
    color: #333;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.privola-uvod {
    margin: 0;
    padding: 17px 24px 8px;
    color: #626262;
    font-size: 12px;
    line-height: 1.6;
}

.privola-dijalog > form {
    padding: 8px 24px 24px;
}

.privola-opcija {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    padding: 14px 15px;
    border: 1px solid #dfdfdf;
    border-radius: 7px;
    cursor: pointer;
}

.privola-opcija-nuzna {
    background: #f6f7f6;
    cursor: default;
}

.privola-opcija span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.privola-opcija strong {
    color: #282828;
    font-size: 13px;
}

.privola-opcija small {
    color: #737373;
    font-size: 10px;
    line-height: 1.45;
}

.privola-opcija input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: #2f8450;
}

.privola-spremi {
    width: 100%;
    margin-top: 16px;
}

@media (max-width: 760px) {
    .privola-banner {
        right: 10px;
        bottom: 78px;
        left: 10px;
        padding: 15px;
    }

    .privola-banner-sadrzaj {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .privola-banner-akcije {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .privola-banner-akcije form:last-child {
        grid-column: 1 / -1;
    }

    .privola-banner-akcije form,
    .privola-banner-akcije .privola-gumb {
        width: 100%;
    }

    .privola-dijalog-vrh {
        padding: 19px 18px 14px;
    }

    .privola-uvod {
        padding: 15px 18px 7px;
    }

    .privola-dijalog > form {
        padding: 7px 18px 20px;
    }
}


/* ============================================================
   V7.9.81 - KOŠARA: KARTICE I SAŽETAK U DVIJE KOLONE
   Vizual prati jasni raspored Mališić Shop košarice, dok postojeći
   obrasci, rute, obračun cijena i provjera zalihe ostaju nepromijenjeni.
   ============================================================ */

.kosara-okvir {
    width: 100%;
    max-width: none;
    background: #f7f8fa;
}

.kosara-stranica {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 44px 0 72px;
}

.kosara-vrh {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.kosara-vrh h1 {
    margin: 0;
    color: #18191b;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

.kosara-povratak-link,
.kosara-sazetak-povratak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #42464d;
    font-size: 13px;
    font-weight: 600;
    transition: color 140ms ease, transform 140ms ease;
}

.kosara-povratak-link:hover,
.kosara-sazetak-povratak:hover {
    color: #a91f28;
}

.kosara-povratak-link:hover {
    transform: translateX(-2px);
}

.kosara-povratak-link span,
.kosara-sazetak-povratak span {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.kosara-broj-stavki {
    margin: 0 0 25px;
    color: #686d74;
    font-size: 14px;
}

.kosara-raspored {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: 28px;
    align-items: start;
}

.kosara-stavke,
.kosara-sazetak,
.kosara-prazna {
    border: 1px solid #e2e4e8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(19, 28, 38, .055);
}

.kosara-stavke {
    overflow: hidden;
}

.kosara-stavka {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 205px;
    gap: 24px;
    align-items: center;
    padding: 26px;
    border: 0;
    border-bottom: 1px solid #eceef1;
}

.kosara-stavka:last-child {
    border-bottom: 0;
}

.kosara-stavka-slika {
    overflow: hidden;
    border-radius: 10px;
    background: #f2f3f4;
}

.kosara-stavka-slika img,
.kosara-slika-nedostaje {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.kosara-slika-nedostaje {
    display: block;
    background: linear-gradient(145deg, #f4f4f4, #e8eaec);
}

.kosara-stavka-podaci {
    align-self: center;
}

.kosara-stavka-naziv {
    display: inline-block;
    margin: 0 0 9px;
    color: #18191b;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.kosara-stavka-naziv:hover {
    color: #a91f28;
}

.kosara-stavka-detalji {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #73777e;
    font-size: 12px;
    line-height: 1.45;
}

.kosara-stanje {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 5px 9px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.kosara-stanje-dostupno {
    border-color: #53a871;
    background: #f3fbf5;
    color: #277443;
}

.kosara-stanje-nedostupno {
    border-color: #d98d92;
    background: #fff5f5;
    color: #a3262e;
}

.kosara-stavka-desno {
    min-width: 0;
    text-align: right;
}

.kosara-cijene {
    justify-content: flex-end;
}

.kosara-cijena-krajnja {
    font-size: 17px;
    font-weight: 700;
}

.kosara-jedinicna-cijena {
    margin-top: 5px;
    color: #747980;
    font-size: 11px;
}

.kosara-kolicina {
    justify-content: flex-end;
    gap: 0;
    margin-top: 14px;
}

.kosara-kolicina form {
    display: flex;
}

.kosara-kolicina-gumb {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dfe1e5;
    border-radius: 9px;
    background: #fff;
    color: #202327;
    font-size: 20px;
    line-height: 1;
    transition: border-color 140ms ease, background 140ms ease;
}

.kosara-kolicina-gumb:hover:not(:disabled) {
    border-color: #a91f28;
    background: #fff7f7;
}

.kosara-kolicina-broj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    font-size: 14px;
    font-weight: 700;
}

.kosara-stavka-ukupno {
    margin-top: 13px;
    font-size: 11px;
}

.kosara-stavka-ukupno strong {
    font-size: 15px;
    font-weight: 700;
}

.kosara-ukloni-forma {
    display: flex;
    justify-content: flex-end;
}

.kosara-obrisi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #aa2931;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.kosara-obrisi:hover {
    color: #781920;
}

.kosara-obrisi svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.kosara-sazetak {
    position: sticky;
    top: 96px;
    padding: 26px 24px 22px;
}

.kosara-sazetak h2 {
    margin: 0 0 24px;
    color: #202226;
    font-size: 18px;
}

.kosara-sazetak-red {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 17px;
    color: #555a61;
    font-size: 13px;
    line-height: 1.45;
}

.kosara-sazetak-red strong {
    max-width: 190px;
    color: #202226;
    font-weight: 600;
    text-align: right;
}

.kosara-dostava-red strong {
    color: #666b72;
    font-size: 11px;
}

.kosara-sazetak-ukupno {
    align-items: center;
    margin: 22px 0 18px;
    padding-top: 18px;
    border-top: 1px solid #dfe1e4;
    color: #1d1f22;
    font-size: 17px;
    font-weight: 700;
}

.kosara-sazetak-ukupno strong {
    font-size: 18px;
    font-weight: 800;
}

.kosara-glavni-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 11px 18px;
    border: 1px solid #a91f28;
    border-radius: 9px;
    background: #b5232c;
    color: #fff;
    box-shadow: 0 5px 14px rgba(169, 31, 40, .17);
    font-size: 13px;
    font-weight: 700;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.kosara-glavni-gumb:hover {
    transform: translateY(-1px);
    background: #981b23;
    color: #fff;
    box-shadow: 0 7px 17px rgba(169, 31, 40, .22);
}

.kosara-sazetak-povratak {
    width: 100%;
    min-height: 45px;
    margin-top: 10px;
    border: 1px solid #dfe1e5;
    border-radius: 9px;
    background: #fff;
}

.kosara-sazetak-povratak:hover {
    border-color: #b9bdc3;
}

.kosara-sigurnost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 17px 0 0;
    color: #6f747b;
    font-size: 11px;
}

.kosara-sigurnost svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.kosara-nije-spremna {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #fff2e4;
    color: #8a4d12;
    font-size: 12px;
    line-height: 1.45;
}

.kosara-prazna {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 345px;
    padding: 44px 24px;
    color: #656a72;
    text-align: center;
}

.kosara-prazna-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #f1f2f4;
    color: #969ca5;
}

.kosara-prazna-ikona svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.kosara-prazna h2 {
    margin: 3px 0 8px;
    color: #23262a;
    font-size: 20px;
}

.kosara-prazna p {
    margin: 0 0 24px;
    font-size: 13px;
}

.kosara-prazna-gumb {
    width: auto;
    min-width: 175px;
}

@media (max-width: 980px) {
    .kosara-raspored {
        grid-template-columns: 1fr;
    }

    .kosara-sazetak {
        position: static;
    }
}

@media (max-width: 680px) {
    .kosara-stranica {
        width: min(100% - 24px, 1280px);
        padding: 26px 0 48px;
    }

    .kosara-vrh {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-bottom: 12px;
    }

    .kosara-vrh h1 {
        font-size: 30px;
    }

    .kosara-broj-stavki {
        margin-bottom: 18px;
    }

    .kosara-raspored {
        gap: 18px;
    }

    .kosara-stavka {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
        padding: 18px 15px;
    }

    .kosara-stavka-desno {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 14px;
        padding-top: 15px;
        border-top: 1px solid #eceef1;
        text-align: left;
    }

    .kosara-akcija-oznaka,
    .kosara-cijene,
    .kosara-jedinicna-cijena {
        grid-column: 1;
    }

    .kosara-cijene {
        justify-content: flex-start;
    }

    .kosara-kolicina {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        justify-content: flex-end;
        margin-top: 0;
    }

    .kosara-stavka-ukupno {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .kosara-ukloni-forma {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .kosara-sazetak {
        padding: 23px 19px 20px;
    }

    .kosara-sazetak-red {
        gap: 14px;
    }

    .kosara-prazna {
        min-height: 310px;
    }
}


/* ============================================================
   V7.9.82 - KOŠARA: VAŠ ODABIR I INFORMATIVNA TRAKA
   ============================================================ */

.kosara-vrh {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.kosara-oznaka {
    display: block;
    margin-bottom: 10px;
    color: #ad222a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .13em;
}

.kosara-obavijest-traka {
    margin-bottom: 18px;
    padding: 15px 17px;
    border-left: 4px solid #244f7c;
    border-radius: 2px;
    background: #e9f2fc;
    color: #244c73;
    font-size: 13px;
    line-height: 1.45;
}

.kosara-broj-stavki {
    margin: 0 0 2px;
    text-align: right;
}

.kosara-sazetak-povratak {
    border-color: #267242;
    background: #2f8450;
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 132, 80, .16);
}

.kosara-sazetak-povratak:hover {
    border-color: #1f6037;
    background: #276f44;
    color: #fff;
    box-shadow: 0 6px 15px rgba(47, 132, 80, .22);
}

@media (max-width: 680px) {
    .kosara-vrh {
        align-items: flex-end;
        flex-direction: row;
        margin-bottom: 20px;
    }

    .kosara-obavijest-traka {
        padding: 13px 14px;
    }

    .kosara-broj-stavki {
        text-align: left;
    }
}


/* ============================================================
   V7.9.83 - ZAVRŠETAK KUPOVINE: UJEDNAČENE KARTICE
   ============================================================ */

.checkout-okvir {
    padding-top: 42px;
    padding-bottom: 78px;
}

.checkout-zaglavlje {
    max-width: 900px;
    padding: 0;
}

.checkout-oznaka {
    display: block;
    margin-bottom: 12px;
    color: #ad222a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .13em;
}

.checkout-zaglavlje h1 {
    margin: 0 0 15px;
    color: #17191c;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.checkout-zaglavlje p {
    margin: 0;
    color: #676c73;
    font-size: 13px;
    line-height: 1.55;
}

.checkout-zaglavlje .checkout-prijavljeni {
    margin-top: 8px;
}

.checkout-prijavljeni strong {
    color: #30343a;
}

body[data-stranica="checkout"]
.shop-obavijest-slot:not(:has(.shop-obavijest)) {
    min-height: 30px;
    padding: 0;
}

body[data-stranica="checkout"] .shop-obavijest-slot {
    margin-top: 12px;
}

.checkout-mreza {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 28px;
}

.checkout-glavni {
    gap: 20px;
}

.checkout-kartica {
    gap: 18px;
    padding: 28px 26px;
    border: 1px solid #e1e3e6;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(19, 28, 38, .045);
}

.checkout-korak {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    background: #2f8450;
    box-shadow: 0 3px 8px rgba(47, 132, 80, .18);
    font-size: 14px;
}

.checkout-kartica h2,
.checkout-sazetak h2 {
    margin: 2px 0 18px;
    color: #202327;
    font-size: 19px;
    line-height: 1.25;
}

.checkout-pomoc,
.checkout-sigurnost,
.checkout-pravilo-dostave,
.checkout-info {
    color: #6f747b;
    font-size: 12px;
}

.checkout-pomoc {
    margin: -6px 0 20px;
}

.checkout-polja {
    gap: 15px 16px;
}

.checkout-polja label,
.checkout-pogodnost-polje label,
.checkout-bonitet-polje,
.checkout-napomena {
    gap: 7px;
    color: #35393e;
    font-size: 12px;
    font-weight: 600;
}

.checkout-polja input,
.checkout-polja select,
.checkout-pogodnost-polje input,
.checkout-pogodnost-polje select,
.checkout-bonitet-polje input,
.checkout-napomena textarea {
    min-height: 45px;
    padding: 10px 12px;
    border-color: #d9dce0;
    border-radius: 6px;
    outline: none;
    font-weight: 400;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.checkout-polja input:focus,
.checkout-polja select:focus,
.checkout-pogodnost-polje input:focus,
.checkout-pogodnost-polje select:focus,
.checkout-bonitet-polje input:focus,
.checkout-napomena textarea:focus {
    border-color: #2f8450;
    box-shadow: 0 0 0 3px rgba(47, 132, 80, .11);
}

.checkout-polja input:disabled,
.checkout-polja input:read-only {
    border-color: #e2e4e7;
    background: #f7f8f9;
}

.checkbox-red input,
.radio-kartica input {
    accent-color: #2f8450;
}

.checkout-ista-adresa {
    margin: 8px 0 20px;
    color: #33373c;
    font-size: 12px;
    font-weight: 600;
}

.checkout-pravilo-dostave {
    margin-top: 18px;
    padding: 12px 14px;
    border: 0;
    border-left: 3px solid #2f8450;
    border-radius: 3px;
    background: #f2f8f4;
    color: #42614d;
}

.checkout-pogodnosti,
.checkout-placanja {
    gap: 10px;
}

.radio-kartica {
    min-height: 52px;
    padding: 11px 13px;
    border-color: #dfe1e5;
    border-radius: 8px;
    color: #3e4248;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.radio-kartica:hover:not(.radio-kartica-onemogucena) {
    border-color: #9fbea9;
    background: #f8fbf9;
}

.radio-kartica:has(input:checked) {
    border-color: #2f8450;
    background: #f1f8f3;
    box-shadow: inset 0 0 0 1px #2f8450;
}

.checkout-pogodnost-polje {
    margin-top: 20px;
    padding-top: 18px;
    border-top-color: #e6e8ea;
}

.bonitet-stanje {
    border: 0;
    border-left: 3px solid #2f8450;
    border-radius: 3px;
    background: #f2f8f4;
    color: #365b43;
}

.checkout-info {
    padding: 12px 14px;
    border-radius: 6px;
    background: #f5f6f7;
}

.checkout-sazetak {
    border: 0;
    background: transparent;
}

.checkout-sazetak-unutra {
    padding: 27px 24px 23px;
    border: 1px solid #e1e3e6;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(19, 28, 38, .055);
}

.checkout-mini-stavke {
    gap: 13px;
    padding-bottom: 20px;
    border-bottom-color: #e4e6e8;
}

.checkout-mini-stavka {
    align-items: flex-start;
    font-size: 12px;
}

.checkout-mini-stavka strong {
    color: #272a2e;
    font-size: 12px;
    line-height: 1.4;
}

.checkout-mini-stavka > span {
    flex: 0 0 auto;
    margin-top: 0;
    color: #1f2226;
    font-weight: 700;
    white-space: nowrap;
}

.checkout-iznosi {
    gap: 12px;
    padding: 20px 0;
}

.checkout-iznosi > div {
    color: #555a61;
    font-size: 13px;
}

.checkout-iznosi strong {
    color: #22252a;
}

.checkout-umanjenje strong {
    color: #2f8450;
}

.checkout-ukupno {
    margin-top: 7px;
    padding-top: 17px;
    border-top-color: #dfe1e4;
    color: #1e2024 !important;
}

.checkout-ukupno strong {
    font-size: 18px;
}

.checkout-akcije {
    gap: 10px;
}

.checkout-forma .primarni-gumb,
.checkout-forma .sekundarni-gumb {
    min-height: 47px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
}

.checkout-forma .primarni-gumb {
    border-color: #267242;
    background: #2f8450;
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 132, 80, .16);
}

.checkout-forma .primarni-gumb:hover:not(:disabled) {
    border-color: #1f6037;
    background: #276f44;
}

.checkout-forma .sekundarni-gumb {
    border-color: #2f8450;
    background: #fff;
    color: #276f44;
}

.checkout-forma .sekundarni-gumb:hover:not(:disabled) {
    background: #f1f8f3;
}

.checkout-sigurnost {
    margin: 15px 0 0;
    color: #777c82;
    text-align: center;
}

.checkout-natrag-kosara {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 47px;
    margin-top: 13px;
    border: 1px solid #267242;
    border-radius: 7px;
    background: #2f8450;
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 132, 80, .16);
    font-size: 12px;
    font-weight: 700;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.checkout-natrag-kosara:hover {
    transform: translateY(-1px);
    border-color: #1f6037;
    background: #276f44;
    color: #fff;
    box-shadow: 0 6px 15px rgba(47, 132, 80, .22);
}

.checkout-natrag-kosara span {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 1000px) {
    .checkout-mreza {
        grid-template-columns: 1fr;
    }

    .checkout-sazetak {
        position: static;
    }
}

@media (max-width: 700px) {
    .checkout-okvir {
        padding-top: 27px;
        padding-bottom: 50px;
    }

    .checkout-zaglavlje h1 {
        font-size: 31px;
    }

    .checkout-kartica {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 12px;
        padding: 19px 16px;
    }

    .checkout-korak {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .checkout-kartica h2 {
        margin-top: 4px;
        font-size: 17px;
    }

    .checkout-polja {
        grid-template-columns: 1fr;
    }

    .checkout-sazetak-unutra {
        padding: 23px 18px 20px;
    }
}


/* ============================================================
   V7.9.84 - CHECKOUT: UVJETI I ZAVRŠNA POTVRDA
   ============================================================ */

.checkout-pomoc a {
    color: #2f8450;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.checkout-pomoc a:hover {
    color: #1f6037;
}

.checkout-uvjeti {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid #dfe1e4;
    border-radius: 7px;
    background: #f8f8f7;
    color: #4f545a;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}

.checkout-uvjeti input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #2f8450;
}

.checkout-uvjeti a {
    color: #a91f28;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.checkout-uvjeti a:hover {
    color: #761820;
}

/* Dodatna adresa je zatvorena dok kupac ne isključi opciju
   "Adresa dostave ista je kao adresa za račun". Ovo pravilo mora
   imati prednost pred grid prikazom checkout polja. */
[data-dostava-polja][hidden] {
    display: none !important;
}

.checkout-forma button[name="akcija"][value="potvrdi"] {
    border-color: #a91f28;
    background: #b5232c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(169, 31, 40, .18);
}

.checkout-forma button[name="akcija"][value="potvrdi"]:hover:not(:disabled) {
    border-color: #841820;
    background: #981b23;
    color: #fff;
}


/* ============================================================
   V7.9.85 - KAMPANJSKE KOLEKCIJE NA POČETNOJ
   ============================================================ */

.pocetna-kampanje {
    padding-top: clamp(42px, 6vw, 82px);
    padding-bottom: clamp(24px, 4vw, 54px);
}

.pocetna-kampanje-mreza {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 38px);
}

.pocetna-kampanje-mreza.jedna-kampanja {
    grid-template-columns: minmax(0, 1fr);
}

.pocetna-kampanja {
    display: block;
    min-width: 0;
    color: #181818;
    text-decoration: none;
}

.pocetna-kampanja picture {
    display: block;
    overflow: hidden;
    background: #f2f2f0;
}

.pocetna-kampanja img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 420ms ease;
}

.jedna-kampanja .pocetna-kampanja img {
    aspect-ratio: 16 / 7;
}

.pocetna-kampanja:hover img {
    transform: scale(1.018);
}

.pocetna-kampanja-tekst {
    padding: 17px 2px 0;
}

.pocetna-kampanja-tekst > span {
    color: #8a8a8a;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pocetna-kampanja-tekst h3 {
    margin: 6px 0 0;
    font-size: clamp(24px, 2.3vw, 38px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.pocetna-kampanja-tekst p {
    max-width: 720px;
    margin: 9px 0 0;
    color: #6f6f6f;
    font-size: 13px;
    line-height: 1.55;
}

.pocetna-kampanja-tekst strong {
    display: inline-block;
    margin-top: 13px;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .pocetna-kampanje {
        padding-top: 38px;
        padding-bottom: 28px;
    }

    .pocetna-kampanje-mreza,
    .pocetna-kampanje-mreza.jedna-kampanja {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pocetna-kampanja img,
    .jedna-kampanja .pocetna-kampanja img {
        aspect-ratio: 4 / 5;
    }

    .pocetna-kampanja-tekst {
        padding-top: 13px;
    }
}


/* ============================================================
   V7.9.86 - MODNE KOMBINACIJE
   ============================================================ */

.pocetna-modne-kombinacije {
    padding-top: clamp(46px, 7vw, 92px);
    padding-bottom: clamp(34px, 5vw, 68px);
}

.pocetna-modna-kombinacija {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: center;
}

.pocetna-modna-kombinacija + .pocetna-modna-kombinacija {
    margin-top: clamp(62px, 9vw, 122px);
}

.pocetna-modna-kombinacija:nth-child(even) .pocetna-modna-slika {
    order: 2;
}

.pocetna-modna-slika {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #f2f2f0;
}

.pocetna-modna-slika img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.pocetna-modna-sadrzaj {
    min-width: 0;
}

.pocetna-modna-zaglavlje {
    margin-bottom: 24px;
}

.pocetna-modna-zaglavlje h2 {
    margin: 7px 0 0;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.pocetna-modna-zaglavlje p {
    max-width: 560px;
    margin: 12px 0 0;
    color: #6f6f6f;
    font-size: 13px;
    line-height: 1.6;
}

.pocetna-modna-zaglavlje > a {
    display: inline-block;
    margin-top: 14px;
    border-bottom: 1px solid currentColor;
    color: #1d1d1f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.pocetna-modna-proizvodi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
}

.pocetna-modni-proizvod {
    min-width: 0;
    color: #1d1d1f;
    text-decoration: none;
}

.pocetna-modni-proizvod > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #f3f3f2;
}

.pocetna-modni-proizvod > span {
    display: block;
    margin-top: 9px;
    color: #8a8a8a;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.pocetna-modni-proizvod h3 {
    margin: 4px 0 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

.pocetna-modni-proizvod-cijena {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
}

.pocetna-modni-proizvod-cijena del {
    color: #949494;
    font-weight: 400;
}

.pocetna-modni-proizvod-cijena strong {
    font-weight: 600;
}

.pocetna-modni-proizvod-cijena.na-akciji strong {
    color: #b5232c;
}

@media (max-width: 900px) {
    .pocetna-modna-kombinacija {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .pocetna-modna-kombinacija:nth-child(even) .pocetna-modna-slika {
        order: initial;
    }

    .pocetna-modna-slika img {
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 520px) {
    .pocetna-modne-kombinacije {
        padding-top: 42px;
        padding-bottom: 34px;
    }

    .pocetna-modna-zaglavlje {
        margin-bottom: 20px;
    }

    .pocetna-modna-proizvodi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 9px;
    }

    .pocetna-modni-proizvod h3 {
        font-size: 12px;
    }
}