.woocommerce-pagination {
    display: flex;
    width:100%;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-wrap: wrap;
}

.page-numbers {
    border: 2px solid #003366;
    padding: 5px 13px;
    border-radius: 4px;
    margin:10px 0px
}

.woocommerce-pagination .page-numbers {
    margin: 6px;
}

@media (max-width: 767px) {

    .woocommerce-pagination {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }


    .woocommerce-pagination .prev,
    .woocommerce-pagination .next {
        width: 100%;
        margin: 5px 5px;
        text-align: center;
    }
}

.woocommerce-pagination .page-numbers:hover {
    border: 2px solid #003366 !important;
    padding: 5px 13px;
    border-radius: 4px;
}

.woocommerce-pagination .page-numbers.current {
    border: 2px solid #003366;
    padding: 5px 13px;
    border-radius: 4px;
    background-color: #003366;
    color:white
}

/* URL Resolution Loading State */
.acf-related-product-thumb.resolving-url {
    opacity: 0.6;
    cursor: wait;
    position: relative;
}

.acf-related-product-thumb.resolving-url::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ccc;
    border-radius: 50%;
    border-top-color: #003366;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.filter-group label {
	 
}


.active-filters {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-top: 1px solid #eaeaea;
    padding-top: 10px;
}

.clear-filters {
    background-color: #212121; 
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 90px;
    cursor: pointer;
    margin-right: 10px;
    text-align: center;
}

.clear-filters:hover {
    background-color: #003366; 
}

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.active-filter-tag {
    background-color: #f8f8f8;
    border:1px solid #eaeaea;
    border-radius: 90px;
    padding: 5px 10px;
    margin: 5px 5px 5px 0px;
    display: flex;
    align-items: center;
}

.active-filter-tag .remove-filter {
    margin-left: 5px;
    cursor: pointer;
    color: #c2185b;
    font-weight: 400;
}

/* Sticky context for the filter bar, opened in the theme's archive-product.php.
   It must never gain `overflow` or a `transform`: either one silently switches off
   position: sticky for the bar inside it. */
.leon-shop-sticky-region {
    position: relative;
}

