/* ============================================================
   KablSmart — custom styles
   public/kablsmart/css/custom.css  v3.4
   ============================================================ */


/* ============================================================
   POPPINS — self-hosted webfont
   ------------------------------------------------------------
   Ranije je tema deklarisala --primary-font: Poppins, ali font
   nigde nije bio ucitan (nema @font-face, nema Google Fonts linka,
   nema fajla u projektu). Renderovao se samo posetiocima koji ga
   imaju lokalno instaliranog; svi ostali su dobijali sistemski
   sans-serif. Ovde se ucitava sa naseg servera.

   Subset latin-ext je OBAVEZAN: c, c, s, z, d (U+0106-U+017E) nisu
   u latin subsetu, pa bi bez njega svaka rec sa nasim slovima pala
   na rezervni font usred reci.

   Tezine: 400, 500, 600, 700, 800 — tacno one koje je ranije povlacio
   WebFont.js, pa nema regresije. (900 se u style.css javlja 5 puta, ali
   iskljucivo na Font Awesome ikonama, ne na Poppins tekstu.)
   font-display: swap — tekst je odmah citljiv u rezervnom fontu.
   Licenca: SIL OFL 1.1 (vidi fonts/OFL.txt).
   ============================================================ */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    --primary-color: #205bcf;
    --primary-dark: #333;
    --primary-gray: #666;
    --secondary-gray: #f8f8f8;
    --required-red: #e02b27;
    --primary-white: #fff;
    --primary-font: Poppins;
    --secondary-font: wolmart;
    --required-warning: #ee5100;
    --required-success: #1FCF22;
    --required-danger: #CF1F71;
    --required-info: #3B507A;
}


/* ============================================================
   GLOBAL / BRANDING
   ============================================================ */

/* Logo */
.logo img, .logo-footer, .logo-footer img {
    display: block;
    width: auto;
    height: auto;
    object-fit: inherit;
    vertical-align: middle;
    max-width: 153px;
}

/* Brand colors */
.bg-primary,
.category-dropdown:hover > a,
.category-dropdown.show > a,
.cart-dropdown .cart-count {
    background-color: var(--primary-color) !important;
}
.menu > li:hover > a:not(.menu-title),
.menu > li.active > a:not(.menu-title),
.text-primary,
.product-name a:hover,
.header a:not(.btn):hover {
    color: var(--primary-color);
}

/* Alerts */
.alert {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
    box-shadow: none;
}
.alert i {
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}
.alert-warning {
    background: rgba(207, 152, 31, 0.1);
    border-color: rgba(207, 152, 31, 0.25);
    color: #6b4800;
}
.alert-warning i { color: var(--required-warning); }
.alert-info {
    background: rgba(59, 80, 122, 0.07);
    border-color: rgba(59, 80, 122, 0.2);
    color: var(--required-info);
}
.alert-info i { color: var(--required-info); }
.alert-danger {
    background: rgba(207, 31, 113, 0.07);
    border-color: rgba(207, 31, 113, 0.2);
    color: #8a0040;
}
.alert-danger i { color: var(--required-danger); }
.alert-success {
    background: rgba(31, 207, 34, 0.08);
    border-color: rgba(31, 207, 34, 0.25);
    color: #0a6e0c;
}
.alert-success i { color: #12b016; }

/* Boxed theme — page background */
main, .page-wrapper {
    background-color: #f6f6f6;
} 
/* Kartica (belo + radius + senka) je na SLAJDU, ne na containeru —
   container obuhvata i tačkice, pa bi belo "curilo" ispod banera.
   Ovako tačkice stoje na sivoj pozadini stranice (zahtev klijenta). */
.intro-section > .swiper-container {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}
.intro-section .swiper-slide.banner {
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 0 12px 0px rgb(0 0 0 / 9%);
}
.intro-section .swiper-slide .slide-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}
.icon-box-wrapper {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 12px 0px rgb(0 0 0 / 9%);
}
/* Feature boxovi (Besplatna dostava, Brza isporuka...) — na mobilnom
   bez slajdera: sva 4 boxa vidljiva jedan ispod drugog, bez tačkica.
   Swiper i dalje inicijalizuje, ali mu poništavamo inline transform/width. */
@media (max-width: 575px) {
    .icon-box-wrapper .swiper-wrapper {
        display: block;
        transform: none !important;
        width: auto !important;
    }
    .icon-box-wrapper .swiper-slide {
        width: 100% !important;
        margin: 0 0 16px !important;
    }
    .icon-box-wrapper .swiper-slide:last-child {
        margin-bottom: 0 !important;
    }
    .icon-box-wrapper .swiper-pagination {
        display: none !important;
    }
}
.product:not(.product-cart, .product-list-sm) {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 12px 0px rgb(0 0 0 / 9%);
    height: auto;
    border-radius: 10px;
}
.brands-wrapper.swiper-container {
    background-color: #fff;
    box-shadow: 0 0 12px 0px rgb(0 0 0 / 9%);
}
.sidebar-content {
    background-color: unset;
}
.sticky-sidebar {
    padding: 0;
}

/* Footer / header background tint */
.footer, .page-header, .header-top {
    background-color: #205bcf0f;
}
/* Footer je tamniji od zaglavlja (klijent, septembar 2026): 0f -> 1c.
   Pravilo je posebno da .page-header i .header-top zadrze svetliji ton. */
.footer {
    background-color: #205bcf1c;
}

/* Footer layout */
.footer-top {
    padding: 4rem 0 0.5rem;
    border-bottom: 1px solid rgba(32, 91, 207, 0.1);
}
.footer-top .widget {
    margin-bottom: 2.5rem;
}
.footer-top .widget-title {
    color: var(--primary-dark);
    margin-bottom: 1.2rem;
}
/* Naslovi kolona u footeru podvuceni (klijent, septembar 2026).
   inline-block da linija ide samo ispod teksta, a ne celom sirinom kolone. */
.footer-top h3.widget-title {
    border-bottom: 1px solid #205bcf !important;
    display: inline-block;
}
.footer-top .widget-body li {
    margin-bottom: 1.3rem;
}
.footer-top .widget-body a {
    color: #555;
    font-size: 13.5px;
}
.footer-top .widget-body a:hover {
    color: var(--primary-color);
}
.footer-top .widget-about-title a {
    font-size: 13.5px;
    color: #555;
}
.footer-bottom {
    padding: 1.4rem 0;
    border-top: none;
    justify-content: space-between;
}
/* Copyright je centriran: footer-left se siri na slobodnu sirinu pa mu se
   tekst centrira. Uz space-between ovo daje tacan centar kada je copyright
   jedini u redu, a ostaje smisleno i ako se ukljuce payment badge-ovi desno. */
.footer-bottom .footer-left {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
}
.footer-bottom .copyright {
    font-size: 12.5px;
    color: #a3a3a3;
    margin: 0;
    white-space: nowrap;
}
/* Bazna tema daje .footer-bottom .footer-right{flex:1}, pa ovaj div uzima
   polovinu slobodnog prostora i kada je prazan (payment badge-ovi su iskljuceni,
   ali div ostaje u markup-u) — to je guralo copyright levo od centra.
   flex-grow:0 znaci: prazan div ne zauzima nista, a ako se badge-ovi ukljuce
   dobija tacno svoju sadrzinsku sirinu i ostaje desno (space-between). */
.footer-right.footer-cards {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin: 0;
    width: auto;
    flex-grow: 0;
}
.footer-cards .card-icons {
    max-height: 28px;
    width: auto;
    display: block;
}

/* ============================================================
   MOBILE (≤767px) — SAMO za mobile (desktop ostaje nepromenjen)
   ============================================================ */
@media (max-width: 767px) {

    body.home .search-suggestions,
    .search-new-v2 .search-suggestions {
        left: 0px !important;
    }
    /* Manji razmak iznad logoa i ispod search polja (bazni je 3.2rem) */
    .header-middle-v2 {
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
    }
    /* 1) Search polje u drugi red, cela širina.
          display:contents na .header-left -> toggle/logo/search postaju
          direktni flex-itemi .container-a, pa ih redosledom prelamamo.
          Gornji red: hamburger levo (flex:1), logo centriran, korpa desno
          (flex:1, poravnata na kraj) — logo tačno u sredini. */
    .header-middle-v2 .container {
        flex-wrap: wrap;
        align-items: center;
    }
    .header-middle-v2 .header-left {
        display: contents;
    }
    .header-middle-v2 .mobile-menu-toggle {
        order: 1;
        flex: 1 1 0;
        margin: 0;
    }
    .header-middle-v2 .logo {
        order: 2;
        flex: 0 0 auto;
        margin: 0;
    }
    .header-middle-v2 .header-right {
        order: 3;
        flex: 1 1 0;
        justify-content: flex-end;
        margin: 0;
    }
    .header-middle-v2 .search-new-v2 {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 8px;
    }
    .header-middle-v2 .search-new-v2 .header-search {
        width: 100%;
    }

    /* 3) Samo korpa — sakrij call / wishlist / compare do 767px */
    .header-middle-v2 .header-right .header-call,
    .header-middle-v2 .header-right .wishlist,
    .header-middle-v2 .header-right .compare {
        display: none !important;
    }

    /* 2) Footer payment kartice — horizontalno (row), wrap, centrirano
          (bazni mobilni CSS ih pravi flex-direction:column -> vertikalno) */
    .footer-bottom .footer-right.footer-cards {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }
}

/* ------------------------------------------------------------
   Megamenu — category dropdown flyout
   ------------------------------------------------------------ */
