/*
 Theme Name:   Leifheit Child
 Theme URI:    https://shop.vladi.co.rs
 Description:  Child tema za Leifheit.rs e-commerce sajt (parent: Hello Elementor)
 Author:       Leifheit RS
 Author URI:   https://leifheit.rs
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  leifheit-child
*/


/* ==========================================================================
   GLOBAL LINK HOVER — bold instead of color change
   (buttons keep their own background-color hover; excluded below)
   ========================================================================== */
a:hover:not(.button):not(.add_to_cart_button):not(.single_add_to_cart_button):not(.elementor-button) {
    font-weight: 700 !important;
}


/* Fix mobilni horizontalni overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ==========================================================================
   FONT: GILROY
   ========================================================================== */

@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/hello-elementor/fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/hello-elementor/fonts/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/hello-elementor/fonts/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/hello-elementor/fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('/wp-content/themes/hello-elementor/fonts/Gilroy-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, select, textarea {
    font-family: 'Gilroy', sans-serif !important;
}


/* ==========================================================================
   GLOBALNI PAGE HEADER BANER (category page navy strip)
   ========================================================================== */

.woocommerce-products-header {
    background: linear-gradient(90deg, #00586D 0%, #2DCCD3 100%);
    padding: 50px 40px 40px 40px;
    margin-bottom: 40px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* Fix mobilni horizontalni overflow */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.site-main {
    overflow: visible !important;
}

.content-area {
    overflow: visible !important;
}

.woocommerce-products-header__title {
    color: #ffffff !important;
    font-size: 36px;
    font-weight: 700;
    font-family: 'Gilroy', sans-serif;
    margin: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}


/* ==========================================================================
   SINGLE PRODUCT PAGE — DUGME + CENA
   ========================================================================== */

.single_add_to_cart_button {
    background-color: #E2001A !important;
    border-color: #E2001A !important;
}

.single_add_to_cart_button:hover {
    background-color: #C0001A !important;
    border-color: #C0001A !important;
}

/* ==========================================================================
   CATEGORY PAGE — GRID LAYOUT (3 kolone)
   ========================================================================== */

.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-3 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* Fix prazno mesto u gridu */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
}


/* ==========================================================================
   CATEGORY PAGE — PRODUCT KARTICA
   ========================================================================== */

.woocommerce ul.products li.product {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease;
    display: flex !important;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Slika wrapper */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ffffff;
}

/* Slika — fiksna visina, zoom on hover */
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    display: block;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.07);
}

/* Overlay na hover */
.woocommerce ul.products li.product a.woocommerce-loop-product__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 88, 109, 0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link::after {
    opacity: 1;
}

/* Naziv proizvoda */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-loop-product__link h2 {
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 15px 6px 15px !important;
    line-height: 1.4;
}

