/*
Theme Name: Divi Child
Template: Divi
Version: 1.0.0
Description: Child tema za Divi - sve customizacije ovdje
Author: Nokaj Kristijan
*/

/* ========================================
   WOOCOMMERCE - AKCIJA OZNAKA (SALE BADGE)
   ======================================== */

/* Mala i kompaktna podloga za Akcija oznaku — prisilni override */
.woocommerce ul.products li.product .onsale {
    font-size: 16px !important;
    padding: 1px 3px !important;
    background-color: #8E3557 !important;
    color: #fff !important;
    border-radius: 2px !important;
    top: 4px !important;
    left: 4px !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;

    /* OVO JE KLJUČ — uklanja temine fiksne dimenzije */
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    min-width: 0 !important;
}

/* Hover efekt - svjetlija boja */
.woocommerce ul.products li.product:hover .onsale {
    background-color: #B8467A !important; /* Svjetlija verzija #8E3557 */
    transform: scale(1.05) !important; /* Lagano povećanje */
}

/* PROIZVODI SA GALERIJOM - zlatna pozadina za premium vizualni hint */
.woocommerce ul.products li.product.has-product-gallery .onsale {
    background-color: #D4AF37 !important; /* Zlatna - instant prepoznavanje galerije */
    color: #fff !important;
}

.woocommerce ul.products li.product.has-product-gallery:hover .onsale {
    background-color: #E5C158 !important; /* Svjetlija zlatna na hover */
    transform: scale(1.08) !important; /* Malo veće povećanje */
}

/* MOBITELI – ultra kompaktna oznaka Akcija */
@media only screen and (max-width: 767px) {
    .woocommerce ul.products li.product .onsale {
        font-size: 12px !important;     /* dovoljno čitljivo */
        padding: 0 1px !important;      /* minimalna podloga */
        line-height: 0.9 !important;    /* dodatno stisnuta visina oznake */
        top: 1px !important;            /* pomaknuto prema rubu */
        left: 1px !important;
        border-radius: 1px !important;  /* lagano zaobljenje */
    }
}

/* ========================================
   WOOCOMMERCE - RAZMAK IZMEĐU PROIZVODA
   ======================================== */

/* Kristijan - minimalni razmak između proizvoda */
.woocommerce ul.products {
    gap: 1px !important;
}

.woocommerce ul.products li.product {
    margin: 1px !important;
    padding: 1px !important;
}

/* VEĆI EKRANI – desktop (1025px+) */
@media (min-width: 1025px) {
    .woocommerce ul.products li.product {
        width: calc(25% - 2px) !important; /* 4 u redu */
    }
}

/* TABLETI – srednji ekrani (768px do 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .woocommerce ul.products li.product {
        width: calc(33.333% - 2px) !important; /* 3 u redu */
    }
}

/* MOBITELI – mali ekrani (do 767px) */
@media (max-width: 767px) {
    .woocommerce ul.products li.product {
        width: calc(50% - 1px) !important; /* 2 u redu */
        float: left !important;
        clear: none !important;
    }
    
    /* Svaki drugi proizvod čisti lijevo kako bi ostali u redu */
    .woocommerce ul.products li.product:nth-child(2n+1) {
        clear: left !important;
    }
}

/* ========================================
   WOOCOMMERCE - HOVER EFEKT PROIZVODA
   ======================================== */

/* Osnovno stanje proizvoda */
.woocommerce ul.products li.product {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid transparent !important;
}

.woocommerce ul.products li.product a img {
    transition: transform 0.3s ease !important;
    border: 1px solid #f0f0f0 !important; /* Suptilni neutralni okvir */
}

/* Hover efekt - lagano podizanje + srebrena sjena */
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(192, 192, 192, 0.35) !important; /* Srebrena sjena */
}

.woocommerce ul.products li.product:hover a img {
    border-color: #C0C0C0 !important; /* Srebreni okvir */
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.3) !important;
}

/* Ukloni default Divi hover overlay */
.woocommerce ul.products li.product .et_overlay,
.woocommerce ul.products li.product:hover .et_overlay {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

/* Zadrži normalnu vidljivost slike - bez zasjenjivanja */
.woocommerce ul.products li.product:hover a img {
    opacity: 1 !important;
    filter: none !important;
}

/* Dodaj suptilni glow na cijenu pri hover-u */
.woocommerce ul.products li.product:hover .price {
    color: #888 !important; /* Tamnija siva umjesto zlatne */
    transition: color 0.3s ease !important;
}

/* ========================================
   CUSTOM STYLES - dodaj dodatne stilove ovdje
   ======================================== */

/* ========================================
   SMOOTH SCROLL - optimizirano scrollovanje
   ======================================== */

/* Ukloni default smooth scroll (prevelik lag) */
html {
    scroll-behavior: auto !important;
}

/* Primijeni smooth samo na anchor linkove */
a[href^="#"] {
    scroll-behavior: auto !important;
}

/* Optimizovano scrollovanje kotačićem miša */
body {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Ako koristiš moderne browsere, ograniči smooth scroll samo na klikove */
@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: auto;
    }
}