.category-dropdown.has-border .category-toggle {
    background-color: var(--primary-color);
    color: #fff;
}
@media (min-width: 992px) {
    .category-dropdown .dropdown-box {
        overflow: visible;
    }
    .category-dropdown .dropdown-box .category-menu {
        max-height: none;
        overflow: visible;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu {
        display: block;
        min-width: 30rem;
        padding: 0;
        max-height: none;
        overflow: visible;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li {
        position: relative;
        width: 100%;
        padding: 0;
        overflow: visible;
        border-bottom: 1px solid #eee;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:last-child {
        border-bottom: 0;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu .menu-title {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu .menu-title > a {
        display: block;
        padding: 1rem 0 !important;
        position: relative;
        color: var(--primary-dark);
        font-weight: 500;
        line-height: 1.2;
        font-size: 1.3rem;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li > .menu-title > a::after {
        content: none;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:has(> ul) > .menu-title > a {
        padding-right: 4rem;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:has(> ul) > .menu-title > a::after {
        content: "\f105";
        position: absolute;
        display: block;
        width: 1.2rem;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 1;
        text-align: center;
        color: inherit;
        transition: right 0.3s;
        font-family: "Font Awesome 5 Free";
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:has(> ul):hover > .menu-title > a::after {
        right: 0.5rem;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:hover > .menu-title > a {
        color: var(--primary-color);
        background: #f8fbff;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu .divider {
        display: none;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li > ul {
        position: absolute;
        top: 0;
        left: calc(100% + 20px);
        min-width: 30rem;
        padding: 1rem 2rem;
        overflow: visible;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        visibility: hidden;
        opacity: 0;
        z-index: 1002;
        transform: translate3d(1rem, 0, 0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu > li:hover > ul {
        visibility: visible;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    .category-dropdown .dropdown-box .category-menu .megamenu ul li {
        padding: 0.5rem;
        border-bottom: 1px solid #eee;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu ul li:last-child {
        border-bottom: 0;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu ul a {
        display: block;
        padding: 1.5rem 0;
        line-height: 1.2;
        font-weight: 500;
        color: #333;
    }
    .category-dropdown .dropdown-box .category-menu .megamenu ul a:hover,
    .category-dropdown .dropdown-box .category-menu .megamenu .menu-title > a:hover {
        color: var(--primary-color);
        background: #f8fbff;
    }
}


/* Levi stubac megamenija (glavne kategorije) — bez linije ispod stavki.
   Bazna tema je crta preko .category-menu>li:not(:last-child)>a. Scope je
   .mega-v2 da ostale .category-menu liste zadrze svoj izgled. */
.category-menu.mega-v2 > li:not(:last-child) > a {
    border-bottom: 0;
}

/* Duži nazivi kategorija u dva reda: flex raspored — ikonica je fiksna
   kolona, tekst je svoj blok, pa se drugi red ("KUTIJE") poravnava tačno
   ispod prvog reda teksta ("RAZVODNI..."), a ne ispod ikonice.
   padding-right ostavlja prostor za strelicu (apsolutno pozicionirana). */
.category-menu.mega-v2 > li > a {
    display: flex;
    align-items: center;
    padding-right: 2.6rem;
    line-height: 1.25;
}
.category-menu.mega-v2 > li > a .megamenu-category-icon {
    flex-shrink: 0;
    margin-right: 10px;
}

/* Megamenu V2 — tipografija desnog panela prati levi stubac.
   Font-family je svuda ista (Poppins), pa razlike nikad nisu bile u njoj.
   Referenca je .category-menu>li>a iz bazne teme: 1.3rem / 500 / -.007em /
   var(--primary-dark).

   Naslovi kolona su u megamenu-v2.css bili 1.4rem/700/-.01em/#555 i sa
   linijom ispod — sve se ovde svodi na levi stubac (osim uppercase-a, vidi
   nize). Hijerarhiju prema deci sada nosi boja (naslov var(--primary-dark)
   vs deca #999), a ne debljina. Deca su jedina imala letter-spacing 0, pa su
   delovala sire — i to se poravnava. */
/* NAPOMENA o specificnosti: megamenu-v2.css se ucitava POSLE custom.css,
   pa pri jednakoj specificnosti pobedjuje on. Zato selektori ispod nose i
   .category-dropdown .dropdown-box (isti obrazac kao V1 blok gore) — bez toga
   font-weight, boja i border ostaju na vrednostima iz megamenu-v2.css. */
.category-dropdown .dropdown-box .category-menu.mega-v2 .megamenu.type2 .menu-title {
    border-bottom: 0;
}
/* text-transform ostaje uppercase (levi stubac ga ima none, ali su mu sva
   imena vec velikim slovima u bazi). Od 84 naslova kolona njih 9 NIJE
   uppercase u bazi (npr. "Produzni kablovi", "WIHA alati"), pa bi none
   dao mesan prikaz — uppercase ih drzi ujednacenim i sa levim stupcem. */
.category-dropdown .dropdown-box .category-menu.mega-v2 .megamenu.type2 .menu-title > a {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.007em;
    color: var(--primary-dark);
}
.category-dropdown .dropdown-box .category-menu.mega-v2 .megamenu.type2 ul li a {
    letter-spacing: -.007em;
}

/* ------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------ */
.breadcrumb {
    border-bottom: none;
    padding: 15px 0.2rem 15px;
    gap: 2px;
}
.breadcrumb li:not(:last-child)::after {
    color: #b0b8d0;
    margin-left: 2px;
}
.breadcrumb a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: rgba(32, 91, 207, 0.08);
    color: var(--primary-color);
    transition: background 0.2s ease, color 0.2s ease;
}
.breadcrumb a:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.breadcrumb li:last-child a {
    background-color: var(--primary-color);
    color: #fff;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 20px 0;
}
.pagination .prev,
.pagination .next {
    height: auto;
    min-width: unset;
    padding: 0;
    margin: 0;
    line-height: 1;
}
.pagination .prev a,
.pagination .next a,
.pagination .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    background-color: rgba(32, 91, 207, 0.08);
    color: var(--primary-color);
    border: none;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}
.pagination .prev a:hover,
.pagination .next a:hover,
.pagination .page-item .page-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: #fff;
    pointer-events: none;
}
.pagination .page-item span.page-link {
    background: transparent;
    color: #aaa;
    font-weight: 400;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.form-control,
select.form-control,
textarea.form-control {
    border: 1.5px solid #e0e4ed;
    border-radius: 8px;
    background: #fff;
    color: var(--primary-dark);
    font-size: 1.4rem;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(32, 91, 207, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.form-control:hover,
select.form-control:hover,
textarea.form-control:hover {
    border-color: #b8c4e0;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(32, 91, 207, 0.1);
}
.form-control::placeholder {
    color: #adb5c7;
}
.toolbox .select-box::before {
    z-index: 2;
}
.btn-layout.active, .btn-layout:hover {
    color: var(--primary-color);
}

/* ------------------------------------------------------------
   Shop sidebar — widgets, filters, buttons
   ------------------------------------------------------------ */
.shop-sidebar .sticky-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Widget card */
.shop-sidebar .widget.widget-collapsible {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #edf1f7;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
    padding: 14px 16px;
}

/* Collapsible toggle button */
.widget-collapsible .toggle-btn {
    right: 0.4rem;
    margin-top: -0.7rem;
    width: 10px;
    padding: 0;
    opacity: 1;
}

/* Widget title */
.shop-sidebar .widget-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--primary-dark) !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 4px 0 !important;
    border-bottom: 1px solid #edf1f7 !important;
    white-space: normal !important;
}

/* Widget body */
.shop-sidebar .widget-body {
    padding: 10px 0 0 !important;
}

/* Checkboxes — custom styled */
.shop-sidebar .filter-items.item-check li {
    margin: 0;
    padding: 6px 0;
}
.shop-sidebar .filter-items.item-check label {
    position: relative;
    display: block;
    padding-left: 22px;
    min-height: 15px;
    line-height: 1.4em;
    font-size: 12.5px;
    color: var(--primary-dark);
    cursor: pointer;
    transition: color 0.15s ease;
}
.shop-sidebar .filter-items.item-check label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c8d0e0;
    border-radius: 3px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.shop-sidebar .filter-items.item-check .custom-checkbox:checked + label::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 7px;
}
.shop-sidebar .filter-items.item-check label:hover {
    color: var(--primary-color);
}
.shop-sidebar .filter-items.item-check label:hover::before {
    border-color: var(--primary-color);
}

/* Price range text */
.shop-sidebar #lower-value,
.shop-sidebar #upper-value,
.shop-sidebar #price-currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
}

/* Filter buttons */
.shop-sidebar .btn-shopping {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 11px 16px;
    border-radius: 8px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-cart-blue{
    background: #205bcf !important;
    border-color: #205bcf !important;
}
.shop-sidebar .btn-shopping:hover {
    background: #1749b1 !important;
    border-color: #1749b1 !important;
    box-shadow: 0 4px 12px rgba(32, 91, 207, 0.25);
}
.shop-sidebar .btn-clear {
    border: 1.5px solid #dde2ec !important;
    color: var(--primary-gray) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 16px;
    border-radius: 8px !important;
    background: transparent !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.shop-sidebar .btn-clear:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* Separator between widgets and buttons */
.shop-sidebar hr {
    margin: 4px 0;
    border-color: transparent;
}

/* ------------------------------------------------------------
   Price range slider (noUiSlider)
   ------------------------------------------------------------ */
.noUi-target {
    background: #e4e8f0;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    height: 4px;
}
.noUi-connects {
    border-radius: 20px;
}
.noUi-connect {
    background: var(--primary-color);
    border-radius: 20px;
}
.noUi-horizontal .noUi-handle {
    width: 18px;
    height: 18px;
    top: -3px;
    right: -9px !important;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(32, 91, 207, 0.35);
    cursor: pointer;
}
.noUi-handle::before,
.noUi-handle::after {
    display: none;
}
.noUi-handle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 91, 207, 0.2);
}

/* ------------------------------------------------------------
   Product labels / discount badges
   ------------------------------------------------------------ */
.product-label.label-discount {
    background-color: var(--required-warning);
}
.discount-percent {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    background-color: var(--required-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.product-discount {
    margin: 6px 0 4px;
}
.label-discount.popular {
    background-color: #eee;
    color: #333;
    font-weight: 600;
}
.required {
    font-size: 11px;
}

/* ------------------------------------------------------------
   Section headings — global
   ------------------------------------------------------------ */
.title-link-wrapper::after {
    border-bottom: none;
}
.title-link-wrapper .title,
.top-categories-title {
    font-size: 17px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Ratings
   ------------------------------------------------------------ */
.ratings::before,
#product-tab-reviews .avg-mark,
.rating-stars a.active:before,
.rating-stars a:hover:before {
    color: var(--primary-color) !important;
}

/* ------------------------------------------------------------
   Filter sidebar
   ------------------------------------------------------------ */
.filter-items .div-list li {
    margin: 8px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: left;
    align-items: center;
}
.custom-checkbox {
    left: 0;
    display: none;
}
.custom-checkbox + label {
    left: 0;
}

/* ------------------------------------------------------------
   Blog / post single content
   ------------------------------------------------------------ */
.post-single-content ul,
.post-single-content ol {
    font-size: 14px !important;
}
.post-single-content figure {
    margin-bottom: 20px;
}
.post-single-content table {
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #ddd;
}
.post-single-content table th,
.post-single-content table td {
    padding: 10px;
    border: 1px solid #ddd;
}

/* Blockquote — callout sa brendiranim levim akcentom i navodnikom */
.post-single-content blockquote,
.post-single .post-content blockquote {
    position: relative;
    margin: 2.6rem 0;
    padding: 1.8rem 2.4rem 1.8rem 4.4rem;
    background: #205bcf0a;
    border-left: 4px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
    text-align: left;
    line-height: 1.7;
    font-size: 1.55rem;
    font-style: normal;
    color: var(--primary-dark);
}
.post-single-content blockquote::before,
.post-single .post-content blockquote::before {
    content: "\201C";
    position: absolute;
    top: 0.4rem;
    left: 1.3rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.4rem;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.28;
    pointer-events: none;
}
.post-single-content blockquote > *:last-child,
.post-single .post-content blockquote > *:last-child {
    margin-bottom: 0;
}
/* poništi bazni nested-blockquote "rep" (::after rotirani kvadrat) */
.post-single-content blockquote::after,
.post-single .post-content blockquote::after {
    content: none;
}

/* ------------------------------------------------------------
   Manufacturers list
   ------------------------------------------------------------ */
/* Stranica brendova (grid) — bez ograničenja visine i unutrašnjeg scroll-a
   (tema stavlja max-height:420px;overflow:auto na .manuf-list, što je za sidebar).
   Ciljamo samo grid (.elements), sidebar (.filter-items) zadržava svoj scroll. */
.manuf-list.elements {
    max-height: none !important;
    overflow: visible !important;
}
.manuf-list .manuf-item img {
    max-height: 150px;
}

/* ------------------------------------------------------------
   Podkategorije na category stranici — kartice (6 u redu, sa poster slikom)
   ------------------------------------------------------------ */
.subcategories-boxes .subcat-col {
    display: flex;
}
.subcategories-boxes .subcat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
/* Poster slika podkategorije — ako je nema, prostor ostaje prazan (beo) */
.subcategories-boxes .subcat-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    margin-bottom: 10px;
}
.subcategories-boxes .subcat-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.subcategories-boxes .subcat-box:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 12px rgba(32, 91, 207, 0.12);
}
.subcategories-boxes .subcat-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Liste kategorija i tagova (.vendor-brand-wrap)
   — /proizvodi/kategorije/, /proizvodi/tagovi/, /blog/kategorije/,
     /blog/tagovi/ dele isti markup.

   Izgled je namerno isti kao podkategorije na single category strani
   (.subcategories-boxes): bela kartica sa okvirom umesto krugova iz
   bazne teme. Mapiranje elemenata:
     .vendor-brand-wrap        -> .subcat-col   (flex, kartica se rasteze)
     .vendor-brand > a         -> .subcat-box   (okvir, padding, radius)
     figure.brand              -> .subcat-thumb (kadar slike)
     .vendor-name              -> .subcat-name

   Bazna tema pravi krug (.brand{border-radius:50%;overflow:hidden;border})
   pa se ti stilovi ovde gase. Kadar slike i naziv imaju fiksnu visinu, tako
   da su sve kartice istih dimenzija — i unutar reda i izmedju redova.
   ------------------------------------------------------------ */
.vendor-brand-wrap {
    display: flex;
}
.vendor-brand-wrap .vendor-brand {
    display: flex;
    width: 100%;
    max-width: none;
}
/* Kartica */
.vendor-brand-wrap .vendor-brand > a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    color: var(--primary-dark);
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.vendor-brand-wrap .vendor-brand > a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 12px rgba(32, 91, 207, 0.12);
}
/* Kadar slike — gasimo krug iz bazne teme, fiksna visina kao kod podkategorija */
.vendor-brand-wrap .brand.category-image {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}
/* contain (ne cover) — globalni img{object-fit:cover} bi isekao slike */
.vendor-brand-wrap .brand.category-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Bazna tema baca senku na krug pri hover-u — senka ide na karticu */
.vendor-brand-wrap .vendor-brand:hover .brand {
    box-shadow: none;
}
/* Naziv — rezervisana visina za 2 reda da sve kartice budu iste */
.vendor-brand-wrap .vendor-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
    min-height: 3.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* ------------------------------------------------------------
   Product names / prices — global overrides
   ------------------------------------------------------------ */
.product-name a {
    color: inherit;
    font-size: 14px;
}
.product-price .new-price {
    color: #333;
    font-weight: 400;
    font-size: 14px;
}


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

/* ------------------------------------------------------------
   Product title
   ------------------------------------------------------------ */
/* Vrednosti koje je klijent podesio u DevTools-u (septembar 2026):
   font-size 2rem -> 2.3rem, line-height 1.3 -> 1.4, margin-bottom 10px -> 15px.
   Ispod 992px naslov ostaje manji (vidi Responsive blok nize). */
.product-single .product-title {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
    margin-bottom: 15px;
}

/* ------------------------------------------------------------
   Brand logo + meta row
   ------------------------------------------------------------ */
.product-single .product-bm-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.product-single .product-brand-logo img {
    max-height: 36px;
    width: auto;
    object-fit: contain;
}
.product-single .product-meta {
    font-size: 13px;
    color: var(--primary-gray);
    line-height: 1.8;
}
.product-single .product-meta a {
    color: var(--primary-color);
    font-weight: 500;
}
.product-single .product-meta a:hover {
    text-decoration: underline;
}
.product-single .product-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.product-single .product-tags .product-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    background: rgba(32, 91, 207, 0.07);
    border: 1px solid rgba(32, 91, 207, 0.15);
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: background 0.15s ease;
}
.product-single .product-tags .product-tag:hover {
    background: rgba(32, 91, 207, 0.14);
    text-decoration: none;
}

/* ------------------------------------------------------------
   Price
   ------------------------------------------------------------ */
.product-single .product-price {
    margin: 10px 0 8px;
}
.product-single .product-price .new-price {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.02em;
}
.product-single .product-price .old-price {
    font-size: 1.5rem;
    color: #aaa;
    margin-right: 8px;
}

/* ------------------------------------------------------------
   Availability badge
   ------------------------------------------------------------ */
.btn-availability {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.btn-availability::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-availability.in-stock {
    background: #eaf7ee;
    color: #1a9e40;
    border: 1px solid #b6e8c5;
}
.btn-availability.in-stock::before {
    background: #1a9e40;
    box-shadow: 0 0 0 2px #b6e8c5;
}
.btn-availability.available {
    background: #eaf7ee;
    color: #1a9e40;
    border: 1px solid #b6e8c5;
}
.btn-availability.available::before {
    background: #1a9e40;
    box-shadow: 0 0 0 2px #b6e8c5;
}
.btn-availability.out-of-stock {
    background: #fff0ee;
    color: #cc3300;
    border: 1px solid #f5c6bc;
}
.btn-availability.out-of-stock::before {
    background: #cc3300;
    box-shadow: 0 0 0 2px #f5c6bc;
}
/* Napomena o ceni u radnji — ispod "Na stanju" bedža */
.store-price-note {
    margin: 8px 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--primary-gray, #999);
    line-height: 1.4;
}

/* ------------------------------------------------------------
   Quantity selector + CTA button row
   ------------------------------------------------------------ */
/* Raspored: [ − ] [ broj ] [ + ] — broj u sredini (uvek vidljiv), dugmad
   razdvojena brojem i tankim delilnicama. DOM je input→plus→minus pa reorder. */
.product-single .product-qty-form .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 48px;
    border: 1px solid #dce3ee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-single .product-qty-form .input-group:hover,
.product-single .product-qty-form .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(32, 91, 207, 0.08);
}
.product-single .product-qty-form input.quantity {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark) !important;
    background: #fff !important;
    border: none !important;
    border-left: 1px solid #eef2f8 !important;
    border-right: 1px solid #eef2f8 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.product-single .product-qty-form input.quantity::-webkit-outer-spin-button,
.product-single .product-qty-form input.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-single .product-qty-form .quantity-minus { order: 1; }
.product-single .product-qty-form .quantity-plus { order: 3; }
.product-single .product-qty-form .quantity-plus,
.product-single .product-qty-form .quantity-minus {
    /* poništi bazni spinner: absolute + okrugli oblik + button+button margin */
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 0 0 44px;
    width: 44px !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f6f9fd;
    border: none;
    color: var(--primary-dark);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.product-single .product-qty-form .quantity-plus:hover,
.product-single .product-qty-form .quantity-minus:hover {
    background: var(--primary-color);
    color: #fff;
}
.product-single .product-qty-form .quantity-plus:active,
.product-single .product-qty-form .quantity-minus:active {
    background: #16459b;
    color: #fff;
}

/* CTA button — single product page */
.product-single .btn-add-cart,
.fix-bottom .btn-add-cart {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 13px 28px;
    transition: box-shadow 0.25s ease, transform 0.15s ease, background 0.2s ease;
}
.product-single .btn-add-cart:hover,
.fix-bottom .btn-add-cart:hover {
    box-shadow: 0 6px 20px rgba(32, 91, 207, 0.3);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Wishlist / Compare action buttons
   ------------------------------------------------------------ */
.product-single .product-actions .btn {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--primary-gray);
    border: 1px solid #e8ecf2;
    border-radius: 6px;
    padding: 7px 14px;
    background: #fff;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    padding: 10px !important;
}
.product-single .product-actions .btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f0f5ff;
}
.product-single .product-actions .btn i {
    font-size: 14px;
}

/* ------------------------------------------------------------
   Product divider
   ------------------------------------------------------------ */
.product-single .product-divider {
    border-color: #edf1f7;
    margin: 14px 0;
}

/* ------------------------------------------------------------
   Product tabs
   ------------------------------------------------------------ */
/* Recenzije bez avatara (klijent, septembar 2026).
   Ta slika je i ranije bila slomljena: markup koristi
   {$CDN_SITE_URL}/images/author.png, sto pokazuje na
   public/kablsmart/images/author.png, a fajl postoji samo u
   public/_wolmart/images/ (CDN_SITE_URL je zakucan na aktivnu temu i ne
   prolazi kroz theme chain kao {asset_url}).
   Sakriva se CSS-om, a ne override-om _wolmart/product-tabs.html, jer je u
   tom templejtu i forma za recenziju (CSRF/recaptcha) — duplirati je znaci
   da kasnije popravke tamo ne stizu do kablsmart teme.
   .comment-body je flex, pa sadrzaj sam zauzme punu sirinu. */
#product-tab-reviews .comment-avatar {
    display: none;
}

/* Lista recenzija (klijent, septembar 2026):
   - sadrzaj je odvojen od okvira (.tab-content ima border 1px, a nikakav
     padding, pa je tekst bio zalepljen za liniju);
   - ispod poslednje recenzije je stajao prazan pojas: ul.comments nosi
     klasu .mb-8 (margin-bottom:4rem !important) UNUTAR okvira, a poslednja
     stavka jos i donju liniju — zajedno je izgledalo kao prazan drugi box. */
#product-tab-reviews .tab-content {
    padding: 6px 20px;
}
#product-tab-reviews .comments {
    margin-bottom: 0 !important;
}
/* !important jer bazno pravilo .comments .comment postavlja donju liniju
   sa !important. */
#product-tab-reviews .comments > li.comment:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0;
}
.product-tabs .nav-tabs {
    border-bottom: 2px solid #e8ecf2;
    gap: 4px;
}
.product-tabs .nav-tabs .nav-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-gray);
    padding: 10px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.product-tabs .nav-tabs .nav-link:hover {
    color: var(--primary-color);
}
.product-tabs .nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}
.product-tabs .tab-content {
    border: 1px solid #e8ecf2;
    border-radius: 8px;
    margin-top: 14px;
    padding-left: 0;                 /* reset bazni .tab-content padding-left; padding nosi .tab-pane */
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.product-tabs .tab-pane {
    padding: 26px 30px;              /* ujednačen padding sa svih strana */
    margin-bottom: 0;
}
@media (max-width: 575px) {
    .product-tabs .tab-pane {
        padding: 18px 16px;
    }
}
/* CMS tabele u tabovima (Opis) — unose se iz editora sa fiksnim px
   širinama i inline overflow:hidden, pa ih ovde ukroćujemo:
   na desktopu ne smeju da prelaze širinu taba, na užim ekranima
   postaju horizontalno skrolabilne umesto da se lome/seku */
.product-tabs .tab-pane table,
.product-short-desc table {
    max-width: 100% !important;
}
@media (max-width: 991px) {
    .product-tabs .tab-pane table,
    .product-short-desc table {
        display: block;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ------------------------------------------------------------
   Product recommendations (AI engine) — soft blue full-width band
   ------------------------------------------------------------ */
.recommendations-section {
    background-color: #205bcf0f;
}
.recommendations-section .title {
    margin-bottom: 0;
}
.recommendations-section .swiper-container {
    padding-bottom: 4px;
}

/* Single product: recommendations preko CELE širine, iako stoji u DOM-u
   između related i lastseen (unutar .main-content kolone). Full-bleed izlaz
   iz kolone i bočne trake. body{overflow-x:hidden} sprečava horiz. scroll.
   15.5rem = pola bočne trake (.main-content je uži za 31rem). */
.main-content > .recommendations-section,
.main-content > .related-product-section {
    width: 100vw;
    margin-left: calc(50% - 50vw + 15.5rem);
    margin-right: 0;
}
@media (max-width: 991px) {
    /* na manjim ekranima nema bočne trake -> nema +15.5rem offseta */
    .main-content > .recommendations-section,
    .main-content > .related-product-section {
        margin-left: calc(50% - 50vw);
    }
}

/* ------------------------------------------------------------
   Mini-cart (header dropdown "VAŠA KORPA") — doterivanje
   ------------------------------------------------------------ */
/* Lista proizvoda skroluje umesto da se prelije preko totala.
   (bazni .cart-dropdown .products ima max-height:28rem ali BEZ overflow-a) */
.cart-dropdown .products {
    max-height: 40rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Drawer je flex kolona: lista proizvoda uzima visak visine i skroluje,
   a podnozje (ukupan iznos + free shipping + dugmad) stoji na dnu panela
   bez obzira na to koliko stavki ima u korpi (klijent, septembar 2026).
   Bazna visina je 110vh (prelazi ekran), pa je ovde 100dvh da bi "dno"
   panela stvarno bilo dno ekrana i na mobilnim browserima sa trakama. */
.cart-dropdown.cart-offcanvas .dropdown-box {
    display: flex;
    flex-direction: column;
    /* Eksplicitno, da padding (2 x 2.9rem) ne bi dosao NA 100dvh i gurnuo
       dugmad ispod donje ivice ekrana. Tema to vec postavlja globalno
       (html{box-sizing:border-box} + *{box-sizing:inherit}); ostaje kao
       zastita ako se ta bazna pravila promene. */
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.cart-dropdown.cart-offcanvas .cart-header,
.cart-dropdown.cart-offcanvas .dropdown-cart-total,
.cart-dropdown.cart-offcanvas .cart-free-shipping-progress,
.cart-dropdown.cart-offcanvas .cart-action {
    flex: 0 0 auto;
}
.cart-dropdown.cart-offcanvas .products {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}
/* Prvi element podnozja gura sebe i sve ispod na dno (bitno kada je
   lista kratka, npr. jedna stavka). */
.cart-dropdown.cart-offcanvas .dropdown-cart-total {
    margin-top: auto;
}
.cart-dropdown.cart-offcanvas .cart-is-empty {
    flex: 1 1 auto;
}
.cart-dropdown .products::-webkit-scrollbar {
    width: 6px;
}
.cart-dropdown .products::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
/* malo kompaktnije stavke da se ne raspada kad ima više proizvoda */
.cart-dropdown .product-cart {
    padding-top: 1.2rem;
    margin-bottom: 1.2rem;
}
.cart-dropdown .product-cart .product-name {
    margin-bottom: 0.5rem !important;
}
.cart-line-items-small .product.product-cart .product-media {
    max-width: 6rem;
    flex: 0 0 6rem;
}

/* SKU ("Šifra: ...") ide u svoj red ispod imena proizvoda — važi i za
   mini-cart drawer i za "Vaša porudžbina" na checkoutu (isti šablon) */
.cart-line-items-small .product-cart .product-name {
    display: block;
}
.cart-line-items-small .product-cart .product-name small {
    display: block;
    margin-top: 3px;
    color: #999;
    font-weight: 400;
    font-size: 1.15rem;
}
/* Naziv proizvoda: max 2 reda + tri tačke (ujednačena visina kartica).
   Ime je obavijeno u <span class="cart-item-name"> (cart-templates.js). */
.cart-dropdown .product-cart .product-name .cart-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    max-height: 2.7em;
    word-break: break-word;
}

/* Totali — "Ukupno sa PDV-om" i "Ukupno sa dostavom" ujednačeni:
   iste ćelije, obe vrednosti identične veličine/težine/boje, desno poravnate.
   (bazni .cart-subtotal je 14px/400, a .cart-total je flex/600 — izjednačavamo) */
.cart-dropdown .mini-cart-info {
    width: 100%;
}
.cart-dropdown .mini-cart-info th,
.cart-dropdown .mini-cart-info td {
    display: table-cell !important;   /* reset baznog .cart-total{display:flex} */
    padding: 5px 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.5;
    vertical-align: middle;
    border: 0;
}
.cart-dropdown .mini-cart-info th {
    text-align: left;
    font-weight: 500;
    color: var(--primary-gray);
    padding-right: 1rem !important;
}
.cart-dropdown .mini-cart-info td,
.cart-dropdown .mini-cart-info td * {
    text-align: right;
    white-space: nowrap;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}
/* grand total — labela istaknuta, vrednost iste veličine kao subtotal (ujednačeno) */
.cart-dropdown .mini-cart-info .mini-cart-total th {
    font-weight: 700;
    color: var(--primary-dark);
}
/* U mini-korpi se prikazuje SAMO ukupan iznos — redovi "Ukupno sa PDV-om",
   "Dostava" i "Popust" su skriveni (klijent, septembar 2026).
   Redovi ostaju u DOM-u namerno: cart-init.js proverava njihovo postojanje
   (rcmsCartTotalsPresent) i upisuje iznose u njih. !important je nuzan jer
   isti taj JS radi jQuery .show() nad .cart-total-shipping-cnt i time
   postavlja inline display koji bi inace pobedio ovo pravilo. */
.cart-dropdown .mini-cart-info tr:not(.mini-cart-total) {
    display: none !important;
}

/* Dugmad jedno ispod drugog, puna sirina, na dnu drawera */
.cart-dropdown .cart-action {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
    padding: 1.5rem 0 0;
}
.cart-dropdown .cart-action .btn {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   Checkout — desni sidebar "Vaša porudžbina"
   Markup: kablsmart/templates/_sections/checkout-totals.html
   ------------------------------------------------------------ */
/* Naslov "Vaša porudžbina" izlazi IZNAD okvira i poravnava se sa naslovom
   "Informacije o naručiocu" u levoj koloni, dok se okvir spušta tako da mu
   gornja ivica bude u ravni sa karticom "Fizičko lice" (klijent, sept. 2026).
   Zato okvir i padding selimo sa .order-summary-wrapper na .order-summary,
   a naslov dobija isti vertikalni ritam kao naslovi levo (pt-1 pb-3 mb-0 =
   5px/15px/0), pa oba bloka zauzimaju tačno 44px.
   Scope je .sticky-sidebar jer isti .order-summary-wrapper koristi i
   stranica potvrde porudžbine, koja tu klasu nema. */
.order-summary-wrapper.sticky-sidebar {
    padding: 0;
    border: 0;
    border-radius: 0;
}
.order-summary-wrapper.sticky-sidebar > .title {
    padding: 5px 0 15px;
    margin-bottom: 0;
}
.order-summary-wrapper.sticky-sidebar .order-summary {
    padding: 2.5rem 3rem 3rem;
    border: 1px solid #eee;
    border-radius: 3px;
    background: #fff;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

/* "Od toga PDV" se ne prikazuje (klijent, septembar 2026). Red ostaje u
   DOM-u jer ga popunjava hostovani ecommerce.js; !important je tu da
   nadjača inline display koji taj skript može da postavi. */
.order-summary .cart-totals .cart-total-tax-cnt {
    display: none !important;
}

/* Iznos u redu "Ukupno sa PDV-om" je plav, isto kao iznosi u mini-korpi. */
.order-summary .cart-totals .cart-total,
.order-summary .cart-totals .cart-total * {
    color: var(--primary-color) !important;
}

/* MOBILNI (klijent, septembar 2026):
   1) Dugme "Potvrdi kupovinu" ide ISPOD boxa "Vaša porudžbina". Dugme je
      poslednje dete leve kolone, pa ga order ne može pomeriti dok je
      ugnježdeno. Zato leva kolona na mobilnom dobija display:contents —
      njena deca postaju flex stavke istog reda kao i box, pa order radi.
      Kolona time gubi svoj horizontalni padding (10px), a to nadoknađujemo
      poništavanjem negativnih margina reda i paddinga desne kolone, tako da
      se sav sadržaj poravna sa unutrašnjom ivicom .container-a.
   2) Iznosi u boxu su 3px manji (14px -> 11px). */
@media (max-width: 991px) {
    /* Red ide u kolonu: deca se ređaju jedno ispod drugog i sama se rastežu
       na punu širinu, uz poštovanje sopstvenih margina (npr. .ml-5). Forsiranje
       flex-basis:100% ovde ne valja — element sa marginom bi prelio kontejner. */
    .checkout-form > .row {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .checkout-form > .row > .col-lg-7 {
        display: contents;
    }
    .checkout-form > .row > .col-lg-5 {
        order: 2;
        padding-left: 0;
        padding-right: 0;
        /* Razmak do dugmeta ispod daje iskljucivo .place-order (vidi nize),
           pa se donja margina kolone (.mb-4 = 2rem !important) ponistava. */
        margin-bottom: 0 !important;
    }
    .checkout-form .place-order {
        order: 3;
        /* Razmak izmedju boxa i dugmeta je tacno 3.5px. Element nema
           margin-top — gornji razmak daje klasa .pt-2
           (padding-top:1rem !important), pa se ona gazi; donja margina
           kolone sa boxom je iznad ponistena, da ne bi dodavala jos 20px. */
        padding-top: 10px !important;
    }
    /* Labele: 11px + 1.3px. */
    .order-summary-wrapper.sticky-sidebar .cart-totals th,
    .order-summary-wrapper.sticky-sidebar .cart-totals td {
        font-size: 12.3px;
    }
    /* Hijerarhija iznosa (klijent, septembar 2026):
       - "Ukupno sa PDV-om" je 1px veće od osnove, da odskače;
       - cena stavke i "Iznos vaše porudžbine" su 1px manje od osnove i
         ostaju međusobno iste (isti iznos ne sme da bude u dve veličine);
       - cena dostave je 1px manja od labele.
       Osnova je veličina cene stavke iz teme: 16px u opsegu 768–991px, a
       13.5px ispod 768px, pa se prate oba nivoa.
       Cena stavke je namerno scope-ovana na .order-summary da mini-korpa,
       koja koristi isti .cart-line-items-small, ostane netaknuta.
       !important je nužan jer bazni style.css ima
       .order-summary .cart-subtotal{font-size:14px !important}. */
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total-shipping,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total-shipping * {
        font-size: 11.3px;
    }
    .order-summary .cart-line-items-small .price-box .product-price {
        font-size: 15px;
    }
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-subtotal,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-subtotal * {
        font-size: 15px !important;
    }
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total * {
        font-size: 17px !important;
    }
}
@media (max-width: 767px) {
    .order-summary .cart-line-items-small .price-box .product-price {
        font-size: 12.5px;
    }
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-subtotal,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-subtotal * {
        font-size: 12.5px !important;
    }
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total * {
        font-size: 14.5px !important;
    }
}

/* DESKTOP (>=992px), klijent septembar 2026:
   - cena stavke prati "Iznos vaše porudžbine" (oba 14px; bazni style.css
     drži .order-summary .cart-subtotal na 14px !important, a th/td su 14px),
     da isti iznos ne bi bio prikazan u dve veličine;
   - "Ukupno sa PDV-om" je 1.5px veće, da odskače.
   Blok mora biti u min-width media query-ju: mobilna pravila iznad koriste
   iste selektore i stoje ranije u fajlu, pa bi ih pravilo bez media query-ja
   nadjačalo na svim širinama. */
@media (min-width: 992px) {
    .order-summary .cart-line-items-small .price-box .product-price {
        font-size: 14px;
    }
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total,
    .order-summary-wrapper.sticky-sidebar .cart-totals .cart-total * {
        font-size: 15.5px !important;
    }
}

/* Cena stavke ide DESNO od birača količine, poravnata sa iznosima ispod
   (Iznos porudžbine / Dostava / Ukupno). Naziv i šifra ostaju u svom redu
   iznad, pa .product-detail postaje flex sa prelomom. */
.order-summary .cart-line-items-small .product-cart .product-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 0 !important;
}
.order-summary .cart-line-items-small .product-cart .product-name {
    flex: 0 0 100%;
}
.order-summary .cart-line-items-small .product-cart .price-box {
    margin-left: auto;
}

/* ------------------------------------------------------------
   Sidebar — feature icon boxes
   ------------------------------------------------------------ */
/* Prednosti kupovine: isti stil vazi i kad blok stoji u koloni sa
   podacima o proizvodu (.product-features-box), a ne u sidebaru.
   Markup: kablsmart/_partials/product/product-features.html */
.product-sidebar .widget-icon-box,
.product-features-box {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #edf1f7;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
/* Blok "Besplatna dostava / ..." postoji na dva mesta u markupu:
     - .product-details .product-features-box  → kolona sa podacima (desktop)
     - .product-features-sidebar ...           → desni sidebar (mobilni)
   Vidi se samo jedna kopija, u zavisnosti od sirine (pravila nize).

   Desktop varijanta nije kartica nego deo kolone: bez okvira, senke i
   bocnog paddinga, da su ikone i tekst u ravni sa naslovom, cenom i dugmetom. */
.product-details .product-features-box {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    /* Malo spusteno u odnosu na dugme "Dodaj u korpu" (klijent, sept. 2026):
       do sada je blok pocinjao odmah ispod njega, razmak je pravio samo
       padding od 20px. */
    margin-top: 15px;
    /* Donja margina (.mb-6 = 3rem) se ponistava: blok je poslednji u koloni,
       pa je taj razmak visak. Bez ovoga bi desna kolona postala visa od
       galerije i donji padding kartice bi opet bio 43px umesto 30px. */
    margin-bottom: 0 !important;
}

/* Sidebar varijanta ostaje kartica, kako je i bila pre premestanja. */
.product-features-sidebar .product-features-box {
    border: 1px solid #edf1f7;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    padding: 20px;
}

/* Od 992px navise: vidi se kopija u koloni sa podacima. */
@media (min-width: 992px) {
    .product-features-sidebar {
        display: none;
    }
}
/* Ispod 992px: sidebar je off-canvas panel (otvara ga .sidebar-toggle), pa
   blok ide tamo, iznad "Mozda vas zanima" — kako je bilo ranije. */
@media (max-width: 991px) {
    .product-details .product-features-box {
        display: none;
    }
    /* Na mobilnom se u "Mozda vas zanima" prikazuju 3 proizvoda umesto 6.
       Grupisanje po slajdovima je serversko (6 po slajdu), pa se visak krije. */
    .product-sidebar .widget-col .product-widget:nth-of-type(n+4) {
        display: none;
    }
}
.product-sidebar .icon-box.icon-box-side,
.product-features-box .icon-box.icon-box-side {
    padding: 10px 0;
    border-bottom: 1px solid #f0f3f8;
    align-items: center;
}
.product-sidebar .icon-box.icon-box-side:last-child,
.product-features-box .icon-box.icon-box-side:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.product-sidebar .icon-box.icon-box-side:first-child,
.product-features-box .icon-box.icon-box-side:first-child {
    padding-top: 0;
}
.product-sidebar .icon-box-icon,
.product-features-box .icon-box-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: #f0f5ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: var(--primary-color) !important;
    font-size: 18px;
}
.product-sidebar .icon-box-title,
.product-features-box .icon-box-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 2px;
}
.product-sidebar .icon-box-content p,
.product-features-box .icon-box-content p {
    font-size: 12px;
    color: var(--primary-gray);
    margin-bottom: 0;
    line-height: 1.4;
}

/* Sidebar "Možda vas zanima" widget */
.product-sidebar .widget-products {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #edf1f7;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    /* Bez gornje margine: boks pocinje na istoj visini kao bela kartica
       proizvoda levo (klijent, septembar 2026). */
    margin-top: 0;
}
/* Ispod 992px iznad njega u sidebaru stoji blok "Besplatna dostava / ...",
   pa mu treba razmak. Pravilo mora da bude POSLE margin-top:0 iznad —
   ista je specificnost, pa odlucuje redosled u fajlu. */
@media (max-width: 991px) {
    .product-sidebar .widget-products {
        margin-top: 16px;
    }
}
.product-sidebar .widget-products .title-link-wrapper {
    border-bottom: 1px solid #f0f3f8;
    padding-bottom: 10px;
    margin-bottom: 12px !important;
}
.product-sidebar .widget-products .title-link-wrapper .title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-dark);
    margin-bottom: 0;
}
.product-sidebar .widget-products .product-widget {
    align-items: center;
    padding: 12px 0;
}
.product-sidebar .widget-products .product-widget .product-media {
    flex: 0 0 80px;
    max-width: 80px;
    min-width: 80px;
    margin-right: 12px;
    padding: 0;
}
.product-sidebar .widget-products .product-widget .product-media img {
    /* fiksan kvadrat 80x80 + contain — izvorne slike su različitih
       dimenzija (portretne bi razvukle karticu po visini) */
    width: 100%;
    height: 80px;
    object-fit: contain;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}
.product-sidebar .widget-products .product-details {
    min-width: 0;
}
.product-sidebar .widget-products .product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    max-height: 2.7em;
    margin-bottom: 6px !important;
}
.product-sidebar .widget-products .product-name a {
    font-size: 13px;
    color: var(--primary-dark);
}
.product-sidebar .widget-products .product-price {
    font-size: 14px;
    line-height: 1.2;
}

/* ------------------------------------------------------------
   Related products + Last seen — section headings (match homepage style)
   ------------------------------------------------------------ */
.related-product-section .title-link-wrapper,
.vendor-product-section .title-link-wrapper,
.title-link-wrapper.recent-view {
    margin-bottom: 20px !important;
}
.related-product-section .title-link-wrapper .title,
.vendor-product-section .title-link-wrapper .title,
.title-link-wrapper.recent-view .title {
    position: relative;
    padding-left: 14px;
    border-left: 3px solid var(--primary-color);
    line-height: 1.2;
    letter-spacing: 0.03em;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}
.related-product-section,
.vendor-product-section {
    padding-top: 10px;
    border-top: none;
    margin-top: 20px;
}

/* Product card hover in related / last-seen */
.related-product-section .product:not(.product-cart, .product-list-sm),
.vendor-product-section .product:not(.product-cart, .product-list-sm) {
    border-radius: 10px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border: 1px solid transparent;
}
.related-product-section .product:not(.product-cart, .product-list-sm):hover,
.vendor-product-section .product:not(.product-cart, .product-list-sm):hover {
    box-shadow: 0 12px 28px rgba(32, 91, 207, 0.13) !important;
    transform: translateY(-4px);
    border-color: rgba(32, 91, 207, 0.08);
}
.related-product-section .product-media,
.vendor-product-section .product-media {
    overflow: hidden;
    border-radius: 6px;
}
.related-product-section .product-media img,
.vendor-product-section .product-media img {
    transition: transform 0.4s ease;
}
.related-product-section .product:hover .product-media img,
.vendor-product-section .product:hover .product-media img {
    transform: scale(1.04);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .product-single .product-title { font-size: 2rem; }
}
@media (max-width: 575px) {
    .product-single .product-title { font-size: 1.85rem; }
    /* Tabovi u jednom redu — bez prelamanja; ako je preusko, horiz. scroll */
    .product-tabs .nav-tabs {
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .product-tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .product-tabs .nav-tabs .nav-link {
        padding: 8px 10px;
        font-size: 11.5px;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   Product action buttons — always visible
   ------------------------------------------------------------ */
.product-slide .product-media,
.product-wrap .product-media {
    overflow: hidden;
    position: relative;
}
/* Ujednačene slike proizvoda — kvadratni media prostor, slika "contain"
   (centrirana, bez sečenja), pa su sve kartice iste visine */
.product-slide .product-media > a,
.product-wrap .product-media > a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
}
.product-slide .product-media > a img,
.product-wrap .product-media > a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* Ujednačena VISINA kartica — .product puni celu ćeliju reda, a "Dodaj u
   korpu" se poravna na dno (product-details raste). Nema više "pijanog" reda. */
/* U karuselima (recommendations/related/lastseen) product-wrap je swiper-slide;
   height:auto + stretch čini slajdove jednake visine da flex-fill radi. */
.swiper-slide.product-wrap,
.swiper-slide.product-slide {
    height: auto;
}
.swiper-wrapper:has(> .product-wrap),
.swiper-wrapper:has(> .product-slide) {
    align-items: stretch;
}
.product-wrap {
    display: flex;
}
.product-wrap > .product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.product-wrap > .product > .product-details {
    flex: 1 1 auto;
}
/* Ime proizvoda — fiksno 2 reda (1-red i 2-red imena zauzmu isti prostor,
   pa se cena i dugme poravnaju po karticama) */
.product-wrap .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    margin-bottom: 0.6rem;
}
.product-slide .product-action,
.product-wrap .product-action,
.product-slide .product-action-vertical,
.product-wrap .product-action-vertical,
.product-slide .product-action-horizontal,
.product-wrap .product-action-horizontal {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}
.product-action-vertical {
    right: 0;
}
/* ------------------------------------------------------------
   Lista želja na karticama — gornji desni ugao, u liniji sa
   ribbon-om ("Akcija" / "Novo") koji stoji gore levo
   ------------------------------------------------------------ */

/* Ribbon (.product-label-group) je pozicioniran u odnosu na .product, a srce
   je dete figure.product-media. Da bi delili istu referencu, .product-media
   ide na static — jedini apsolutno pozicioniran element u njemu je baš ovaj
   holder, tako da se ništa drugo ne pomera. Usput srce izlazi iz
   media overflow:hidden, pa se ne seče na ivici kadra. */
.product .product-media {
    position: static;
}

/* Holder je samo pozicioner — belu "pilulu" nosi samo dugme, da se ne
   preklapaju dve bele pozadine. Visina holdera = visina ribbon-a, pa
   align-items:center poravna sredinu (većeg) kruga sa sredinom ribbon-a.
   Selektor mora da pokrije i hover: bazno pravilo
   `.product:hover .product-action-horizontal{bottom:1.5rem}` je specifičnije
   (0,3,0) pa bi uz naš `top` razvuklo kutiju po visini u pilulu — a na
   touch-u :hover ostaje zalepljen posle tapa. */
.product-media .product-action-horizontal,
.product:hover .product-media .product-action-horizontal {
    --card-badge-h: 2.4rem;      /* visina "Akcija/Novo" ribbon-a */
    position: absolute;
    top: 2rem;                   /* isti offset kao .product-label-group */
    right: 2rem;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: var(--card-badge-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 2;
}
.product-media .product-action-horizontal .btn-product-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
    color: var(--primary-dark);
    font-size: 1.5rem;
    transition: none;
}
/* Bez hover/active efekata — bazno pravilo gasi pozadinu i menja boju, a na
   touch-u to stanje ostaje zaključano posle tapa. */
.product-media .product-action-horizontal .btn-product-icon:hover,
.product-media .product-action-horizontal .btn-product-icon:active,
.product-media .product-action-horizontal .btn-product-icon:focus {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
    color: var(--primary-dark);
    transform: none;
}

/* Ribbon se ispod 480px pomera na 1rem (bazna tema), pa i srce prati */
@media (max-width: 479px) {
    .product-media .product-action-horizontal,
    .product:hover .product-media .product-action-horizontal {
        --card-badge-h: 2.2rem;
        top: 1rem;
        right: 1rem;
    }
}

/* Slider items */
.product-slide .product-action .btn-add-to-cart {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

/* Grid items: pull button flush to card edges */
.product-wrap .product > .btn-add-to-cart,
.product-wrap .product > .btn-cart {
    display: block;
    width: calc(100% + 40px);
    margin: 0 -20px -20px -20px !important;
    border-radius: 0 0 10px 10px;
}

/* Shared button styles */
.product-wrap .product > .btn-add-to-cart,
.product-wrap .product > .btn-cart,
.product-slide .product-action .btn-add-to-cart,
.product-list .product-action .btn-add-to-cart,
.product-list .product-action .btn-cart {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 16px !important;
    background: var(--primary-color) !important;
    border: none !important;
    color: #fff !important;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.product-wrap .product > .btn-add-to-cart:hover:not([disabled]),
.product-wrap .product > .btn-cart:hover:not([disabled]),
.product-slide .product-action .btn-add-to-cart:hover:not([disabled]),
.product-list .product-action .btn-add-to-cart:hover:not([disabled]),
.product-list .product-action .btn-cart:hover:not([disabled]) {
    background: #1749b1 !important;
    box-shadow: 0 4px 14px rgba(32, 91, 207, 0.2);
}
.product-wrap .product > .btn-add-to-cart[disabled],
.product-wrap .product > .btn-cart[disabled],
.product-slide .product-action .btn-add-to-cart[disabled],
.product-list .product-action .btn-add-to-cart[disabled],
.product-list .product-action .btn-cart[disabled] {
    background: var(--primary-color) !important;
    opacity: 1 !important;
    cursor: default;
    pointer-events: none;
}

.product-single .swiper-container {
    overflow: auto !important;
}
/* ...ali NE i traka sa sličicama: red .product-thumbs ima negativne margine
   (gutter-sm), pa je siri od kontejnera za ~20px i uz overflow:auto je ispod
   njega izbijao horizontalni klizac — prazan pojas koji je bez potrebe
   zauzimao prostor. Swiper ionako pomera slicice transformacijom, pa mu
   overflow:hidden i treba. */
.product-single .product-thumbs-wrap.swiper-container {
    overflow: hidden !important;
}

/* Donji razmak u beloj kartici proizvoda izjednacen sa bocnim (klijent,
   septembar 2026). Sa strane je 30px: 20px padding kartice + 10px gutter
   kolone. Dole je bilo 50px, jer kolone nose .mb-6 (3rem). Spusteno na
   10px, pa je i dole 20 + 10 = 30px. */
.product-single-container > .col-md-6 {
    margin-bottom: 10px !important;
}

/* Galerija se vise ne "lepi" pri skrolovanju. Bazna tema joj daje
   position:sticky + top:2rem, pa se pri skrolu pomerala navise unutar svoje
   kolone i otvarala prazninu ispod sebe — donji razmak kartice je tada rastao
   i vise nije bio jednak bocnom.
   Koristi se relative (a ne static) da bi galerija ostala referentni okvir za
   svoju decu sa position:absolute (dugme za zumiranje, .product-label-group). */
.product-single .product-gallery {
    position: relative;
    top: auto;
    /* Kada je desna kolona visa od galerije, galerija se (kao flex stavka reda)
       rasteze na visinu kolone, a visak prostora bi zavrsio ISPOD slicica —
       donji razmak kartice bi tada bio veci od bocnog. Sa space-between visak
       ide IZMEDJU glavne slike i slicica, pa slicice uvek naliezu na dno
       galerije i razmak do dna kartice ostaje 30px, isto kao sa strane.
       height:100% je nuzan — bez njega galerija zadrzava visinu sadrzaja i
       align-content nema sta da rasporedi (kolona je flex stavka reda sa
       align-self:stretch, pa joj je visina definisana i procenat se resava). */
    height: 100%;
    align-content: space-between;
}
.widget.widget-products .title.title-link::before {
    content: none;
}

/* ------------------------------------------------------------
   Product card price
   ------------------------------------------------------------ */
.product-details {
    margin-bottom: 10px;
}
.product-pa-wrapper .product-price,
.product-details .product-price {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    margin-top: 5px !important;
}
.product-pa-wrapper .product-price .new-price,
.product-details .product-price .new-price {
    color: var(--primary-color) !important;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
}
.product-pa-wrapper .product-price .old-price,
.product-details .product-price .old-price {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    color: #aaa !important;
    text-decoration: line-through;
    letter-spacing: 0;
    display: block;
    margin-bottom: 1px;
    margin-right: 0 !important;
}

/* Single strana proizvoda koristi isti .product-details wrapper kao kartica,
   pa mora da nadjača veličine iz bloka iznad — cena je tu glavni element.
   .new-price nasleđuje font-size sa .product-price (vidi pravilo iznad). */
.product-single .product-details .product-price {
    font-size: 2.4rem !important;
}
.product-single .product-details .product-price .old-price {
    font-size: 1.6rem !important;
}

/* ------------------------------------------------------------
   Free shipping badge
   ------------------------------------------------------------ */
.badge-free-shipping {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #1a9e40;
    background: #eaf7ee;
    border: 1px solid #b6e8c5;
    border-radius: 20px;
    padding: 4px 10px;
    margin-top: 6px;
    white-space: nowrap;
}
.badge-free-shipping i {
    font-size: 12px;
}
.product.text-center .badge-free-shipping {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------
   Product SKU label
   ------------------------------------------------------------ */
.product-sku-label {
    font-size: 11px;
    color: var(--primary-gray);
    letter-spacing: 0.02em;
    margin: 2px 0 4px;
    line-height: 1.4;
}


/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ------------------------------------------------------------
   Section headings — blue left-border accent
   ------------------------------------------------------------ */
body.home .title-link-wrapper .title,
body.home .top-categories-title {
    position: relative;
    padding-left: 14px;
    border-left: 3px solid var(--primary-color);
    line-height: 1.2;
    letter-spacing: 0.03em;
}
body.home .title-link-wrapper a.font-weight-bold {
    font-size: 13px;
    color: var(--primary-color);
    letter-spacing: 0.02em;
    transition: opacity 0.2s ease;
}
body.home .title-link-wrapper a.font-weight-bold:hover {
    opacity: 0.75;
}

/* ------------------------------------------------------------
   Top categories — card hover lift
   ------------------------------------------------------------ */
body.home .top-categories-wrapper .category {
    background: #fff;
    border-radius: 12px;
    padding: 18px 10px 14px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
}
body.home .top-categories-wrapper .category:hover {
    box-shadow: 0 10px 28px rgba(32, 91, 207, 0.16);
    transform: translateY(-4px);
}
/* Ujednačena visina kartica: swiper-slide se ne rasteže sam (ima height:100%
   iz swiper CSS-a), pa ga eksplicitno prebacujemo na stretch + flex kolonu.
   Kadar slike je fiksne visine, a naziv se margin-om gura na dno kartice —
   tako 1-redni i 2-redni nazivi ne prave razliku u visini. */
body.home .top-categories-wrapper .swiper-wrapper {
    align-items: stretch;
}
body.home .top-categories-wrapper .category {
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
body.home .top-categories-wrapper .category-media {
    height: 140px;
    margin-bottom: 0 !important;
}
body.home .top-categories-wrapper .category-media a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
body.home .top-categories-wrapper .category-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body.home .top-categories-wrapper .category-content {
    margin-top: auto;
}
/* Kategorija bez slike — naziv centriran po visini, bez praznog kadra */
body.home .top-categories-wrapper .category.category-no-media .category-content {
    margin-bottom: auto;
}
body.home .top-categories-wrapper .category-name {
    margin-top: 10px;
}
body.home .top-categories-wrapper .category-name a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}
body.home .top-categories-wrapper .category-name a:hover {
    color: var(--primary-color);
}

/* ------------------------------------------------------------
   Product cards — shadow + hover lift
   ------------------------------------------------------------ */
body.home .product:not(.product-cart, .product-list-sm) {
    border-radius: 10px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border: 1px solid transparent;
}
body.home .product:not(.product-cart, .product-list-sm):hover {
    box-shadow: 0 14px 36px rgba(32, 91, 207, 0.14) !important;
    transform: translateY(-4px);
    border-color: rgba(32, 91, 207, 0.08);
}
body.home .product-media {
    overflow: hidden;
    border-radius: 8px;
}
body.home .product-media img {
    transition: transform 0.4s ease;
}
body.home .product:hover .product-media img {
    transform: scale(1.04);
}
body.home .btn-add-cart,
body.home .product-action .btn {
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
body.home .btn-add-cart:hover,
body.home .product-action .btn:hover {
    box-shadow: 0 4px 14px rgba(32, 91, 207, 0.25);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Middle showcase section
   ------------------------------------------------------------ */
.home-kabl-middle-showcase .banner-media img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14);
}
.home-kabl-middle-showcase-slider .product {
    border-radius: 10px;
}

/* ------------------------------------------------------------
   Promo banner
   ------------------------------------------------------------ */
.home-kabl-section figure.banner-media {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}
.home-kabl-section figure.banner-media img {
    width: 100%;
    display: block;
    border-radius: 10px;
    transition: transform 0.4s ease;
}
.home-kabl-section figure.banner-media:hover img {
    transform: scale(1.01);
}
.home-kabl-middle-showcase .swiper-container {
    margin-top: -60px;
    padding: 0 30px;
}
/* Na mobilnom se koristi -sm baner slika (picture breakpoint 640px) kod koje
   je CTA dugme pri dnu — bez preklapanja karticama, slider ide ISPOD banera */
@media (max-width: 639px) {
    .home-kabl-middle-showcase .swiper-container {
        margin-top: 16px;
        padding: 0;
    }
}

/* ------------------------------------------------------------
   Brands slider — individual boxes per logo
   ------------------------------------------------------------ */
body.home .home-kabl-brands-slider {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
body.home .home-kabl-brands-slider .brands-wrapper {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
body.home .brands-wrapper.swiper-container {
    background: transparent;
    box-shadow: none;
}
body.home .brands-wrapper .swiper-slide {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}
body.home .brands-wrapper figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 16px 20px;
    margin: 0;
    transition: filter 0.25s ease, opacity 0.25s ease;
    filter: grayscale(40%);
    opacity: 0.8;
}
body.home .brands-wrapper .swiper-slide:hover figure {
    filter: grayscale(0%);
    opacity: 1;
}
body.home .brands-wrapper figure img {
    max-height: 64px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ------------------------------------------------------------
   Blog posts — card lift + image zoom
   ------------------------------------------------------------ */
body.home .post-wrapper .swiper-wrapper {
    align-items: stretch;
}
body.home .post-wrapper .post {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    text-align: left;
    height: auto;
    display: flex;
    flex-direction: column;
}
body.home .post-wrapper .post:hover {
    box-shadow: 0 12px 32px rgba(32, 91, 207, 0.14);
    transform: translateY(-4px);
}
body.home .post-wrapper .post .post-media {
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
}
body.home .post-wrapper .post .post-media img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 0;
}
body.home .post-wrapper .post:hover .post-media img {
    transform: scale(1.05);
}
body.home .post-wrapper .post .post-details {
    padding: 14px 16px 20px;
    flex: 1;
}
body.home .post-wrapper .post-title {
    margin-bottom: 0;
}
body.home .post-wrapper .post-title a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary-dark);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
body.home .post-wrapper .post-title a:hover {
    color: var(--primary-color);
}
body.home .post-wrapper .post-meta .post-date {
    font-size: 11.5px;
    color: var(--primary-gray);
    margin-bottom: 6px;
    display: block;
}
body.home .post-wrapper .post-excerpt {
    font-size: 12.5px;
    color: #777;
    line-height: 1.55;
    margin-top: 8px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------
   Section spacing — ujednačen i minimalan vertikalni ritam
   (sve sekcije isti padding; mt-* utility klase su uklonjene
   iz index.html pa razmak diktira isključivo ovaj blok)
   ------------------------------------------------------------ */
body.home .home-kabl-section {
    padding-top: 24px;
    padding-bottom: 12px;
}
body.home .home-kabl-section + .home-kabl-section {
    border-top: none;
}
body.home .home-kabl-brands-slider,
body.home .home-kabl-blog-slider {
    border-top: none;
    margin-top: 0;
}
/* Glavni baner + feature boxovi — isti razmak kao između sekcija */
body.home .intro-section {
    margin: 16px 0 0;
}
body.home .icon-box-wrapper {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}
body.home .top-categories-wrapper {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    body.home .top-categories-wrapper .category {
        padding: 12px 6px 10px;
        border-radius: 8px;
    }
    body.home .post-wrapper .post-details {
        padding: 10px 12px 14px;
    }
    body.home .home-kabl-brands-slider {
        border-radius: 10px;
    }
}
@media (max-width: 575px) {
    body.home .title-link-wrapper .title,
    body.home .top-categories-title {
        font-size: 15px;
    }
    .home-kabl-middle-showcase .banner-media img {
        border-radius: 10px;
    }
}

/* ------------------------------------------------------------
   Sale / New banner slide — equal height with product cards
   ------------------------------------------------------------ */
.product-deals-wrapper .swiper-wrapper {
    align-items: stretch;
}
.product-deals-wrapper .swiper-slide {
    height: auto;
}
.product-deals-wrapper .product-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-deals-wrapper .product-wrap .product {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-deals-wrapper .product-wrap .product .product-details {
    flex: 1;
}
.sale-banner-slide {
    display: flex;
    flex-direction: column;
    /* isti margin-bottom kao product kartice da se donje ivice poklope */
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
}
.sale-banner-slide > a:first-child {
    display: block;
    flex: 1;
    position: relative;
    min-height: 240px;
}
/* slika je apsolutno pozicionirana da svojom prirodnom visinom
   ne razvlači red — visinu reda diktiraju product kartice */
.sale-banner-slide .sale-banner-figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}
.sale-banner-slide .sale-banner-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sale-banner-slide .sale-banner-btn {
    display: block;
    width: 100%;
    border-radius: 0 0 10px 10px !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 16px !important;
    background: var(--primary-color) !important;
    border: none !important;
    color: #fff !important;
    text-align: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sale-banner-slide .sale-banner-btn:hover {
    background: #1749b1 !important;
    box-shadow: 0 4px 14px rgba(32, 91, 207, 0.2);
    color: #fff !important;
}

/* ------------------------------------------------------------
   Reviews & Comments form
   ------------------------------------------------------------ */
.review-form .btn-dark,
.btn-comment.btn-dark {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.review-form .btn-dark:hover,
.btn-comment.btn-dark:hover {
    background: #1749b1 !important;
    border-color: #1749b1 !important;
    box-shadow: 0 4px 14px rgba(32, 91, 207, 0.25);
}
p.required {
    color: #999 !important;
    font-size: 12.5px;
}
.review-form-wrapper .rating-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.review-form-wrapper .row.gutter-md {
    margin-bottom: 12px;
}
.review-form-wrapper textarea.form-control {
    min-height: 120px;
    margin-bottom: 16px;
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.product-categories .product-category:not(:last-child)::after { content: ','; margin-right: 3px; }
.product-sticky-content.fixed .product-form { padding: 0; }
.product-sticky-content .product-media img { height: 100%; padding: 10px; }

/* Srednji blok (naslov/SKU) sme da se skupi — inače dugačak SKU string
   širi kolonu i pomera dugmad. */
.cart-line-items-small .product-cart .product-detail {
    flex: 1 1 auto;
    min-width: 0;
}
.cart-line-items-small .product-cart .product-name small {
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Mini-cart per-item +/- dugmad — sada u koloni ispod šifre (zahtev
   klijenta avgust 2026: naslov → šifra → -/+ → cena), poravnato levo. */
.cart-line-items-small .cart-quantity-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    margin: 8px 0;
}
/* Tri polja spojena, bez razmaka i bez preklapanja okvira. Svaki box ima
   svoj okvir od 1px (bazna tema daje 1.6px, pa se ovde gazi). */
.cart-line-items-small .cart-quantity-buttons button {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ccc !important;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 15px;
}

.toolbox .toolbox-show select {
    min-width: 120px;
}

/* ------------------------------------------------------------
   Sidebar search (pretraga unutar liste / kategorije)
   ------------------------------------------------------------ */
.shop-sidebar .widget-sidebar-search {
    margin-bottom: 1.5rem;
}
.shop-sidebar .sidebar-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.shop-sidebar .sidebar-search-wrapper .sidebar-search {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 14px;
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    font-size: 13px;
    background-color: #fff;
}
.shop-sidebar .sidebar-search-wrapper .sidebar-search:focus {
    border-color: var(--primary-color);
    outline: none;
}
.shop-sidebar .sidebar-search-wrapper .btn-search-sidebar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
    font-size: 16px;
    cursor: pointer;
}
.shop-sidebar .sidebar-search-wrapper .btn-search-sidebar:hover {
    color: #fff;
    background: var(--primary-color);
}
.shop-sidebar .sidebar-search-wrapper .sidebar-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.payment-methods .card small{
    padding-left: 5px;
}

.brands-wrapper img {
    padding: 0px;
}

/* ------------------------------------------------------------
   Slider pagination dots — active dot uses brand color (#205bcf)
   ------------------------------------------------------------ */
.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* ------------------------------------------------------------
   Section header alignment on mobile (≤767px):
   keep the "Vidi sve" link inline with the title, pushed right
   ------------------------------------------------------------ */
@media (max-width: 767px) {

    .pl25{
        padding-left: 10px !important;
    }
    body.home .title-link-wrapper {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    body.home .title-link-wrapper .title {
        margin-bottom: 0;
    }
    body.home .title-link-wrapper > a {
        margin-left: auto;
        margin-bottom: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ------------------------------------------------------------
   Mini-cart (offcanvas) — raspored (klijent, avgust 2026):
   naslov "Korpa" + linija ispod; stavka: naslov → Šifra → -/+ →
   cena (x kol); ukupni iznosi; pa free-shipping (manji font,
   tanji bar); pa dugmad. Redosled blokova: header.html.
   ------------------------------------------------------------ */
/* (linija ispod naslova uklonjena — bazna tema već crta razdelnik
   iznad liste stavki, pa je bila duplirana) */
/* Free-shipping blok — diskretniji: bez sive pozadine, manji font,
   tanki progress bar (bazna tema: siva kutija + bar od 20px) */
/* Isti stil deli i traka iznad tabele na stranici korpe
   (.progress-cart-page, markup: kablsmart/_sections/table/cart-table.html) —
   Cart.freeShippingProgress puni sve elemente sa klasom
   .cart-free-shipping-progress, pa je dovoljno uskladiti izgled. */
.cart-dropdown .cart-free-shipping-progress,
.cart-free-shipping-progress.progress-cart-page {
    background: transparent;
    padding: 0 0 6px;
    margin: 1.2rem 0 0.6rem;
    text-align: left;
}
.cart-dropdown .cart-free-shipping-progress .free-shipping-text,
.cart-free-shipping-progress.progress-cart-page .free-shipping-text {
    padding: 0 0 6px;
    font-size: 12px;
    color: #777;
}
.cart-dropdown .cart-free-shipping-progress .progress-outer,
.cart-dropdown .cart-free-shipping-progress .progress-inner,
.cart-free-shipping-progress.progress-cart-page .progress-outer,
.cart-free-shipping-progress.progress-cart-page .progress-inner {
    height: 8px;
    border-radius: 4px;
}
.cart-dropdown .cart-free-shipping-progress .progress-outer,
.cart-free-shipping-progress.progress-cart-page .progress-outer {
    margin: 0 !important;
    background-color: #e8eaf0;
}
/* Na stranici korpe traka je gornji deo iste bele kartice u kojoj je tabela:
   ista širina i bez razmaka između njih, pa donja ivica trake naleže na
   tabelu. Vrh trake je u ravni sa vrhom boksa desno. Zaobljenje ide samo
   gore, a donji okvir se izostavlja da se ne bi dupliralo sa gornjim
   okvirom .cart-table-card. */
.cart-free-shipping-progress.progress-cart-page {
    margin: 0;
    padding: 2.5rem 3rem 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

/* Beli okvir oko tabele na stranici korpe — isti parametri kao boks sa
   iznosima desno (.order-summary), da dve kolone izgledaju kao jedan set.
   Markup: kablsmart/_sections/table/cart-table.html */
.cart-table-card {
    background: #fff;
    border: 1px solid #eee;
    /* Gore je ravno jer se nastavlja na traku za besplatnu dostavu. */
    border-radius: 0 0 3px 3px;
    padding: 2.5rem 3rem 3rem;
}

/* Sve cene u tabeli korpe su iste veličine kao iznosi u boksu (14px);
   jedino "Ukupno sa PDV-om" u boksu ostaje 1.5px veće. Pre ovoga su stara
   cena i kolona "Ukupno" bile 16px, a nova cena 14px.
   Kolona "Ukupno" dobija istu plavu kao "Ukupno sa PDV-om" u boksu. */
.cart-table-card .shop-table.cart-table .product-price .old-price,
.cart-table-card .shop-table.cart-table .product-price .new-price,
.cart-table-card .shop-table.cart-table .product-subtotal,
.cart-table-card .shop-table.cart-table .product-subtotal .amount {
    font-size: 14px;
}
.cart-table-card .shop-table.cart-table .product-subtotal {
    color: #333;
}
.cart-table-card .shop-table.cart-table .product-subtotal .amount {
    color: var(--primary-color);
    font-weight: 600;
}
/* Snizena cena u koloni "Cena" je crna, ne plava (klijent, septembar 2026).
   Plavu joj daje globalno .product-price .new-price{color:#205bcf}, koje se
   ovde gazi. Vazi SAMO na stranici korpe (.cart-table-card), pa liste
   proizvoda i stranica proizvoda ostaju nepromenjene. */
.cart-table-card .shop-table.cart-table .product-price .new-price {
    color: var(--primary-dark);
}
/* Zaglavlja kolona (Fotografija, Proizvod, ...) manje upadljiva: 16px -> 13px. */
.cart-table-card .shop-table.cart-table thead th {
    font-size: 13px;
}

/* Dugmad "Očisti korpu" i "Naručite" u boksu na stranici korpe: jedno ispod
   drugog, punom širinom boksa. Bazni .cart-action je flex red sa .btn{50%}
   i margin-left na poslednjem dugmetu, pa se to gazi.
   Markup: kablsmart/_sections/cart-summary.html */
.order-summary .cart-summary-action {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1rem;
    padding: 0;
    margin-top: 2rem;
}
.order-summary .cart-summary-action .btn {
    width: 100% !important;
    margin: 0 !important;
    justify-content: center;
}

/* Free-shipping bar na STRANICI PROIZVODA (desktop i mobil) — niži i
   blago zaobljen (bazna tema: 20px ravan); zaobljena i siva kutija */
.product-single .cart-free-shipping-progress {
    border-radius: 8px;
}
.product-single .cart-free-shipping-progress .progress-outer,
.product-single .cart-free-shipping-progress .progress-inner {
    height: 10px;
    border-radius: 5px;
}

/* Broj količine između − i + u mini-cart stepperu. Isti okvir kao dugmad
   (bazne klase "btn btn-light border" daju 0.1rem solid #ccc na beloj
   podlozi), pa sva tri polja izgledaju kao jedan set (klijent, sept. 2026). */
.cart-line-items-small .cart-qty-value {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 31px;
    height: 31px;
    padding: 0 4px;
    border: 1px solid #ccc;
    background: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
}
/* Kratka labela "Ukupno" postoji samo za mobil */
.cart-dropdown .mini-cart-total .mct-short {
    display: none;
}

/* Mini-cart na MOBILNOM — sitniji fontovi i zbijeniji razmaci da sve
   stane bez prelamanja labela (klijent, avgust 2026) */
@media (max-width: 767px) {
    /* Ceo offcanvas panel preko cele širine ekrana */
    .cart-dropdown.cart-offcanvas .dropdown-box {
        max-width: 100%;
        right: -100%;
    }
    .cart-dropdown.cart-offcanvas.opened .dropdown-box {
        right: 0;
    }
    /* Sakrivanje ostalih redova je sada globalno (vidi mini-cart sekciju);
       ovde ostaje samo kratka labela "Ukupno" umesto "Ukupno sa dostavom". */
    .cart-dropdown .mini-cart-total .mct-full {
        display: none;
    }
    .cart-dropdown .mini-cart-total .mct-short {
        display: inline;
    }
    .cart-dropdown .cart-header span {
        font-size: 14px;
    }
    .cart-line-items-small .product-name .cart-item-name {
        font-size: 12.5px;
        line-height: 1.4;
    }
    .cart-line-items-small .product-name small {
        font-size: 11px;
        margin-top: 2px;
    }
    .cart-line-items-small .product.product-cart .product-media {
        max-width: 5rem;
        flex: 0 0 5rem;
    }
    .cart-line-items-small .cart-quantity-buttons {
        margin: 6px 0;
    }
    .cart-line-items-small .cart-quantity-buttons button {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        font-size: 13px;
    }
    .cart-line-items-small .cart-qty-value {
        min-width: 27px;
        height: 27px;
        font-size: 12.5px;
    }
    .cart-line-items-small .price-box .product-price {
        font-size: 13.5px;
    }
    .cart-line-items-small .cart-small-qty {
        font-size: 11px;
    }
    /* Ukupni iznosi — sitnije, labele u jednom redu */
    .cart-dropdown .mini-cart-info th,
    .cart-dropdown .mini-cart-info td {
        font-size: 12.5px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .cart-dropdown .mini-cart-info th {
        white-space: nowrap;
        font-weight: 500;
    }
    .cart-dropdown .mini-cart-info .mini-cart-total th {
        font-weight: 700;
    }
    .cart-dropdown .cart-free-shipping-progress .free-shipping-text {
        font-size: 11px;
    }
    .cart-dropdown .cart-action .btn {
        font-size: 12px;
        padding: 0.9em 1.4em;
    }
}

/* ------------------------------------------------------------
   Mini-cart (offcanvas) — PRAZNA korpa kao referenca klijenta:
   velika bleda ikonica korpe, centriran tekst, plavo dugme.
   Markup: _inc/header/header.html (.cart-is-empty)
   ------------------------------------------------------------ */
.cart-dropdown .cart-is-empty {
    text-align: center;
    padding: 6.5rem 2rem 2rem;
    color: #777;
    font-size: 1.4rem;
}
.cart-dropdown .cart-is-empty .empty-cart-icon {
    display: block;
    margin: 0 auto 1.2rem;
    font-size: 7rem;
    line-height: 1;
    color: #dfe4ee;
}
.cart-dropdown .cart-is-empty .empty-cart-text {
    margin-bottom: 2rem;
}
.cart-dropdown .cart-is-empty .empty-cart-btn {
    display: inline-flex;
    padding: 0.85em 2.6em;
}

/* ------------------------------------------------------------
   Cart page (korpa) — stavka na mobilnom kao KARTICA (referenca
   klijenta, avgust 2026): slika levo, desno naziv pa redovi
   Šifra / Cena / Količina / Ukupno odvojeni linijama (labela levo,
   vrednost desno), kantica za brisanje gore desno.
   Markup: lineItemTemplate u _shared/js/rcms/cart-templates.js
   (labele redova dolaze iz title atributa td-ova).
   ------------------------------------------------------------ */
/* Desktop: red "Šifra" ostaje mali tekst ispod naziva ("Šifra: X") */
.cart-table .cart-sku {
    display: block;
    color: #999;
}
.cart-table .cart-sku .cart-sku-label::after {
    content: ": ";
}
/* Stepper količine u korpi: [ − ] [ broj ] [ + ] — broj u sredini.
   DOM (lineItemTemplate) je input→plus→minus, a bazni .input-group
   lepi oba dugmeta apsolutno uz desnu ivicu, pa ovde flex + order
   (isti pristup kao .product-single .product-qty-form). */
.shop-table.cart-table .product-quantity .input-group {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
    max-width: 150px;
    height: 48px;
    margin: 0 auto;
    border: 1px solid #dce3ee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shop-table.cart-table .product-quantity .input-group:hover,
.shop-table.cart-table .product-quantity .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(32, 91, 207, 0.08);
}
.shop-table.cart-table .product-quantity .input-group input.quantity {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark) !important;
    background: #fff !important;
    border: none !important;
    border-left: 1px solid #eef2f8 !important;
    border-right: 1px solid #eef2f8 !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.shop-table.cart-table .product-quantity .input-group input.quantity::-webkit-outer-spin-button,
.shop-table.cart-table .product-quantity .input-group input.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.shop-table.cart-table .product-quantity .input-group .quantity-minus { order: 1; }
.shop-table.cart-table .product-quantity .input-group .quantity-plus  { order: 3; }
.shop-table.cart-table .product-quantity .input-group .quantity-plus,
.shop-table.cart-table .product-quantity .input-group .quantity-minus {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    flex: 0 0 44px;
    width: 44px !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f6f9fd;
    border: none;
    color: var(--primary-dark);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.shop-table.cart-table .product-quantity .input-group .quantity-plus:hover,
.shop-table.cart-table .product-quantity .input-group .quantity-minus:hover {
    background: var(--primary-color);
    color: #fff;
}
@media (max-width: 767px) {
    .shop-table.cart-table:not(.account-orders-table) tbody {
        border: none;
    }
    .shop-table.cart-table:not(.account-orders-table) tr {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        column-gap: 14px;
        position: relative;
        padding: 1.4rem 1.5rem;
        background: #fff;
        border: 1px solid #e8eaf0;
        border-radius: 8px;
        text-align: left;
    }
    .shop-table.cart-table:not(.account-orders-table) tr + tr {
        margin-top: 12px;
        border-top: 1px solid #e8eaf0;
    }
    .shop-table.cart-table:not(.account-orders-table) td {
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
    }
    /* Slika — levo, vertikalno centrirana kroz sve redove */
    .shop-table.cart-table:not(.account-orders-table) td.product-thumbnail {
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: center;
    }
    .shop-table.cart-table .product-thumbnail > div {
        max-width: 100% !important;
        margin: 0;
    }
    /* Naziv — prvi red desne kolone; prostor desno za kanticu */
    .shop-table.cart-table:not(.account-orders-table) td.product-name {
        grid-area: 1 / 2;
        padding-right: 30px;
        /* !important zbog .text-center utility klase na td-u */
        text-align: left !important;
        font-size: 13.5px;
        line-height: 1.45;
    }
    /* Red "Šifra" (unutar naziva) — labela levo, vrednost desno */
    .shop-table.cart-table .cart-sku {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding: 9px 0 0;
        border-top: 1px solid #f0f1f5;
        font-size: 12.5px;
        color: #666;
    }
    .shop-table.cart-table .cart-sku .cart-sku-label::after {
        content: "";
    }
    /* Redovi Cena / Količina / Ukupno */
    .shop-table.cart-table:not(.account-orders-table) td.product-price,
    .shop-table.cart-table:not(.account-orders-table) td.product-quantity,
    .shop-table.cart-table:not(.account-orders-table) td.product-subtotal {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 9px 0;
        border-top: 1px solid #f0f1f5;
    }
    /* labela gura vrednosti (i staru+novu cenu zajedno) uz desnu ivicu */
    .shop-table.cart-table td.product-price::before,
    .shop-table.cart-table td.product-quantity::before,
    .shop-table.cart-table td.product-subtotal::before {
        margin-right: auto;
    }
    .shop-table.cart-table:not(.account-orders-table) td.product-price   { grid-area: 2 / 2; }
    .shop-table.cart-table:not(.account-orders-table) td.product-quantity { grid-area: 3 / 2; }
    .shop-table.cart-table:not(.account-orders-table) td.product-subtotal { grid-area: 4 / 2; padding-bottom: 0; }
    /* Labele redova (iz title atributa) + labela šifre — isti stil */
    .shop-table.cart-table td.product-price::before,
    .shop-table.cart-table td.product-quantity::before,
    .shop-table.cart-table td.product-subtotal::before {
        content: attr(title);
    }
    .shop-table.cart-table td.product-price::before,
    .shop-table.cart-table td.product-quantity::before,
    .shop-table.cart-table td.product-subtotal::before,
    .shop-table.cart-table .cart-sku .cart-sku-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #9aa0ab;
    }
    /* Stepper — kompaktan, uz desnu ivicu; manja dugmad da broj ima mesta */
    .shop-table.cart-table .product-quantity .input-group {
        margin: 0;
        max-width: 112px;
        height: 40px;
    }
    .shop-table.cart-table .product-quantity .input-group .quantity-plus,
    .shop-table.cart-table .product-quantity .input-group .quantity-minus {
        flex-basis: 34px;
        width: 34px !important;
    }
    /* Kantica (brisanje) — gore desno na kartici */
    .shop-table.cart-table:not(.account-orders-table) tbody td:last-child {
        position: absolute;
        top: 1.1rem;
        right: 1.3rem;
        border: none;
        padding: 0;
    }
    /* Vrednosti cena — bez prelamanja "RSD" */
    .shop-table.cart-table .product-price,
    .shop-table.cart-table .product-price .new-price,
    .shop-table.cart-table .product-price .old-price,
    .shop-table.cart-table .product-subtotal .amount {
        white-space: nowrap;
    }
    .shop-table.cart-table td.product-price,
    .shop-table.cart-table td.product-subtotal {
        font-size: 14px;
    }
}

/* ------------------------------------------------------------
   Cart akcije (dugmad) na mobilnom — NASTAVITE KUPOVINU cela širina,
   ispod OČISTI KORPU + NARUČITE po pola
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .cart-table .cart-action {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 2rem;
    }
    .cart-table .cart-action > .btn {
        margin: 0;
    }
    /* NASTAVITE KUPOVINU — veliko, preko cele širine */
    .cart-table .cart-action .btn-shopping.mr-auto {
        width: 100%;
        margin: 0;
        justify-content: center;
    }
    /* OČISTI KORPU + NARUČITE — po pola širine, u istom redu */
    .cart-table .cart-action .clear-cart-btn,
    .cart-table .cart-action .checkout-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   Shop toolbox — ujednačeni razmaci na mobilnom
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* toolbox-left/right se "rasformiraju" pa filter + sort + prikaz
       postaju direktni flex-elementi -> jedan poravnat red */
    .toolbox {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    .toolbox .toolbox-left,
    .toolbox .toolbox-right {
        display: contents;
    }
    .toolbox .left-sidebar-toggle {
        flex: 0 0 auto;
        margin: 0;
    }
    .toolbox .toolbox-layout {
        display: none;
    }
    /* sort i prikaz: labela + select ostaju u istom redu, dele prostor podjednako */
    .toolbox .toolbox-item {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        margin: 0 !important;
    }
    .toolbox .toolbox-item label {
        margin-right: 6px;
        margin-bottom: 0;
        white-space: nowrap;
    }
    .toolbox .toolbox-item select {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;   /* poništi temin cap (13.6rem) da select popuni polje */
    }
    /* strelica down unutar samog select polja, uz desnu ivicu */
    .toolbox .toolbox-item.select-box::before {
        right: 1rem !important;
        left: auto !important;
    }
}

/* ------------------------------------------------------------
   Shop sidebar (off-canvas na mobilnom, <992px):
   spljošti kartice u jedan uredan panel umesto zasebnih plutajućih boksova
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    .shop-sidebar.sidebar-fixed .sidebar-content {
        background: #fff;
    }
    .shop-sidebar.sidebar-fixed .sticky-sidebar {
        gap: 0;
    }
    .shop-sidebar.sidebar-fixed .widget.widget-collapsible {
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #edf1f7;
        padding: 14px 16px;
    }
    .shop-sidebar.sidebar-fixed .sticky-sidebar > .widget.widget-collapsible:last-of-type {
        border-bottom: none;
    }
}

/* ------------------------------------------------------------
   Password polja — "eye" toggle unutar polja, uz desnu ivicu
   (wrapper .pw-input oko input-a i .toggle-password/.toggle-confirm-password)
   ------------------------------------------------------------ */
.pw-input {
    position: relative;
}
.pw-input > .form-control {
    margin-bottom: 0;
    padding-right: 42px;   /* mesto za ikonicu da tekst ne ide ispod nje */
}
.pw-input > .toggle-password,
.pw-input > .toggle-confirm-password {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    font-size: 16px !important;
    line-height: 1;
    color: var(--primary-gray);
    cursor: pointer;
    z-index: 3;
}
.pw-input > .toggle-password:hover,
.pw-input > .toggle-confirm-password:hover {
    color: var(--primary-color);
}

@media (max-width: 575px) {
    .post-single-content ul {
        padding-left: 20px;
    }
    .manuf-list .manuf-item img,
    .manuf-list .manuf-item h4 {
        padding: 10px;
    }
}

.my-account .tab-content {
    padding: 20px;
}

/* ------------------------------------------------------------
   Account "Porudžbine" tabela — centriran sadržaj u svim kolonama
   ------------------------------------------------------------ */
.account-orders-table thead th,
.account-orders-table tbody td {
    text-align: center !important;
    vertical-align: middle;
}

/* ------------------------------------------------------------
   Account naslovi (ikona + naslov) — na mobilnom levo poravnati u red,
   ne centrirani/stakovani. icon-box-light se koristi samo na account stranama.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .icon-box-side.icon-box-light {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }
    .icon-box-side.icon-box-light .icon-box-icon {
        margin: 0 10px 0 0;
    }
    .icon-box-side.icon-box-light .icon-box-content {
        text-align: left;
    }
}

/* ------------------------------------------------------------
   Lista želja — plava cena u jednom redu na mobilnom (bez lomljenja "RSD")
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .shop-table.wishlist-table .product-price,
    .shop-table.wishlist-table .new-price,
    .shop-table.wishlist-table .old-price {
        white-space: nowrap;
    }
}
/* ============================================================
   SINGLE PROIZVOD — galerija: gašenje inner zoom-a
   ============================================================ */

/* Zoom lupa preko slike se ne koristi (smeta i na desktopu i na touch-u).
   jquery.zoom i dalje ubacuje .zoomImg, pa ga samo skrivamo. */
.product-gallery .product-image .zoomImg,
.product-single .product-image .zoomImg {
    display: none !important;
}

/* Dugme za uvećanje (fullscreen galerija) ostaje, ali se pojavljuje
   tek na mouse over-u nad galerijom. Na touch uređajima (nema hover-a)
   ostaje trajno vidljivo. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .product-gallery .product-gallery-btn {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease, color 0.3s;
    }
    .product-gallery:hover .product-gallery-btn {
        opacity: 0.85;
        visibility: visible;
    }
    .product-gallery .product-gallery-btn:hover {
        opacity: 1;
    }
}

/* ============================================================
   SINGLE PROIZVOD — lista želja kao overlay preko slike (mobilni)
   ============================================================ */

/* Lista želja u gornjem desnom uglu slike — sada i na desktopu (klijent,
   septembar 2026; dugme ispod "Dodaj u korpu" je uklonjeno iz markupa).
   Zajednički izgled je ovde, a pozicija se razlikuje po širini: na desktopu
   je galerija leva polovina reda, pa se dugme sidri na 50% + gutter, dok na
   mobilnom galerija ide punom širinom (vidi mobilni blok niže). */
.product-single-container {
    position: relative;
}
.product-single-container .wishlist-btn-overlay {
    --pd-btn: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    width: var(--pd-btn);
    height: var(--pd-btn);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
    color: var(--primary-dark);
    font-size: 1.6rem;
    line-height: 1;
}
@media (min-width: 768px) {
    .product-single-container .wishlist-btn-overlay {
        top: 3.4rem;
        right: calc(50% + 1.5rem);
        left: auto;
    }
    .product-single-container .wishlist-btn-overlay:hover {
        color: var(--primary-color);
    }
}

/* ============================================================
   MOBILNI (≤767px) — single proizvod
   ============================================================ */
@media (max-width: 767px) {

    /* --- Breadcrumb: jedan red, sitniji font, manje zauzetog prostora --- */
    .breadcrumb-nav {
        margin-bottom: 1.4rem;
    }
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 8px 0.2rem;
        gap: 1px;
    }
    .breadcrumb::-webkit-scrollbar {
        display: none;
    }
    .breadcrumb li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .breadcrumb a {
        font-size: 10px;
        letter-spacing: 0.02em;
        padding: 3px 9px;
    }
    .breadcrumb li:not(:last-child)::after {
        font-size: 0.8rem;
        margin-left: 1px;
    }

    /* --- Lista želja: overlay u gornjem DESNOM uglu, preko slike ---
       Levi ugao drži .product-label-group ("Novo u ponudi" / "Akcija"), pa se
       srce ogleda na desnoj strani — isto kao na karticama proizvoda.
       Referenca je .product-single-container; ribbon je top/left 1rem u odnosu
       na .product-single-swiper, koji je 2rem niže i 3rem desno od kontejnera,
       pa je ribbon efektivno na 3rem/4rem od ivica kontejnera. Vertikalno se
       centrira na sredinu ribbon-a (odatle razlika visina u calc-u). */
    .product-single-container {
        position: relative;
    }
    .product-single-container .wishlist-btn-overlay {
        --pd-badge-h: 2.2rem;   /* visina ribbon-a u galeriji */
        --pd-btn: 3rem;         /* prečnik dugmeta — isti kao na karticama */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(3rem + (var(--pd-badge-h) - var(--pd-btn)) / 2);
        right: 4rem;
        left: auto;
        z-index: 3;
        width: var(--pd-btn);
        height: var(--pd-btn);
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
        color: var(--primary-dark);
        font-size: 1.5rem;
        line-height: 1;
        transition: none;
    }
    /* Bez hover/active promena — na touch-u stanje ostaje zaključano posle tapa */
    .product-single-container .wishlist-btn-overlay:hover,
    .product-single-container .wishlist-btn-overlay:active,
    .product-single-container .wishlist-btn-overlay:focus {
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
        color: var(--primary-dark);
        transform: none;
    }
    /* (Dugme ispod "Dodaj u korpu" vise ne postoji u markupu, pa nema sta da
       se sakriva — vidi kablsmart/_sections/product/product-info.html.) */

    /* --- Cena: nešto sitnija nego na desktopu, ali i dalje krupna --- */
    .product-single .product-details .product-price {
        font-size: 2.2rem !important;
    }

    /* --- Tab "Opis": +2px u odnosu na baznih 14px --- */
    .product-tabs #product-tab-description,
    .product-tabs #product-tab-description p,
    .product-tabs #product-tab-description li,
    .product-tabs #product-tab-description td,
    .product-tabs #product-tab-description th,
    .product-tabs #product-tab-description strong,
    .product-tabs #product-tab-description em,
    .product-tabs #product-tab-description span {
        font-size: 16px;
    }
    /* CMS editor umotava tekst u <font size="1|2|3"> — te legacy veličine
       gaze nasleđeni font-size, pa ih vraćamo na nasleđivanje.
       size="4"+ (namerno uvećan tekst) ostaje kakav jeste. */
    .product-tabs #product-tab-description font[size="1"],
    .product-tabs #product-tab-description font[size="2"],
    .product-tabs #product-tab-description font[size="3"] {
        font-size: inherit;
    }
}


/* ============================================================
   MOBILNI (≤575px) — kompaktan footer, menu widgeti kao akordeoni
   ============================================================ */
@media (max-width: 575px) {
    .footer-top {
        padding: 2.2rem 0 0.2rem;
    }
    .footer-top .row > [class*="col-"] {
        margin-bottom: 0;
    }
    .footer-top .widget {
        margin-bottom: 1.6rem;
    }
    .footer-top .widget-title {
        margin-bottom: 0.7rem;
        font-size: 13px;
    }
    /* Podvuceni naslovi kolona (h3.widget-title -> inline-block + donja
       linija) su pravilo za desktop. Na telefonu su razbili footer:
         - naslov se skupio na sirinu teksta (86-139px umesto punih 345px),
           pa je sveron akordeona, koji stoji na right:8px SVOG naslova,
           zavrsio zalepljen uz slova umesto uz desnu ivicu;
         - klik zona akordeona se svela na sam tekst;
         - linija ispod teksta se sudarala sa linijama koje ionako razdvajaju
           sekcije akordeona (border-top), pa je bilo dupliranih crta.
       Zato se ispod 576px vraca stari izgled: naslov je blok, bez podvlacenja.
       Iznad ovog breakpoint-a podvlacenje ostaje kako je klijent trazio. */
    .footer-top h3.widget-title {
        display: block;
        border-bottom: 0 !important;
    }
    .footer-top .widget-body li {
        margin-bottom: 0.25rem;
        line-height: 1.5;
    }
    .footer-top .widget-body a,
    .footer-top .widget-about-title a {
        font-size: 13px;
    }

    /* --- Akordeoni: Stranice / Korisni linkovi / Informacije ---
       Klasu .footer-accordion (i .is-open) postavlja skripta u script.js,
       i to samo ispod ovog breakpoint-a — iznad njega markup ostaje običan. */
    /* Linije: svaki akordeon nosi liniju IZNAD, a poslednji (Informacije,
       tj. .footer-menu-col posle .footer-menu-col) i ISPOD — isti izgled
       kao ranije (linija iznad prvog, između i ispod poslednjeg).
       Ranije je bilo vezano za [class*="col-lg-3"], slomljeno prelaskom
       na col-lg-4 — sada ide preko marker klase .footer-menu-col. */
    .footer-top .widget.footer-accordion {
        margin-bottom: 0;
        border-top: 1px solid rgba(32, 91, 207, 0.12);
    }
    .footer-top .row > .footer-menu-col + .footer-menu-col .widget.footer-accordion {
        border-bottom: 1px solid rgba(32, 91, 207, 0.12);
    }
    .footer-top .widget.footer-accordion > .widget-title {
        position: relative;
        margin: 0;
        padding: 11px 28px 11px 0;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }
    /* šveron desno — rotira se kad je sekcija otvorena */
    .footer-top .widget.footer-accordion > .widget-title::after {
        content: "";
        position: absolute;
        right: 8px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.25s ease, margin-top 0.25s ease;
        opacity: 0.5;
    }
    .footer-top .widget.footer-accordion.is-open > .widget-title::after {
        margin-top: -2px;
        transform: rotate(-135deg);
    }
    .footer-top .widget.footer-accordion > .widget-body {
        display: none;
        padding-bottom: 10px;
    }
    .footer-top .widget.footer-accordion.is-open > .widget-body {
        display: block;
    }

    /* Kontakt blok — zbijeniji */
    .footer-top .widget-about .logo-footer img {
        max-height: 42px;
        width: auto;
    }
    .footer-top .footer-about .widget-about-title {
        margin-top: 0.4rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.5;
    }
    /* Napomena o cenama — sitnije i uže */
    .footer-top .col-lg-12.text-center p {
        font-size: 11px;
        line-height: 1.45;
        margin-bottom: 0.6rem !important;
    }
    .footer-bottom {
        padding: 0.9rem 0;
    }
    .footer-bottom .copyright {
        font-size: 11.5px;
    }
    .footer-top .font-size-sm{
        font-size: 11px !important;
        margin-top: 20px;
    }
    .footer-top .widget-about{
        margin-bottom: 0px;
    }
}


/* ============================================================
   IZMENE avgust 2026 — announcement bar, sticky "Meni",
   svetli mobilni meni, baner tačke, footer social, product page
   ============================================================ */

/* ------------------------------------------------------------
   1) HEADER — announcement bar kao ROTATOR (klijent, avgust 2026):
   svaki deo welcome_txt ("Brza dostava" / "Sigurna kupovina" /
   "Proveren kvalitet") je poseban centriran "slajd" koji se
   smenjuje — i desktop i mobil. Markup/JS: override
   _inc/header/header.html (.js-welcome-rotator).
   ------------------------------------------------------------ */
.header-top .header-left {
    flex: 1;
    min-width: 0;
}
.welcome-msg.js-welcome-rotator {
    /* desktop: levo (kao ranije); gasi marquee animaciju bazne teme na <480px */
    text-align: left;
    animation: none !important;
    transform: none !important;
}
/* mobil: centrirano */
@media (max-width: 767px) {
    .header-top .header-left {
        justify-content: center;
    }
    .welcome-msg.js-welcome-rotator {
        text-align: center;
    }
}
.welcome-rotator-item {
    display: none;
}
.welcome-rotator-item.active {
    display: block;
    animation: welcomeFadeIn 0.45s ease;
}
@keyframes welcomeFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   2) Glavni baner — plave tačke (slider indikatori) ISPOD banera
   Pagination je statična (ne preko slike): ide u tok ispod slajdova,
   unutar bele zaobljene kartice banera.
   ------------------------------------------------------------ */
.intro-section .swiper-pagination {
    position: static;
    margin: 0;
    padding: 12px 0 0;
    line-height: 1;
}
/* Klijent (avgust 2026): "slajd tačkice svuda iste" — isti stil
   tačkica važi za SVE slajdere na sajtu (baner, proizvodi, brendovi,
   blog...), ne samo za glavni baner. Aktivna tačkica je isti KRUŽIĆ
   (ne razvučena pilula — bazna tema je preko
   .swiper-theme>.swiper-pagination ...-active { width:18px } razvlači,
   zato width/border-radius nose !important). */
.swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px;
    border-radius: 50% !important;
    background: #c6d3ef;
    border: none;
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}
.swiper-pagination .swiper-pagination-bullet:hover {
    background: #a9bce8;
    border: none;
}
.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
    transform: scale(1.2);
}

/* ------------------------------------------------------------
   3) MOBILNI MENI (drawer) — siva pozadina + beli tekst
   (klijent, avgust 2026: vratiti sivu ali SVETLIJU nijansu od
   originalne tamne; tekst kategorija centriran)
   ------------------------------------------------------------ */
.mobile-menu-container {
    background: #4e545e;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.25);
}
.mobile-menu-container .mobile-menu {
    background: transparent;
}
.mobile-menu-container .tab-pane {
    color: #fff;
}
.mobile-menu-container .nav-link {
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.mobile-menu-container .nav-item.show .nav-link,
.mobile-menu-container .nav-item .nav-link.active {
    color: #fff;
    border-color: #fff;
}
.mobile-menu li a {
    color: #fff;
    font-size: 1.3rem;
    text-align: left; /* klijent (kasnije): ipak levo, ne centrirano */
}
/* Duži nazivi u dva reda (kao u desktop meniju): ikonica fiksna kolona,
   tekst svoj blok — drugi red se poravnava ispod prvog reda TEKSTA,
   ne ispod ikonice. Strelica (toggle-btn) je apsolutna, pa flex ne smeta. */
.mobile-menu > li > a {
    display: flex;
    align-items: center;
    padding-right: 2.6rem;
    line-height: 1.35;
}
.mobile-menu li li a {
    color: rgba(255, 255, 255, 0.8);
}
.mobile-menu > li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.mobile-menu li.expanded > a,
.mobile-menu li.show > a,
.mobile-menu li:hover > a {
    color: #fff;
}
/* "Vidi sve" na dnu liste — plava iz bazne teme se slabo vidi na sivoj */
.mobile-menu-container .mobile-menu a.text-primary {
    color: #fff !important;
}
.mobile-menu-container .toggle-btn::before,
.mobile-menu-container .toggle-btn::after {
    border-top-color: rgba(255, 255, 255, 0.7);
}
.mobile-menu-container.scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

/* Monohromna ikonica ispred naziva kategorije (drawer + desktop megamenu) —
   Remix "line" ikonice, jedna boja (bez emoji-ja u boji) */
.cat-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--primary-gray);
    vertical-align: middle;
}
.category-menu > li:hover > a .cat-icon {
    color: var(--primary-color);
}
/* U sivom draweru ikonice svetle, na hover bele */
.mobile-menu-container .cat-icon {
    color: rgba(255, 255, 255, 0.75);
}
.mobile-menu li:hover > a .cat-icon {
    color: #fff;
}

/* Tab "Meni" — kontakt blokovi (Pozovite nas / Besplatna dostava),
   kao na Elementi: ikona + dve linije teksta, odvojeni linijom */
.mobile-menu-contact {
    margin-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.mobile-menu-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.3rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}
.mobile-menu-contact-item i {
    font-size: 2.2rem;
    color: #fff;
    flex-shrink: 0;
}
.mobile-menu-contact-item .mmc-text {
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    line-height: 1.5;
}
.mobile-menu-contact-item .mmc-text strong {
    color: #fff;
    font-weight: 600;
}

/* ------------------------------------------------------------
   4) FOOTER — "Pratite nas": naslov + FB/IG ikonice ispod adrese
   ------------------------------------------------------------ */
.footer-follow {
    margin-top: 1.6rem;
}
.footer-follow .footer-follow-title {
    margin-bottom: 1rem;
    padding-bottom: 0;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0;
}
/* Klijent (avgust 2026): ikonice kao "čisti" glifovi bez kruga/pozadine
   (referenca: f / in / kamera ikonice sa primera). Inline SVG umesto icon
   fonta — font glifovi su delovali mutno ("čudna tekstura"). */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: none !important;   /* bazna tema crta sivi okvir na .social-icons a */
    border-radius: 0;
    background: transparent;
    /* siva kao ostale ikonice u futeru (telefon/koverta/pin) */
    color: var(--primary-gray) !important;
    transition: color 0.2s ease;
}
.footer-social a:hover {
    background: transparent;
    color: var(--primary-color) !important;
}
.footer-social a svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* ------------------------------------------------------------
   5) STRANICA PROIZVODA
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   CHECKOUT — prepakovan raspored (klijent, avgust 2026).
   Radio KARTICE za tip naručioca (Fizičko/Pravno lice), način
   dostave i način plaćanja: ikonica levo, tekst, radio desno;
   aktivna kartica plavi okvir + svetloplava pozadina.
   Šabloni: kablsmart _sections/form/checkout-form.html i
   _sections/checkout-totals.html
   ------------------------------------------------------------ */
.checkout .customer-type-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}
.checkout .customer-type-cards.mb-4 {
    margin-bottom: 2rem;
}
.checkout .ct-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #e2e6ef;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-dark);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.checkout .ct-card i {
    font-size: 20px;
    line-height: 1;
    color: var(--primary-color);
    flex-shrink: 0;
}
.checkout .ct-card input[type="radio"] {
    margin-left: auto;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.checkout .ct-card:has(input:checked) {
    border-color: var(--primary-color);
    background: #eef3fc;
    color: var(--primary-color);
}
.checkout .ct-card.ct-card-static {
    cursor: default;
}
.checkout .ct-card-desc {
    display: block;
    margin: 6px 2px 0;
    color: #888;
    font-size: 12.5px;
    line-height: 1.5;
}
.checkout .payment-accordion ul.customer-type-cards {
    margin-bottom: 0;
}
.checkout .payment-accordion .payment-item {
    margin-bottom: 0;
}
.checkout .payment-accordion #credit-card-payment {
    padding: 10px 4px 0;
}
.checkout .place-order .btn {
    width: 100%;
}
/* Spinner na "Provera podataka..." dugmetu dok traje slanje porudžbine */
.checkout .place-order .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -3px;
    animation: kablBtnSpin 0.7s linear infinite;
}
@keyframes kablBtnSpin {
    to { transform: rotate(360deg); }
}
/* Blok "Podaci firme" — bez okvira nasleđenog od .checkbox-content */
.checkout .company-info {
    border: none;
    padding: 0;
}

/* Glavna slika proizvoda — ujednačena visina galerije: izvorne slike su
   raznih dimenzija (portretne bi napravile ogromnu sliku), pa se sve
   uklapaju u fiksan okvir bez sečenja (contain). Isto i za sličice. */
.product-single .product-gallery .product-image img {
    width: 100%;
    height: 460px;
    object-fit: contain;
    background: #fff;
}
.product-single .product-thumbs .product-thumb img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    background: #fff;
}
@media (max-width: 767px) {
    .product-single .product-gallery .product-image img {
        height: 320px;
    }
    .product-single .product-thumbs .product-thumb img {
        height: 70px;
    }
}

/* Opis proizvoda — neutralizacija inline stilova iz nalepljenog HTML-a.
   Opisi se u CMS unose copy/paste-om (Word, chat alati...) i umeju da
   ponesu style atribute (position:absolute, height:0, overflow:hidden,
   opacity/transition) koji SAKRIJU ceo opis čim se stranica učita.
   Ovde se te osobine gaze da tekst uvek ostane vidljiv; boje/poravnanja
   iz style atributa se ne diraju. */
#product-tab-description [style] {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Naziv kategorije iznad slike proizvoda */
.product-single .product-category-above {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.product-single .product-category-above a {
    color: var(--primary-color);
}
.product-single .product-category-above a:hover {
    text-decoration: underline;
}
.product-single .product-category-above .pca-sep {
    margin: 0 6px;
    color: #b0b8d0;
}

/* Cena + "Dostupno"/"Na stanju" u istom redu */
.product-single .product-price-avail-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Razmak izmedju popusta i cena mora da bude isti kao razmak izmedju
       stare i nove cene (.product-price gap ispod), inace tri elementa u redu
       izgledaju rastrkano. */
    gap: 6px 10px;
    margin: 10px 0 4px;
}
/* Popust (-35%), stara i nova cena stoje u ISTOM redu (klijent, sept. 2026).
   Stara cena je inace blok — to dolazi iz pravila za kartice proizvoda
   (.product-details .product-price .old-price{display:block}), koje hvata i
   single stranu jer koristi isti .product-details wrapper; ovde se vraca u
   liniju. Badge takodje ne sme da nosi svoju vertikalnu marginu. */
.product-single .product-price-avail-row .product-price {
    /* !important je nuzan: pravilo za kartice proizvoda
       (.product-details .product-price) postavlja margin-top:5px !important,
       sto je blok sa cenama guralo 2.5px nize od badge-a u istom redu. */
    margin: 0 !important;
    display: flex;
    /* Poravnanje po SREDINI, ne po osnovnoj liniji: stara cena je 16px, nova
       24px, a badge 11px, pa im se pri baseline poravnanju vidno razlikuju
       visine teksta (badge je zavrsavao ~8px iznad linije cena). */
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
}
.product-single .product-price-avail-row .product-price .old-price {
    display: inline;
    margin-bottom: 0;
}
.product-single .product-price-avail-row .product-discount {
    margin: 0;
    display: flex;
    align-items: center;
}
.product-single .product-price-avail-row + .store-price-note {
    margin: 4px 0 10px;
}

/* Uža (− +) sekcija za količinu -> šire "Dodaj u korpu" dugme */
.product-single .product-qty-form {
    flex: 0 0 12rem;
    max-width: 12rem;
    margin-right: 1rem;
}
.product-single .product-qty-form input.quantity {
    flex: 1 1 auto;
    padding: 0 2px;
    font-size: 15px;
}
.product-single .product-qty-form .quantity-plus,
.product-single .product-qty-form .quantity-minus {
    flex: 0 0 36px;
    width: 36px !important;
}
.product-single .product-form .btn-cart {
    flex: 1 1 auto;
    justify-content: center;
}

/* Prostor od uklonjenih share ikonica: wrapper bez dodatnih margina,
   a na mobilnom (gde je i wishlist overlay preko slike) se skriva ceo */
.product-single .social-links-wrapper {
    margin: 0;
}
@media (max-width: 767px) {
    .product-single .social-links-wrapper {
        display: none;
    }
}

@media (max-width: 991px) {
    .header-top .header-left {
         margin-right: 0px; 
    }
}
/* ------------------------------------------------------------
   Korpa — razmak do sekcije sa preporukama ispod
   ------------------------------------------------------------ */
/* Od dugmeta "Nastavite kupovinu" do preporuka je bilo 140px:
   30px (.cart-action .mb-6) + 30px (visak u levoj koloni, jer je desna
   kolona sa iznosima visa) + 30px (.mb-6 na koloni) + 50px (.mb-10 na redu).
   Ostaju prva dva (diktira ih sadrzaj), a margine reda i kolona se smanjuju. */
.main.cart .page-content .row.gutter-lg,
.main.cart .page-content .row.gutter-lg > [class*="col-"],
.main.cart .cart-action.mb-6 {
    margin-bottom: 0 !important;
}

/* Naslov sekcije sa preporukama na stranici korpe udaljen je od granice
   sekcija isto koliko i dugme "Nastavite kupovinu" iznad — 30px.
   Bazni templejt daje sekciji .pt-9 (4.5rem = 45px), a izmereno je da izmedju
   vrha sekcije i naslova nema drugih margina, pa je dovoljno spustiti padding
   na 30px (isto sto bi dala klasa .pt-6). !important jer je i .pt-9 takav.
   Scope: samo AJAX blok na korpi/naplati, sekcija na stranici proizvoda
   ostaje sa 45px. */
#cart-recommendations .recommendations-section {
    padding-top: 30px !important;
}

/* ------------------------------------------------------------
   Korpa na MOBILNOM — doterivanje kartice stavke (klijent, sept. 2026)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* 1) Kantica za brisanje je manja, pa joj treba manje rezervisanog mesta. */
    .shop-table.cart-table:not(.account-orders-table) tbody td:last-child a {
        font-size: 16px;
    }
    /* Razmak za kanticu se prebacuje sa CELE celije na sam naslov, da bi linija
       iznad reda "Šifra" isla do desne ivice kartice. Ranije je td imao
       padding-right:30px, pa je ta linija stajala 30px prekratko. */
    .shop-table.cart-table:not(.account-orders-table) td.product-name {
        padding-right: 0;
    }
    .shop-table.cart-table:not(.account-orders-table) td.product-name > a {
        display: block;
        padding-right: 26px;
    }
    /* 2) Naziv proizvoda podebljan. */
    .shop-table.cart-table:not(.account-orders-table) td.product-name > a {
        font-weight: 700;
    }
    /* 3) Manji birac kolicine. */
    .shop-table.cart-table .product-quantity .input-group {
        max-width: 96px;
        height: 34px;
    }
    .shop-table.cart-table .product-quantity .input-group .quantity-plus,
    .shop-table.cart-table .product-quantity .input-group .quantity-minus {
        flex-basis: 28px;
        width: 28px !important;
        font-size: 13px;
    }
    .shop-table.cart-table .product-quantity .input-group input.quantity {
        font-size: 14px;
    }
}

/* Korpa na MOBILNOM — dorada (klijent, septembar 2026):
   jos manji birac kolicine, istaknutija cena u redu "Ukupno" i uzi padding
   kartice, da bi okolne ivice bile tanje. */
@media (max-width: 767px) {
    .shop-table.cart-table .product-quantity .input-group {
        max-width: 84px;
        height: 30px;
    }
    .shop-table.cart-table .product-quantity .input-group .quantity-plus,
    .shop-table.cart-table .product-quantity .input-group .quantity-minus {
        flex-basis: 26px;
        width: 26px !important;
        font-size: 12px;
    }
    .shop-table.cart-table .product-quantity .input-group input.quantity {
        font-size: 13px;
    }
    /* Samo IZNOS u redu "Ukupno" je krupniji; labela ostaje ista. */
    .shop-table.cart-table:not(.account-orders-table) td.product-subtotal .amount {
        font-size: 16px;
    }
    /* Uzi padding kartice stavke (bilo 1.4rem 1.5rem). */
    .shop-table.cart-table:not(.account-orders-table) tr {
        padding: 1.1rem 1.2rem;
    }
}

/* Korpa na MOBILNOM — uzi padding bele sekcije oko kartica stavki
   (klijent, septembar 2026). Bilo je 25/30/30px, pa je oko kartice ostajao
   pojas od 31px. Traka za besplatnu dostavu je deo iste bele povrsine, pa
   prati isti bocni razmak. */
@media (max-width: 767px) {
    .cart-table-card {
        padding: 12px 12px 14px;
    }
    .cart-free-shipping-progress.progress-cart-page {
        padding: 14px 12px 10px;
    }
}

/* Na MOBILNOM se dugme "Nastavite kupovinu" ne prikazuje (klijent, sept. 2026).
   :not(.cart-summary-action) je bitan — dugmad "Ocisti korpu" i "Narucite" u
   boksu sa iznosima takodje stoje u elementu sa klasom .cart-action. */
@media (max-width: 767px) {
    .main.cart .cart-action:not(.cart-summary-action) {
        display: none;
    }
}

/* ------------------------------------------------------------
   MOBILNI — naslovna sekcija i breadcrumb (klijent, septembar 2026)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Niza prva sekcija: bazna tema drzi .page-header na 134px, a u njoj je
       samo naslov od ~33px. Selektori .cart/.checkout su nuzni jer postoji
       pravilo ".cart .page-header, .checkout .page-header{height:134px}" —
       specificnost 0,2,0, koju samo ".page-header" ne moze da nadjaca
       (media query ne dodaje specificnost). */
    .page-header,
    .cart .page-header,
    .checkout .page-header {
        height: 90px;
    }
    /* Breadcrumb centriran i po visini. Siva traka ide od dna .page-header-a
       do prvog belog bloka i visoka je 52px, a pilula je stajala 8px od vrha
       i 22px od dna (8px padding + 14px margine na .breadcrumb-nav).
       Margina se ponistava, a padding se dize na 15px: traka ostaje 52px, ali
       je razmak sada isti gore i dole. */
    .breadcrumb-nav {
        margin-bottom: 0;
    }
    .breadcrumb {
        padding: 15px 2px;
    }
}