/* =============================================================
   CATEGORY / SHOP LISTINGS REFRESH
   Scoped under .vb-cat-refresh (main content) and
   .vb-filters-card (sidebar). Do not move rules outside these
   wrappers — they must not leak to cross-sells, single-product,
   or homepage carousels.
   ============================================================= */

/* ---- Design tokens (local to this file) ---- */
:root {
    --vb-cr-red: #d11d3c;
    --vb-cr-red-dark: #b21833;
    --vb-cr-green: #00A651;          /* CHOPPED PRICE — exact mockup color */
    --vb-cr-green-dark: #008e44;
    --vb-cr-hot-red: #ff0000;        /* HOT PRICE — exact mockup color */
    --vb-cr-blue: #2b6cb0;
    --vb-cr-blue-dark: #234e7d;
    --vb-cr-text: #1f2937;
    --vb-cr-muted: #6b7280;
    --vb-cr-border: #e5e7eb;
    --vb-cr-secondary: #d9efe1;      /* page header / image bg — soft mint */
    --vb-cr-bg: #ffffff;
    --vb-cr-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --vb-cr-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* =============================================================
   1. Tabs row + sort row
   ============================================================= */

/* Full-width tab bar sits above the sidebar + product columns (Figma layout). */
.vb-cat-tabs-bar {
    margin-bottom: 0;
}

/* Tabs: right-aligned, no stretch */
.woocommerce.tax-product_cat .vb-cat-refresh #product-tabs.nav-tabs,
.woocommerce.tax-brands .vb-cat-refresh #product-tabs.nav-tabs,
.woocommerce.tax-ranges .vb-cat-refresh #product-tabs.nav-tabs,
.woocommerce.search-results .vb-cat-refresh #product-tabs.nav-tabs,
.woocommerce.search-no-results .vb-cat-refresh #product-tabs.nav-tabs,
.woocommerce-shop .vb-cat-refresh #product-tabs.nav-tabs,
.vb-cat-refresh #product-tabs.nav-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    width: 100%;
    margin: 0 0 24px 0;
    padding: 0;
    border: 0;
    /* Full-width divider under the tab row (Figma node 48:2783 border-b #e5e5e5).
       The active tab's red underline overlaps this line. */
    border-bottom: 1px solid #e5e5e5;
}

.vb-cat-refresh #product-tabs.nav-tabs .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

.vb-cat-refresh #product-tabs.nav-tabs .nav-item .nav-link {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: #6b6b6b;
    text-align: center;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    /* Pull the 2px tab border down so it sits on top of the 1px row divider. */
    margin-bottom: -1px;
    padding: 8px 4px;
    width: auto;
    background: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.vb-cat-refresh #product-tabs.nav-tabs .nav-item .nav-link:hover {
    color: var(--vb-cr-text);
}

.vb-cat-refresh #product-tabs.nav-tabs .nav-item .nav-link.active {
    color: #c8102e !important;
    font-weight: 600;
    border-bottom: 2px solid #c8102e !important;
    background: transparent;
}

/* Sort row */
.vb-cat-refresh .vb-cat-sortrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.vb-cat-refresh .vb-cat-count {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--vb-cr-muted);
    margin: 0;
}

.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering {
    margin: 0;
    width: auto;
    max-width: 100%;
}

.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering select,
.vb-cat-refresh .vb-cat-sortrow .orderby {
    border: 1px solid #cfd4dc;
    border-radius: 6px;
    padding: 10px 38px 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background-color: #fff;
    color: var(--vb-cr-text);
    min-width: 180px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231f2937' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.8 L6 6.4 L11 1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 7px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering select:hover,
.vb-cat-refresh .vb-cat-sortrow .orderby:hover {
    border-color: #9ca3af;
}

.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering select:focus,
.vb-cat-refresh .vb-cat-sortrow .orderby:focus {
    outline: none;
    border-color: var(--vb-cr-text);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.08);
}

