body {
}

/*1.Default.aspx*/

.header-top-top {
    /*background: #DB0C12;*/
    background: #F1F1F1;
}

.header-top-p {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.header-middle-colored {
    /*background-color: #f4f4f4;*/
    background: #FAFAFA;
}

.home-slide-title {
    opacity: 1;
    color: #fff;
    font-size: 50px;
    margin-bottom: 50px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.fileters-pocetna-default {
    width: 150px !important;
}

.bg-img {
    /*background-image: url(/Materijali/Images/sava.jpg);*/
    background-image: url(/Materijali/Images/canva-img.png);
    /*Bez ovoga je slika stajala gore lijevo u prirodnoj velicini
      i ponavljala se na ekranima sirim od 1920px*/
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.filter-cms {
    background: #F9F9F9 !important;
}

.brend_proizvodi {
    width: 210px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}


.kosarica-header {
    color: #DB0C12;
}

.minicart-icon {
    border: 2px solid black !important;
    width: 25px !important;
    height: 20px !important;
}

.dugmicDodaj {
    opacity: 1 !important;
    visibility: visible !important;
}

.popust-badge {
    position: absolute;
    left: 10px;
    top: 55px;
    background-color: #e53935; /* crvena */
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    rotate: -45deg;
}

.popust-badge-grid {
    position: absolute;
    right: 10px;
    bottom: 160px;
    background-color: #e53935;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    rotate: 0deg;
}

/*Badge sjedi u gornjem desnom uglu slike, pa je figure sidro*/
.artikal-list figure,
.product-single-gallery {
    position: relative;
}

.popust-badge-list,
.popust-badge-detaljno {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background-color: #e53935;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    rotate: 0deg;
}

.pagination-area {
    text-align: center !important;
}


.filters-wrapper {
    position: absolute;
    top: 50%;
    left: 130px;
    transform: translateY(-50%);
}

/*Na sirokim ekranima okvir s filterima prati kolonu sadrzaja (.container, 1420px),
  inace bi zbog tvrdih 130px sve vise virio ulijevo sto je ekran siri.
  Prag je 1660px jer tu calc daje tocno 130px, pa nema skoka pri promjeni sirine.*/
@media (min-width: 1660px) {
    .filters-wrapper {
        left: calc((100% - 1400px) / 2);
    }
}

.filters-pocetna {
    display: block;
    margin-bottom: 10px;
}
/*Mail uspjesno poslan - poruka*/
#mailBox {
    height: 40px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 300px;
    border: 1px solid black;
    text-align: center;
    background: #16cb16a1;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 27px;
}

    #mailBox > p {
        margin-top: 7px;
    }


.sezona-badge {
    width: 35px !important;
}

.opis-item-izdvojeno {
    width: 20% !important;
}

.kolicina {
    width: 15%;
    text-align: center;
    cursor: pointer;
}

.kolicina-list {
    width: 8%;
    height: 94%;
    margin-bottom: 4px;
    margin-right: 44px;
    text-align: center;
    cursor: pointer;
}

.best-selling {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #DB0C12, #E53935);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

    .best-selling:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        background: linear-gradient(135deg, #B20A10, #DB0C12);
    }

.brend-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px; /* šire */
    height: 80px; /* više */
    margin: 0 12px;
    padding: 15px 25px;
    font-size: 20px; /* veći font */
    font-weight: 700;
    text-align: center;
    color: #fff; /* bijeli tekst */
    background: linear-gradient(135deg, #DB0C12, #E53935);
    border-radius: 10px;
    border: none;
    cursor: default;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.brend_proizvodi {
    width: 200px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 10px;
    border-radius: 8px;
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.2);*/
    transition: all 0.3s ease;
}


select.btn-choose {
    height: 40px;
    padding: 0 !important;
    margin-right: 10px;
    min-width: 100px;
    font-size: 12px !important;
    background: #fff;
    color: #000000;
    border-radius: 5px;
    width: 200px;
    text-align: left;
    border: 2px solid black;
}

button.btn-choose {
    height: 40px;
    padding: 0 !important;
    margin-right: 10px;
    min-width: 100px;
    font-size: 12px !important;
    background: #DB0C12;
    color: #fff;
    border-radius: 5px;
    width: 200px;
    text-align: center;
    border: 2px solid #fff;
}

.istaknuto-category {
    font-size: 13px;
    margin-bottom: 0px;
}


.product-price {
    color: #DB0C12 !important;
}

.footer {
    background: #000000;
}

.footer-copyright {
    color: #fff;
    font-weight: 700;
}

.footer-title {
    color: #fff !important;
}

.footer-category > li > a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: color 0.3s ease;
}

    .footer-category > li > a:hover {
        color: #da0c12;
        text-decoration: underline;
    }

.kontakt-title {
    color: #fff !important;
    font-size: 24px;
}

.kontakt-podatci {
    color: #fff !important;
}

    .kontakt-podatci > i {
        width: 25px;
        height: 25px;
        padding: 8px;
    }

.breadcrumb-nazivi {
    font-size: 13px !important;
}

    .breadcrumb-nazivi.active {
        color: #DB0C12;
    }

.footer-copyright > a {
    color: #da0c12;
}

.naslov-najpopularnije > h2 {
    font-weight: 700 !important;
    font-size: 24px !important;
}

.kategorije {
    background: #000000 !important;
}

.quick-view-btn {
    background: #32359E !important;
}

.pagination-my {
    margin: auto !important;
}

.naslov-accordion > a {
    font-size: 15px !important;
}

    .naslov-accordion > a:hover {
        color: #DB0C12 !important;
    }

.aside-element:hover {
    cursor: pointer;
}

.accordion-list > li > a {
    font-size: 14px;
}

.accordion-title {
    border-bottom: 2px solid black;
    margin-bottom: 40px;
    padding: 5px;
}
/*---------------------------------VELEPRODAJA------------------------------------*/

.veleprodaja {
    border-radius: 20px;
}

.input-veleprodaja,
.btn-veleprodaja {
    border-radius: 20px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    transition: 0.3s;
}

    .btn-veleprodaja:hover {
        background-color: #32359E;
        transform: translateY(-2px);
    }

    .input-veleprodaja:focus {
        border-color: #32359E;
        box-shadow: 0 0 5px rgba(50, 53, 158, 0.5);
    }

#veleprodaja-title {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 25px;
    font-weight: 600;
}


