/*
Theme Name:   Partdo Child
 Theme URI:    http://klbtheme.com/partdo/
 Description:  Partdo Child Theme
 Author:       KlbTheme
 Author URI:   http://themeforest.net/user/KlbTheme
 Template:     partdo
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  partdo-child
*/

/*************************************************
* Wishlist heart: red when the product is already
* in the list. The icon glyph already swaps to
* filled (wishlist.css: .klbwl-product-in-list
* content) but its color was left at currentColor
* (the surrounding text color) — reusing the
* theme's own established wishlist-red (already
* used on .wishlist-button:hover in wishlist.css)
* for the "selected" state instead of a new color.
*************************************************/

.woocommerce ul.products li.product a.klbwl-btn.klbwl-product-in-list,
.woocommerce .products .product a.klbwl-btn.klbwl-product-in-list,
.single-product-wrapper a.klbwl-btn.klbwl-product-in-list {
    color: #F03E3E !important;
}

/*************************************************
* Safety net: a disabled, placeholder-only select2
* box should never show a "clear" (×) button — that
* only makes sense once a real value is selected.
* Root cause of one occurrence (the cascading
* make→model attribute-search widget) is fixed at
* the source (functions.php), but this covers any
* other disabled .theme-select on the site built
* the same way (e.g. the header attribute-search
* modal, which uses identical markup).
*************************************************/

.select2-container--disabled .select2-selection__clear {
    display: none !important;
}

/*************************************************
* "Find Your Part" attribute-search form (the
* Partdo Search Filter widget + the header modal —
* both render the same .service-search-form markup)
* Stock select2 default styling (28px box, thin
* grey border, no radius) never matched the rest of
* the theme's form controls — same flex-based
* rebuild used for the layered-nav filter widgets,
* so height changes can't fight select2's own
* line-height/absolute-arrow math.
*************************************************/

.service-search-form .select2-container--default .select2-selection--single {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: var(--theme-form-height);
    padding: 0 2rem 0 0.9375rem;
    /* !important: this selector already out-specifies select2's own
       library rule (3 classes vs. 2) and the theme's generic
       .select2 .select2-selection rule (also 2), so this shouldn't be
       needed on specificity grounds alone — kept as a defensive
       hardening after this exact border-color lost to one of those
       rules in testing, with no other explanation found. */
    border: 1px solid #e2e2e2 !important;
    border-radius: var(--theme-form-radius);
    -webkit-transition: border-color 0.15s ease;
    transition: border-color 0.15s ease;
}

.service-search-form .select2-container--default.select2-container--focus .select2-selection--single,
.service-search-form .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
}

.service-search-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.service-search-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.9375rem;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* Disabled (cascading model dropdown before a make is chosen) — same
   shape and radius, muted to read as "not yet available" rather than
   broken. */
.service-search-form .select2-container--disabled .select2-selection--single {
    background-color: #f4f4f4 !important;
    border-color: #e8e8e8 !important;
    cursor: not-allowed;
}

.service-search-form .select2-container--disabled .select2-selection__rendered {
    color: #adb5bd;
}

/* Row spacing is already handled by the theme's own generic
   .form-column { margin-bottom: 0.9375rem } in base.css — no extra
   rule needed here. select2's results dropdown is appended to <body>
   and already gets the same radius/border treatment from the existing
   .select2-container--default .select2-dropdown rule further up. */

/*************************************************
* Product box hover: clamp long short descriptions
* (partdo_product_type1/2 print the full short
* description in the hover overlay — long spec
* lists blow the card up)
*************************************************/

.product .product-footer .product-footer-details {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    max-height: 8em;
}

/*************************************************
* "Add to cart" buttons — brand orange everywhere
* (product grid cards, single product, quick view,
* upsells/cross-sells — all share these two
* WooCommerce classes). Deliberately overrides the
* generic .primary/--color-primary token (used by
* many unrelated buttons sitewide) with !important
* rather than chasing per-context selector
* specificity across every place these render.
*************************************************/

/* High-specificity selectors (not just !important): Elementor's global
   "kit" stylesheet scopes its own button/color rules under a numbered
   class like .elementor-kit-28895, which alone outranks a plain
   1-class !important rule regardless of load order (same root cause
   already found for the form-input background bug — see the input[]
   rule further down). Matching or exceeding that specificity here. */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce .products .product .add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    background-color: #F4931F !important;
    border-color: #F4931F !important;
}