/* Open dropdown options — limited; browsers vary in what they honor on <option> */
.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering select option,
.vb-cat-refresh .vb-cat-sortrow .orderby option {
    background-color: #fff;
    color: var(--vb-cr-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 8px 14px;
}

.vb-cat-refresh .vb-cat-sortrow .woocommerce-ordering select option:checked,
.vb-cat-refresh .vb-cat-sortrow .orderby option:checked {
    background-color: #f3f4f6;
    color: var(--vb-cr-text);
    box-shadow: 0 0 10px 100px #f3f4f6 inset;
}

/* =============================================================
   1b. "Viewed X of Y" + "Show More Products"
   FiboFilters injects this markup client-side into
   .fibofilters-show-more-button-container:
       <div class="fibofilters-show-more-count">Viewed <b>48</b> of <b>1659</b></div>
       <button class="button fibofilters-show-more">Show more products</button>
   Styled here to match the Figma centered counter + red button.
   (Numbered .woocommerce-pagination is already hidden by FiboFilters.)
   ============================================================= */

.vb-cat-refresh .fibofilters-show-more-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 32px 0 16px;
}

.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more-count {
    color: #000;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: -0.312px;
}

.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more-count b {
    font-weight: 700;
}

.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    background: #c8102e;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 9px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize; /* "Show more products" -> "Show More Products" */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more:hover,
.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more:focus {
    background: #a50d26;
    color: #fff;
}

.vb-cat-refresh .fibofilters-show-more-button-container .fibofilters-show-more:focus-visible {
    outline: 2px solid #c8102e;
    outline-offset: 2px;
}

/* =============================================================
   2. Product grid + cards
   ============================================================= */

.vb-cat-refresh .products-wrap {
    margin-top: 0 !important;
}

.vb-cat-refresh ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bootstrap's clearfix injects a ::before/::after on .row-like elements
   (content: " "; display: table) which become flex items here and push the
   first row right by one gap. Disable them inside the products grid. */
.vb-cat-refresh ul.products::before,
.vb-cat-refresh ul.products::after {
    display: none !important;
}

.vb-cat-refresh ul.products > li.product {
    flex: 0 0 calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    margin: 0 !important;
    background: var(--vb-cr-bg);
    border-radius: 10px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

@media (max-width: 1199px) {
    /* 4-up on smaller laptops */
    .vb-cat-refresh ul.products > li.product {
        flex: 0 0 calc(25% - 12px) !important;
        max-width: calc(25% - 12px) !important;
    }
}

@media (max-width: 991px) {
    .vb-cat-refresh ul.products > li.product {
        flex: 0 0 calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
    }
}

@media (max-width: 767px) {
    .vb-cat-refresh ul.products > li.product {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

@media (max-width: 480px) {
    .vb-cat-refresh ul.products {
        gap: 10px !important;
    }
    .vb-cat-refresh ul.products > li.product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Hover lift */
.vb-cat-refresh ul.products li.product:hover {
    box-shadow: var(--vb-cr-card-shadow-hover);
    transform: translateY(-2px);
}

/* Card chrome */
.vb-cat-refresh .item-holder {
    border: 1px solid var(--vb-cr-border) !important;
    border-width: 1px !important;
    border-radius: 12px;
    padding: 0 !important;
    min-height: 0 !important;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow 0.25s ease;
}

.vb-cat-refresh .item-holder:hover {
    border-color: var(--vb-cr-border) !important;
    box-shadow: var(--vb-cr-card-shadow-hover);
}

/* Image link — stretched overlay so the whole image is clickable while
   leaving the Quick Actions outside the <a>. (Putting a <button> inside
   <a> is invalid HTML and the parser silently closes the anchor early.) */
.vb-cat-refresh .vb-card-image-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none !important;
}

/* Card image area — positioning context. Holds the square media box plus the
   Quick Actions, which overlay the image on desktop and flow below it on mobile.
   No overflow:hidden here so the mobile button strip isn't clipped. */
.vb-cat-refresh .item-img {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

/* Media box — 1:1 aspect, product fills (object-cover). Clips the image and its
   on-image overlays (badge, flags) so they stay within the square. */
.vb-cat-refresh .vb-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--vb-cr-secondary);
    overflow: hidden;
    display: block;
}

/* Direct-child only: must not bleed onto nested badge images
   (e.g. .flag-shipping img), which would force them to 0×0. */
.vb-cat-refresh .vb-card-media > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.vb-cat-refresh .item-holder:hover .vb-card-media > img {
    transform: scale(1.05);
}

/* Card body (below image) */
.vb-cat-refresh .vb-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.vb-cat-refresh .vb-card-title-link {
    text-decoration: none !important;
    color: inherit;
}

.vb-cat-refresh .vb-card-title-link:hover .woocommerce-loop-product__title {
    color: var(--vb-cr-red);
}

.vb-cat-refresh .woocommerce-loop-product__title {
    margin: 0;
    transition: color 0.15s ease;
    color: #1A1A1A;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    letter-spacing: -0.312px;
}

/* Discount badge — top-right corner of image */
.vb-cat-refresh .vb-discount-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    color: var(--vb-cr-text);
    border: 1px solid var(--vb-cr-border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    z-index: 2;
}

/* Star rating */
.vb-cat-refresh .vb-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    min-height: 18px;
}

/* Self-contained copy of WooCommerce's "star" webfont so card ratings still
   render when WooCommerce's core stylesheet is purged/optimized off the page.
   Glyphs: \73 (s) = empty star, \53 (S) = filled star. */
@font-face {
    font-family: 'vb-star';
    src: url('/wp-content/plugins/woocommerce/assets/fonts/star.woff') format('woff'),
         url('/wp-content/plugins/woocommerce/assets/fonts/star.ttf') format('truetype'),
         url('/wp-content/plugins/woocommerce/assets/fonts/star.svg#star') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.vb-cat-refresh .star-rating {
    position: relative;
    overflow: hidden;
    height: 1em;
    line-height: 1;
    width: 5.4em;
    margin: 0;
    font-family: 'vb-star';
    font-weight: 400;
    font-size: 13px;
    letter-spacing: normal;
}

.vb-cat-refresh .star-rating::before {
    content: "\73\73\73\73\73";
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    color: #e5e7eb;
    opacity: 1;
}

.vb-cat-refresh .star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    overflow: hidden;
    padding-top: 1.5em;
}

.vb-cat-refresh .star-rating span::before {
    content: "\53\53\53\53\53";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--vb-cr-red);
}

