/*--------------------------------------------------------------------------HEADER--------------------------------------------------------------------------*/

.proizvod_slika-new {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 8px;
}

    .proizvod_slika-new::before {
        content: "";
        position: absolute;
        inset: -20px;
        background-size: cover;
        background-position: center;
        filter: blur(25px);
        transform: scale(1.2);
        z-index: 0;
    }

    /* ovaj layer daje dodatni blur */
    .proizvod_slika-new img.bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(8px);
        transform: scale(1.3);
    }

    .proizvod_slika-new img.main {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 2;
    }


.menu_bar {
    background-color: #FF4FB3;
}

    .menu_bar.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

body.has-sticky-menu {
    padding-top: 156px;
}

.mob_bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* full width */
    z-index: 1000; /* below .sidenav */
}

/* Side drawer must be above header */
.sidenav {
    position: fixed;
    z-index: 2000;
}

html, body { /*OVO NADODAO RADI OVOG SLIDERA NA VRHU STO SE ROTIRA*/
    overflow-x: hidden;
    max-width: 100%;
}

.header-web-top {
    width: 100%;
    background-color: #FF4FB3;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
}

.cursorpointer {
    font-family: 'Outfit', sans-serif;
}
/*.header-top-icon {
    color: #fff;
    font-size: 12px;
}
.header-top-a {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
}*/
.header-middle {
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding-top: 30px;
    box-shadow: 0 0 1px #aaa;
}

.header-top-new {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    padding: 1px 20px;
    animation: scroll-left 10s linear infinite;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
}

    .header-top-new .box-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        min-width: 320px;
        /*min-width: 250px;*/
        text-align: center;
        padding: 1px 20px;
        /*background-color: #FAFAFA;*/
        border-radius: 10px;
        /*border: 2px solid #6ECBF0;*/
    }

        .header-top-new .box-1 i {
            /*font-size: 35px;*/
            font-size: 20px;
            color: #6ECBF0;
            margin-right: 15px;
            display: block;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .header-top-new .box-1 p {
            margin: 0;
            /*font-size: 16px;*/
            font-size: 14px;
            font-weight: 700;
            color: #6ECBF0;
            line-height: 1.4;
            font-family: 'Outfit', sans-serif;
            text-transform: none !important;
            letter-spacing: 0.5px;
        }

/*@keyframes scroll-left {
    0% {
        transform: translateX(90%) translateZ(0);
    }

    100% {
        transform: translateX(-90%) translateZ(0);
    }
}*/
.popup-overlay_Opci,
.popup-overlay_Privatnost {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* poluprozirni crni sloj */
    z-index: 999; /* postavljamo visoki z-index da bude iznad ostatka sadržaja */
    overflow: auto;
}

.popup-content_Opci,
.popup-content_Privatnost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 40px 20px 20px 20px;
    border-radius: 5px;
    font-family: 'Outfit', sans-serif;
    z-index: 1000; /* postavljamo još viši z-index kako bi bio iznad overlay-a */
    max-width: 80%; /* maksimalna širina */
    max-height: 90%; /* maksimalna visina sadržaja */
    overflow-y: auto; /* omogućava vertikalni scroll ako sadržaj premašuje visinu popup-content-a */
    padding-right: 20px; /* dodajemo malo prostora za scrollbar */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}


#zatvoriPopup_Privatnost,
#zatvoriPopup_Opci {
    background-color: #6ECBF0;
    border: none;
    border-radius: 10px;
    padding: 5px 10px;
    color: #fff;
}

    #zatvoriPopup_Privatnost:hover,
    #zatvoriPopup_Opci:hover {
        cursor: pointer;
    }

#opciuvjeti-link,
#privatnost-link {
    text-decoration: underline;
}

    #opciuvjeti-link:hover,
    #privatnost-link:hover {
        cursor: pointer;
        color: #6ECBF0;
    }
