.wishlist-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #071E63;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 2px;
}
.cart-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #071E63;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 2px;
}


/* Hide the text label */
.yith-wcwl-add-to-wishlist-button__label {
    display: none;
}

/* Make the YITH block and anchor fill the icon circle properly */
.wishlist-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wishlist-icon-wrap .yith-add-to-wishlist-button-block,
.wishlist-icon-wrap .yith-wcwl-add-to-wishlist-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Ensure the anchor is fully clickable */
.wishlist-icon-wrap a.yith-wcwl-add-to-wishlist-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    text-decoration: none;
}

/* SVG icon color */
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button) svg.yith-wcwl-add-to-wishlist-button-icon {
    color: #46578b !important;
    stroke-width: 1;
    width: 23px !important;
    height: 23px !important;
}

/* Hover state on the wrapper circle */
/* .product_side_icon_item:hover, */
.wishlist-icon-wrap:hover {
    background-color: #071E63;
    border-color: #071E63;
    color: #fff;
}

/* SVG turns white on hover */
.wishlist-icon-wrap:hover svg.yith-wcwl-add-to-wishlist-button-icon {
    color: #fff;
}


.ajax_add_to_cart.loading {
    opacity: 0.6;
    pointer-events: none;
}

.ajax_add_to_cart.added i {
    color: #28a745;
}



.ajax-search-results , .ajax-search-mobileresults {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 9999;
    display: none;
    max-height: 400px;
    overflow-y: auto;
        border-radius: 15px;
    margin-top: 5px;
}

.result-group h6 {
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin: 0;
    background: #f5f5f5;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #eee;
}

.result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.result-item:hover {
    background: #f9f9f9;
}


/* Make button relative */
.add_to_wishlist {
    position: relative;
}

/* While AJAX is processing */
.add_to_wishlist.loading {
    pointer-events: none;
}

/* Spinner overlay */
.add_to_wishlist.loading::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-top: 2px solid #e63946;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wishlist-spin 0.6s linear infinite;
}

/* Optional: hide heart icon while loading */
.add_to_wishlist.loading i,
.add_to_wishlist.loading svg {
    opacity: 0.3;
}

/* Animation */
@keyframes wishlist-spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.bestsellers_title h5 a{
    font-size: 16px;
    color: #000;
    font-weight: 400;
    line-height: 1.5;
}


.product_side_icon_item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hide icon when loading */
.product_side_icon_item.loading i {
    opacity: 0;
}

/* Loader */
.product_side_icon_item.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    border: 2px solid #000;
    border-top: 2px solid transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: spin 0.6s linear infinite;
}

/* FIXED animation */
@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* WooCommerce notices in the theme color (override default red/green/blue accents) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
    border-top-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: #f4f6fb !important;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.wc-block-components-notice-banner > svg {
    color: var(--primary-color) !important;
    fill: var(--primary-color) !important;
}

/* Buttons inside notices (e.g. "View cart") keep the theme color */
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}



/* Subcategory drill-down grid: force 3 columns (overrides WooCommerce float widths) */
ul.products.webart-subcategory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* WooCommerce's clearfix ::before/::after become stray grid items (empty first cell) */
ul.products.webart-subcategory-grid::before,
ul.products.webart-subcategory-grid::after {
    content: none !important;
    display: none !important;
}

ul.products.webart-subcategory-grid li.product-category {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

ul.products.webart-subcategory-grid li.product-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(7, 30, 99, 0.12);
    border-color: var(--primary-color, #071E63);
}

/* Whole card is a single link */
ul.products.webart-subcategory-grid li.product-category > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: var(--primary-color, #071E63);
}

/* Uniform square thumbnails */
ul.products.webart-subcategory-grid li.product-category img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0;
    background: #f6f7f9;
    transition: transform .4s ease;
}

ul.products.webart-subcategory-grid li.product-category:hover img {
    transform: scale(1.05);
}

/* Title + product count */
ul.products.webart-subcategory-grid li.product-category .woocommerce-loop-category__title {
    margin: 0;
    padding: 16px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
}

ul.products.webart-subcategory-grid li.product-category .woocommerce-loop-category__title .count {
    display: inline-block;
    margin-left: 4px;
    background: transparent;
    color: #8a8f9a;
    font-size: 13px;
    font-weight: 400;
}

@media (max-width: 1199px) {
    ul.products.webart-subcategory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    ul.products.webart-subcategory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    ul.products.webart-subcategory-grid {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------------------------
   HUSKY / WOOF filter loading overlay
   ------------------------------------------------------------------
   The plugin injects #woof_html_buffer and drops the word "Loading ..."
   into it with .text(), so the spinner has to come from a pseudo
   element -- there is no room for extra markup inside.

   Its own rule (div.woof_info_popup in the plugin's front.css) pins the
   box at top/left 48%, which is off-centre. Overriding by id rather than
   by element+class so this wins regardless of stylesheet order.
   ------------------------------------------------------------------ */
/*
 * Note: no `display` here on purpose. The plugin shows/hides this with
 * jQuery fadeTo()/fadeOut(), which write `display` as an inline style --
 * a CSS `display: flex` would simply lose to it, and forcing it with
 * !important would beat fadeOut's `display: none` and leave the overlay
 * stuck on screen. Hence the inline-block spinner below instead of flex.
 */
#woof_html_buffer.woof_info_popup {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 26px;
    border-radius: 14px;
    background-color: #ffffff;
    color: var(--primary-color, #071E63);
    font-family: 'lufga-regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .2px;
    white-space: nowrap;
    /* Huge spread doubles as a full-page dim without needing a second element. */
    box-shadow:
        0 18px 44px rgba(7, 30, 99, .22),
        0 0 0 100vmax rgba(7, 30, 99, .28);
}

#woof_html_buffer.woof_info_popup::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(7, 30, 99, .18);
    border-top-color: var(--primary-color, #071E63);
    border-radius: 50%;
    animation: woof-spin .7s linear infinite;
}

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

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    #woof_html_buffer.woof_info_popup::before {
        animation-duration: 2s;
    }
}

@media (max-width: 575px) {
    #woof_html_buffer.woof_info_popup {
        padding: 14px 20px;
        font-size: 14px;
    }
}