.vb-cat-refresh .vb-rating-count {
    color: var(--vb-cr-muted);
    font-size: 13px;
    margin-left: 4px;
}

/* Collapse the meta row when no rating renders (products without reviews) */
.vb-cat-refresh .vb-card-meta:empty,
.vb-cat-refresh .vb-card-meta:not(:has(*)):empty {
    display: none;
}

/* Price-pill row (separate so the pill can sit alone on its line) */
.vb-cat-refresh .vb-price-pill-row {
    margin: 0;
    margin-top: auto; /* pin price block to the card bottom for consistent alignment */
    line-height: 1;
}

/* Price type pill */
.vb-cat-refresh .vb-price-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 0;
    margin: 0;
}

.vb-cat-refresh .vb-price-pill--chop {
    background: var(--vb-cr-green);
    color: #fff;
}

.vb-cat-refresh .vb-price-pill--hot {
    background: var(--vb-cr-hot-red);
    color: #fff;
}

.vb-cat-refresh .vb-price-pill--basement {
    background: var(--vb-cr-blue);
    color: #fff;
}

/* Price row */
.vb-cat-refresh .vb-price-row {
    padding: 0;
    margin: 0;
    margin-top: auto; /* pin to bottom when there's no pill/RRP row above it */
    display: flex;
    align-items: center;
    justify-content: space-between; /* price left, free-shipping flag right */
    gap: 8px;
    flex-wrap: wrap;
}

/* When a pill/RRP row is present it already carries the auto margin, so the
   price row sits directly beneath it (keeps the pair together at the bottom). */
.vb-cat-refresh .vb-price-pill-row + .vb-price-row {
    margin-top: 0;
}

.vb-cat-refresh .vb-price-row .vb-sale-price,
.vb-cat-refresh .vb-price-row .vb-sale-price .amount {
    color: #C8102E;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 127.273% */
    letter-spacing: -0.449px;
}