.woocommerce ul.products li.product a {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Cena */
.woocommerce ul.products li.product .price {
    padding: 0 15px 15px 15px !important;
    font-size: 15px !important;
    color: #00586D !important;
    font-weight: 700 !important;
}

.woocommerce ul.products li.product .price del {
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: #E30613 !important;
}

/* Dodaj u korpu — overlay dugme na slici */
.woocommerce ul.products li.product .button {
    position: absolute !important;
    top: 175px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: auto !important;
    white-space: nowrap !important;
    background: #00586D !important;
    color: #fff !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    padding: 10px 20px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    z-index: 10 !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product:hover .button {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* ==========================================================================
   PROCENAT POPUSTA BADGE
   ========================================================================== */

.leifheit-discount-pct {
    display: inline-block;
    background: #E30613;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 3px;
    margin: 0 15px 8px 15px;
}


/* ==========================================================================
   HEADER — SEARCH DUGME STILOVI
   ========================================================================== */

/* Uniformne ikonice u headeru */
.header-icon,
.mobile-search-btn {
    width: 38px !important;
    height: 38px !important;
}

/* Search dugme — transparentno, navy lupa */
form[role="search"] button[type="submit"] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

form[role="search"] button[type="submit"]:hover {
    background-color: transparent;
}

form[role="search"] button[type="submit"] svg {
    stroke: #00586D;
    transition: stroke 0.2s ease;
}

form[role="search"] button[type="submit"]:hover svg {
    stroke: #C00;
}


/* ==========================================================================
   MOBILNI SEARCH BAR
   ========================================================================== */

.mobile-search-bar {
    display: none;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
}

.mobile-search-bar.open {
    display: flex;
}

.mobile-search-bar form {
    display: flex;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    box-sizing: border-box;
}

.mobile-search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 14px;
    font-family: Gilroy, sans-serif;
    box-sizing: border-box;
}

.mobile-search-bar button[type="submit"] {
    background: #00586D;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-search-bar button[type="submit"]:hover {
    background: #E30613;
}


/* ==========================================================================
   MOBILNI RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {

    /* Top bar */
    .leifheit-top-bar-inner {
        flex-direction: column;
        gap: 4px;
        padding: 6px 16px;
        text-align: center;
    }

    .top-bar-item {
        font-size: 11px;
    }

    /* Navigacija — sakrij na mobilnom */
    .leifheit-nav {
        display: none;
    }

    /* Search — sakrij input, ostavi ikonicu */
    .header-search-inline input {
        display: none;
    }

    .header-search-inline form {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
    }

    .header-search-inline button {
        border-left: none;
        padding: 8px;
    }

    /* Ikonice */
    .header-icons {
        gap: 4px;
    }

    .header-icon {
        width: 34px;
        height: 34px;
    }

    .mobile-search-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Input zoom fix */
    .mobile-search-bar input,
    input[type="search"],
    input[type="text"] {
        font-size: 16px !important;
    }

    /* Cart brojač */
    .cart-count {
        display: flex !important;
        font-size: 10px !important;
    }
}


/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */

/* --- Layout kontejner --- */
.woocommerce div.product {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Breadcrumbs --- */
.woocommerce-breadcrumb {
    font-size: 13px !important;
    color: #888 !important;
    padding: 20px 0 25px 0 !important;
    margin: 0 !important;
    font-weight: 400;
}

.woocommerce-breadcrumb a {
    color: #00586D !important;
    text-decoration: none !important;
    font-weight: 500;
}

.woocommerce-breadcrumb a:hover {
    font-weight: 700 !important;
}

/* --- Naslov proizvoda --- */
.woocommerce div.product .product_title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    font-family: 'Gilroy', sans-serif !important;
}

/* --- SKU + Stock linija (dodaje se PHP-om) --- */
.leifheit-sku-stock {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.leifheit-sku-stock .sku-label {
    color: #888;
}

.leifheit-sku-stock .sku-value {
    color: #555;
    font-weight: 600;
}

.leifheit-sku-stock .stock-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #28a745;
    font-weight: 600;
}

.leifheit-sku-stock .stock-dot {
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
}

/* --- Kratki opis --- */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

/* --- Trust checkmarks (dodaje se PHP-om) --- */
.leifheit-trust-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

.leifheit-trust-list li {
    font-size: 14px;
    color: #333;
    padding: 4px 0;
    padding-left: 24px;
    position: relative;
    line-height: 1.5;
}

.leifheit-trust-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #00586D;
    font-weight: 700;
}

.leifheit-trust-list li a {
    color: #E2001A !important;
    text-decoration: underline;
}

/* --- Cena + Dodaj u korpu zona --- */
.woocommerce div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
    background: #f8f9fa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
}

/* Stara cena precrtana */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: #999 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Nova cena */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #1a1a1a !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 22px !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Quantity polje */
.woocommerce div.product form.cart .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty {
    width: 45px !important;
    text-align: center;
    border: none !important;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 0;
    -moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* +/- dugmad (dodaje se JS-om) */
.leifheit-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    color: #00586D;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.leifheit-qty-btn:hover {
    background: #f0f0f0;
}

