:root {
           --primary-red: #A81C1C;
            --primary-red: #A81C1C;
            --text-dark: #150B0E;
            --text-gray: #555555;
            --bg-light: #fdfaf7;
            --border-color: #e0dcd5;
            --module-active: #150B0E;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
    /*  html {
    scroll-behavior: smooth !important;
}*/

        html {
            scrollbar-gutter: stable;
        }

        body { font-family: 'Inter', sans-serif; background-color: var(--bg-light); color: var(--text-dark); line-height: 1.6; /*padding-bottom: 80px;*/}
        body.modal-open,
        /*body.modal-render-open {
            overflow: hidden !important;
        }*/
        /* --- HEADER --- */
      /* header { display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); position: sticky;            top: 0;            z-index: 100;}*/
       
/* --- GLOBAL LAYOUT SYSTEM --- */

:root {
    --container-sm: 960px;
    --container-md: 1200px;
    --container-lg: 1320px;
    --section-y: 80px;
    --section-x: 20px;
}

/* INTER (400, 500, 600) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Pomembno: prepreči utripanje teksta! */
  src: url('../webfonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); 
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../webfonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}

/* OSWALD (600, 700) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/oswald-v57-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/oswald-v57-latin_latin-ext-700.woff2') format('woff2');
}

.container {
    width: 100%;
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);
    background: #fff;
}

.container-subhero {
    width: 100%;
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);

}


.container-pobarvaj {
    width: 100%;
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);
   
}

.container-wide {
    width: 100%;
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);
}

.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.section-sm {
    padding-top: 60px;
    padding-bottom: 60px;
}

.full-width {
    width: 100%;
}

  .breadcrumbs { padding: 30px 0; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-gray); }
        .breadcrumbs a { text-decoration: none; color: var(--text-gray); transition: color 0.3s; }
        .breadcrumbs a:hover { color: var(--primary-red); }
        .breadcrumbs span { margin: 0 10px; color: #ccc; }
        .breadcrumbs .active { color: var(--text-dark); }


@media (max-width: 768px) {
    :root {
        --section-y: 50px;
        --section-x: 20px;
    }
}
        .logo {
            display: flex;
            align-items: center;
            font-family: 'Oswald', sans-serif;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--text-dark);
            text-transform: uppercase;
        }

        .logo svg { height: 35px; margin-right: 8px; }

        nav { display: flex; align-items: center; gap: 35px; }

        nav a {
            text-decoration: none;
            color: var(--text-dark);
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            padding-bottom: 5px;
        }

        nav a.active { color: var(--primary-red); }
        nav a.bg-mtom-red.active,
        nav a.text-white.active { color: #ffffff !important; }

        nav a.active::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 20px;
            height: 0px;
            background-color: var(--primary-red);
        }

        .header-right { display: flex; align-items: center; gap: 30px; }
        .divider { width: 1px; height: 24px; background-color: #ccc; }
        .cart { cursor: pointer; }

       
/* Skrije scrollbar, a ohrani drsenje na telefonu za sekcijo mnenj */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
       


        .buttons { display: flex; gap: 15px; margin-bottom: 60px; }

        .btn {
            padding: 16px 32px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary { background-color: var(--primary-red); color: white; border: 1px solid var(--primary-red); }
        .btn-primary:hover { background-color: #8a1515; border-color: #8a1515; }
        .btn-secondary { background-color: transparent; color: var(--text-dark); border: 1px solid var(--text-dark); }
        .btn-secondary:hover { background-color: var(--text-dark); color: white; }

  
        .hf-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
        .hf-item svg { width: 30px; height: 30px; stroke: var(--primary-red); fill: none; stroke-width: 1.5; }
        .hf-item span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; }

        /* --- BOTTOM BANNER --- */
        .bottom-banner {
            background-color: #fbf9f6;
            background: linear-gradient(#ffffff 0%, #fdfaf7 100%);
            padding: 40px 50px;
            /*border-top: 1px solid var(--border-color);*/
        }

        .banner-header {
            display: flex; align-items: center; text-align: center; margin-bottom: 40px;
            color: var(--text-dark); font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
        }

        .banner-header::before, .banner-header::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
        .banner-header:not(:empty)::before { margin-right: 20px; }
        .banner-header:not(:empty)::after { margin-left: 20px; }

        .banner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
        .bg-item { display: flex; gap: 20px; align-items: flex-start; }
        .bg-item svg { width: 35px; height: 35px; stroke: var(--primary-red); fill: none; stroke-width: 1.5; flex-shrink: 0; }
        .bg-content h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .bg-content p { font-size: 13px; color: var(--text-gray); line-height: 1.5; }


        /* --- COLLECTION SECTION (GRID) --- */
       /* #collection {    scroll-margin-top: 100px; }*/

       .collection-section {
    margin-top: -60px; /*var(--section-y);*/
   /* padding-bottom: var(--section-y);*/
}

.collection-inner {
    max-width: var(--container-md);
    margin: 0 auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);
}
/* Ta razred potisne sliko navzdol, ko je utility meni odprt */
    .hero-bg-shifted {
        top: 150px !important;
    }
    /* Na računalnikih (md) slika vedno ostane na vrhu (0) */
    @media (min-width: 768px) {
        .hero-bg-shifted {
            top: 0 !important;
        }
    }


        .section-title {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-title h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 45px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            margin-bottom: 10px;
        }

        .section-title p { color: var(--text-gray); font-size: 16px; }

        .collection-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 320px; 
            gap: 20px;
        }

        .product-card {
            position: relative; overflow: hidden; display: flex; align-items: flex-end;
            text-decoration: none; background-color: #222;
        }

        .product-card img {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1;
        }

        .card-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 100%);
            z-index: 2; transition: background 0.3s ease;
        }

        .product-card:hover img { transform: scale(1.05); }
        .product-card:hover .card-overlay { background: linear-gradient(to top, rgba(168,28,28,0.9) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%); }

        .card-content { position: relative; z-index: 3; padding: 30px; width: 100%; color: white; }
        .tag { color: var(--primary-red); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; display: block; }
        .product-card:hover .tag { color: white; }
        .title { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; text-transform: uppercase; line-height: 1.1; margin-bottom: 5px; }
        .price { font-size: 14px; font-weight: 500; opacity: 0.9; }

        /* Grid Sizes */
        .size-large { grid-column: span 2; grid-row: span 2; }
        .size-large .title { font-size: 46px; }
        .size-wide { grid-column: span 2; grid-row: span 1; }
        .size-tall { grid-column: span 1; grid-row: span 2; }
        .size-tall .title { font-size: 34px; }

        /* --- RESPONSIVE DESIGN --- */
        @media (max-width: 1200px) {
            .collection-grid { grid-template-columns: repeat(3, 1fr); }
            .size-large { grid-column: span 2; grid-row: span 2; }
            .size-wide { grid-column: span 2; }
        }
        @media (max-width: 1024px) {
          
            .banner-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        }
        @media (max-width: 900px) {
            .collection-grid { grid-template-columns: repeat(2, 1fr); }
            .size-large { grid-column: span 2; }
            .size-wide { grid-column: span 2; }
            .size-tall { grid-row: span 1; }
        }
        @media (max-width: 768px) {
            header { flex-direction: column; gap: 20px; position: relative; background-color: var(--bg-light); padding: 20px; }
            
            .banner-grid { grid-template-columns: 1fr; }
            .buttons { flex-direction: column; }
            .btn { text-align: center; }
            .collection-section { padding: 0px 20px; }
            .collection-grid { grid-template-columns: 1fr; grid-auto-rows: 400px; }
            .size-large, .size-wide, .size-tall { grid-column: span 1; grid-row: span 1; }
        }
     

        /* --- FOOTER SECTION --- */
    .site-footer {
       /* background-color: var(--bg-light);*/
        padding: 80px 50px 30px 50px;
        border-top: 1px solid var(--border-color);
        color: var(--text-dark);
        font-family: 'Inter', sans-serif;
    }

    .footer-container {
    max-width: var(--container-md);
    margin: 0 auto;
}

    .footer-top {
        display: grid;
        /* Nastavimo 5 stolpcev: prvi in zadnji sta malo širša, srednji trije pa enaki */
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
        gap: 40px;
        margin-bottom: 60px;
    }

    .footer-logo {
        display: flex;
        align-items: center;
        font-family: 'Oswald', sans-serif;
        font-size: 42px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--text-dark);
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .footer-logo svg {
        height: 45px;
        margin-right: 8px;
    }

    .footer-logo sup {
        font-size: 16px;
        margin-left: 5px;
        margin-top: -20px;
    }

    .brand-col p {
        color: var(--text-gray);
        font-size: 14px;
        line-height: 1.7;
        max-width: 280px;
    }

    .footer-heading {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 30px;
    }

    .links-col ul {
        list-style: none;
        padding: 0;
    }

    .links-col li {
        margin-bottom: 18px;
    }

    .links-col a {
        text-decoration: none;
        color: var(--text-dark);
        font-size: 15px;
        font-weight: 500;
        transition: color 0.3s;
        position: relative;
        display: inline-block;
        padding-bottom: 2px;
    }

    .links-col a::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: var(--primary-red);
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .links-col a:hover {
        color: var(--primary-red);
    }

    .links-col a:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    .newsletter-col p {
        color: var(--text-gray);
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .newsletter-form {
        display: flex;
        border: 1px solid #dcd7d0;
        background: transparent;
        transition: border-color 0.3s;
    }
    
    .newsletter-form:focus-within {
        border-color: var(--text-dark);
    }

    .newsletter-form input {
        flex: 1;
        padding: 14px 15px;
        border: none;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        outline: none;
        color: var(--text-dark);
    }

    .newsletter-form input::placeholder {
        color: #999;
    }

    .newsletter-form button {
        background: var(--text-dark);
        color: white;
        border: none;
        padding: 0 20px;
        cursor: pointer;
        transition: background 0.3s;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .newsletter-form button:hover {
        background: var(--primary-red);
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;
        border-top: 1px solid var(--border-color);
        font-size: 13px;
        color: #888;
    }

    .legal-links {
        display: flex;
        gap: 25px;
    }

    .legal-links a {
        color: #888;
        text-decoration: none;
        transition: color 0.3s;
    }

    .legal-links a:hover {
        color: var(--text-dark);
    }

     /* --- PRODUCT LAYOUT (Smart Grid) --- */
        .product-layout {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 60px;
            margin-bottom: 80px;
        }

        .pl-right {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        /* --- SLIKA IN OVERLAY --- */
        .product-image-container {
            position: relative;
            width: 100%;
            height: 750px;
            background-color: #eee;
            overflow: hidden;
            border-radius: 4px;
        }

        .product-image-container img { width: 100%; height: 100%; object-fit: cover; }

        /* Senca spodaj, da so beli teksti in barve vidni */
        .image-gradient {
            position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            pointer-events: none;
            z-index: 2;
        }

        .btn-expand { position: absolute; top: 20px; left: 20px; background: var(--text-dark); color: white; padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 1px; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; text-transform: uppercase; z-index: 5; }
        
        .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: background 0.3s, color 0.3s; z-index: 5; }
        .nav-arrow:hover { background: var(--primary-red); color: white; }
        .nav-arrow.left { left: 20px; }
        .nav-arrow.right { right: 20px; }

        .image-label { position: absolute; bottom: 25px; left: 25px; color: white; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; z-index: 5; }

        /* NOVO: Barvni Overlay na sliki */
        .image-colors-overlay {
            position: absolute;
            bottom: 25px;
            right: 25px;
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        /*.color-swatch {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
            transition: transform 0.2s;
        }

        .color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 1px rgba(255,255,255,0.8); }
        .color-swatch.active { box-shadow: 0 0 0 2px white; transform: scale(1.1); }*/

        /* --- DESNI DEL (Info) --- */
        .kicker { color: var(--primary-red); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; }
        .kicker::after { content: ''; display: block; width: 30px; height: 2px; background-color: var(--primary-red); margin-top: 8px; }
        .product-title { font-family: 'Oswald', sans-serif; font-size: 70px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: -1px; color: var(--text-dark); margin-bottom: 5px; margin-top: 10px; }
        .product-type { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; color: var(--text-gray); letter-spacing: 0.5px; }
        .product-desc { font-size: 15px; color: var(--text-gray); line-height: 1.7; border-top: 1px solid var(--border-color); padding-top: 30px; }

        /* Izbirniki modulov */
        .selector-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dark); }
        .modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .module-btn { border: 1px solid var(--border-color); background-color: transparent; padding: 15px 20px; text-align: left; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; }
        .module-btn:hover { border-color: var(--text-dark); }
        .module-btn.active { background-color: var(--module-active); color: white; border-color: var(--module-active); }
        .module-btn h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .module-btn p { font-size: 11px; opacity: 0.7; }

        .action-buttons { display: flex; gap: 15px; margin-top: 10px; }
        .btn { flex: 1; padding: 18px 0; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; }
        .btn-primary { background-color: var(--primary-red); color: white; border: 1px solid var(--primary-red); }
        .btn-primary:hover { background-color: #8a1515; border-color: #8a1515; }
        .btn-secondary { background-color: transparent; color: var(--text-dark); border: 1px solid var(--text-dark); }
        .btn-secondary:hover { background-color: var(--text-dark); color: white; }

       

        .divider { width: 1px; height: 24px; background-color: #ccc; }
        .cart { cursor: pointer; }
#btnRender {
    /* Živahen gradient: Modra -> Indigo */
    background-image: linear-gradient(to right, #2563eb 0%, #4f46e5 51%, #2563eb 100%) !important;
    background-size: 200% auto; /* Potrebno za animacijo gradienta */
    
    color: white;
    border: none; /* Odstranimo default border */
    
    /* Steklen rob zgoraj */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Žareča senca (Blur effect okoli gumba) */
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    
    transition: 0.5s; /* Gladka animacija */
}

#btnRender:hover {
    background-position: right center; /* Premakne gradient (efekt tekoče barve) */
    box-shadow: 0 0 25px rgba(79, 70, 229, 0.6); /* Močnejši vijoličen sijaj */
    transform: scale(1.02); /* Rahla povečava */
}

/* Ikona strele znotraj gumba naj tudi zažari */
#btnRender .fa-bolt {
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.8)); /* Rumen sijaj okoli strele */
}


        .benefits-section {
  background: #f7f3ee;
  padding: 70px 6vw;
  border-top: 1px solid #ddd4ca;
  border-bottom: 1px solid #ddd4ca;
}

