/* ============================================================
   CATEGORY.CSS — Masazeri Child Theme
   Scope: shop page, product_category, product_tag archives
   Covers: page header, filter sidebar, product grid,
           sorting toolbar, pagination
   ============================================================ */

/* ============================================================
   ARCHIVE PAGE HEADER / BREADCRUMB — actual live markup
   (.maz-archive-header below targets an aspirational template
   that was never built; these target what the page really renders)
   ============================================================ */
.woocommerce-breadcrumb {
    /* style.css's .woocommerce .woocommerce-breadcrumb (2 classes) beats this
       (1 class) on margin-bottom specifically — !important forces the win. */
    margin: 20px 0 !important;
}

.woocommerce-products-header {
    /* The ".maz-shop-layout" block further below (.woocommerce
       .woocommerce-products-header, 2 classes) beats this on padding —
       !important forces the win regardless of specificity/source order. */
    padding: 20px 0 !important;
}

.woocommerce-result-count {
    display: none;
}

.woocommerce-notices-wrapper {
    display: none;
}

/* ============================================================
   FULL-WIDTH CONTENT — no reserved sidebar column
   Same pattern as product.css's single-product sidebar removal:
   the woo sidebar only ever holds the (usually empty) "recently
   viewed" widget, so it isn't worth a permanent 25% column.
   ============================================================ */
.woocommerce-shop aside#sidebar,
.tax-product_cat aside#sidebar,
.tax-product_tag aside#sidebar {
    display: none !important;
}

/* Desktop only: put the "Shop" title and the sort dropdown on the same row,
   bottom-aligned, instead of stacked. Real markup is a flat list of siblings
   inside .futurio-woo-content (breadcrumb, products-header, notices-wrapper,
   result-count, ordering form, ul.products, pagination) — flex-wrap + forcing
   every OTHER sibling to flex-basis:100% keeps just header+ordering on one line. */
@media (min-width: 769px) {
    .woocommerce-shop .futurio-woo-content.single-content,
    .tax-product_cat .futurio-woo-content.single-content,
    .tax-product_tag .futurio-woo-content.single-content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .woocommerce-shop .woocommerce-breadcrumb,
    .tax-product_cat .woocommerce-breadcrumb,
    .tax-product_tag .woocommerce-breadcrumb,
    .woocommerce-shop ul.products,
    .tax-product_cat ul.products,
    .tax-product_tag ul.products,
    .woocommerce-shop .woocommerce-pagination,
    .tax-product_cat .woocommerce-pagination,
    .tax-product_tag .woocommerce-pagination {
        flex-basis: 100%;
    }

    .woocommerce-shop .woocommerce-products-header,
    .tax-product_cat .woocommerce-products-header,
    .tax-product_tag .woocommerce-products-header {
        flex: 1;
        margin-bottom: 0;
    }

    .woocommerce-shop .woocommerce-ordering,
    .tax-product_cat .woocommerce-ordering,
    .tax-product_tag .woocommerce-ordering {
        flex: 0 0 auto;
        margin-left: auto;
        margin-bottom: 0;
        padding-bottom: 20px;
    }
}

/* Sale badge — inset within the card instead of hanging over its edge
   (WooCommerce core ul.products li.product .onsale sets top:0;right:0
   with a -0.5em margin designed for a flush corner ribbon look) */
.woocommerce ul.products li.product .onsale {
    top: 10px;
    right: 10px;
}

/* Wishlist — icon-only, floated top-left over the product image
   (mirrors the .onsale badge's top-right inset). li.product already has
   position:relative from the card rule above, so this positions relative
   to the card itself. */
.woocommerce ul.products li.product .tinv-wraper.tinvwl-loop-button-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0 24px 10px;
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist-text {
    font-size: 0;
}

/* Heart icon size — plugin default is much smaller; overriding the
   ti-woocommerce-wishlist plugin's own CSS (not editing its file, since
   that gets wiped on plugin update) */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:before {
    font-size: 30px !important;
}

/* Plugin default has margin-top:1em on the button itself, which nudged the
   icon down out of alignment now that the wrapper is absolutely positioned
   at top:10px. */
.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
    margin-top: 0;
}

/* ============================================================
   ARCHIVE PAGE HEADER / BREADCRUMB AREA
   ============================================================ */