/* Količina label */
.leifheit-qty-label {
    font-size: 13px;
    color: #666;
    margin-right: 8px;
}

/* Dodaj u korpu dugme */
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: #E2001A !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: #C0001A !important;
}

/* Gallery — relative + clip for ribbon */
.woocommerce div.product div.images,
.woocommerce-product-gallery {
    position: relative !important;
    overflow: hidden !important;
}

/* Onsale "Akcija" ribbon styling is centralized in leifheit-tweaks.php (wp_head). */

/* Discount circle (-XX%) styling is centralized in leifheit-tweaks.php (wp_head),
   with full !important so it survives flexSlider's inline styles on gallery children. */

/* Hide any leftover default sale badge that appears outside gallery */
.woocommerce div.product > span.onsale {
    display: none !important;
}

/* Hide zoom trigger icon on product gallery */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* --- Kategorije kao pilule --- */
.leifheit-category-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.leifheit-category-pills .cat-label {
    font-size: 13px;
    color: #666;
}

.leifheit-category-pills a {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.leifheit-category-pills a:hover {
    border-color: #00586D;
    font-weight: 700 !important;
    background: #f8f9fa;
}

/* Sakrij default WC product_meta (SKU, kategorije) */
.woocommerce div.product .product_meta {
    display: none !important;
}

/* --- Linkovi ispod kategorija --- */
.leifheit-product-links {
    margin-bottom: 30px;
}

.leifheit-product-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: #333 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.leifheit-product-links a:hover {
    font-weight: 700 !important;
}

.leifheit-product-links a .arrow {
    font-size: 18px;
    transition: transform 0.15s ease;
}

.leifheit-product-links a:hover .arrow {
    transform: translateX(4px);
}


/* ==========================================================================
   SINGLE PRODUCT — TABOVI (Opis / Komentari)
   ========================================================================== */

body.single-product .woocommerce-tabs {
    margin-top: 50px !important;
}

body.single-product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    border: none !important;
    display: flex !important;
    gap: 0 !important;
    list-style: none !important;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
    display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 14px 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #f0f0f0 !important;
    border-radius: 6px 6px 0 0 !important;
    text-decoration: none !important;
    border: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active {
    background: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
    background: #00586D !important;
    color: #ffffff !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    background: #f8f9fa !important;
    border-radius: 0 6px 6px 6px !important;
    padding: 30px !important;
    border: none !important;
    box-shadow: none !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 15px !important;
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #444 !important;
}


/* ==========================================================================
   SINGLE PRODUCT — RELATED / SLIČNI PROIZVODI
   ========================================================================== */

.woocommerce div.product .related.products {
    margin-top: 50px;
}

.woocommerce div.product .related.products > h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #1a1a1a !important;
}

/* Related products — 4 kolone na desktopu.
   Mora stajati PRE @media bloka ispod da bi mobilni 1-kolona override pobedio. */
.woocommerce div.product .related.products ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}