/*--------------------------------------------------------------------------HEADER-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------SLIDER--------------------------------------------------------------------------*/
/*.div_banner_web {
    background-repeat: no-repeat;
    height: 450px;
    width: 80%;
    margin: 0 auto;
    background-color: #dcefec;
}
*/
.main-title {
    margin-bottom: 40px;
}
/*--------------------------------------------------------------------------SLIDER-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------BLOG--------------------------------------------------------------------------*/
.blog {
    margin-top: 20px;
}
/*--------------------------------------------------------------------------BLOG-KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------CLANAK--------------------------------------------------------------------------*/
#clanak-detaljno-title {
    font-size: 35px;
}

.clanak p {
    font-family: 'Outfit', sans-serif;
    color: #888;
}

.clanak a {
    color: #FF4FB3;
    text-decoration: none;
    transition: all 0.2s ease;
}

.clanak strong {
    font-weight: 700;
    color: #333;
}
/*--------------------------------------------------------------------------CLANAK-KRAJ--------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------ARTIKAL DETALJNO--------------------------------------------------------------------------*/
#opis p {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
}

.proizvod_opsirnije_kolicina {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
}

    /* minus / plus */
    .proizvod_opsirnije_kolicina .items {
        width: 38px;
        height: 38px;
        border: none;
        background: #f8fbff;
        color: #6ECBF0;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .proizvod_opsirnije_kolicina .items:hover {
            background: #6ECBF0;
            color: #fff;
        }

    /* input */
    .proizvod_opsirnije_kolicina .qty {
        width: 50px;
        height: 38px;
        border: none;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        outline: none;
    }

    /* lagane vertikalne linije između */
    .proizvod_opsirnije_kolicina .reduced {
        border-right: 1px solid #e3e9f1;
    }

    .proizvod_opsirnije_kolicina .increase {
        border-left: 1px solid #e3e9f1;
    }

/* Glavni wrapper */
.option.size_choose {
    display: flex;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

    /* Label */
    .option.size_choose label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #888;
        font-family: 'Switzer-Regular', sans-serif;
        margin-top: 4px;
        margin-right: 10px;
    }