.maz-archive-header {
    background-color: var(--maz-beige);
    padding: var(--maz-space-lg) var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
}

.maz-archive-header__inner {
    max-width: var(--maz-container);
    margin: 0 auto;
}

.maz-archive-header__breadcrumb {
    font-size: var(--maz-font-size-sm);
    color: var(--maz-gray-400);
    margin-bottom: var(--maz-space-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.maz-archive-header__breadcrumb a {
    color: var(--maz-gray-400);
    text-decoration: none;
    transition: color var(--maz-transition);
}

.maz-archive-header__breadcrumb a:hover {
    color: var(--maz-orange);
}

.maz-archive-header__breadcrumb span {
    color: var(--maz-gray-300);
}

.maz-archive-header__title {
    font-size: var(--maz-font-size-3xl);
    font-weight: 800;
    color: var(--maz-dark);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.maz-archive-header__count {
    font-size: var(--maz-font-size-sm);
    color: var(--maz-gray-400);
}

/* ============================================================
   SHOP LAYOUT — sidebar + main content
   ============================================================ */
.maz-shop-layout {
    display: flex;
    gap: var(--maz-space-lg);
    max-width: var(--maz-container);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
    align-items: flex-start;
}

/* WooCommerce archive wrapper override */
.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce {
    max-width: var(--maz-container);
    margin: 0 auto;
    padding: var(--maz-space-xl) var(--maz-space-md);
}

/* ============================================================
   FILTER SIDEBAR
   ============================================================ */
.maz-filter-sidebar,
.woocommerce-sidebar,
.widget-area {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--maz-space-md);
    position: sticky;
    top: 100px;
}

.maz-filter-widget,
.widget {
    background-color: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-lg);
    overflow: hidden;
}

.maz-filter-widget__title,
.widget-title {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 700;
    color: var(--maz-dark);
    padding: var(--maz-space-md);
    border-bottom: 1px solid var(--maz-border);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.maz-filter-widget__body,
.widget ul {
    padding: var(--maz-space-md);
    list-style: none;
    margin: 0;
}

/* Category filter links */
.woocommerce-widget-layered-nav-list__item a,
.product-categories li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
    text-decoration: none;
    padding: 6px 0;
    transition: color var(--maz-transition);
    border-bottom: 1px solid var(--maz-border);
}

.woocommerce-widget-layered-nav-list__item:last-child a,
.product-categories li:last-child a {
    border-bottom: none;
}

.woocommerce-widget-layered-nav-list__item a:hover,
.product-categories li a:hover,
.woocommerce-widget-layered-nav-list__item--chosen a {
    color: var(--maz-orange);
}

/* Count badge in filter */
.woocommerce-widget-layered-nav-list__item a .count,
.product-categories li a .count {
    background-color: var(--maz-beige);
    color: var(--maz-gray-500);
    font-size: var(--maz-font-size-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--maz-radius-pill);
    transition: all var(--maz-transition);
}

.woocommerce-widget-layered-nav-list__item a:hover .count {
    background-color: var(--maz-orange-light);
    color: var(--maz-orange);
}

/* Price range filter */
.price_slider_wrapper {
    padding: 0;
}

.price_slider {
    margin-bottom: var(--maz-space-sm);
}

/* jQuery UI slider overrides */
.ui-slider-horizontal {
    height: 4px;
    background-color: var(--maz-border);
    border-radius: var(--maz-radius-pill);
    border: none;
}

.ui-slider-range {
    background-color: var(--maz-orange);
}

.ui-slider-handle {
    width: 18px !important;
    height: 18px !important;
    top: -7px !important;
    background-color: var(--maz-white) !important;
    border: 2px solid var(--maz-orange) !important;
    border-radius: 50% !important;
    box-shadow: var(--maz-shadow-sm);
    cursor: pointer;
}

.price_slider_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maz-space-sm);
    margin-top: var(--maz-space-sm);
}

.price_slider_amount input[type="text"] {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-charcoal);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    padding: 6px 10px;
    width: 80px;
    text-align: center;
    background: transparent;
}

.price_slider_amount button {
    background-color: var(--maz-orange);
    color: var(--maz-white);
    border: none;
    border-radius: 5px !important;
    padding: 8px 20px;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--maz-transition);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.price_slider_amount button:hover {
    background-color: var(--maz-orange-hover);
}