.leon-shop {
    /* Sticky sits here rather than on .filter-scroll-wrapper inside it: a sticky
       element only travels within its parent's box, and .leon-shop is exactly as tall
       as that wrapper, so the wrapper stuck for 0px and scrolled away.
       The parent is .leon-shop-sticky-region, which spans the filter and the product
       grid — so the bar pins when it meets the header, holds across the products, and
       releases at the end of them. That boundary is the region's job, not a scroll
       handler's, which is why nothing here has to know where the grid begins or wait
       for it to arrive over AJAX.
       --leon-header-height is published by the theme's smart-sticky-header.js; the
       fallback matches the rendered header (50px top bar + 77px header-main). */
    position: sticky;
    top: var(--leon-header-height, 127px);
    z-index: 99;
    background-color: #fff;
    padding: 0px;
    margin-bottom: 0px;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

/* Leaves with the header and returns with it. translateY(-100%) clears the bar's own
   height; the added offset carries it past the gap the header left behind.

   Gated on .leon-filter-stuck, and that gate is the whole point: while the bar is
   still sitting in normal flow further down the page, hiding the header must not
   touch it. Without the gate the transform yanks the bar out of its slot and drops
   it over the subcategory tiles, leaving a hole where it belonged. */
body.leon-header-hidden.leon-filter-stuck .leon-shop {
    transform: translateY(calc(-100% - var(--leon-header-height, 127px)));
}

@media (prefers-reduced-motion: reduce) {
    .leon-shop {
        transition: none;
    }
}

@media (max-width: 767px) {
    .clear-filters {
        margin-bottom:10px;
    }
    .active-filters { 
        display:inline-block;
        width:100%;
    }
}

.filter-scroll-wrapper {
    /* Horizontal scrolling for the chips only. Stickiness moved up to .leon-shop. */
    overflow-x: auto;
    background-color: #fff;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.filter-scroll-wrapper::-webkit-scrollbar {
    display: none;
}



.filter-container {
    display: flex;
    flex-wrap: nowrap;

    white-space: nowrap;
    gap: 10px;
    background-color: #fff;
    border-bottom: none;
    margin:20px 0px;
}


.filter-group {
    display: inline-block;
    position: relative;
    border: 1px solid #eee;
    border-radius: 90px;
    background-color: #f8f8f8;
    cursor: pointer;
    order: 0;
    outline: none;
}

.filter-group:focus {
    outline: none;
}

.sort-by-group {
    order: 1; 
}


@media (min-width: 768px) { 
    .sort-by-group {
        margin-left: auto;
    }
}

.filter-title {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

@media (max-width: 767px) {
    .sort-by-group {
        order: -3 !important;
    }
    .sale-filter-group {
        order: -2 !important;
    }
}

.filter-title::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('../images/down.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.sale-filter-group {
    order: -2;
    border-color: #ac1311;
}

.sale-filter-group .filter-title {
    color: #ac1311;
    width: fit-content;
    padding: 8px 24px 8px 16px;
    min-width: 130px;
}

.sale-filter-group.active {
    background-color: #ac1311;
    border-color: #ac1311;
}

.sale-filter-group.active .filter-title {
    color: white !important;
}

.sale-filter-group.active .filter-title * {
    color: white !important;
}

.sale-filter-group.active .filter-title .filter-count {
    color: white !important;
}

.sale-filter-group.active .filter-title::after {
    filter: brightness(0) invert(1);
}

.sale-filter-group .filter-title::after {
    display: none;
}

/* Tag Filter Groups */
.tag-filter-group {
    order: -2;
    outline: none;
}

.tag-filter-group:focus {
    outline: none;
    border: none;
}

.tag-filter-group .filter-title::after {
    display: none;
}

.tag-filter-group .filter-title span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Akcija Filter */
.akcija-filter {
    border-color: #ac1311;
}

.akcija-filter .filter-title {
    color: #ac1311;
    width: fit-content;
    padding: 8px 24px 8px 16px;
    min-width: 130px;
}

.akcija-filter:hover {
    background-color: #ac1311 !important;
    border-color: #ac1311 !important;
}

.akcija-filter:hover .filter-title {
    color: white !important;
}

.akcija-filter:hover .filter-title * {
    color: white !important;
}

.akcija-filter:hover .filter-title .filter-count {
    color: white !important;
}

.akcija-filter:hover .filter-icon {
    /* Keep original icon color on hover */
}

.akcija-filter.active {
    background-color: #ac1311 !important;
    border-color: #ac1311 !important;
}

.akcija-filter.active .filter-title {
    color: white !important;
}

.akcija-filter.active .filter-title * {
    color: white !important;
}

.akcija-filter.active .filter-title .filter-count {
    color: white !important;
}

.akcija-filter.active .filter-icon {
    /* Keep original icon color when active */
}

/* Outlet Filter */
.outlet-filter {
    border-color: #cb650b;
}

.outlet-filter .filter-title {
    color: #cb650b;
    width: fit-content;
    padding: 8px 24px 8px 16px;
    min-width: 130px;
}

.outlet-filter:hover {
    background-color: #cb650b !important;
    border-color: #cb650b !important;
}

.outlet-filter:hover .filter-title {
    color: white !important;
}

.outlet-filter:hover .filter-title * {
    color: white !important;
}

.outlet-filter:hover .filter-title .filter-count {
    color: white !important;
}

.outlet-filter:hover .filter-icon {
    /* Keep original icon color on hover */
}

.outlet-filter.active {
    background-color: #cb650b !important;
    border-color: #cb650b !important;
}

.outlet-filter.active .filter-title {
    color: white !important;
}

.outlet-filter.active .filter-title * {
    color: white !important;
}

.outlet-filter.active .filter-title .filter-count {
    color: white !important;
}

.outlet-filter.active .filter-icon {
    /* Keep original icon color when active */
}

/* Novo Filter */
.novo-filter {
    border-color: #0053a5;
}

.novo-filter .filter-title {
    color: #0053a5;
    width: fit-content;
    padding: 8px 24px 8px 16px;
    min-width: 130px;
}

.novo-filter:hover {
    background-color: #0053a5 !important;
    border-color: #0053a5 !important;
}

.novo-filter:hover .filter-title {
    color: white !important;
}

.novo-filter:hover .filter-title * {
    color: white !important;
}

.novo-filter:hover .filter-title .filter-count {
    color: white !important;
}

.novo-filter:hover .filter-icon {
    /* Keep original icon color on hover */
}

.novo-filter.active {
    background-color: #0053a5 !important;
    border-color: #0053a5 !important;
}

.novo-filter.active .filter-title {
    color: white !important;
}

.novo-filter.active .filter-title * {
    color: white !important;
}

.novo-filter.active .filter-title .filter-count {
    color: white !important;
}

.novo-filter.active .filter-icon {
    /* Keep original icon color when active */
}

.filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
}

.filter-link {
    outline: none;
    text-decoration: none;
    border: none;
}

.filter-link:focus {
    outline: none;
    border: none;
}

.filter-link:hover {
    outline: none;
    border: none;
}

/* Remove all outlines from filter elements but preserve on context actions */
.filter-title * {
    outline: none !important;
}

.filter-title *:focus {
    outline: none !important;
}

.filter-title *:hover {
    outline: none !important;
}

/* Ensure tag filters maintain proper state on all interactions */
.tag-filter-group:focus-within {
    outline: none;
}

.tag-filter-group:active {
    transform: none !important;
    outline: none !important;
}

/* Prevent style loss on right-click and context menu */
.tag-filter-group {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.tag-filter-group .filter-title {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* White color on hover for active filters */
.tag-filter-group.active .filter-title *:hover {
    color: white !important;
}

.sale-filter-group.active .filter-title *:hover {
    color: white !important;
}

/* Disabled state for tag filters with zero count */
.tag-filter-group.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tag-filter-group.disabled .filter-title {
    cursor: not-allowed;
}

.tag-filter-group.disabled .filter-link {
    pointer-events: none;
    cursor: not-allowed;
}
 
.filter-title.active {
 border-radius:90px;
 background:#eaeaea;

}

.filter-title.active::after {
    background-image: url('../images/up.svg'); 
}

.filter-content {
    display: none; 
    position: absolute; 
    left: 0;
    top: calc(100% + 5px); 
    background-color: #fff; 
    border: 1px solid #dfdfdf; 
    border-radius: 12px; 
    padding: 2rem; 
    z-index: 100; 
    min-width: 300px; 
    box-shadow: 0 4px 16px #0000001a; 
    white-space: normal; 
    max-height: 400px; 
    overflow-y: auto; 
    overflow-x: hidden; 
}

.filter-title.active + .filter-content {
    display: block; 
}

.filter-count {
    font-size: 0.9em;
    color: #777;
    margin-left: 4px;
    white-space: nowrap;
}


.filter-content div { 
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem; 
}


.filter-content input[type="checkbox"],
.filter-content input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}


.filter-content input[type="checkbox"] + label,
.filter-content input[type="radio"] + label {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
    padding-left: 2.3rem; 
    line-height: 1.5rem;
    min-height: 1.5rem;
}


.filter-content input[type="checkbox"] + label::before,
.filter-content input[type="radio"] + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #929292;
    border-radius: 4px; 
    background-color: #fff;
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s;
}


.filter-content input[type="checkbox"]:checked + label::before,
.filter-content input[type="radio"]:checked + label::before {
    background-color: #233142;
    border-color: #233142;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M12.78 4.28a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06L4.5 11.19l7.22-7.22a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}


.filter-content input[type="checkbox"]:focus + label::before,
.filter-content input[type="radio"]:focus + label::before {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}


.filter-content label .filter-count {
    margin-left: auto; 
    padding-left: 10px;
}
.filter-content label a { 
    display: flex;
    align-items: center;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}
.filter-content label a .filter-count {
     margin-left: auto;
     padding-left: 10px;
}



.scroll-arrow {
    position: absolute;
    top: 55%;
    transform: translateY(-65%);
    z-index: 15;
    
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: #555;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    appearance: none; 
    -webkit-appearance: none;
    text-decoration: none !important; 
    font-family: sans-serif; 
    box-sizing: border-box; 
}
.scroll-arrow:hover {
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    text-decoration: none !important;
}
.scroll-arrow:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}
.scroll-arrow-left {
    left: 5px;
}
.scroll-arrow-right {
    right: 5px;
}



@media (max-width: 1024px) {
    .filter-group {
        border: 1px solid #eee; 
        background-color: #f8f8f8; 
    }
    .filter-title.active {
        background-color: #eee; 
        color: #333; 
    }
     .filter-title.active::after {
         
     }

    .filter-content {
        
        min-width: 250px; 
        padding: 1.5rem; 
    }
}


@media (max-width: 767px) {
    .filter-content-moved {
        min-width: 90vw; 
        max-width: 95vw; 
        left: 5vw !important; 
        right: 5vw;
        width: 90vw; 
        box-sizing: border-box;
    }

    .dynamic-h1 {
        font-size:24px;
    }
}

.dynamic-h1 {
    color: var(--e-global-color-primary);
    font-size: 28px;
    line-height: 39.2px;
    letter-spacing: 5.04px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0px;
}

.acf-product-group-display {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.acf-product-group-display.collapsed {
    flex-wrap: nowrap;
}

.acf-product-group-display.acf-slider-enabled {
    display: block;
    flex-wrap: nowrap;
    position: relative;
    padding: 0 4px 0 0;
    overflow: hidden;
}

.acf-product-group-display.acf-slider-enabled .acf-swatch-slider {
    width: 100%;
    overflow: visible;
    padding-right: 48px;
}

.acf-product-group-display.acf-slider-enabled::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 80%);
    z-index: 2;
}