/* Select box */
.select-velicina {
    width: 100%; /* puni širinu roditelja */
    max-width: 200px; /* po želji */
    padding: 8px 12px;
    border: 2px solid #FF4FB3;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* Hover i fokus */
    .select-velicina:hover,
    .select-velicina:focus {
        border-color: #6ECBF0;
        box-shadow: 0 0 5px rgba(224,123,134,0.5);
        outline: none;
    }

    /* Opcije u dropdownu */
    .select-velicina option {
        padding: 5px 10px;
    }

        /* Stil za default option */
        .select-velicina option[value=""] {
            color: #999;
            font-style: italic;
        }

.boje-det-div {
    margin-bottom: 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.boje-det, .dezen-det {
    list-style: none;
    padding: 0;
    margin: 0 0 0 15px;
    display: flex;
    gap: 10px;
}

    .boje-det li {
        width: 30px;
        height: 30px;
    }

        .boje-det li a {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid #ddd;
        }

            .boje-det li a:hover, .dezen-det li a:hover {
                cursor: pointer;
                border: 2px solid #000;
            }

        .boje-det li.active-color a {
            border: 4px solid #6ECBF0; /* boja border-a kad je aktivno */
            border-radius: 50% !important;
        }

.dezen-det-div {
    margin-bottom: 10px;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.dezen-det li {
    width: 50px;
    height: 50px;
}

    .dezen-det li a {
        width: 50px;
        height: 50px;
        border-radius: 0%;
    }

    .dezen-det li.active-dezen a {
        border: 4px solid #6ECBF0; /* boja border-a kad je aktivno */
        border-radius: 0% !important;
    }

.slika-artikla-det {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Makes it square */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.slika-artikla-deta:hover {
    transform: scale(1.02);
}

.zoom-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #fff;
    color: #FF4FB3;
    padding: 5px 8px;
    font-size: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

    .zoom-icon:hover {
        color: #6ECBF0;
        transform: scale(1.3);
    }
/*--------------------------------------------------------------------------ARTIKAL DETALJNO -> KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------STATIKA--------------------------------------------------------------------------*/
.statika p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    color: #888 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.statika a {
    color: #EAB0D0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
/*--------------------------------------------------------------------------STATIKA -> KRAJ--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------ARTIKAL KARTICA--------------------------------------------------------------------------*/
.proizvod {
    border-radius: 10px;
}

/* Tabs (CSS-only behavior target) */
.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
    }

.cat_list {
    margin-bottom: 50px;
}

.tab-link {
    font-weight: 600;
    position: relative;
    font-size: 21px;
    text-transform: uppercase !important;
    color: #FF4FB3 !important;
    font-size: 18px;
    margin-right: 15px;
}

    .tab-link::after {
        content: "|" !important;
        position: absolute;
        right: -12px;
        color: #FF4FB3;
    }

    .tab-link:last-child::after {
        content: "" !important;
    }

    .tab-link.active {
        font-weight: 600;
        font-size: 23px;
        border-bottom: 2px solid #6ECBF0;
        color: #6ECBF0 !important;
        background-color: #fff !important;
    }

.div-pocetna-tab {
    border-bottom: 3px solid #FF4FB3;
    margin-bottom: 40px;
}

.proizvod_cijena_nova {
    font-size: 15px;
}

.proizvod_cijena_stara {
    font-size: 12px;
}

.pocetna_kat_div {
    background-color: #F4F4F4;
    padding: 10px;
    border-radius: 10px;
}

    .pocetna_kat_div::after {
        content: "";
        display: block;
        clear: both;
    }

/*--------------------------------------------------------------------------ARTIKAL KARTICA-KRAJ--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------3 BOX-A--------------------------------------------------------------------------*/
.div-pocetna-novo {
    width: calc(16% - 0px) !important;
}

.boxes {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

    .boxes .box1 {
        width: 32%;
        aspect-ratio: 1 / 1;
        /*border: 2px solid #FF4FB3;*/
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

        .boxes .box1:hover {
            cursor: pointer; /* pokazivač ruke */
            transform: translateY(-5px) scale(1.05); /* malo iskače */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* shadow iza */
        }

        .boxes .box1 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
/*--------------------------------------------------------------------------3 BOX-A-> KRAJ--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------BLOG SECTION--------------------------------------------------------------------------*/
.div-blog {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

    .div-blog .div_4 {
        width: calc(25% - 15px); /* 4 items per row with gap */
        flex: 0 0 calc(25% - 15px);
    }

.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .blog-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

.blog-slika {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    min-height: 55px;
    max-height: 55px;
    overflow: hidden;
}

.blog-description {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex-grow: 1;
    min-height: 130px;
    max-height: 130px;
    overflow: hidden;
}

.blog-read-more {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #FF4FB3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-read-more {
    color: #6ECBF0;
}

/*--------------------------------------------------------------------------BLOG SECTION -> KRAJ--------------------------------------------------------------------------*/
.txtcapitalize {
    text-transform: capitalize;
}

.txtuppercase {
    text-transform: uppercase;
}

.txtlowercase {
    text-transform: lowercase;
}

.txtinitial {
    text-transform: initial;
}

.cursorpointer {
    cursor: pointer;
}

.pager_brojevi {
    border: none;
    width: 50px;
    height: 50px;
    padding: 0px;
}

.payment-option-box {
    padding: 20px;
    border: 1px solid #e1e1e1;
}

.mb-30 {
    margin-bottom: 30px;
}

.payment-option-box-inner {
    padding: 10px;
    display: inline-block;
    /*width: 100%;*/
}

.gray-bg {
    background: #f5f5f5;
}

.payment-top-box {
    display: inline-block;
    width: 100%;
    /*margin-bottom: 20px;*/
}

.left-side {
    float: left;
}

.paypal-box {
    border: 1px solid #ddd;
    float: left;
    padding: 10px;
    position: relative;
    margin-left: 10px;
}

.paypal-img {
    padding: 5px 5px 0px 5px;
}

.ulPlacanje {
    margin: 0px;
}
/*
* {
    text-transform: lowercase !important;
}*/
/*--------------------------------------------------------------------------LIJEVI MENI NA KATEGORIJAMA------------------------------------------------------------------------*/
/* Glavni container */
.left-menu {
    background: #ffffff;
    border: 2px solid #fce4ee;
    border-radius: 14px;
    padding: 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* Jedna stavka */
.left-menu-item {
    margin-bottom: 8px;
}

/* Link */
.left-menu-link {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Naslov */
.left-menu-title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    font-family: 'Outfit', sans-serif;
}

/* Hover efekt */
.left-menu-link:hover {
    background: #fce4ee;
}

/*--------------------------------------------------------------------------LIJEVI MENI NA KATEGORIJAMA -> KRAJ------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------KOŠARICA------------------------------------------------------------------------*/
.payment-option-box-inner {
    font-family: 'Outfit', sans-serif;
}

.kosarica_proizvod_cijena {
    text-align: left;
    margin-bottom: 5px;
    margin-top: 35px;
    line-height: 1.2; /* razmak između starih i novih cijena */
}

    .kosarica_proizvod_cijena s {
        font-size: 0.85em; /* manja od nove cijene */
        color: #888888; /* siva boja */
        text-decoration: line-through;
    }

    .kosarica_proizvod_cijena br + * {
        font-size: 1em; /* nova cijena normalna veličina */
        font-weight: bold;
        color: #000000;
        display: block;
    }


/*PROMO KOD*/
.popust-kod {
    font-family: 'Outfit', sans-serif;
    font-weight: 300; /* Outfit-Light */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 500px;
    border-radius: 10px;
}

    /* NASLOV */
    .popust-kod p {
        border-bottom: 2px solid #6ECBF0;
        font-size: 16px;
        color: #333;
        text-align: center;
        padding-bottom: 5px;
        width: 100%;
    }

/* FLEX ROW ZA INPUT + BUTTON */
.popust-row {
    display: flex;
    flex-direction: column;
    gap: 10px; /* razmak između inputa i buttona */
    justify-content: center;
    width: 100%;
}

    /* INPUT */
    .popust-row input {
        width: 85%;
        height: 12px;
        padding: 10px;
        border: 1px solid #6ECBF0;
        border-radius: 6px;
        font-size: 14px;
    }

    /* BUTTON */
    .popust-row button {
        width: 44%;
        padding: 10px;
        background-color: #FF4FB3;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        font-family: 'Outfit', sans-serif;
        transition: background 0.2s ease;
    }

        .popust-row button:hover {
            background-color: #6ECBF0;
        }

.heading-hvala {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #888;
}

    .heading-hvala span {
        color: #FF4FB3;
        text-decoration: underline;
    }
/*--------------------------------------------------------------------------KOŠARICA -> KRAJ------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------WIDGET KOŠARICA------------------------------------------------------------------------*/
/* Mini Cart Widget */
.mini-cart {
    position: fixed;
    top: 0;
    right: -400px; /* Hidden off-screen */
    width: 400px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.3);
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid;
}

#kosarica-widget-title {
    color: #fff !important;
}

.mini-cart.open {
    right: 0; /* Slide in when open */
}

.mini-cart-header {
    background: #6ECBF0;
    color: #fff;
    padding: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .mini-cart-header h3 {
        margin: 0;
        font-size: 20px;
    }

#closeCart {
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
}

.mini-cart-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    max-height: calc(100vh - 200px);
}

.mini-cart-total {
    padding: 20px;
    background: #f5f5f5;
    font-size: 18px;
    font-weight: bold;
    border-top: 2px solid #6ECBF0;
    font-family: 'Outfit', sans-serif;
}

.minicart-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.minicart-item-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

    .minicart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #ddd;
        font-family: 'Outfit', sans-serif;
    }

.minicart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.minicart-item-name {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
}

    .minicart-item-name:hover {
        color: #6ECBF0;
    }

.minicart-item-quantity,
.minicart-item-price {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #666;
    font-family: 'Outfit', sans-serif;
}

.minicart-item-price {
    font-weight: 700;
}

.minicart-item-delete {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    background: #fff;
    border: none;
    border-radius: 5px;
    color: #646464;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    align-self: center;
}

    .minicart-item-delete:hover {
        background: #646464;
        color: #fff;
        border-color: #646464;
    }

    .minicart-item-delete i {
        font-size: 16px;
    }

.mini-cart-pay {
    height: 50px;
    background: #6ECBF0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mini-cart-pay button {
        background: #6ECBF0;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.2s ease;
    }

.related-items-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.related-items {
    display: flex;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .related-items > div {
        flex: 1;
        min-width: 120px;
        max-width: 150px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

.related-item-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

    .related-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.related-item-name {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    font-family: 'Outfit', sans-serif;
    line-height: 1.3;
    text-transform: none !important;
    height: 16px;
    overflow: hidden;
}

.related-item-price {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}
/*--------------------------------------------------------------------------WIDGET KOŠARICA -> KRAJ------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------KATEGORIJE-----------------------------------------------------------------------*/

.sort-div {
    margin-bottom: 30px;
}

#fieldset-sort {
    border: none !important;
}

.ddlSortiraj {
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    border: 2px solid #6ECBF0;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .ddlSortiraj:hover {
        border-color: #FF4FB3;
    }

    .ddlSortiraj:focus {
        outline: none;
        border-color: #FF4FB3;
        box-shadow: 0 0 5px rgba(193,102,168,0.4);
    }

    .ddlSortiraj option {
        font-size: 15px;
        padding: 6px;
    }

.div_6-nadgrupe {
    position: relative;
    width: 250px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
}

    /* Tekst NadGrupe */
    .div_6-nadgrupe > .menu_naglaseno span {
        display: block;
        padding: 4px 8px;
        font-weight: 500;
        transition: background 0.2s ease;
    }

    /* Hover NadGrupe */
    .div_6-nadgrupe:hover {
        background: #f7f7f7;
    }



/* ============================= */
/* GRUPE (desni panel) */
/* ============================= */

.div_6-grupe-wrapper {
    position: absolute;
    top: 0;
    left: 100%;
    width: 250px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
}

/* Prikaži desni panel */
.div_6-nadgrupe:hover > .div_6-grupe-wrapper {
    display: block;
}

/* Pojedinačna grupa */
.div_6-grupe {
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
}

    /* Tekst Grupe */
    .div_6-grupe span {
        display: block;
        padding: 4px 8px;
        transition: all 0.2s ease;
    }

    /* Hover Grupe */
    .div_6-grupe:hover {
        background: #f3f3f3;
    }


.menu_naglaseno.has-sub span::after {
    content: "›";
    float: right;
    font-size: 16px;
    opacity: 0.4;
}

/* ============================= */
/* PODGRUPE (treći nivo) */
/* ============================= */

/* Wrapper podgrupa */
.div_6-podgrupe-wrapper {
    position: absolute;
    top: 0;
    left: 100%; /* otvara se desno od Grupe */
    width: 250px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none; /* prikazuje se samo na hover */
}

/* Hover na Grupu → prikaži podgrupe */
.div_6-grupe:hover > .div_6-podgrupe-wrapper {
    display: block;
}


/* Pojedinačna podgrupa */
.div_6-podgrupe {
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
}

    /* Tekst podgrupe */
    .div_6-podgrupe span {
        display: block;
        padding: 4px 8px;
        transition: all 0.2s ease;
    }

    /* Hover podgrupe */
    .div_6-podgrupe:hover {
        background: #f3f3f3;
    }


/*--------------------------------------------------------------------------KATEGORIJE -> KRAJ-----------------------------------------------------------------------*/

/*--------------------------------------------------------------------------KONTAKT-----------------------------------------------------------------------*/
.buci_lokacije {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.buci_lokacija {
    flex: 1;
    min-width: 220px;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .buci_lokacija:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .buci_lokacija strong {
        font-size: 18px;
        color: #FF4FB3; /* ljubičasta */
        font-weight: 700;
    }

    .buci_lokacija p {
        margin: 8px 0;
        color: #333; /* tamno siva za tekst */
        line-height: 1.5;
    }

    .buci_lokacija a {
        color: #FF4FB3; /* tamnija ljubičasta za linkove */
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
    }

        .buci_lokacija a:hover {
            color: #FF69B4; /* hot pink na hover */
            text-decoration: underline;
        }

    .buci_lokacija span {
        color: #FF4FB3; /* ista boja za naglašeni tekst (npr. “Maloprodaja:” ili “Veleprodaja:”) */
        font-weight: 600;
    }
/*--------------------------------------------------------------------------KONTAKT -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------FOOTER-----------------------------------------------------------------------*/
/* ===== CUSTOM FOOTER STYLING ===== */

.footer-custom {
    /*background: linear-gradient(135deg, #6ECBF0 0%, #6AA399 100%);*/
    color: #fff;
    padding: 60px 0 40px;
    position: relative;
    overflow: hidden;
}

    /* Optional subtle pattern overlay */
    .footer-custom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        pointer-events: none;
    }

.footer-container-custom {
    display: flex;
    flex-wrap: nowrap; /* Changed from wrap to nowrap */
    gap: 30px; /* Reduced from 50px */
    /*justify-content: space-between;*/
    position: relative;
    z-index: 1;
    overflow-x: auto; /* Allow horizontal scroll if needed on very small screens */
}

.footer-col {
    flex: 1;
    min-width: 200px; /* Reduced from 240px */
    max-width: 280px; /* Added max-width to prevent too much stretching */
    animation: fadeInUp 0.6s ease-out;
}

/* Naslovi */
.footer-title-custom {
    font-size: 15px; /* Reduced from 16px */
    font-weight: 700;
    margin-bottom: 20px; /* Reduced from 25px */
    text-transform: uppercase;
    letter-spacing: 1.2px; /* Reduced from 1.5px */
    position: relative;
    font-family: 'Outfit', sans-serif;
    padding-bottom: 10px; /* Reduced from 12px */
}

    /* Underline accent */
    .footer-title-custom::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 40px; /* Reduced from 50px */
        height: 3px;
        background: #8ccced; /*#FF4FB3*/
        border-radius: 2px;
        transition: width 0.3s ease;
    }

.footer-col:hover .footer-title-custom::after {
    width: 70px; /* Reduced from 80px */
}

/* Linkovi */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links ul li {
        margin-bottom: 10px; /* Reduced from 12px */
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

        .footer-links ul li:hover {
            transform: translateX(5px);
        }

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 13px; /* Reduced from 14px */
    font-family: 'Outfit', sans-serif;
    display: inline-flex;
    align-items: center;
    position: relative;
}

    .footer-links a::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background: #FF4FB3;
        transition: width 0.3s ease;
    }

    .footer-links a:hover {
        color: #fff;
        padding-left: 0;
    }

        .footer-links a:hover::before {
            width: 100%;
        }

/* Ikonice */
.footer-links i {
    margin-right: 8px; /* Reduced from 10px */
    width: 18px; /* Reduced from 20px */
    transition: all 0.3s ease;
    color: #8ccced; /*#FF4FB3*/
    font-size: 14px; /* Reduced from 15px */
}

.footer-links a:hover i {
    color: #fff;
    transform: scale(1.15);
}

#aposlovnice {
    scroll-margin-top: 100px; /* visina headera */
}

    #aposlovnice ul li strong {
        font-weight: 600;
        font-size: 16px;
    }


    /* Fade in animation */
    @keyframes fadeInUp {
        from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Delay animation for each column */
.footer-col:nth-child(1) {
    animation-delay: 0.1s;
}

.footer-col:nth-child(2) {
    animation-delay: 0.2s;
}

.footer-col:nth-child(3) {
    animation-delay: 0.3s;
}

.footer-col:nth-child(4) {
    animation-delay: 0.4s;
}

/*--------------------------------------------------------------------------BRENDOVI-----------------------------------------------------------------------*/
.brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    list-style: none;
}

    .brand-list li {
        width: calc(24% - 14px);
    }

    .brand-list img {
        width: 50%;
        height: auto;
        display: block;
    }
/*--------------------------------------------------------------------------BRENDOVI -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------PRETRAGA-----------------------------------------------------------------------*/
.pretraga-div {
    width: 100% !important;
}

#pretraga_title {
    margin-top: 50px !important;
}
/*--------------------------------------------------------------------------PRETRAGA -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------NOVITETI-----------------------------------------------------------------------*/
.noviteti-div {
    width: calc(100% - 20px) !important;
}
/*--------------------------------------------------------------------------NOVITETI -> KRAJ-----------------------------------------------------------------------*/
/*--------------------------------------------------------------------------@MOBILE--------------------------------------------------------------------------------*/
@media (max-width: 768px) {
    .groups-left {
        display: flex;
    }

    .div-pocetna-novo {
        width: calc(50% - 0px) !important;
    }

    .has-sticky-mob #mobHeaderBottom {
        position: fixed;
        padding: 10px 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 9999;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /*.has-sticky-mob #mobHeaderBar .div_25 {
        display: none;
    }*/

    .footer-custom {
        padding: 40px 0 30px;
    }

    .footer-container-custom {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 35px;
        overflow-x: visible;
    }

    .footer-col {
        width: 100%;
        min-width: auto;
        max-width: none;
    }

    .footer-title-custom {
        font-size: 15px;
        margin-bottom: 18px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-links ul li {
        margin-bottom: 10px;
    }

    .main-title {
        font-size: 19px;
    }

    body#default {
        padding-top: 150px;
    }

    .izbornik_mob {
        z-index: 9999 !important;
    }

    .div_banner_web {
        background-repeat: no-repeat;
        height: 550px;
        width: 100%;
    }

    .boxes {
        flex-direction: column;
    }

        .boxes .box1 {
            width: 100%;
            aspect-ratio: 1 / 1;
            margin-bottom: 15px;
        }

    .tab-link {
        font-size: 15px;
    }

    .header-middle {
        display: none;
    }

    .header-top-new {
        display: none !important;
    }

    .menu_bar {
        display: none;
    }

    .proizvod_cijena_nova {
        font-size: 12px;
    }

    .proizvod_cijena_stara {
        font-size: 11px;
    }

    .mini-cart {
        width: 100%;
        right: -100%;
    }

    .mini-cart-items {
        max-height: calc(100vh - 180px); /* Adjust for mobile */
        padding: 15px;
    }

    /* Blog mobile styles */
    .div-blog {
        gap: 15px;
    }

        .div-blog .div_4 {
            width: 100%; /* Full width on mobile - 1 per row */
            flex: 0 0 100%;
        }

    .blog-slika {
        height: 180px;
    }

    .blog-content {
        padding: 15px;
    }

    .blog-title {
        font-size: 16px;
        min-height: 43px;
        max-height: 43px;
        overflow: hidden;
    }

    .blog-description {
        font-size: 13px;
    }

    .proizvod_opsirnije_kosarica {
        width: 100%;
    }

    #social_media {
        display: flex;
        justify-content: center;
        gap: 20px;
        align-items: center;
        margin-top: 10%;
    }

        #social_media li {
            list-style: none;
        }

            #social_media li a {
                font-size: 40px !important;
                color: #FF4FB3;
            }

    .div_6-nadgrupe > .menu_naglaseno span {
        font-weight: 600;
        font-size: 16px;
    }

    /*    .div_6-nadgrupe > .menu_naglaseno span::after {
            content: "›";
            float: right;
            font-size: 30px;
            margin-right: 10px;
            opacity: 0.4;
        }*/

    #pretraga_title {
        margin: 100px 0 25px 0 !important;
    }

    .proizvod_putanja {
        /*margin-top: 200px;*/
        margin-top: 50px;
    }

    .art-det-div {
        width: calc(90% - 0px);
    }

    .main-title-default {
        font-size: 22px !important;
    }

    #fieldset-sort {
        border: none !important;
        display: flex;
        justify-content: center;
    }

    /*  .sidenav {
        overflow: visible;
    }*/
    /*.panel {
        overflow: visible;
    }*/
    .div_6-grupe-wrapper {
        left: 0 !important;
        top: 40px !important;
    }
}

/*test*/
.mobile-menu,
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mobile-menu ul {
        display: none;
    }

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu a {
    display: block;
    padding: 14px;
    text-decoration: none;
    color: #333;
    flex: 1;
}

.menu-toggle {
    width: 40px;
    text-align: center;
    cursor: pointer;
}

    .menu-toggle:after {
        content: ">";
        font-size: 18px;
    }

    .menu-toggle.open:after {
        content: "▼";
    }

.mobile-menu ul a {
    padding-left: 30px;
}

.mobile-menu ul ul a {
    padding-left: 50px;
}
.nadgrupa-item-mob {
    font-size: 18px !important;
}
.grupa-item-mob {
    font-size: 16px !important;
    color: #888 !important;
}
.podgrupa-item-mob {
        font-size: 14px !important;
        color: #888 !important;
}