.vb-cat-refresh .vb-price-row .vb-rrp,
.vb-cat-refresh .vb-price-row .vb-rrp .amount,
.vb-cat-refresh .vb-price-pill-row .vb-rrp,
.vb-cat-refresh .vb-price-pill-row .vb-rrp .amount {
    color: #6B6B6B;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
}

.vb-cat-refresh .vb-price-row .vb-regular-only,
.vb-cat-refresh .vb-price-row .vb-regular-only .amount {
    color: #C8102E;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 127.273% */
    letter-spacing: -0.449px;
}

/* HOT/CHOPPED prices: match the red sale-price styling for a uniform card look */
.vb-cat-refresh .vb-price-row .vb-regular-only--special,
.vb-cat-refresh .vb-price-row .vb-regular-only--special .amount {
    color: #C8102E;
    font-family: Inter;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 127.273% */
    letter-spacing: -0.449px;
}

/* Hide the legacy price-holder inside the refresh */
.vb-cat-refresh .price-holder {
    display: none !important;
}

/* Hide the legacy add-to-cart hover anchor area (we render our own .vb-quick-actions) */
.vb-cat-refresh .product-hover {
    display: none !important;
}

/* Flags reposition (free shipping, in-store, OOS) — top-left of image */
.vb-cat-refresh .item-holder .flag {
    position: absolute !important;
    bottom: auto !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    border-radius: 4px;
    font-size: 11px !important;
    padding: 4px 8px !important;
    line-height: 1.1 !important;
    z-index: 2;
}

/* Free-shipping chip now sits in the price row (right of the price), not over the image. */
.vb-cat-refresh .vb-price-row .flag.flag-shipping {
    position: static !important;
    display: flex;
    padding: 4px 8px !important;
    align-items: center;
    gap: 4px;
    background: #FFF !important;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid #D7D7D7;
    background: #FFF;
}

.vb-cat-refresh .vb-price-row .flag.flag-shipping .free-shipping-text {
    text-align: left;
}

.vb-cat-refresh .vb-price-row .flag.flag-shipping .free-shipping-text span {
    color: #C8102E;
    font-family: Inter;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 11px; /* 100% */
    letter-spacing: 0.117px;
}

.vb-cat-refresh .item-holder .vb-discount-badge-container {
    display: flex;
    width: 64px;
    height: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: auto;
    right: 16px;
    bottom: 16px;
    border-radius: 16777200px;
    background: #C8102E;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    z-index: 1;
    flex-direction: column;
    gap: 3px;
}

.vb-cat-refresh .item-holder .vb-discount-badge-container .vb-discount-badge-percentage {
    color: #FFF;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 100% */
    letter-spacing: -0.449px;
}

.vb-cat-refresh .item-holder .vb-discount-badge-container .vb-discount-badge-text {
    color: #FFF;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 10px; /* 100% */
    letter-spacing: 0.117px;
}


/* =============================================================
   3. Hover overlay — Quick Add + Wishlist
   ============================================================= */

.vb-cat-refresh .vb-quick-actions {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 3;
}

.vb-cat-refresh ul.products li.product:hover .vb-quick-actions,
.vb-cat-refresh .item-holder:hover .vb-quick-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vb-cat-refresh .vb-quick-actions .vb-quick-add,
.vb-cat-refresh .item-holder .vb-quick-actions .vb-quick-add {
    flex: 1 1 0% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: var(--vb-cr-red);
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    line-height: 1;
    height: 38px;
}

.vb-cat-refresh .vb-quick-add:hover {
    background: var(--vb-cr-red-dark);
    color: #fff !important;
}

.vb-cat-refresh .vb-quick-add img {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    filter: brightness(0) invert(1);
}

/* Anchor any loader (.vb-loader2 / .lds-spinner) to the button that triggered
   the action, not to .vb-quick-actions (which is the nearest positioned
   ancestor by default and was capturing the spinner). */
.vb-cat-refresh .vb-quick-add,
.vb-cat-refresh .vb-wishlist-btn {
    position: relative;
}

.vb-cat-refresh .vb-quick-add .vb-loader2,
.vb-cat-refresh .vb-quick-add .lds-spinner,
.vb-cat-refresh .vb-wishlist-btn .vb-loader2,
.vb-cat-refresh .vb-wishlist-btn .vb-wishlist-loader,
.vb-cat-refresh .vb-wishlist-btn .lds-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* The injected .vb-wishlist-loader wraps an 18×18 spinner (sized by
   product.css). Make the wrapper itself 18×18 so the translate(-50%, -50%)
   on the wrapper actually centers the spinner inside the button. */
