/* ==========================================================================
   Katalog: ujednačen grid za Elated Product List shortcode ([eltdf_product_list])
   Učitava se iz inc/catalog-grid.php, posle CSS-a roditeljske teme.
   Važi samo za "standard" layout (masonry se ne dira).
   ========================================================================== */

/* --- Okvir i veličina slike (jedno mjesto za podešavanje) ---
   --cf-box-ratio : odnos širina/visina okvira slike (5/4 = niži od kvadrata, manje praznog prostora)
   --cf-img-w     : najveća širina slike u okviru (široke slike: šoljice, aparati)
   --cf-img-h     : najveća visina slike u okviru (visoke slike: kutije čaja, kapsule) */
body {
    --cf-box-ratio: 5 / 4;
    --cf-img-w: 72%;
    --cf-img-h: 90%;
}

@media only screen and (max-width: 768px) {
    body {
        --cf-img-w: 88%;   /* telefon: kartice su uske, slika može biti veća */
        --cf-img-h: 96%;
    }
}

/* --- Broj kolona po klasi koju shortcode već postavlja --- */
.eltdf-pl-holder.eltdf-standard-layout { --cf-cols: 4; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-one-column    { --cf-cols: 1; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-two-columns   { --cf-cols: 2; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-three-columns { --cf-cols: 3; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-four-columns  { --cf-cols: 4; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-five-columns  { --cf-cols: 5; }
.eltdf-pl-holder.eltdf-standard-layout.eltdf-six-columns   { --cf-cols: 6; }

/* --- Grid umjesto float-a: svi redovi iste visine, nema "stepenica" --- */
body .eltdf-pl-holder.eltdf-standard-layout > .eltdf-pl-outer {
    display: grid;
    grid-template-columns: repeat(var(--cf-cols), minmax(0, 1fr));
    align-items: stretch;
}

/* clearfix pseudo-elementi bi u gridu postali prazne ćelije */
body .eltdf-pl-holder.eltdf-standard-layout > .eltdf-pl-outer::before,
body .eltdf-pl-holder.eltdf-standard-layout > .eltdf-pl-outer::after {
    content: none;
    display: none;
}

/* Poništava float/width/clear iz roditeljske teme; razmak (padding) ostaje iz teme.
   !important na width: "Prilagodi > Dodatni CSS" na telefonu ima
   .eltdf-pli { width: 50% !important }, zbog čega se lista skupljala ulijevo. */
body .eltdf-pl-holder.eltdf-standard-layout > .eltdf-pl-outer > .eltdf-pli {
    display: flex;
    flex-direction: column;
    float: none;
    clear: none;
    width: auto !important;
    min-width: 0;
}

/* --- Okvir slike: fiksna kvadratna proporcija, slika se nikad ne siječe --- */
body .eltdf-pl-holder.eltdf-standard-layout .eltdf-pli-inner {
    display: block;
    width: 100%;
    flex: 0 0 auto;
}

/* Slika "sjeda" na dno okvira: razmak slika -> naziv je isti na svakoj kartici,
   višak prostora (kod niskih/širokih slika) ide iznad slike. */
body .eltdf-pl-holder.eltdf-standard-layout .eltdf-pli-inner .eltdf-pli-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: auto; /* Dodatni CSS ima fiksnu visinu 360px / 180px; visinu određuje aspect-ratio */
    aspect-ratio: var(--cf-box-ratio);
    padding: 0;
    overflow: hidden;
    /* Providno: sekcije imaju različite pozadine (bijela, bež...), okvir ne smije da se vidi */
    background: transparent;
    box-sizing: border-box;
}

/* !important: Dodatni CSS na telefonu ima img { width/height: auto !important } i
   object-fit: cover !important (sijekao slike). */
body .eltdf-pl-holder.eltdf-standard-layout .eltdf-pli-inner .eltdf-pli-image img {
    display: block;
    width: var(--cf-img-w) !important;
    height: var(--cf-img-h) !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center bottom !important;
}

/* --- Tekst: naslov se lomi normalno, cijena uvijek poravnata na dnu kartice --- */
body .eltdf-pl-holder.eltdf-standard-layout .eltdf-pli-text-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
}

/* Naslov preuzima višak visine, pa cijene u istom redu kreću sa iste linije
   (i kad se akcijska cijena lomi u dva reda). */
body .eltdf-pl-holder.eltdf-standard-layout .eltdf-pli-text-wrapper .eltdf-pli-title {
    flex: 1 0 auto;
    overflow-wrap: break-word;
}

/* Ako lista ima akcijsku cijenu (stara + nova), ona se na uskim karticama lomi u 2 reda;
   rezerviše se isti prostor svim cijenama u toj listi da vrhovi ostanu poravnati.
   Stariji browseri bez :has()/lh jednostavno ignorišu pravilo. */
body .eltdf-pl-holder.eltdf-standard-layout:has(.eltdf-pli-text-wrapper .eltdf-pli-price del) .eltdf-pli-text-wrapper .eltdf-pli-price {
    min-height: 2lh;
}

/* --- Responsive: ograničenje broja kolona --- */
@media only screen and (max-width: 1440px) {
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-five-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-six-columns {
        --cf-cols: 4;
    }
}

@media only screen and (max-width: 1024px) {
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-four-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-five-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-six-columns {
        --cf-cols: 3;
    }
}

@media only screen and (max-width: 768px) {
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-three-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-four-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-five-columns,
    body .eltdf-pl-holder.eltdf-standard-layout.eltdf-six-columns {
        --cf-cols: 2;
    }
}

@media only screen and (max-width: 360px) {
    body .eltdf-pl-holder.eltdf-standard-layout:not(.eltdf-one-column) {
        --cf-cols: 1;
    }
}

/* ==========================================================================
   WooCommerce arhive: Shop, kategorije proizvoda, tagovi
   (ul.products unutar .eltdf-pl-main-holder). Tema dodaje eltdf-woo-main-page
   samo na Shop stranici, pa stari CSS iz style.css nije važio za kategorije.
   Selektori su namjerno specifičniji od starih pravila u style.css.
   ========================================================================== */

body.eltdf-woocommerce-page:not(.single-product)                                 { --cf-arch-cols: 3; }
body.eltdf-woocommerce-page.eltdf-woocommerce-columns-2:not(.single-product)     { --cf-arch-cols: 2; }
body.eltdf-woocommerce-page.eltdf-woocommerce-columns-3:not(.single-product)     { --cf-arch-cols: 3; }
body.eltdf-woocommerce-page.eltdf-woocommerce-columns-4:not(.single-product)     { --cf-arch-cols: 4; }
body.eltdf-woocommerce-page.eltdf-woocommerce-columns-5:not(.single-product)     { --cf-arch-cols: 5; }
body.eltdf-woocommerce-page.eltdf-woocommerce-columns-6:not(.single-product)     { --cf-arch-cols: 6; }

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products {
    display: grid;
    grid-template-columns: repeat(var(--cf-arch-cols), minmax(0, 1fr));
    align-items: stretch;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products::before,
body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products::after {
    content: none;
    display: none;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product {
    display: flex;
    flex-direction: column;
    float: none;
    clear: none;
    width: auto;
    min-width: 0;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product .eltdf-pl-inner {
    display: block;
    width: 100%;
    flex: 0 0 auto;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: var(--cf-box-ratio);
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image img {
    display: block;
    width: var(--cf-img-w);
    height: var(--cf-img-h);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product .eltdf-pl-text-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin-top: 12px;
    padding-top: 0;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products > li.product .eltdf-pl-text-wrapper .eltdf-product-list-title {
    flex: 1 0 auto;
    overflow-wrap: break-word;
}

body.eltdf-woocommerce-page:not(.single-product) .eltdf-pl-main-holder > ul.products:has(.price del) > li.product .price {
    min-height: 2lh;
}

/* Sidebar na vrh kolone. U "Prilagodi > Dodatni CSS" postoji globalno pravilo
   .eltdf-grid-row { display:flex; align-items:center }, zbog kojeg se sidebar na
   kategorijama vertikalno centrirao uz listu proizvoda (i "bježao" kad se lista promijeni).
   Glavna Shop stranica je to već imala riješeno u style.css; ovo važi za sve arhive. */
body.eltdf-woocommerce-page:not(.single-product) .eltdf-grid-row > .eltdf-page-content-holder,
body.eltdf-woocommerce-page:not(.single-product) .eltdf-grid-row > .eltdf-sidebar-holder {
    align-self: flex-start;
}

/* Desktop: sidebar počinje u visini proizvoda (ispod reda "Prikaz ... rezultata"),
   isto kao na glavnoj Shop stranici (style.css, 172px). Na <=1024px sidebar ide ispod/u drawer. */
@media only screen and (min-width: 1025px) {
    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) .eltdf-grid-row > .eltdf-sidebar-holder aside.eltdf-sidebar {
        margin-top: 172px;
    }
}

/* Široki ekrani: na arhivama (sa sidebar-om) 4 proizvoda u redu umjesto 3,
   da kartice ne budu preširoke. Za povratak na 3 kolone obrisati ovaj blok. */
@media only screen and (min-width: 1281px) {
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-3:not(.single-product) {
        --cf-arch-cols: 4;
    }
}

@media only screen and (max-width: 1200px) {
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-5:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-6:not(.single-product) {
        --cf-arch-cols: 4;
    }
}

@media only screen and (max-width: 1024px) {
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-4:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-5:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-6:not(.single-product) {
        --cf-arch-cols: 3;
    }
}

@media only screen and (max-width: 768px) {
    body.eltdf-woocommerce-page:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-3:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-4:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-5:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-6:not(.single-product) {
        --cf-arch-cols: 2;
    }
}

@media only screen and (max-width: 360px) {
    body.eltdf-woocommerce-page:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-2:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-3:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-4:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-5:not(.single-product),
    body.eltdf-woocommerce-page.eltdf-woocommerce-columns-6:not(.single-product) {
        --cf-arch-cols: 1;
    }
}

/* ==========================================================================
   Stranica proizvoda: "Povezani proizvodi" (related) i upsells
   Isti tretman kao grid kategorija: isti okvir slike, slika na dnu okvira,
   poravnati nazivi i cijene. Broj kolona: Elated Options > related columns.
   ========================================================================== */

body.single-product                                  { --cf-rel-cols: 4; }
body.single-product.eltdf-woocommerce-columns-2      { --cf-rel-cols: 2; }
body.single-product.eltdf-woocommerce-columns-3      { --cf-rel-cols: 3; }
body.single-product.eltdf-woocommerce-columns-4      { --cf-rel-cols: 4; }
body.single-product.eltdf-woocommerce-columns-5      { --cf-rel-cols: 5; }
body.single-product.eltdf-woocommerce-columns-6      { --cf-rel-cols: 6; }

body.single-product .related.products > ul.products,
body.single-product .upsells.products > ul.products {
    display: grid;
    grid-template-columns: repeat(var(--cf-rel-cols), minmax(0, 1fr));
    align-items: stretch;
}

body.single-product .related.products > ul.products::before,
body.single-product .related.products > ul.products::after,
body.single-product .upsells.products > ul.products::before,
body.single-product .upsells.products > ul.products::after {
    content: none;
    display: none;
}

body.single-product .related.products > ul.products > li.product,
body.single-product .upsells.products > ul.products > li.product {
    display: flex;
    flex-direction: column;
    float: none;
    clear: none;
    width: auto;
    min-width: 0;
}

body.single-product .related.products > ul.products > li.product .eltdf-pl-inner,
body.single-product .upsells.products > ul.products > li.product .eltdf-pl-inner {
    display: block;
    width: 100%;
    flex: 0 0 auto;
}

body.single-product .related.products > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image,
body.single-product .upsells.products > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: var(--cf-box-ratio);
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
}

body.single-product .related.products > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image img,
body.single-product .upsells.products > ul.products > li.product .eltdf-pl-inner .eltdf-pl-image img {
    display: block;
    width: var(--cf-img-w);
    height: var(--cf-img-h);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

body.single-product .related.products > ul.products > li.product .eltdf-pl-text-wrapper,
body.single-product .upsells.products > ul.products > li.product .eltdf-pl-text-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin-top: 12px;
    padding-top: 0;
}

body.single-product .related.products > ul.products > li.product .eltdf-pl-text-wrapper .eltdf-product-list-title,
body.single-product .upsells.products > ul.products > li.product .eltdf-pl-text-wrapper .eltdf-product-list-title {
    flex: 1 0 auto;
    overflow-wrap: break-word;
}

body.single-product .related.products > ul.products:has(.price del) > li.product .price,
body.single-product .upsells.products > ul.products:has(.price del) > li.product .price {
    min-height: 2lh;
}

@media only screen and (max-width: 1024px) {
    body.single-product.eltdf-woocommerce-columns-4,
    body.single-product.eltdf-woocommerce-columns-5,
    body.single-product.eltdf-woocommerce-columns-6 {
        --cf-rel-cols: 3;
    }
}

@media only screen and (max-width: 768px) {
    body.single-product,
    body.single-product.eltdf-woocommerce-columns-3,
    body.single-product.eltdf-woocommerce-columns-4,
    body.single-product.eltdf-woocommerce-columns-5,
    body.single-product.eltdf-woocommerce-columns-6 {
        --cf-rel-cols: 2;
    }
}

@media only screen and (max-width: 360px) {
    body.single-product,
    body.single-product.eltdf-woocommerce-columns-2,
    body.single-product.eltdf-woocommerce-columns-3,
    body.single-product.eltdf-woocommerce-columns-4,
    body.single-product.eltdf-woocommerce-columns-5,
    body.single-product.eltdf-woocommerce-columns-6 {
        --cf-rel-cols: 1;
    }
}

/* ==========================================================================
   Mobilni "Filteri" drawer na SVIM prodavničkim arhivama (kategorije, tagovi).
   style.css ima ova pravila samo za glavnu Shop stranicu (body.eltdf-woo-main-page);
   ovdje se ista pravila primjenjuju i na ostale arhive. JS je u functions.php.
   ========================================================================== */
@media only screen and (max-width: 1024px) {
    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) .eltdf-grid-row {
        display: block;
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) .eltdf-page-content-holder {
        left: auto;
        width: 100%;
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) .eltdf-sidebar-holder {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 99999;
        width: min(88vw, 390px);
        max-width: 390px;
        height: 100vh;
        height: 100dvh;
        padding: 18px 22px 22px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        box-shadow: -14px 0 36px rgba(0, 0, 0, .18);
        transform: translateX(105%);
        transition: transform .28s ease;
        box-sizing: border-box;
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page).cf-shop-filters-open .eltdf-sidebar-holder {
        transform: translateX(0);
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page).cf-shop-filters-open {
        overflow: hidden;
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) aside.eltdf-sidebar {
        margin: 0;
    }

    body.eltdf-woocommerce-page:not(.single-product):not(.eltdf-woo-main-page) aside.eltdf-sidebar .widget {
        margin-bottom: 32px;
    }
}