/*-------------------------------FILTER ASIDE-------------------------------------*/
/* Osnovni sidebar */
.sidebar-shop {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* Naslov filtera */
.accordion-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Select elementi */
.sidebar-shop select {
    width: 100%;
    display: block;
    margin-bottom: 15px;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    /* Hover i fokus na select */
    .sidebar-shop select:hover,
    .sidebar-shop select:focus {
        border-color: #007bff;
        box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
        outline: none;
    }

/* Opcije u select */
.sidebar-shop option {
    padding: 10px;
}

/* Buttoni (ako dodaš “Primijeni filter”) */
#filterForma button {
    width: 100%;
    background: #007bff;
    border: none;
    color: #fff;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

    #filterForma button:hover {
        background: #0056b3;
    }




/*--------------------------------PAGING-----------------------------------------*/
.pagination-area {
    background: rgba(0,0,0,0) none repeat scroll 0 0;
    /*border-top: 1px solid #eee;*/
    margin: 0px 0 0;
    padding: 0px 0px 20px 0px;
    text-align: center;
    display: inline-block;
    width: 100%;
}

    .pagination-area ul {
        margin-bottom: 0px;
    }

        .pagination-area ul li {
            background: #f5f5f5;
            color: #393939;
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            height: 30px;
            line-height: 30px;
            margin: 0 0 0 5px;
            width: 30px;
            border-radius: 0px;
        }

            .pagination-area ul li a {
                border: 1px solid #e0e0e0;
                color: #363636;
                display: block;
                font-size: 12px;
                font-weight: 700;
                height: 30px;
                width: 30px;
                text-decoration: none;
                border-radius: 0px;
                transition: all .4s ease-out .2s;
            }

                .pagination-area ul li a:hover {
                    background: #000000;
                    border: 1px solid #000000;
                    color: #fff;
                }

                .pagination-area ul li a.active {
                    background: #1d4c9e;
                    border: 1px solid #1d4c9e;
                    border-radius: 0px;
                    color: #fff;
                    transition: all .4s ease-out .2s;
                }

/*Pager: < [3] od [35] >  - strelice i oba broja iste velicine i oblika*/
.pagination-area .dugmic.prethodna,
.pagination-area .dugmic.slijedeca,
.pagination-area .textP.polje.stranica,
.pagination-area .ispis-ukupno {
    display: inline-block;
    vertical-align: middle;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0 3px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    box-sizing: border-box;
}

/*Strelice - okrugle, brendom crvene. Visina prati sirinu, inace 50% da elipsu.*/
.pagination-area .dugmic.prethodna,
.pagination-area .dugmic.slijedeca {
    width: 30px;
    height: 30px;
    line-height: 28px;
    border-radius: 50%;
    background: #DB0C12;
    border: 1px solid #DB0C12;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

    .pagination-area .dugmic.prethodna:hover,
    .pagination-area .dugmic.slijedeca:hover {
        background: #32359E;
        border-color: #32359E;
        color: #fff;
    }

    .pagination-area .dugmic:disabled {
        background: #e6e6e6;
        border-color: #e6e6e6;
        color: #aaa;
        cursor: default;
    }

/*Oba broja izgledaju isto - upisivi i ukupni*/
.pagination-area .textP.polje.stranica,
.pagination-area .ispis-ukupno {
    background: #fff;
    border: 1px solid #ddd;
    color: #212529;
}

.pagination-area .textP.polje.stranica:focus {
    border-color: #DB0C12;
    outline: none;
}

.pagination-area .pager-od {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    font-size: 14px;
    color: #777;
}

.toolbox .select-custom::after {
    margin-top: 9px;
}



/*Artikli*/
.product-title-my {
    font-size: 14px;
    min-height: 31px;
}

/*Oznaka sezone na artiklima*/
.artikal-grid {
    padding: 10px 10px 14px;
    border: 1px solid #ececec;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 20px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .artikal-grid:hover {
        border-color: #dcdcdc;
        box-shadow: 0 3px 12px rgba(0,0,0,.12);
    }

/*Svaki artikal u list prikazu je zasebna kartica, da se vidi gdje jedan zavrsava*/
.artikal-list {
    position: relative;
    padding: 18px 20px;
    border: 1px solid #ececec;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 16px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .artikal-list:hover {
        border-color: #dcdcdc;
        box-shadow: 0 3px 12px rgba(0,0,0,.10);
    }

    /*Slika lijevo, podaci desno*/
    .artikal-list > figure {
        float: left;
        width: 210px;
        margin: 0 22px 0 0;
    }

    /*Naziv proizvoda u list prikazu*/
    .artikal-list .product-title > a {
        color: #212529;
    }

    .artikal-list > .product-details {
        overflow: hidden;
    }

    .artikal-list::after {
        content: "";
        display: block;
        clear: both;
    }

/*Header ostaje na vrhu pri skrolanju na mobitelu i tabletu.
  Tema ima svoj sticky samo na .header-bottom, a taj red je na mobitelu sakriven.*/
/*Mobilni meni (hamburger) - veci tekst glavnih stavki.
  Ne treba klasa na svakom linku, .mobile-menu postoji samo u tom panelu.*/
.mobile-menu > li > a {
    font-size: 17px !important;
    font-weight: 600 !important;
}

/*Podstavke (kategorije, sezone) malo manje, da se vidi hijerarhija*/
.mobile-menu ul a {
    font-size: 17px !important;
    font-weight: 500 !important;
}

/*Header ostaje na vrhu pri skrolanju na mobitelu i tabletu.
  Ne moze position:sticky jer .page-wrapper obuhvata samo header, pa bi
  se odlijepio odmah - zato fixed, a razmak ispod postavlja Script.js.*/
@media (max-width: 991px) {
    header.header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1041;
        background: #fafafa;
        box-shadow: 0 2px 6px rgba(0,0,0,.10);
    }
}

@media (max-width: 767px) {
    /*Tema krije prebacivanje grid/list na mobitelu - vracamo ga*/
    .layout-modes {
        display: flex !important;
        align-items: center;
        margin-left: auto;
    }
    .artikal-list {
        padding: 14px;
    }

        .artikal-list > figure {
            float: none;
            width: 100%;
            max-width: 240px;
            margin: 0 auto 14px;
        }

        .artikal-list > .product-details {
            text-align: center;
        }

        .artikal-list .product-specs {
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
}

.cijena-list {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
}

    .cijena-list > .product-price {
        margin-right: 20px;
    }

.btn-kosarica {
    opacity: 1 !important;
    visibility: visible !important;
}

figure {
    position: relative;
}

.product-badges {
    display: flex;
}

.proizvod-kategorija {
    font-size: 13px;
    font-weight: 600;
    color: #DB0C12 !important;
}

.product-badges .badge-item img {
    width: 35px;
    height: 35px;
}

.product-specs {
    width: 100%;
    max-width: 520px;
    font-size: 13px;
    margin: 12px 0 14px;
    border-collapse: collapse;
    border-top: 1px solid #e7e7e7;
}

    .product-specs td {
        padding: 6px 10px 6px 0;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: middle;
    }

    .product-specs tr:last-child td {
        border-bottom: 1px solid #e7e7e7;
    }

    .product-specs .spec-naziv {
        width: 15%;
        color: #8a8a8a;
        font-weight: 400;
        white-space: nowrap;
    }

    .product-specs .spec-vrijednost {
        width: 35%;
        color: #222;
        font-weight: 600;
    }

        .product-specs .spec-vrijednost .badge-item img {
            width: 22px;
            height: 22px;
        }

@media (max-width: 575px) {
    .product-specs .spec-naziv,
    .product-specs .spec-vrijednost {
        width: auto;
    }
}

/*Oznaka kad je zaliha pri kraju*/
.oznaka-zalihe {
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/*Kad zalihe ima na pretek*/
.oznaka-zalihe.oznaka-zalihe-puno {
    background: #e8f6ec;
    color: #1e7e34;
}

/*Dostupnost po radnjama - stranica artikla*/
.dostupnost-radnje h5 {
    margin-bottom: 10px;
    color: #21293c;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 0 10px 0;
}

.dostupnost-stupci {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.tablica-dostupnost {
    flex: 1;
    width: 100%;
    margin-bottom: 0;
    font-size: 14px;
}

    .tablica-dostupnost td {
        padding: 8px 0;
        border-bottom: 1px solid #e8e8e8;
        color: #21293c;
        line-height: 1.3;
    }


    /*Broj desno, zeleno i podebljano*/
    .tablica-dostupnost td.kolicina {
        width: 1%;
        padding-left: 14px;
        text-align: right;
        color: #1a7a31;
        font-weight: 700;
        white-space: nowrap;
    }

/*Na uskom ekranu stupci jedan ispod drugog*/
@media (max-width: 767px) {
    .dostupnost-stupci {
        display: block;
    }

        .dostupnost-stupci .tablica-dostupnost + .tablica-dostupnost {
            margin-top: 8px;
        }
}


.badge-season {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: auto;
    z-index: 2;
}

/*EU oznake gume - font s ikonama prekopiran s conti.ba*/
@font-face {
    font-family: 'bIcons';
    src: url('/fonts/bicons.woff') format('woff'), url('/fonts/bicons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.extra-badges {
    display: flex;
    gap: 14px;
    margin-top: 4px;
}

/*Ikona i vrijednost u istoj liniji, sredina na sredinu*/
.eu-oznaka {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    cursor: help;
}

    .eu-oznaka > span {
        font-family: 'bIcons';
        font-size: 19px;
        font-weight: normal;
        line-height: 1;
        color: #222;
    }

/*Kodovi glifova iz bicons fonta*/
.bicons-eu-fuel::before {
    content: "\e911";
}

.bicons-eu-wet::before {
    content: "\e923";
}

.bicons-eu-noise::before {
    content: "\e920";
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: bold;
}

    .badge-item img {
        width: 25px;
        height: 25px;
    }

/*KONTAKT BROJEVI*/
.contact-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* razmak između ćelija */
    margin-bottom: 50px;
}

.contact-location {
    flex: 1 1 300px; /* svaka ćelija minimalno 300px, ali raste da popuni prostor */
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    background: #f9f9f9;
}

    .contact-location h4 {
        margin-top: 0;
        margin-bottom: 10px;
    }

.kontakt {
    margin-bottom: 20px !important;
}

/*ARTIKAL DETALJNO*/
.table-detaljno {
    width: 65% !important;
}

    .table-detaljno td {
        font-size: 15px;
    }

        .table-detaljno td:nth-child(2) {
            border-right: 1px solid #ebebeb !important;
        }

.korpa-detaljno {
    display: flex;
    gap: 15px;
    padding-bottom: 25px;
}

.kolicina-field {
    height: 35px !important;
}

.opis-artikla {
    max-width: 70%;
    font-size: 14px;
    margin-left: 20px !important;
}

.btn-add-cart-det {
    background: #DB0C12;
    color: white !important;
    border: 2px solid #DB0C12;
    cursor: pointer;
}
/*--------------Kontakt.aspx---------------*/
.kontakt-form {
    border: 2px solid black;
    border-radius: 9px;
    padding: 25px;
}

/*-------------------Hvala.aspx-------------------------*/
#div-hvala {
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #div-hvala a {
        display: block;
        margin-top: 20px;
        text-decoration: underline;
        color: #D14B4A;
        margin-top: 50px;
    }

    #div-hvala h1 {
        margin-bottom: 20px;
    }

.owl-prev, .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
}

.owl-prev {
    left: -18px;
}

.owl-next {
    right: -18px;
}

@media (max-width: 1000px) {
    .gallery-section .owl-nav,
    .partners-carousel .owl-nav {
        display: block;
    }

    .header-mobile {
        height: 72px;
    }

    .container-mobile {
        margin-top: -10px;
    }

    .bg-img {
        /*background-image: url(/Materijali/Images/sava-mob.jpg);*/
        background-image: url(/Materijali/Images/canvaMala-img.png);
    }

    .home-slide-title {
        opacity: 1;
        color: #fff;
        font-size: 20px;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    }

    .price-grid-old {
        font-size: 2.4rem;
        margin-right: 15px;
    }

    .price-grid {
        font-size: 3.4rem;
    }

    .search-mobile {
        margin-right: 65px !important;
    }

    #filter-accordion > select {
        width: 100% !important;
    }

    .brend_proizvodi {
        width: 90%;
        height: 70px;
        margin: 8px auto;
    }

    .brend-text {
        width: 80%; /* skoro cijela širina ekrana */
        height: 50px; /* malo niže da stane ljepše na mobitel */
        margin: 8px auto; /* centrirano i razmaknuto */
        padding: 10px;
        font-size: 16px; /* nešto manji font da ne prelazi rubove */
        font-weight: 600;
        color: #fff;
        background: linear-gradient(135deg, #DB0C12, #E53935);
        border: none;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }

    .popust-badge-list {
        font-size: 12px;
    }

    .popust-badge-detaljno {
        font-size: 12px;
    }

    .mobile-hamburger {
        color: #000000 !important;
    }

    .main-registracija {
        width: 100%;
    }

    .dodaj-detaljno {
        width: 130px !important;
    }

    .table-detaljno {
        width: 100% !important;
        border: 1px solid #ebebeb;
    }

    .opis-artikla {
        max-width: 100%;
        font-size: 14px;
    }

    .kolicina-list {
        width: 12%;
        height: 94%;
        margin-bottom: 4px;
        margin-right: 35px;
        text-align: center;
        cursor: pointer;
    }

    .dugmicDodaj {
        width: 15%;
    }

    .filters-wrapper {
        position: relative;
        margin-top: 10px !important;
        top: auto;
        left: auto;
        transform: none;
        margin: 20px auto;
        padding: 10px;
        width: 90%;
    }

    .fileters-pocetna {
        width: 100%;
        margin-bottom: 25px;
        width: 80%;
        height: 40px;
        padding: 0 !important;
        margin-right: 10px;
        min-width: 120px !important;
        font-size: 10px !important;
        background: #fff;
        color: #000000;
        border-radius: 5px;
        width: 40% !important;
        text-align: left;
        border: 2px solid black;
    }
}

/*Na sirokim ekranima ima mjesta, pa tablica specifikacija ide na punu sirinu -
  duge oznake tipa "PRIANJANJE NA MOKRIM PUTEVIMA:" tad stanu u jedan red.
  Na laptopu i mobitelu ostaje kako je bilo.*/
@media (min-width: 1400px) {
    .table-detaljno {
        width: 100% !important;
    }
}

/*Kontakti u footeru - svoj red ispod logotipa i popisa*/
.footer-kontakti {
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
}

    /*Porto daje .contact-widget.phone display:inline-block i prazan ::before od 34px,
      pa je telefon visio nize od e-maila i kolona mu je bila uza od ostalih.*/
    .footer-kontakti .contact-widget {
        display: block;
        margin: 0;
    }

        .footer-kontakti .contact-widget::before {
            content: none;
        }

    /*Sva tri naslova isto - inace je svaki bio svoje velicine i razmaka*/
    .footer-kontakti .kontakt-title {
        font-size: 13px !important;
        letter-spacing: .05em;
        margin: 0 0 8px !important;
    }

    .footer-kontakti .kontakt-podatci {
        font-size: 17px !important;
        line-height: 1.4;
    }

    .footer-kontakti .social-icons {
        display: flex;
        justify-content: center;
        margin: 0;
    }

        /*Porto ikoni daje margin 8px 16px 0 0, pa nije bila na sredini kolone
          niti u ravnini s telefonom i e-mailom*/
        .footer-kontakti .social-icons .social-icon {
            margin: 0 !important;
        }

@media (max-width: 767px) {
    /*Na mobitelu su jedan ispod drugog, treba im razmak*/
    .footer-kontakti .contact-widget {
        margin-bottom: 18px;
    }
}

/*Gornji red footera - logo, Kategorije i Informacije jednako razmaknuti.
  Kolone se skupe na svoj sadrzaj, a slobodan prostor se ravnomjerno podijeli.
  Ispod 992px vrijedi obican grid, pa se slazu jedno ispod drugog.*/
@media (min-width: 992px) {
    .footer-middle > .row:not(.footer-kontakti) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

        .footer-middle > .row:not(.footer-kontakti) > div {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
        }
}

/*Kartica u gridu: blok s cijenom uvijek iste visine, bez obzira ima li
  precrtane stare cijene - inace artikal na popustu gurne ikone nize
  i redovi s oznakama se ne poklapaju izmedju kartica.*/
/*U grid kartici je sve centrirano - slika, naziv, cijena i EU oznake.
  List prikaz se ne dira, tamo tekst ide uz sliku s lijeva.*/
.artikal-grid .product-details,
.owl-item .product-details {
    text-align: center;
}

    /*price-box je flex stupac, njemu treba align-items umjesto text-align*/
    .artikal-grid .price-box,
    .owl-item .price-box {
        align-items: center;
    }

    /*category-wrap je porto flex, pa proizvodjac ostaje lijevo bez ovoga*/
    .artikal-grid .category-wrap,
    .owl-item .category-wrap {
        justify-content: center;
    }

    /*Isto i za EU oznake - flex djecu text-align ne pomjera.
      Na stranici artikla ostaju lijevo, kao i ostatak te stranice.*/
    .artikal-grid .extra-badges,
    .owl-item .extra-badges {
        justify-content: center;
        /*Oznake su sad iznad cijene, pa im treba razmak i odozdo*/
        margin-bottom: 8px;
    }

    /*Porto naslovu daje 14.4px odozdo, a price-box iznad cijene drzi prazan
      prostor rezerviran za precrtanu staru cijenu - zajedno je bilo prerazmaknuto*/
    .artikal-grid .product-title,
    .owl-item .product-title {
        margin-bottom: 8px;
    }

/*Bez rezerviranog prostora za precrtanu staru cijenu - kartica bez popusta
  je inace nosila 32px praznine izmedju naslova i cijene.
  Artikal na popustu je zato za jedan redak visi od ostalih u redu.*/
.artikal-grid .price-box,
.owl-item .price-box {
    display: flex;
    flex-direction: column;
}

/*-------------------Servis.aspx-------------------------*/
.servis {
    padding: 30px 15px 60px;
}

.stranica-uvod {
    text-align: center;
    margin-bottom: 28px;
}

.stranica-naslov {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #212529;
    margin-bottom: 14px;
}

    /*Crvena crtica ispod naslova, kao akcent brenda*/
    .stranica-naslov::after {
        content: "";
        display: block;
        width: 56px;
        height: 3px;
        margin: 12px auto 0;
        background: #DB0C12;
    }

.stranica-vodeci {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

.servis-gradovi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

    .servis-gradovi span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 13px;
        border: 1px solid #e6e6e6;
        border-radius: 20px;
        background: #fafafa;
        font-size: 13px;
        font-weight: 600;
        color: #212529;
    }

    .servis-gradovi i {
        color: #DB0C12;
    }

.servis-slika {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 26px;
}

.servis-tekst {
    max-width: 900px;
    margin: 0 auto 36px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    text-align: center;
}

.stranica-podnaslov {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #212529;
    padding-left: 12px;
    border-left: 4px solid #DB0C12;
    margin-bottom: 20px;
}

/*Kartice usluga - sve iste visine, pa je mreza poravnata*/
.stranica-mreza {
    margin-bottom: 8px;
}

    .stranica-mreza > div {
        margin-bottom: 20px;
    }

.stranica-kartica {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 22px 12px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

    /*Na Asortimanu je kartica <a>, pa joj treba maknuti podvlacenje*/
    a.stranica-kartica,
    a.stranica-kartica:hover,
    a.stranica-kartica:focus {
        text-decoration: none;
    }

    .stranica-kartica:hover {
        border-color: #DB0C12;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        transform: translateY(-2px);
    }

    .stranica-kartica i {
        font-size: 28px;
        color: #DB0C12;
    }

    .stranica-kartica span {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.45;
        color: #212529;
    }

    .stranica-kartica em {
        color: #DB0C12;
        font-style: normal;
    }

.servis-napomena {
    font-size: 13px;
    color: #888;
    margin-bottom: 36px;
}

.servis-garancija {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
    padding: 22px 24px;
    border-left: 4px solid #DB0C12;
    border-radius: 4px;
    background: #f7f7f7;
}

    .servis-garancija i {
        flex: 0 0 auto;
        font-size: 26px;
        line-height: 1.3;
        color: #DB0C12;
    }

    .servis-garancija p {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: #444;
    }

@media (max-width: 575px) {
    .servis {
        padding: 20px 15px 40px;
    }

    .stranica-naslov {
        font-size: 24px;
    }

    .stranica-kartica {
        padding: 18px 10px;
    }

        .stranica-kartica i {
            font-size: 24px;
        }

        .stranica-kartica span {
            font-size: 13px;
        }
}

/*Logotipi brendova na stranici Asortiman - grid s jednakim celijama*/
.brendovi-grupe {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 40px;
}

.brend-grupa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

a.brend-grupa:hover {
    border-color: #DB0C12;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

    /*Logo popunjava celiju po sirini, omjer cuva background-size: contain*/
    .brendovi-grupe .brend_proizvodi {
        width: 100%;
        height: 76px;
        margin: 0;
    }

    /*.brend-text je inace crveni chip s pocetne - ovdje treba obican tekst,
      jer stoji u istom gridu kao i pravi logotipi*/
    .brendovi-grupe .brend-text {
        width: 100%;
        min-width: 0;
        height: 76px;
        margin: 0;
        padding: 0 4px;
        background: none;
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.3;
        color: #212529;
        white-space: normal;
        overflow: hidden;
    }

@media (max-width: 1199px) {
    .brendovi-grupe {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .brendovi-grupe {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .brendovi-grupe {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

        .brendovi-grupe .brend_proizvodi,
        .brendovi-grupe .brend-text {
            height: 60px;
        }

        .brendovi-grupe .brend-text {
            font-size: 13px;
        }
}

/*Slika u kartici: uvijek ista visina i centrirana, pa se redovi poklapaju
  bez obzira je li slika uspravna, polozena ili zamjenska.
  Oznaka sezone i dugme korpe su position:absolute, njih flex ne pomjera.*/
.artikal-grid figure,
.owl-item figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

    .artikal-grid figure > a,
    .owl-item figure > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .artikal-grid figure img:not(.badge-season),
    .owl-item figure img:not(.badge-season) {
        max-width: 100%;
        max-height: 300px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

@media (max-width: 575px) {
    .artikal-grid figure,
    .owl-item figure {
        min-height: 220px;
    }

        .artikal-grid figure img:not(.badge-season),
        .owl-item figure img:not(.badge-season) {
            max-height: 220px;
        }
}

/*Kartica izdvojenog artikla mora biti pozicionirana, inace se popust badge
  zakaci za cijeli slide karusela umjesto za karticu, kao sto se zakaci u gridu.*/
.izdvojeno-artikl {
    position: relative;
}

    /*Kartica u karuselu je niza od grid kartice, pa bi je bottom:160px
      odveo na sliku. Figure je ovdje fiksnih 300px, pa se racuna odozgo.*/
    .izdvojeno-artikl .popust-badge-grid {
        top: 308px;
        bottom: auto;
    }


/*Poruka umjesto gumba kad u korpi nema nicega*/
.kosarica-prazna {
    display: block;
    padding: 10px 0;
    color: #777;
    font-size: 14px;
    text-align: center;
}