.vb-cat-refresh .vb-wishlist-btn .vb-wishlist-loader {
    width: 18px;
    height: 18px;
}

.vb-cat-refresh .vb-wishlist-btn .vb-wishlist-loader .lds-spinner {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

/* While the button is mid-AJAX, hide its label text so only the centered
   spinner is visible. WooCommerce adds .loading; the site's JS also injects
   a .vb-loader2 element — match either. */
.vb-cat-refresh .vb-quick-actions .vb-quick-add.loading,
.vb-cat-refresh .vb-quick-actions .vb-quick-add:has(.vb-loader2),
.vb-cat-refresh .vb-quick-actions .vb-quick-add:has(.lds-spinner) {
    color: transparent !important;
    pointer-events: none;
}

/* Hide the heart icon pseudo-element while the wishlist button is loading
   so only the centered spinner shows. */
.vb-cat-refresh .vb-wishlist-btn:has(.vb-loader2) .tinvwl_add_to_wishlist_button::before,
.vb-cat-refresh .vb-wishlist-btn:has(.lds-spinner) .tinvwl_add_to_wishlist_button::before,
.vb-cat-refresh .vb-wishlist-btn:has(.vb-wishlist-loader) .tinvwl_add_to_wishlist_button::before {
    visibility: hidden;
}

/* Wishlist heart container — wrap TI Wishlist button */
.vb-cat-refresh .vb-wishlist-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--vb-cr-border);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
    overflow: hidden;
    padding: 0;
}

.vb-cat-refresh .vb-wishlist-btn:hover {
    border-color: var(--vb-cr-red);
}

/* TI Wishlist — neutralize default chrome inside our heart button */
.vb-cat-refresh .vb-wishlist-btn .tinv-wraper,
.vb-cat-refresh .vb-wishlist-btn .tinv-wishlist {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    line-height: 1 !important;
}

.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--vb-cr-muted) !important;
    text-decoration: none !important;
    min-width: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    /* Hide any raw text label (TI Wishlist outputs "Add to wishlist" as
       direct text inside the anchor). Pseudo-element icon keeps its own
       font-size declared below. */
    font-size: 0 !important;
    overflow: hidden;
    white-space: nowrap;
}

/* Icon glyph (font-based via :before pseudo-element on the anchor) */
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button::before {
    color: var(--vb-cr-muted);
    font-size: 16px !important;
    transition: color 0.15s ease;
    margin: 0 !important;
}

.vb-cat-refresh .vb-wishlist-btn:hover .tinvwl_add_to_wishlist_button::before,
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::before,
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button.tinvwl-product-already-on-wishlist::before {
    color: var(--vb-cr-red);
}

/* Hide any text label TI Wishlist injects, leave only the icon */
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text,
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button .tinvwl_remove_from_wishlist-text,
.vb-cat-refresh .vb-wishlist-btn .tinvwl_add_to_wishlist_button .tinvwl_already_on_wishlist-text,
.vb-cat-refresh .vb-wishlist-btn .tinv-wishlist-clear,
.vb-cat-refresh .vb-wishlist-btn .tinvwl-tooltip {
    display: none !important;
}

/* Disabled state when product can't quick-add (OOS / in-store / over-18).
   Selector specificity must match the .vb-quick-actions .vb-quick-add rule
   above so the gray background wins over the red. */
.vb-cat-refresh .vb-quick-actions .vb-quick-add--info,
.vb-cat-refresh .item-holder .vb-quick-actions .vb-quick-add--info {
    background: #9ca3af;
    cursor: pointer;
}

.vb-cat-refresh .vb-quick-actions .vb-quick-add--info:hover,
.vb-cat-refresh .item-holder .vb-quick-actions .vb-quick-add--info:hover {
    background: #6b7280;
    color: #fff !important;
}

/* =============================================================
   4. Filters sidebar — card panel
   ============================================================= */