/* ============================================================
   MAIN PRODUCT AREA
   ============================================================ */
.maz-shop-main,
.woocommerce-products-wrapper {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   TOOLBAR — sorting + results count
   ============================================================ */
.maz-shop-toolbar,
.woocommerce-ordering,
.woocommerce-result-count {
    margin-bottom: var(--maz-space-md);
}

.maz-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--maz-space-sm);
    flex-wrap: wrap;
}

.woocommerce-result-count {
    font-size: var(--maz-font-size-sm);
    color: var(--maz-gray-400);
    margin: 0;
}

.woocommerce-ordering select,
.maz-sort-select {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    color: var(--maz-charcoal);
    background-color: var(--maz-white);
    border: 1px solid var(--maz-border);
    border-radius: var(--maz-radius-md);
    padding: 8px 36px 8px 14px;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color var(--maz-transition);
}

.woocommerce-ordering select:focus,
.maz-sort-select:focus {
    border-color: var(--maz-orange);
}

/* Active filters display */
.woocommerce-active-filters,
.maz-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--maz-space-md);
}

.maz-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--maz-orange-light);
    color: var(--maz-orange);
    border: 1px solid var(--maz-orange-border);
    font-size: var(--maz-font-size-xs);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--maz-radius-pill);
}

.maz-active-filter-tag a {
    color: var(--maz-orange);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.woocommerce ul.products,
.maz-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--maz-space-md) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* WooCommerce core (woocommerce-layout.css) adds ::before/::after clearfix boxes
   (content:" ";display:table) for its float-based layout. Once the parent above
   becomes a grid, those pseudo-elements are generated boxes too and get counted
   as real grid items — a phantom first cell that pushes every product over by
   one column/row. Must be suppressed for the grid to place items correctly. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

/* Product card in archive */
.woocommerce ul.products li.product {
    background: var(--maz-white);
    border-radius: var(--maz-radius-lg);
    overflow: hidden;
    border: 1px solid var(--maz-border);
    transition: all var(--maz-transition);
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Desktop-only spacing at the bottom of the card. !important needed —
       Kirki's "Product padding" customizer field outputs an unscoped
       padding:0px on this exact selector, loaded after category.css (see
       Doterivanje #9/#10) — without !important it wipes this out too.
       The mobile media query further down sets its own padding-bottom:4rem
       !important, which wins on narrow screens regardless of this value. */
    padding-bottom: 7rem !important;
    /* WooCommerce core (woocommerce-layout.css) sets width:22.05%;float:left on this
       same selector/specificity and loads before this file — without an explicit
       override here the card only fills ~22% of its grid cell, leaving it narrow
       with blank space beside it. float is void on grid items, but width isn't. */
    width: 100% !important;
    float: none !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--maz-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--maz-orange-border);
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--maz-beige);
    transition: transform var(--maz-transition-slow);
    display: block;
}

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

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-dark);
    padding: var(--maz-space-md) var(--maz-space-md) 4px;
    margin: 0;
    line-height: 1.4;
    text-decoration: none;
}

/* Price */
.woocommerce ul.products li.product .price {
    padding: 4px var(--maz-space-md);
    font-size: var(--maz-font-size-lg);
    font-weight: 700;
    display: block;
    color: var(--maz-dark);
}

/* Add to cart button — desktop: floats above the card's bottom edge,
   centered, capped at 90% width (li.product's padding-bottom:7rem above
   reserves room so this doesn't overlap the price). Mobile media query
   further down overrides this to a full-bleed bar flush with bottom:0. */
.woocommerce ul.products li.product .button {
    display: flex;
    text-align: center;
    background-color: var(--maz-orange);
    color: var(--maz-white) !important;
    border-radius: 5px !important;
    padding: 15px 20px;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--maz-transition);
    border: 2px solid var(--maz-orange);
    /* style.css sets white-space:nowrap globally on .woocommerce a.button; on
       narrow 2-col mobile cards the icon+label combo doesn't fit on one line
       and li.product's overflow:hidden silently clips the tail ("KORPU"). */
    white-space: normal;
    line-height: 1.3;
    position: absolute;
    bottom: 20px;
    left: auto;
    right: auto;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: 90%;
    place-self: center;
    height: 50px;
}

.woocommerce ul.products li.product .button:hover {
    background-color: var(--maz-orange-hover);
    border-color: var(--maz-orange-hover);
    transform: translateY(-1px);
}