.acf-product-group-display.acf-slider-enabled .swiper-wrapper {
    align-items: center;
}

.acf-product-group-display.acf-slider-enabled .swiper-slide {
    width: auto;
    flex: 0 0 auto;
    margin-right: 8px;
}
.acf-product-group-display.acf-slider-enabled .swiper-slide:last-child {
    margin-right: 48px;
}

.acf-product-group-display.acf-slider-enabled .acf-related-toggle {
    display: none;
}

@media (max-width: 600px) {
    .acf-product-group-display.acf-slider-enabled {
        padding-right: 10px;
    }
    .acf-product-group-display.acf-slider-enabled .acf-swatch-slider {
        padding-right: 36px;
    }
    .acf-product-group-display.acf-slider-enabled .swiper-slide {
        margin-right: 6px;
    }
    .acf-product-group-display.acf-slider-enabled .swiper-slide:last-child {
        margin-right: 36px;
    }
    .acf-product-group-display.acf-slider-enabled::after {
        width: 32px;
    }
}

div.acf-product-group-display .acf-related-product-thumb { 
    display: block; 
    width: 55px;    
    height: 45px;   
    min-height: 0 !important;  
    line-height: 0; 
    padding:2px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

/* Collapse behavior: hide thumbnails beyond the 4th when collapsed */
.acf-product-group-display.collapsed span.acf-related-product-thumb:nth-of-type(n+5) {
    display: none;
}

/* Toggle button styling */
.acf-product-group-display .acf-related-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    color: #333;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.acf-product-group-display .acf-related-toggle:hover {
    background: #fff;
    border-color: #d5d5d5;
}