/* Figma-literal tokens, scoped to this component only. */
.vb-filters-card {
    --vb-flt-red: #c8102e;
    --vb-flt-ink: #1a1a1a;
    --vb-flt-muted: #6b6b6b;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: none;
    padding: 24px;
    margin-top: 0;
    font-family: 'Inter', sans-serif;
}

.vb-filters-card .vb-filters-heading {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: -0.44px;
    color: var(--vb-flt-ink);
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

/* Mobile collapse toggle */
.vb-filters-card .vb-filters-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--vb-flt-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* Filter sections */
.vb-filters-card .vb-filter-section {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.vb-filters-card .vb-filter-section:first-of-type {
    margin-top: 0;
}

.vb-filters-card .vb-filter-section-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    color: var(--vb-flt-ink) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: -0.1504px !important;
}

.vb-filters-card .vb-filter-section--categories .vb-filter-section-title {
    margin-bottom: 10px;
}

.vb-filters-card .vb-filter-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vb-filters-card .vb-filter-list li {
    margin: 0;
    padding: 0;
}

/* Generic filter row (used by both radio link + checkbox label) */
.vb-filters-card .vb-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--vb-flt-ink);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.vb-filters-card .vb-filter-item:hover {
    color: var(--vb-flt-red);
    text-decoration: none;
}

.vb-filters-card .vb-filter-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.vb-filters-card .vb-filter-label {
    flex: 1 1 auto;
    color: inherit;
}

.vb-filters-card .vb-filter-count {
    font-size: 12px;
    color: var(--vb-flt-muted);
    margin-left: auto;
}

/* Category row: radio link + expand/collapse chevron */
.vb-filters-card .vb-filter-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vb-filters-card .vb-filter-cat-row .vb-filter-item {
    flex: 1 1 auto;
}

.vb-filters-card .vb-subcat-toggle {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0;
    color: var(--vb-flt-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.vb-filters-card .vb-subcat-toggle .vb-chevron {
    transition: transform 0.18s ease;
}

.vb-filters-card .vb-subcat-toggle[aria-expanded="true"] .vb-chevron {
    transform: rotate(180deg);
}

.vb-filters-card .vb-filter-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vb-filters-card .vb-filter-item--sub {
    padding-left: 16px;
}

/* Deeper levels (L3+) indent progressively: each nested sublist adds offset. */
.vb-filters-card .vb-filter-sublist .vb-filter-sublist .vb-filter-item--sub {
    padding-left: 32px;
}

.vb-filters-card .vb-filter-sublist .vb-filter-sublist .vb-filter-sublist .vb-filter-item--sub {
    padding-left: 48px;
}

/* Radio mark (Categories) */
.vb-filters-card .vb-radio-mark {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #000;
    background: #fff;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vb-filters-card .vb-filter-item:hover .vb-radio-mark {
    border-color: var(--vb-flt-red);
}

.vb-filters-card .vb-filter-item.is-selected .vb-radio-mark {
    border-color: var(--vb-flt-red);
    background: var(--vb-flt-red);
}

.vb-filters-card .vb-filter-item.is-selected .vb-radio-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}

.vb-filters-card .vb-filter-item.is-selected .vb-filter-label {
    color: var(--vb-flt-red);
    font-weight: 600;
}

/* Checkbox mark (Brands / Price / Rating) */
.vb-filters-card .vb-check-mark {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #000;
    background: #fff;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vb-filters-card .vb-filter-item:hover .vb-check-mark {
    border-color: var(--vb-flt-red);
}

/* Visual checked state is driven only by :checked so unchecking takes effect
   without a page reload. .is-selected (server-side initial render) is used
   only for the text-label color below. */
.vb-filters-card .vb-filter-item input[type="checkbox"]:checked + .vb-check-mark {
    border-color: var(--vb-flt-red);
    background: var(--vb-flt-red);
}

.vb-filters-card .vb-filter-item input[type="checkbox"]:checked + .vb-check-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.vb-filters-card .vb-filter-item--checkbox:has(input[type="checkbox"]:checked) .vb-filter-label {
    color: var(--vb-flt-red);
    font-weight: 600;
}

.vb-filters-card .vb-filter-item--checkbox:not(:has(input[type="checkbox"]:checked)) .vb-filter-label {
    color: var(--vb-flt-ink);
    font-weight: 500;
}

/* Focus ring on keyboard nav */
.vb-filters-card .vb-filter-item input[type="checkbox"]:focus-visible + .vb-check-mark {
    outline: 2px solid var(--vb-flt-red);
    outline-offset: 2px;
}

/* Rating row — compact "5★ & up" text */
.vb-filters-card .vb-rating-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.vb-filters-card .vb-rating-star {
    color: inherit;
    font-size: 14px;
    line-height: 1;
}

/* Real radio inputs (price-range selection) — hide native control, drive the
   .vb-radio-mark from :checked so it updates live before Apply. */
.vb-filters-card .vb-filter-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.vb-filters-card .vb-filter-item input[type="radio"]:checked + .vb-radio-mark {
    border-color: var(--vb-flt-red);
    background: var(--vb-flt-red);
}

.vb-filters-card .vb-filter-item input[type="radio"]:checked + .vb-radio-mark::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
}