/* "Pregled korpe" link — appended by WooCommerce JS after add-to-cart succeeds */
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
    display: block;
    text-align: center;
    padding: 0 var(--maz-space-md) var(--maz-space-md);
    margin-top: -4px;
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-xs);
    font-weight: 600;
    color: var(--maz-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce ul.products li.product a.added_to_cart.wc-forward:hover {
    color: var(--maz-orange);
}

/* Star ratings in product card */
.woocommerce ul.products li.product .star-rating {
    padding: 4px var(--maz-space-md) 0;
    margin: 0;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.woocommerce nav.woocommerce-pagination,
.maz-pagination {
    margin-top: var(--maz-space-lg);
    display: flex;
    justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--maz-radius-md);
    font-family: var(--maz-font);
    font-size: var(--maz-font-size-sm);
    font-weight: 600;
    color: var(--maz-charcoal);
    background-color: var(--maz-white);
    border: 1px solid var(--maz-border);
    text-decoration: none;
    transition: all var(--maz-transition);
    line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--maz-orange-light);
    border-color: var(--maz-orange);
    color: var(--maz-orange);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--maz-orange);
    border-color: var(--maz-orange);
    color: var(--maz-white);
}

/* ============================================================
   NO PRODUCTS FOUND
   ============================================================ */
.woocommerce-no-products-found,
.maz-no-results {
    text-align: center;
    padding: var(--maz-space-xl) var(--maz-space-md);
}

.maz-no-results__icon {
    font-size: 64px;
    margin-bottom: var(--maz-space-md);
    opacity: 0.3;
}

.maz-no-results__title {
    font-size: var(--maz-font-size-2xl);
    color: var(--maz-dark);
    margin-bottom: var(--maz-space-sm);
}

.maz-no-results__text {
    color: var(--maz-gray-400);
    margin-bottom: var(--maz-space-md);
}

/* ============================================================
   CATEGORY PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .maz-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .maz-filter-sidebar,
    .woocommerce-sidebar {
        flex: 0 0 220px;
    }
}

@media (max-width: 768px) {
    .maz-shop-layout {
        flex-direction: column;
    }

    .maz-filter-sidebar,
    .woocommerce-sidebar {
        flex: none;
        width: 100%;
        position: static;
    }

    .woocommerce ul.products,
    .maz-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tighter breadcrumb/header spacing on mobile than the 20px/20px used
       on desktop (Doterivanje #7) — same selectors, smaller values. */
    .woocommerce-breadcrumb {
        margin: 10px 0 !important;
    }

    .woocommerce-products-header {
        padding: 0 !important;
    }

    /* Reserve room at the bottom of the card so the absolutely-positioned
       button (below) doesn't overlap/hide the price. !important needed:
       Kirki's "Product padding" customizer field (woo_archive_image_padding,
       set to 0 to fix Doterivanje #9) outputs an unscoped padding:0px on
       this exact selector with no media query, loaded after category.css —
       it has no per-breakpoint control, so it always wins on padding-bottom
       without !important, wiping this out. */
    .woocommerce ul.products li.product {
        padding-bottom: 5rem !important;
    }

    /* Tighter card content on the narrow 2-col mobile grid — removing the
       button's side margins gives just enough room for "DODAJ U KORPU" to
       fit on one line instead of the two-line wrap used on wider cards. */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        padding: 0 15px;
    }

    .woocommerce ul.products li.product .price {
        padding: 0 15px;
        text-align: left;
    }

    .woocommerce ul.products li.product .button {
        /* margin:0 15px clips "DODAJ U KORPU" with nowrap — not enough room.
           Full-bleed (no side margin) is what actually fits it on one line. */
        margin: 0;
        margin-bottom: 0;
        white-space: nowrap;
        border-radius: 0px;
        /* Float 10px above the card's bottom edge instead of flush — rounded
           corners needed again since it no longer touches the card's own
           rounded bottom edge. */
        position: absolute;
        bottom: 10px;
        width: 100%;
        height: 45px;
        border-radius: 5px !important;
        font-size: 10px;
        gap: 0;
    }

    .woocommerce ul.products li.product .tinv-wraper.tinvwl-loop-button-wrapper {
        padding: 0;
    }

    .woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .maz-category-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--maz-space-sm) !important;
    }
}