div.acf-product-group-display .acf-related-product-thumb img { 
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: cover !important; 
    border-radius: 2px !important; 
    display: block; 
    border: none !important;
}


.product-image-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Main image - must be visible immediately, no transitions */
.product-image-wrapper .main-product-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1 !important; /* Force visibility */
    visibility: visible !important;
}

/* Hover image - positioned on top, hidden until hover */
.product-image-wrapper .hover-product-image {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    backface-visibility: hidden;
}

.product-image-wrapper:hover .hover-product-image {
    opacity: 1;
}





.woocommerce ul.products li.product .add_to_cart_button {
    display: none !important; 
}


div.acf-product-group-display .acf-related-product-thumb:hover,
div.acf-product-group-display .acf-related-product-thumb:focus {
  border-color: #212121 !important; 
}

body.filter-open {
    overflow: hidden;
}

/* Loading overlay for filtering */
#filter-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

#filter-loading-overlay .spinner-wrapper {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CSS fallback spinner (in case SVG fails to load) */
#filter-loading-overlay .css-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: #233142;
    border-radius: 50%;
    animation: cssspin 0.9s linear infinite;
}

@keyframes cssspin {
    to { transform: rotate(360deg); }
}

/* Admin Styles for SEO Rules Page */
.leon-shop-admin .page-title-action {
    background-color: #2271b1;
    border-color: #2271b1;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    line-height: 2.15384615;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.leon-shop-admin .page-title-action:hover {
    background-color: #135e96;
    border-color: #135e96;
    color: #fff;
}

.leon-shop-admin .wp-header-end {
    margin: 20px 0;
}

.leon-shop-admin .notice {
    margin: 20px 0;
}

.leon-shop-admin .form-table th {
    padding: 15px 10px;
    width: 200px;
    vertical-align: top;
}

.leon-shop-admin .form-table td {
    padding: 15px 10px;
}

.leon-shop-admin .form-table hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

.leon-shop-admin .form-table h3 {
    margin: 0 0 10px 0;
    color: #23282d;
    font-size: 1.1em;
}

.leon-shop-admin .form-table .description {
    color: #666;
    font-style: italic;
    margin: 5px 0 0 0;
}

.leon-shop-admin .form-table .spinner {
    margin: 0 5px 0 0;
}

.leon-shop-admin .regular-text {
    width: 25em;
}

.leon-shop-admin .large-text {
    width: 100%;
    max-width: 500px;
}

.leon-shop-admin .small-text {
    width: 50px;
}

/* List table improvements */
.leon-shop-admin .wp-list-table {
    margin-top: 20px;
}

.leon-shop-admin .tablenav {
    margin: 10px 0;
}

/* Better spacing for the SEO rules page */
.leon-shop-admin .wrap h1 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.leon-shop-admin .wrap h2 {
    margin: 30px 0 15px 0;
}

.leon-shop-admin .nav-tab-wrapper {
    margin-bottom: 20px;
}

/* Improve notice styling */
.leon-shop-admin .notice.notice-info {
    border-left-color: #72aee6;
}

.leon-shop-admin .notice.notice-info ul {
    margin: 10px 0;
    padding-left: 20px;
}

.leon-shop-admin .notice.notice-info li {
    margin-bottom: 5px;
}