/* ==========================================================================
   SINGLE PRODUCT — MOBILNI RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
/* dodao nemanja odavde */
.woocommerce div.product div.images .flex-control-thumbs {
    order: 0 !important;
    flex-direction: row !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding-bottom: 4px !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 70px !important;
    width: 70px !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 70px !important;
    height: 70px !important;
}
/* dodao nemanja do ovde */

    .woocommerce div.product .product_title {
        font-size: 22px !important;
    }

    /* Cart form — stack vertically on mobile (prevents button overflow).
       body.single-product prefix raises specificity above the desktop
       form.cart {flex-wrap:nowrap} rule defined later in this file. */
    .woocommerce.single-product div.product form.cart {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }

    .woocommerce.single-product div.product form.cart .quantity {
        width: auto !important;
    }

    .woocommerce.single-product div.product form.cart .single_add_to_cart_button {
        width: 100% !important;
        margin-top: 8px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .woocommerce.single-product .leifheit-cart-price {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .leifheit-qty-label {
        display: none !important;
    }

    /* Related products — 1 kolona na mobilnom */
    .woocommerce div.product .related.products ul.products {
        grid-template-columns: 1fr !important;
    }

    /* Tabs — full width (mobile) */
    body.single-product .woocommerce-tabs ul.tabs li a {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }

    body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
        padding: 20px !important;
    }

    /* Category page — 1 kolona na mobilnom */
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Breadcrumb separator */
.woocommerce-breadcrumb .breadcrumb-sep {
    margin: 0 6px;
    color: #bbb;
    font-size: 14px;
}

/* Price inside cart zone */
.leifheit-cart-price {
    margin-right: auto;
}

.leifheit-cart-price del {
    color: #999 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.leifheit-cart-price del .woocommerce-Price-amount {
    color: #999 !important;
}

.leifheit-cart-price .leifheit-current-price {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.leifheit-cart-price .leifheit-current-price .woocommerce-Price-amount {
    color: #1a1a1a !important;
}

/* Hide default WC price on single product (moved into cart zone) */
.woocommerce div.product > .summary > p.price,
.woocommerce div.product > .summary > span.price {
    display: none !important;
}

/* Cart zone layout — price left, quantity+button right */
.woocommerce div.product form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.leifheit-cart-price {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    line-height: 1.3;
}

.leifheit-cart-price del {
    order: -1;
}

/* Fix price wrapping in cart zone */
.leifheit-cart-price .leifheit-current-price,
.leifheit-cart-price .leifheit-current-price .woocommerce-Price-amount {
    white-space: nowrap !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    display: inline !important;
}

.leifheit-cart-price del,
.leifheit-cart-price del .woocommerce-Price-amount {
    white-space: nowrap !important;
    display: inline !important;
}

/* Gallery thumbnails — neat single row */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    margin-top: 10px !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: #00586D;
}

/* Estimated shipping cost */
.leifheit-estimated-shipping {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #eee;
}

.leifheit-estimated-shipping .shipping-icon {
    font-size: 16px;
}

.leifheit-estimated-shipping .shipping-label {
    color: #666;
}

.leifheit-estimated-shipping .shipping-cost {
    font-weight: 700;
    color: #00586D;
}

/* WooCommerce product gallery — fix columns override */
.woocommerce div.product div.images.woocommerce-product-gallery--with-images ol {
    display: flex !important;
    grid-template-columns: unset !important;
}

/* Gallery main image — fixed height container */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    height: 450px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .woocommerce div.product div.images .woocommerce-product-gallery__image {
        height: 300px !important;
    }
}

/* ==========================================================================
   PRODUCT GALLERY — THUMBNAILS LEFT (vertical)
   Supersedes the earlier "neat single row" thumbnail block above.
   ========================================================================== */

/* Gallery container — horizontal flex: thumbs left, main image right */
.woocommerce div.product div.images.woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px;
}

/* Thumbnails column — left side, vertical */
.woocommerce div.product div.images .flex-control-thumbs {
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: 80px !important;
    min-width: 80px !important;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

/* Individual thumbnail */
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 80px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    background: #f8f8f8;
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: #00586D;
}

/* Main image — takes remaining width */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    flex: 1 !important;
    min-width: 0;
}

/* Ribbon on single product — corner banner on the MAIN image.
   The .onsale is positioned relative to flexslider's .flex-viewport (the main
   image area, NOT the whole gallery), so it needs corner values, not a
   thumbnail-column offset. Negative left + overflow:hidden = corner triangle. */
.woocommerce div.product div.images .onsale,
.woocommerce-product-gallery .onsale {
    left: -42px !important;
    top: 22px !important;
    z-index: 15 !important;
}