.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce .products .product .add_to_cart_button:hover,
.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background-color: #d97e0e !important;
    border-color: #d97e0e !important;
}

/*************************************************
* Shop/category archive: breathing room at the
* bottom of the content area (product grid +
* sidebar), before the recently-viewed/footer
* section. Scoped by body class so it doesn't
* affect other Elementor-templated pages that
* reuse the same #primary/#main wrapper markup.
*************************************************/

body.post-type-archive-product #primary.content-area,
body.tax-product_cat #primary.content-area,
body.tax-product_tag #primary.content-area,
body.tax-product_brand #primary.content-area {
    padding-bottom: 120px;
}

@media screen and (max-width: 767px) {
    body.post-type-archive-product #primary.content-area,
    body.tax-product_cat #primary.content-area,
    body.tax-product_tag #primary.content-area,
    body.tax-product_brand #primary.content-area {
        padding-bottom: 50px;
    }
}

/*************************************************
* Sidebar filter widgets (layered nav dropdowns)
* Match select2 + submit button to theme form
* styles (--theme-form-height/radius, primary)
*************************************************/

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--multiple {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    min-height: var(--theme-form-height);
    padding: 0.3125rem 0.625rem;
    border: 1px solid #e2e2e2;
    border-radius: var(--theme-form-radius);
    -webkit-transition: border-color 0.15s ease;
    transition: border-color 0.15s ease;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default.select2-container--focus .select2-selection--multiple,
.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--color-primary);
}

/* Single-select attribute dropdowns (e.g. "Brendovi") — select2's default
   CSS assumes a fixed 28px box (absolute-positioned arrow, line-height-based
   centering), which breaks once the height/border above are applied. Rebuild
   as a flex row instead of fighting select2's pixel math. */
.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--single {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: var(--theme-form-height);
    padding: 0 2rem 0 0.625rem;
    border: 1px solid #e2e2e2;
    border-radius: var(--theme-form-radius);
    -webkit-transition: border-color 0.15s ease;
    transition: border-color 0.15s ease;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default.select2-container--focus .select2-selection--single,
.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary);
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.625rem;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.125rem 0.5rem;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-right: 0.375rem;
}

.widget .woocommerce-widget-layered-nav-dropdown .select2-container--default .select2-search--inline .select2-search__field {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

.widget .woocommerce-widget-layered-nav-dropdown__submit {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    height: var(--theme-form-height);
    background-color: var(--color-primary);
    border: 0;
    border-radius: var(--theme-form-radius);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

.widget .woocommerce-widget-layered-nav-dropdown__submit:hover {
    opacity: 0.9;
}

/* select2 results dropdown is appended to <body>, style globally */
.select2-container--default .select2-dropdown {
    border-color: #e2e2e2;
    border-radius: 0.5rem;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--color-primary);
}

/*************************************************
* Shop sidebar filter UX
* (accordion, checkbox lists, show-more, auto-apply
*  — behavior in js/filter-ux.js)
*************************************************/

/* Section separators */
.sidebar-inner .widget {
    margin-bottom: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid #ececec;
}

.sidebar-inner .widget:first-child {
    padding-top: 0;
}

/* Accordion titles (JS toggles .klb-acc-collapsed; gate on body class so
   titles look clickable only when the behavior is actually available) */
body.klb-filter-js .sidebar-inner .widget > .widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

body.klb-filter-js .sidebar-inner .widget > .widget-title::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    margin-right: 0.25rem;
    margin-top: -0.25rem;
    flex: 0 0 auto;
}

body.klb-filter-js .sidebar-inner .widget.klb-acc-collapsed > .widget-title {
    margin-bottom: 0;
}

body.klb-filter-js .sidebar-inner .widget.klb-acc-collapsed > .widget-title::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    margin-top: 0.125rem;
}

body.klb-filter-js .sidebar-inner .widget.klb-acc-collapsed > *:not(.widget-title) {
    display: none !important;
}

/* Product categories widget: rows with right-aligned counts
   (counts wrapped in span.count by filter-ux.js) */
