body{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

.link-top{
    margin-top: 5vh;
    margin-left: 5vw;
}

.link-top span{
    font-style: italic;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    padding: 0 5px;
}

.link-top a{
    color: #000;
    transition: .8s;
    font-style: italic;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
}

.link-top a:hover{
    color: #868686;
    transition: .8s;
}

#active{
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}

.text-top{
    display: flex;
    align-items: center;
    gap: 2vw;
    margin-top: 5vh;

}

.headline-top h1{
    font-weight: bold;
}

.headline-top h5{
    font-family: "Montserrat", sans-serif;
}

.top-text1{
    width: 20vw;
    font-family: "Montserrat", sans-serif;
}

#dvojka{
    padding-left: 4vw;
    width: 24vw;
}

.text-top{
    margin-left: 5vw;
}

.grid-main{
    width: 75vw;
    display: grid;
    grid-template-columns: 25% 25% 25%;
    column-gap: 5%;
    row-gap: 5%;
    margin: 0 auto;
    margin-top: 5vh;
    font-family: "Montserrat", sans-serif;
}


.proizvodi img{
    width: 90%;
}

.proizvodi p{
    font-weight: 300;
    color: #000;
}

.proizvodi h3{
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
}

@media only screen and (min-width: 1100px) and (max-width: 1550px){

    .top-text1{
        width: 25vw;
    }

}


@media only screen and (min-width: 550px) and (max-width: 1100px){


    .top-text1{
        width: 40vw;
        font-size: small;
    }

    .grid-main{
        width: 80vw;
        grid-template-columns: 45% 45%;
        column-gap: 10%;
        justify-content: center;
        margin-top: 5vh;
    }

    .proizvodi img{
        width: 100%;
    }

    #dvojka{
        width: 44vw;
    }


}


@media only screen and (max-width: 550px){
    .text-top{
        width: 90vw;
        margin: 0 auto;
        margin-top: 5vh;
        flex-direction: column;
        align-items: normal;

    }

    .top-text1{
        padding-top: 2vh;
        width: 100%;
    }

    .grid-main{
        margin-top: 5vh;
        width: 90vw;
        grid-template-columns: 100%;
        row-gap: 5vh;
    }

    #dvojka{
        width: 100%;
        padding-left: 0;
    }
}



/* --- OSNOVNO I HEADER SHOP-A --- */
.shop-header {
   margin: 5vh 0 3vh 0;
}

.link-top{margin-left: 5vw;}
.link-top a { color: #000; font-weight: 300; text-decoration: none; transition: 0.3s; }
.link-top a:hover { color: #868686; }
#active { font-weight: bold; text-transform: uppercase; }

.text-top { display: flex; gap: 4vw; margin-top: 3vh; align-items: flex-start; margin-left: 10vw; 
    margin-right: 5vw; /* Dodajemo i desnu marginu zbog balansa */ }
.headline-top h1 { font-weight: 700; font-size: 2.5rem; margin: 0 0 5px 0; }
.headline-top h5 { font-weight: 300; font-size: 1.2rem; color: #555; margin: 0; }
.top-text1 p { max-width: 400px; line-height: 1.6; color: #444; margin: 0; }

/* --- SHOP LAYOUT (Filteri + Mreža) --- */
.shop-container {
    display: flex;
    gap: 4vw;
    margin: 0 5vw 10vh 10vw; /* Tvoje savršeno poravnanje */
    align-items: flex-start;
    max-width: calc(100vw - 15vw); /* Stroga zabrana probijanja ekrana */
    box-sizing: border-box;
}

/* --- SIDEBAR FILTERI --- */
.shop-filters {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 100px; /* Ostaje na ekranu dok se skrola */
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 25px;
    border-radius: 8px;
}
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-header h3 { margin: 0; font-size: 1.2rem; text-transform: uppercase; }
.mobile-filter-close { display: none; }

.filter-group { margin-bottom: 30px; }
.filter-group h4 { font-size: 1rem; font-weight: 600; margin-bottom: 15px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; }

/* Premium Checkbox */
.custom-checkbox { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; font-size: 14px; color: #333; user-select: none; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; transition: 0.2s; }
.custom-checkbox:hover input ~ .checkmark { border-color: #000; }
.custom-checkbox input:checked ~ .checkmark { background-color: #000; border-color: #000; }
.checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 6px; top: 2px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Premium Range Slider & Inputs */
.range-slider-container { display: flex; flex-direction: column; gap: 15px; }
.premium-slider { -webkit-appearance: none; width: 100%; height: 4px; background: #ddd; border-radius: 2px; outline: none; }
.premium-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #000; cursor: pointer; transition: 0.2s; }
.premium-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.range-inputs { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.premium-input { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-family: inherit; font-weight: 600; }
.premium-input:focus { border-color: #000; outline: none; }

.btn-filter { width: 100%; padding: 12px; background: #000; color: #fff; border: none; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: background 0.3s; border-radius: 4px;}
.btn-filter:hover { background: #333; }

/* --- MAIN: GRID PROIZVODA --- */
/* --- MAIN: GRID PROIZVODA --- */
.shop-products { 
    flex-grow: 1; 
    min-width: 0; /* Ključno: sprečava flexbox da se širi u beskonačnost */
}
.products-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; }
.mobile-filter-trigger { display: none; }

.shop-products .grid-main {
    width: 100% !important; /* Pregaziće onih starih 75vw sa vrha fajla */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 0;
}

/* Premium Product Cards */
.premium-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s ease;
}
.premium-card a { text-decoration: none; color: inherit; display: block; }
.premium-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: transparent; }

.img-wrapper { padding: 20px; background: #fafafa; display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; }
.img-wrapper img { max-width: 90%; max-height: 90%; object-fit: contain; transition: transform 0.4s ease; }
.premium-card:hover .img-wrapper img { transform: scale(1.05); }

.card-info { padding: 20px; text-align: center; }
.card-info .kategorija { font-size: 0.8rem; color: #888; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 1px; }
.card-info h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px 0; color: #111; }
.card-info .boja { font-size: 0.85rem; color: #666; font-style: italic; }

/* --- RESPONZIVNOST --- */
@media (max-width: 1024px) {
    .text-top { flex-direction: column; gap: 2vh; }
    .top-text1 p { max-width: 100%; }
}

@media (max-width: 850px) {
    .shop-container { flex-direction: column; }
    
    /* Mobilni filteri kao Modal / Drawer */
    .shop-filters { 
        display: none; /* Inicijalno sakriveno na mobilnom */
        position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; 
        border-radius: 0; overflow-y: auto; padding: 30px 20px; 
    }
    .shop-filters.active { display: block; }
    .mobile-filter-close { display: block; background: none; border: none; font-size: 2rem; cursor: pointer; }
    .mobile-filter-trigger { display: flex; align-items: center; gap: 5px; background: #f4f4f4; border: 1px solid #ddd; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: 600; }
    
    .products-top-bar { align-items: center; }
}