.benefits-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  margin-bottom: 48px;
}

.benefits-header span {
  height: 1px;
  background: #d7cec4;
}

.benefits-header h2 {
  font-size: 22px;
  letter-spacing: 6px;
  font-weight: 800;
  color: #161616;
  margin: 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 22px;
}

.benefit-card {
  background: #fffaf4;
  border: 1px solid #e1d7cc;
  padding: 34px;
  min-height: 230px;
  position: relative;
  box-shadow: 0 18px 45px rgba(40, 28, 18, 0.06);
}

.benefit-large {
  grid-row: span 2;
  background: linear-gradient(135deg, #fffaf4, #ead9c7);
}

.benefit-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 28px;
  color: #ad171b;
}

.benefit-card h3 {
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #171717;
  font-weight: 800;
}

.benefit-card p {
  font-size: 16px;
  line-height: 1.55;
  color: #5d5650;
  margin: 0;
}

.benefit-mini {
  background: transparent;
  border-top: 1px solid #d6ccc1;
  padding-top: 22px;
}

.benefit-mini strong {
  display: block;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: #171717;
  margin-bottom: 8px;
}

.benefit-mini span {
  font-size: 14px;
  color: #6b625b;
  line-height: 1.45;
}

.promo-item,
.promo-list-item {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.promo-visible .promo-item,
.promo-visible .promo-list-item {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay */

.promo-visible .promo-item:nth-child(1) {
    transition-delay: 0.1s;
}

.promo-visible .promo-item:nth-child(2) {
    transition-delay: 0.3s;
}

.promo-visible .promo-item:nth-child(3) {
    transition-delay: 0.5s;
}

.promo-visible .promo-list-item:nth-child(1) {
    transition-delay: 0.2s;
}

.promo-visible .promo-list-item:nth-child(2) {
    transition-delay: 0.35s;
}

.promo-visible .promo-list-item:nth-child(3) {
    transition-delay: 0.5s;
}

.promo-visible .promo-list-item:nth-child(4) {
    transition-delay: 0.65s;
}

.promo-visible .promo-list-item:nth-child(5) {
    transition-delay: 0.8s;
}

.cam-btn{
  width:40px;
  height:40px;
  border-radius:0.5rem;
  border:1px solid #cbd5e1;
  background-color:#f8fafc;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
}

.shimmer-effect {
    /* Odstranimo navadno barvo in dodamo gradient */
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important; 
    
    /* Dodamo steklen rob zgoraj (highlight) */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    /* Mehka rdeča senca (blur effect) spodaj */
    box-shadow: 
        0 4px 6px -1px rgba(220, 38, 38, 0.3),
        0 10px 15px -3px rgba(220, 38, 38, 0.2),
        inset 0 0 20px rgba(0,0,0,0.1); /* Notranja senca za globino */
        
    /* Zaobljenost in tranzicija */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.shimmer-effect:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 10px 20px -5px rgba(220, 38, 38, 0.4),
        0 0 15px rgba(239, 68, 68, 0.5); /* Močnejši sijaj ob hoverju */
}

.shimmer-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Začne izven vidnega polja na levi */
    width: 100%;
    height: 100%;
    
    /* Svetlobni trak pod kotiranjem 45 stopinj */
    background: linear-gradient(
        120deg, 
        rgba(255, 255, 255, 0) 30%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0) 70%
    );
    
    /* Animacija traja 2 sekundi in se ponavlja v neskončnost */
    animation: shimmer 5.5s infinite;
}