.vb-filters-card .vb-filter-item--radio:has(input[type="radio"]:checked) .vb-filter-label {
    color: var(--vb-flt-red);
    font-weight: 600;
}

.vb-filters-card .vb-filter-item input[type="radio"]:focus-visible + .vb-radio-mark {
    outline: 2px solid var(--vb-flt-red);
    outline-offset: 2px;
}

/* Grouped gray panel (Brands + Price + Rating + actions) */
.vb-filters-card .vb-filters-panel {
    background: rgba(243, 243, 243, 0.8);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vb-filters-card .vb-filters-panel .vb-filter-section {
    margin: 0;
}

/* "More (N)" reveal */
.vb-filters-card .vb-filter-more {
    background: transparent;
    border: 0;
    padding: 4px 0 0;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--vb-flt-muted);
    cursor: pointer;
    text-align: left;
}

.vb-filters-card .vb-filter-more:hover {
    color: var(--vb-flt-red);
}

/* Actions: Apply button + Clear Filters link */
.vb-filters-card .vb-filter-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.vb-filters-card .vb-filter-apply {
    display: block;
    width: 100%;
    margin: 0;
    background-color: var(--vb-flt-red);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vb-filters-card .vb-filter-apply:hover {
    background-color: #a50d26;
    color: #fff;
}

.vb-filters-card .vb-filter-apply:focus-visible {
    outline: 2px solid var(--vb-flt-red);
    outline-offset: 2px;
}

.vb-filters-card .vb-filter-clear {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    color: var(--vb-flt-red);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.vb-filters-card .vb-filter-clear:hover {
    color: var(--vb-flt-red);
    text-decoration: underline;
}

/* =============================================================
   5. Mobile adjustments
   ============================================================= */

@media (max-width: 991px) {
    .vb-cat-refresh #product-tabs.nav-tabs {
        gap: 18px;
        justify-content: center;
    }
    .vb-cat-refresh #product-tabs.nav-tabs .nav-item .nav-link {
        font-size: 16px !important;
    }
    /* No hover on touch: drop the overlay and let the actions flow as a static
       strip below the image, so they never cover the discount badge or any
       on-image content. The square .vb-card-media keeps the badge anchored to
       the image; these buttons sit in their own row beneath it. */
    .vb-cat-refresh .vb-quick-actions {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: 12px 16px 0;
    }
}

/* =============================================================
   6. Filtering loading state
   While a filter selection fetches (full page navigation) the
   product listing is hidden and this standalone loading icon is
   shown in its place, with the sidebar disabled so no further
   selection is possible mid-fetch.
   ============================================================= */

.vb-listing-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 320px;
    padding: 40px 0;
}

.vb-listing-loading-state .vb-listing-spinner {
    display: block;
    width: 48px;
    height: 48px;
    border: 4px solid var(--vb-cr-border);
    border-top-color: var(--vb-cr-red);
    border-radius: 50%;
    animation: vb-listing-spin 0.7s linear infinite;
}

.vb-listing-loading-state .vb-listing-loading-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--vb-cr-muted);
}

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

/* Disable the whole filter card during a fetch. */
.vb-filters-card.vb-filters-loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: progress;
}