.sidebar-inner .widget_product_categories ul.product-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-inner .widget_product_categories li.cat-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
}

.sidebar-inner .widget_product_categories li.cat-item > a {
    flex: 1 1 auto;
    color: var(--color-text-primary);
}

.sidebar-inner .widget_product_categories li.cat-item > a:hover {
    color: var(--color-primary);
}

.sidebar-inner .widget_product_categories li.cat-item > .count {
    margin-left: auto;
    padding-left: 0.5rem;
    color: #868e96;
    font-size: 0.75rem;
}

.sidebar-inner .widget_product_categories li.cat-item > ul.children {
    flex-basis: 100%;
    list-style: none;
    padding-left: 1rem;
}

/* Layered nav as checkbox list (widget display type: "List") */
.sidebar-inner ul.woocommerce-widget-layered-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item {
    display: flex;
    align-items: center;
    padding: 0.4375rem 0;
    font-size: 0.875rem;
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 auto;
    color: var(--color-text-primary);
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item a::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 1.125rem;
    border: 1px solid #cfcfcf;
    border-radius: 0.25rem;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item a:hover::before {
    border-color: var(--color-primary);
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item--chosen a::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5 4.7 9 10 3.5'/%3E%3C/svg%3E");
    background-size: 0.625rem;
}

.sidebar-inner .woocommerce-widget-layered-nav-list__item .count {
    margin-left: auto;
    padding-left: 0.5rem;
    color: #868e96;
    font-size: 0.75rem;
}

/* Show more toggle */
.sidebar-inner ul.woocommerce-widget-layered-nav-list:not(.klb-expanded) .klb-hidden-item {
    display: none;
}

.sidebar-inner .klb-show-more {
    background: none;
    border: 0;
    height: auto;
    padding: 0.5rem 0 0;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* Price slider in brand colors */
.sidebar-inner .price_slider .ui-slider-range {
    background-color: var(--color-primary);
}

.sidebar-inner .price_slider .ui-slider-handle {
    background-color: #fff;
    border: 2px solid var(--color-primary);
}

/* Price auto-applies on slider release (filter-ux.js), so its confirm
   button is redundant; dropdown widgets keep their stock "Prihvati". */
body.klb-filter-js .widget_price_filter .price_slider_amount .button {
    display: none;
}

/* Mobile filter drawer: its overlay scrollbar clips the right edge —
   give titles breathing room so the accordion chevron stays visible */
.mobile-filter .sidebar-inner .widget > .widget-title {
    padding-right: 0.875rem;
}

/*************************************************
* Single product: accordion tabs (Opis / Dodatne
* informacije / Recenzije) as bordered cards with
* readable titles and clear active state.
* Overrides partdo-core product-tab.css (which uses
* low-contrast #ADB5BD titles and hairline borders).
*************************************************/

article.klb-product-accordion-tab .accordion-item,
article.klb-product-accordion-tab .accordion-item + .accordion-item,
article.klb-product-accordion-tab .accordion-item:first-child,
article.klb-product-accordion-tab .accordion-item:last-child {
    border: 1px solid #e4e6e8;
    border-radius: 0.75rem;
    background-color: #fff;
    padding: 0 1.25rem;
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}

article.klb-product-accordion-tab .accordion-item + .accordion-item {
    margin-top: 0.75rem;
}

article.klb-product-accordion-tab .accordion-item:hover {
    border-color: #c9cdd1;
}

article.klb-product-accordion-tab .accordion-tab-title {
    cursor: pointer;
}

article.klb-product-accordion-tab .accordion-tab-title a {
    color: #212529;
    font-size: 0.9375rem;
    height: 3.25rem;
    line-height: 3.25rem;
}

article.klb-product-accordion-tab .accordion-tab-title:hover a {
    color: var(--color-primary);
}

article.klb-product-accordion-tab .accordion-tab-title.ui-accordion-header-active a {
    color: var(--color-primary);
}

article.klb-product-accordion-tab .accordion-item .accordion-tab-title:after {
    color: #868e96;
    font-size: 1rem;
    -webkit-transition: color 0.2s ease, -webkit-transform 0.25s ease;
    transition: color 0.2s ease, transform 0.25s ease;
}

article.klb-product-accordion-tab .accordion-item .accordion-tab-title:hover:after,
article.klb-product-accordion-tab .accordion-item .accordion-tab-title.ui-accordion-header-active:after {
    color: var(--color-primary);
}

article.klb-product-accordion-tab .woocommerce-Tabs-panel {
    padding: 1rem 0 1.25rem;
    border-top: 1px solid #eceef0;
}

/*************************************************
* Single product: horizontal tab bar (Opis / Dodatne
* informacije / Recenzije) — underline indicator on
* the active tab in brand blue, better contrast on
* inactive labels than base.css's washed-out
* --color-text-light, horizontal scroll on mobile so
* longer labels don't wrap. Active tab type is set via
* Customizer > Product Tab Type > Horizontal Tab, which
* is why the accordion rules above no longer render.
* Customizer also outputs its own dynamic inline rule for
* ul.wc-tabs li.active > a (shared with related/recently-
* viewed title color) — !important on color here to make
* sure it doesn't silently win, same gotcha as the
* Elementor kit fights elsewhere on this project.
*************************************************/

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2rem;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e4e6e8;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs::-webkit-scrollbar {
    display: none;
}

@media screen and (min-width: 992px) {
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs {
        gap: 2.75rem;
    }
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li {
    margin: 0;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
    position: relative;
    display: inline-block;
    padding: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280 !important;
    white-space: nowrap;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

@media screen and (min-width: 992px) {
    .woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a {
        font-size: 0.9375rem;
    }
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a:hover {
    color: var(--color-primary) !important;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a {
    color: var(--color-primary) !important;
}

.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background-color: var(--color-primary);
}

/*************************************************
* Header stacking: the theme hover-lifts a product card
* with `.products .product:hover.custom-hover { z-index: 11 }`
* (base.css), while the header's rows carry z-index 10
* (topbar) / 9 (main) / 8 (nav) and <header> itself is
* z-index:auto — so it never creates a stacking context to
* contain them. Result: a hovered card outranks the header
* and paints over the logo/search bar.
*
* Give the header its own context above card hover state.
* 50 is deliberately chosen to sit below every overlay,
* all of which are body-level siblings of the header, not
* descendants: .site-mask 999, .search-holder 1000,
* .site-drawer 1001, .cart-widget-side 100003, plus the
* FunnelKit/wishlist modals — those must still cover the
* header, and they still do.
*************************************************/
.site-header {
    position: relative;
    z-index: 50;
}

/*************************************************
* Search field focus state: brand blue, not red.
* base.css hardcodes Partdo's stock demo accent
* (#EF233C) as a literal here instead of using
* var(--color-primary), so switching the accent to
* GRT blue in the Customizer never reached it — the
* border, the focus ring and the magnifier icon all
* stayed red. Same literal is repeated for the
* FiboSearch / "Adv. Woo Search" input.
*************************************************/
.site-header .search-form-wrapper .search-form input:focus,
.site-header .search-form-wrapper .search-form input:active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
}

.site-header .search-form-wrapper .search-form input:focus + .btn,
.site-header .search-form-wrapper .search-form input:active + .btn {
    color: var(--color-primary) !important;
}

body .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus,
body .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/*************************************************
* Recently viewed products carousel
* (slick init in js/filter-ux.js; grid layout must
* yield to slick's own track once initialized)
*************************************************/

.recently-viewed .products.klb-rv-carousel.slick-initialized {
    display: block;
    position: relative;
}

/* the theme's .products > * grid sizing would shrink slick's wrappers
   once they become direct children — neutralize it */
.recently-viewed .products.klb-rv-carousel.slick-initialized > .slick-list {
    width: auto;
    max-width: none;
    flex: none;
    margin: 0 -0.625rem;
}

.recently-viewed .products.klb-rv-carousel.slick-initialized .slick-slide {
    margin: 0 0.625rem;
    height: auto;
}

.recently-viewed .products.klb-rv-carousel.slick-initialized .slick-slide .product {
    width: 100%;
}

.recently-viewed .products.klb-rv-carousel .slick-nav {
    position: absolute;
    top: 38%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #fff;
    border: 1px solid #e2e2e6;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #212529;
    cursor: pointer;
    z-index: 5;
}

.recently-viewed .products.klb-rv-carousel .slick-nav:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.recently-viewed .products.klb-rv-carousel .slick-prev {
    left: -0.75rem;
}

.recently-viewed .products.klb-rv-carousel .slick-next {
    right: -0.75rem;
}

.recently-viewed .products.klb-rv-carousel .slick-nav.slick-disabled {
    opacity: 0;
    pointer-events: none;
}

.recently-viewed .products.klb-rv-carousel .slick-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.recently-viewed .products.klb-rv-carousel .slick-dots li button {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #d0d4d8;
    border: 0;
    padding: 0;
    font-size: 0;
    cursor: pointer;
}

.recently-viewed .products.klb-rv-carousel .slick-dots li.slick-active button {
    background-color: var(--color-primary);
}

/*************************************************
* Product card price: theme uses display:flex with
* nowrap, so on narrow cards the sale price
* overflows into the neighboring card — let the
* two prices wrap and stack instead.
*************************************************/

.products .product .price {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 0.125rem;
}

/*************************************************
* Form fields: Elementor's kit binds input
* background to the secondary global color (now
* black), turning inputs dark site-wide. Force the
* standard light form look everywhere.
* (Root fix: Elementor > Site Settings > Theme
* Style > Form Fields > background = white.)
*************************************************/

body input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
body textarea,
body select {
    background-color: #fff;
    color: #212529;
}

/* Single product accordion: breathing room above the section */
article.klb-product-accordion-tab .product-accordion-tab {
    margin-top: 1.5rem;
}

/*************************************************
* Product Tab Carousel: selected category tab in
* brand blue gradient instead of the stock red
* (--color-gradient-1, left untouched because the
* deals countdown uses it too)
*************************************************/

.klbth-module-header .klbt-module-tab-links.style-2 .tab-item.active .tab-link {
    background: linear-gradient(45deg, #243C96 0%, #3f5ec9 100%);
}

/*************************************************
* Wishlist page: bulk action buttons
*************************************************/

.grt-wl-bulk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.grt-wl-bulk-actions .btn {
    height: var(--theme-form-height);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    border: 0;
    border-radius: var(--theme-form-radius);
    cursor: pointer;
    -webkit-transition: background-color 0.15s ease, box-shadow 0.15s ease;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.grt-wl-bulk-actions .grt-wl-add-all {
    background-color: #F4931E;
    box-shadow: 0 2px 8px rgba(244, 147, 30, 0.35);
}

.grt-wl-bulk-actions .grt-wl-add-all:hover {
    background-color: #d97e0e;
    color: #fff;
}

.grt-wl-bulk-actions .grt-wl-clear-all {
    background-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.grt-wl-bulk-actions .grt-wl-clear-all:hover {
    background-color: #b91c1c;
    color: #fff;
}

@media screen and (max-width: 576px) {
    .grt-wl-bulk-actions {
        justify-content: stretch;
    }

    .grt-wl-bulk-actions .btn {
        flex: 1 1 auto;
    }
}
/*************************************************
* Moved here from Customizer > Additional CSS so all
* child-theme styling lives in one file. Verified on
* staging that every rule resolves identically from
* this earlier cascade position (Additional CSS prints
* after the child stylesheet, so this was checked
* rather than assumed).
*
* Two deliberate changes from the original:
*  - .product-footer-inner background moved from 64rem
*    to 62rem, see note on that block below.
*  - dropped `@media (max-width:64rem){.header-mobile{
*    z-index:20 !important}}` — that was a mobile-only
*    patch for the hovered-card-over-header bug, now
*    superseded by the .site-header stacking context
*    above, which fixes it at every width.
*************************************************/

.menu-image.menu-image-title-after {
    width: 34px !important;
}

.seo-hidden {
    height: 0;
    overflow: hidden;
}

.drawer-heading,
nav.klbth-menu-wrapper.vertical.drawer-primary {
    display: none;
}

/* Hover reveal uses the flat white .product-footer-inner
   panel below instead of the theme's shadowed fade card. */
.product-content-fade {
    display: none !important;
}

/* Elementor's global `a { color: var(--e-global-color-primary) }`
   would otherwise tint every product title. */
.product-title a {
    color: #212121 !important;
}

.mobile-menu .menu-item {
    text-align: center;
}

.page-content {
    overflow-x: hidden;
}

.mobile-bottom-menu {
    padding: 10px;
}

.klbth-banner .entry-heading {
    padding-bottom: 10px;
    padding-top: 20px;
}

button.btn.link {
    padding: 10px;
    border-radius: 12px;
}

/* 62rem (992px), NOT 64rem: base.css switches .product-footer
   to position:absolute at 992px, and .product-content-fade is
   disabled above — so at 992-1023px the hover panel was floating
   with no backdrop at all, text landing straight on the products
   behind it. Keep this breakpoint in step with base.css. */
@media (min-width: 62rem) {
    .product-footer-inner {
        background: #fff;
        padding-bottom: 10px;
        border-radius: 0 0 10px 10px;
    }
}

@media (min-width: 64rem) {
    .entry-inner.w-80,
    .entry-inner.w-70 {
        padding-bottom: 20px;
    }
}

/*************************************************
* Drawer (off-canvas sidebar) link color: base.css sets
* .site-drawer a { color: currentColor } — a deliberate
* inherit-from-ancestor escape hatch. On Elementor-built
* pages (home, /prodavnica/) that gets overridden to brand
* blue by .elementor-kit-28895 a, because Elementor's kit
* stylesheet is only enqueued on pages actually built with
* Elementor. On every other page type (category archives,
* account pages, etc.) that stylesheet never loads, so
* currentColor falls back to the theme's default text
* color instead — same root cause as the topbar link bug.
* Desired look is the black/normal state — pin it to the
* theme's own text color everywhere so home/shop stop
* being the odd ones out, instead of spreading blue.
*************************************************/
.site-drawer a {
    color: var(--color-text-primary) !important;
}

/* Same Elementor-kit dependency, same fix, for the topbar
   utility links (O nama, Moj nalog, phone, email) — base.css
   gives .site-header a { color: inherit } as its escape hatch,
   which only gets overridden to blue on Elementor-built pages. */
.header-topbar a {
    color: var(--color-text-primary) !important;
}

/* The drawer copyright line's link (e.g. a future "Developed by"
   credit) isn't covered by the theme's own Customizer color
   settings — only the surrounding .site-copyright wrapper is.
   Left at base.css's default it would render KLBTheme's stock
   demo red (#EF233C) with an underline. More specific than the
   blanket .site-drawer a rule above, so it wins for this one link
   without affecting the rest of the drawer. */
.site-drawer .site-copyright a {
    color: var(--color-primary) !important;
}

/* .drawer-heading (hidden above) used to create the gap
   before "Kontaktiraj nas" via `.klbth-menu-wrapper +
   .drawer-heading { margin-top: 1.875rem }` in base.css —
   hiding it collapsed that spacing along with it. */
.site-drawer .drawer-contacts {
    margin-top: 1.875rem;
}

/* Single product page: the free-shipping badge (Code Snippet,
   hooked to woocommerce_after_add_to_cart_form) has no margin
   of its own, so it sits flush against the wishlist prompt right
   below it — 2px gap vs. 20-30px between every other row in this
   info stack (wishlist -> assistant -> iconboxes). Scoped to the
   single-product context only; the badge also renders on shop-loop
   cards with different, already-correct spacing. */
.single-product-wrapper .product-detail .grt-free-shipping-badge {
    margin-bottom: 1.25rem;
}

/*************************************************
* Logo oversized (rendering at its native 488x208
* file size instead of a header-appropriate height).
* Root cause is IN THE PARENT THEME: base.css sets
* .site-header .header-main .site-brand img { height: 40px }
* but the theme's own root style.css sets the exact
* same selector to { height: auto } — identical
* selectors, so it's a pure source-order tiebreak, and
* style.css loads after base.css and wins. Same conflict
* exists for .header-mobile and .site-drawer too. Restate
* the intended heights here so the child theme (loaded
* last) settles it for good, with explicit width:auto so
* it scales proportionally rather than relying on the
* browser's fallback to the <img>'s width/height attributes.
*************************************************/
.site-header .header-main .site-brand img {
    height: 40px;
    width: auto;
}

.site-header .header-mobile .site-brand img {
    height: 36px;
    width: auto;
}

.site-drawer .site-brand img {
    height: 36px;
    width: auto;
}