@keyframes shimmer {
    0% {
        left: -150%;
    }
    30%, 100% {
        left: 150%; /* Konča izven vidnega polja na desni */
    }
}

 #modal-image {
            background-color: white; /* Tukaj določiš barvo */
           /* background-image: 
                linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);*/
           /* background-size: 20px 20px;*/
           /* background-position: 0 0, 0 10px, 10px -10px, -10px 0px;*/
            background-color: white;
        }

        #preview-size-text {
            pointer-events: none;
            white-space: pre-line;
            text-align: center;
            /* Da tekst ne "uide" iz majhnih okvirjev */
            font-size: clamp(8px, 1.5vw, 12px); 
        }

        #preview {
    position: absolute;
    pointer-events: none;
}
        /* --- MOBILNA RESPONZIVNOST (Trik z vrstnim redom) --- */
        @media (max-width: 1024px) {
            .product-layout { grid-template-columns: 1fr; gap: 40px; }
            .product-image-container { height: 500px; }
        }

        @media (max-width: 768px) {
          
     
            
            /* Spremenimo Grid v Flex, da lahko nadziramo vrstni red (order) */
            .product-layout { display: flex; flex-direction: column; gap: 25px; }
            
            /* 'Odvijemo' desni stolpec, da njegove komponente postanejo direktni otroci flexboxa */
            .pl-right { display: contents; } 
            
            /* Nastavimo popoln mobilni vrstni red */
            .pl-title-block { order: 1; }
            .pl-left { order: 2; }
            .pl-modules { order: 3; }
            .pl-desc { order: 4; border-top: none; padding-top: 0; }
            .pl-actions { order: 5; }

            .product-image-container { height: 400px; }
            .product-title { font-size: 50px; margin-top: 5px; }
            .action-buttons { flex-direction: column; }
        }

    /* Responzivnost za nogo strani */
    @media (max-width: 1200px) {
        .footer-top { grid-template-columns: 1fr 1fr 1fr; }
        .brand-col { grid-column: span 3; margin-bottom: 20px; }
        .newsletter-col { grid-column: span 3; margin-top: 20px; max-width: 400px;}
    }

    @media (max-width: 768px) {
        .site-footer { padding: 50px 20px 30px 20px; }
        .footer-top { grid-template-columns: 1fr; gap: 40px; }
        .brand-col, .newsletter-col { grid-column: span 1; }
        .footer-bottom { flex-direction: column-reverse; gap: 20px; text-align: center; }
        .legal-links { justify-content: center; flex-wrap: wrap; }
    }

    /* Animacija za neskončno premikanje ozadja */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Razred, ki ga dodamo naši sekciji */
.animate-gradient-bg {
    /* Uporabimo tvoje tri premium barve, dodamo še eno na konec za lepši prehod */
    background: linear-gradient(-45deg, #d7d7d7, #f0ebc7, #d8cff5, #caf4e9);
    /* Ozadje raztegnemo na 400% širine in višine */
    background-size: 400% 400%;
    /* Počasi premikamo - 15 sekund traja en cikel, 'ease' poskrbi za mehko ustavljanje */
    animation: gradient-shift 15s ease infinite;
}
/* Animacija samo za ozadje */
@keyframes bgFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.animate-bg-fade {
    /* Začetno stanje je 0, da slika ne utripne preden se začne animacija */
    opacity: 0; 
    animation: bgFadeIn 1.5s ease-in-out forwards;
}

/* Preprečitev neželenega označevanja besedila ob vlečenju z miško v konfiguratorju */
#configurator-main-wrapper,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Izjema: Vnosna polja in besedilna območja še naprej omogočajo označevanje in urejanje */
#configurator-main-wrapper input,
#configurator-main-wrapper textarea,
#configurator-main-wrapper [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}