/* Mobile — revert to thumbnails below */
@media (max-width: 768px) {
    .woocommerce div.product div.images.woocommerce-product-gallery {
        flex-direction: column !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs {
        order: 0 !important;
        flex-direction: row !important;
        width: 100% !important;
        min-width: 100% !important;
        max-height: none;
        overflow-y: visible;
        overflow-x: auto;
    }

    /* Mobile — ribbon resets to image corner (no thumbnail column) */
    .woocommerce div.product div.images .onsale,
    .woocommerce-product-gallery .onsale {
        left: -5px !important;
        top: -5px !important;
    }
}
/* ==========================================================================
   CENE — konzistentno na svim stranicama
   ========================================================================== */

/* Redovna cena — uvek crna */
.woocommerce-Price-amount {
    color: #1a1a1a !important;
}

/* Stara cena (precrtana) — crna, tanja, strikethrough */
del .woocommerce-Price-amount,
.price del .woocommerce-Price-amount {
    color: #999 !important;
    font-weight: 400 !important;
}

/* Snižena (akcijska) cena — crvena */
ins .woocommerce-Price-amount,
.price ins .woocommerce-Price-amount {
    color: #E2001A !important;
    font-weight: 700 !important;
}

/* Ukloni underline sa ins taga */
ins {
    text-decoration: none !important;
}

/* Cart zona na product page — nova cena crna (nije crvena) */
.leifheit-cart-price .leifheit-current-price .woocommerce-Price-amount {
    color: #1a1a1a !important;
}

/* Cart zona — stara cena siva */
.leifheit-cart-price del .woocommerce-Price-amount {
    color: #999 !important;
}

/* ============================================================
   CATEGORY PAGE ENHANCEMENTS (stock status, cena label, subcat nav)
   ============================================================ */

/* Stock status on product cards */
.leifheit-card-stock {
    font-size: 12px;
    padding: 2px 15px 8px 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.leifheit-card-stock.in-stock {
    color: #28a745;
}

.leifheit-card-stock.out-of-stock {
    color: #dc3545;
}

.leifheit-card-stock .stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.leifheit-card-stock.in-stock .stock-dot {
    background: #28a745;
}

.leifheit-card-stock.out-of-stock .stock-dot {
    background: #dc3545;
}

/* Price label + right alignment */
.woocommerce ul.products li.product .price {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
}

.leifheit-price-label {
    font-size: 13px;
    font-weight: 400;
    color: #666;
}

/* Subcategory navigation pills */
.leifheit-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #eee;
}

.leifheit-subcat-nav .subcat-pill {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
    background: #fff;
}

.leifheit-subcat-nav .subcat-pill:hover {
    border-color: #00586D;
    color: #00586D !important;
    background: #f0f9fa;
}

.leifheit-subcat-nav .subcat-pill.active {
    background: #00586D;
    border-color: #00586D;
    color: #fff !important;
}

/* Sort dropdown styling */
.woocommerce-ordering select.orderby {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: 'Gilroy', sans-serif;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.woocommerce-ordering select.orderby:focus {
    border-color: #00586D;
    outline: none;
}

/* Category SEO description - inside gradient header */
.woocommerce-products-header .term-description {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    padding: 0 20px;
}

.woocommerce-products-header .term-description p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    max-width: 800px;
}

/* Footer list arrows (Brzi Meni / Pomoć pri kupovini) — match link text (white) instead of red.
   The footer is a custom HTML widget: arrows are .lh-links a::before colored var(--lh-red) #C00.
   We override only the chevron color here (the --lh-red token is also the newsletter button, so
   we must NOT change the variable itself). Solid white = exact match to the .lh-links a text. */
footer .lh-links a::before {
    color: var(--lh-white, #ffffff) !important;
}

/* Fallback in case any footer column is ever switched to an Elementor icon-list widget */
footer .elementor-icon-list-icon svg,
footer .elementor-icon-list-icon i,
footer .elementor-icon-list-icon {
    color: rgba(255, 255, 255, 0.85) !important;
    fill: rgba(255, 255, 255, 0.85) !important;
}