/* Style for the preloader */
.r-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0 0 0 / 31%);
    backdrop-filter: blur(3px);
    z-index: 9999;
}

.r-preloader .r-spinner {
    border: 8px solid #ffffff;
    border-top: 8px solid #006616;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: rSpin 1.5s linear infinite;
}

/* Animation for spinning */
@keyframes rSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.dropdown.bootstrap-select.form-control.p-condition {
    width: 155px;
    flex: none;
}
.dropdown.bootstrap-select.form-control.country-code {
    max-width: 250px;
}
input[type="checkbox"],
input[type="radio"] {
    height: 20px;
    width: 20px;
}
.mobile-menu-bar {
    display: none;
}
.c-badge {
    width: auto !important;
}
.custom-header-menu .list-unstyled.categories {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.custom-header-menu .list-unstyled .list-inline-item {
    display: flex;
    align-items: center;
}
.custom-header-menu .category-nav-element:hover .sub-cat-menu {
    top: 100%;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    border-top: 1px solid #e2e5ec;
    display: block !important;
}
.custom-header-menu .list-unstyled .list-inline-item img {
    max-height: 35px;
    /* margin-right: 3px; */
}
.custom-header-menu .list-unstyled .list-inline-item a {
    display: flex !important;

    align-items: center;
}
.custom-header-menu .category-nav-element:hover > a {
    box-shadow: unset;
    /*color: #000000!important;  */
    opacity: 1 !important;
    background: transparent !important;
}

.custom-header-menu .category-nav-element:hover a .cat-name {
    color: #000000 !important;
}
.custom-header-menu .c-preloader {
    left: 50%;
    transform: translateX(-50%);
}

.header-top-right-btn {
    font-size: 12px;
}
.header-menu-toggler {
    display: none;
}
.aiz-top-menu-sidebar.header-m-sidebar {
    display: none;
}
.hover-category-menu.r-menu .sub-cat-menu {
    width: calc(100% - 25%);
    left: calc(25% - 10px);
}
.custom-header-menu .category-nav-element .sub-cat-menu {
    width: 80% !important;
    min-height: 300px;
    max-height: 400px;
    transition: none !important;
    display: none;
    z-index: 999 !important;
}
.header-top-right-btn.profile a {
    flex-direction: column;
}
.size-24px {
    height: 24px;
}
.r-search-form .form-control#search,
.r-search-form .p-condition [data-id="product_condition"] {
    height: calc(1.3125rem + 1.2rem + 3px);
}
.nav-toggler-btn {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin: 0;
    padding: 14px 10px;
    cursor: pointer;
}

.mobile-menu-visible .nav-toggler-btn {
    background: #ddd;
}

.nav-toggler-btn span {
    display: block;
    position: relative;
    height: 2px;
    background: #000;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.mobile-menu-visible .nav-toggler-btn span:nth-child(2) {
    display: none;
}

.mobile-menu-visible .nav-toggler-btn span:nth-child(1) {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px;
}

.mobile-menu-visible .nav-toggler-btn span:nth-child(3) {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 3px;
}

.nav-toggler-btn span:nth-child(2) {
    margin: 4px 0;
}
.menu-toggle-btn-wrap {
    display: flex;
    align-items: center;
}
.custom-header-menu a.main-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    position: relative;
}
.custom-header-menu .submenu-arrow-btn {
    font-size: 18px;
}

.aiz-category-menu .sub-cat-menu .c-preloader {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.headline-notice-wrap .notice-inner {
    padding: 12px 20px 8px;
    background: #fff;
    margin-bottom: 60px;
    border-radius: 33px;
    font-size: 14px;
    color: #444;
    min-height: 40px;
}

.dropdown.bootstrap-select.form-control.p-condition .dropdown-item {
    padding-left: 8px;
    padding-right: 8px;
}
.dropdown.bootstrap-select.form-control.p-condition
    [data-id="product_condition"] {
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 1024px) {
    .aiz-category-menu.custom-header-menu {
        display: none;
    }
    .header-menu-toggler {
        display: inline-block;
    }
    .aiz-top-menu-sidebar.header-m-sidebar {
        display: block;
    }
    header .brand-logo {
        margin-right: 0 !important;
    }
    .mobile-menu-bar {
        display: block !important;
    }
    .custom-header-menu .list-unstyled .list-inline-item {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #d5d5d5;
    }
    .header-main-menu-wrap {
        justify-content: space-between;
    }
    .h-search-btn-wrap {
        margin-left: 0 !important;
    }

    .h-logo-wrapper {
        padding-right: 0 !important;
    }
    .header-main-menu-wrap {
        background: transparent !important;
    }
    .mobile-menu-initiated .custom-header-menu .list-unstyled.categories {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }
    .aiz-category-menu.custom-header-menu {
        position: fixed;
        left: -100%;
        min-width: 90%;
        border-radius: 0 !important;
        box-shadow: -10px 10px 26px #c8c8c887;
        padding: 20px 20px;
        height: calc(100% - 70px);
        transition: all 0.3s ease;
        overflow-y: auto;
        /* display: flex; */
        /* align-items: flex-start; */
        /* justify-content: flex-end; */
    }

    .mobile-menu-visible .aiz-category-menu.custom-header-menu {
        left: 0%;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu,
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        * {
        height: unset;
        background: transparent !important;
    }

    .custom-header-menu .category-nav-element:hover .main-link,
    .custom-header-menu .category-nav-element:hover .main-link * {
        color: var(--primary) !important;
        background: transparent !important;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .list-unstyled.categories
        .category-nav-element {
        width: 100%;
        border-bottom: 1px solid #d5d5d5;
    }

    .mobile-menu-initiated .custom-header-menu .submenu-arrow-btn {
        width: 50%;
        text-align: right;
        position: absolute;
        right: 0;
        height: 100%;
        line-height: 1.8;
        padding-right: 5px !important;
        display: flex !important;
        align-items: center;
        justify-content: end;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu,
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element:hover
        .sub-cat-menu {
        width: unset;
        padding: unset;
        min-height: unset;
        max-height: unset;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        .card-columns,
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element:hover
        .sub-cat-menu
        .card-columns {
        -webkit-column-count: unset;
        column-count: unset;
        height: auto;
    }
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        .card-columns
        .card {
        margin-bottom: 0px !important;
    }
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        ul,
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element:hover
        .sub-cat-menu
        ul {
        width: 100%;
        display: block;
        margin-bottom: 30px !important;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        ul:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        ul
        li,
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element:hover
        .sub-cat-menu
        ul
        li {
        margin-bottom: 5px !important;
        padding-bottom: 5px !important;
    }

    .mobile-menu-initiated .aiz-category-menu.custom-header-menu .sub-cat-menu {
        display: none;
        position: unset;
        top: 0;
        transform: unset;
        box-shadow: unset !important;
        padding: 5px 40px !important;
    }

    .mobile-menu-initiated .custom-header-menu .c-preloader {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .mobile-menu-initiated
        .custom-header-menu
        .category-nav-element
        .sub-cat-menu
        ul
        li:not(:first-child) {
        padding-left: 10px;
    }
    .mobile-menu-initiated .aiz-mobile-bottom-nav {
        z-index: 11;
    }
    body.mobile-menu-visible {
        overflow: hidden;
    }
    .mobile-menu-initiated .custom-header-menu .submenu-arrow-btn i {
        transform: rotate(-90deg);
        transition: all 0.3s ease;
    }

    .mobile-menu-initiated
        .custom-header-menu
        .submenu-visible
        .submenu-arrow-btn
        i {
        transform: rotate(0deg);
    }
    body.mobile-menu-visible:before {
        content: "";
        position: absolute;
        z-index: 111;
        top: 0;
        left: 0;
        height: 10000%;
        width: 100%;
        background: #00000033;
        backdrop-filter: blur(5px);
    }
}

@media (max-width: 991.98px) {
    .front-header-search .input-group {
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    .mobile-menu-initiated .aiz-category-menu.custom-header-menu {
        height: calc(100% - 60px);
    }
}

/* Product Image Hover */

.image-hover-effect {
    position: relative;
    overflow: hidden;
}
/* .product-hover-image (commented out)
.product-hover-image {
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.image-hover-effect:hover .product-hover-image {
    opacity: 1;
}
*/

.live-circle-icon {
    animation: blink-1p5 1.5s infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes blink-1p5 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .blink {
        animation: none;
    }
}

.product-details-page .add-to-cart {
    transition: transform 0.3s ease-in-out;
}

.product-details-page .add-to-cart:hover {
    transform: scale(1.02, 1.1);
}

/* Image Gallery Viewer */

.img-zoom {
    cursor: grab;
}

.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    text-align: center;
    overflow: auto;
}
.lightbox-content {
    max-width: 90%;
    max-height: 80%;
    top: 50%;
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.lightbox-toolbar button {
    font-size: 18px;
    padding: 5px 10px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    border-radius: 5px;
}
.lightbox-close {
    font-size: 22px;
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    background: rgb(0 0 0 / 25%);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1100;
    transition: background 0.3s ease;
}
.lightbox-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}
.lightbox-arrow.prev {
    left: 20px;
}
.lightbox-arrow.next {
    right: 20px;
}

.lightbox-toolbar {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* left + right */
    align-items: center;
    padding: 0 15px;
    z-index: 1100;
}

.toolbar-left {
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.toolbar-right button {
    margin-left: 4px;
    font-size: 18px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.toolbar-right button:hover {
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-modal img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    max-width: 90% !important;
    max-height: 80% !important;
    margin: 0 !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Expand Icon */
.carousel-box {
    position: relative;
    overflow: visible;
}

.wd-show-product-gallery-wrap {
    position: absolute;
    bottom: 40px;
    left: 10px;
    z-index: 999;
}

.wd-show-product-gallery-wrap a {
    display: flex;
    align-items: center;
    padding: 6px;
    background: rgba(0, 0, 0, 0);
    color: #666666;
    border-radius: 50px;
    text-decoration: none;
    overflow: hidden;
    width: 35px;
    transition: width 0.3s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.wd-show-product-gallery-wrap a .text {
    margin-left: 8px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wd-show-product-gallery-wrap a:hover {
    width: 145px;
    color: #000;
}

.wd-show-product-gallery-wrap a:hover .text {
    opacity: 1;
}

/* Custom hober effect on btn */
.custom-hov-btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}
.custom-hov-btn:active {
    transform: translateY(1px);
}

.pb-26px {
    padding-bottom: 1.625rem;
}
.py-19px {
    padding-top: 1.1875rem;
    padding-bottom: 1.1875rem;
}
.py-32px {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.pt-32px {
    padding-top: 2rem;
}
.pb-32px {
    padding-bottom: 2rem;
}
.mb-32px {
    margin-bottom: 2rem;
}

.my-32px {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* Extra small devices (xs) <576px */
@media (max-width: 575.98px) {
    .pb-26px {
        padding-bottom: 1rem !important;
    }
    .py-19px {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .py-32px {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .pt-32px {
        padding-top: 1rem !important;
    }
    .pb-32px {
        padding-bottom: 1rem !important;
    }
    .mb-32px {
        margin-bottom: 1rem !important;
    }
    .my-32px {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Small devices (sm) ≥576px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .pb-26px {
        padding-bottom: 1.25rem !important;
    }
    .py-19px {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    .py-32px {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    .pt-32px {
        padding-top: 1.25rem !important;
    }
    .pb-32px {
        padding-bottom: 1.25rem !important;
    }
    .mb-32px {
        margin-bottom: 1.25rem !important;
    }
    .my-32px {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
}

/* Medium devices (md) ≥768px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pb-26px {
        padding-bottom: 1.5rem !important;
    }
    .py-19px {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .py-32px {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .pt-32px {
        padding-top: 1.5rem !important;
    }
    .pb-32px {
        padding-bottom: 1.5rem !important;
    }
    .mb-32px {
        margin-bottom: 1.5rem !important;
    }
    .my-32px {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Large devices (lg) ≥992px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pb-26px {
        padding-bottom: 1.625rem !important;
    }
    .py-19px {
        padding-top: 1.1875rem !important;
        padding-bottom: 1.1875rem !important;
    }
    .py-32px {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
    .pt-32px {
        padding-top: 1.75rem !important;
    }
    .pb-32px {
        padding-bottom: 1.75rem !important;
    }
    .mb-32px {
        margin-bottom: 1.75rem !important;
    }
    .my-32px {
        margin-top: 1.75rem !important;
        margin-bottom: 1.75rem !important;
    }
}

/* Extra large devices (xl) ≥1200px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .pb-26px {
        padding-bottom: 1.75rem !important;
    }
    .py-19px {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    .py-32px {
        padding-top: 1.875rem !important;
        padding-bottom: 1.875rem !important;
    }
    .pt-32px {
        padding-top: 1.875rem !important;
    }
    .pb-32px {
        padding-bottom: 1.875rem !important;
    }
    .mb-32px {
        margin-bottom: 1.875rem !important;
    }
    .my-32px {
        margin-top: 1.875rem !important;
        margin-bottom: 1.875rem !important;
    }
}

/* Extra extra large devices (xxl) ≥1400px */
@media (min-width: 1400px) {
    .pb-26px {
        padding-bottom: 1.625rem !important;
    }
    .py-19px {
        padding-top: 1.1875rem !important;
        padding-bottom: 1.1875rem !important;
    }
    .py-32px {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    } /* max 2rem */
    .pt-32px {
        padding-top: 2rem !important;
    }
    .pb-32px {
        padding-bottom: 2rem !important;
    }
    .mb-32px {
        margin-bottom: 2rem !important;
    }
    .my-32px {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

.custom-header-menu .category-nav-element:hover > a .cat-name {
    margin: 0 !important;
}

.z-99999 {
    z-index: 99999 !important;
}

/*Mobile menu start*/
.r-menu-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.r-menu-row.level3 {
    padding: 6px 0;
}

.r-menu-row a {
    flex: 1;
    margin-right: 10px;
}

.r-arrow-btn {
    width: 40px;
    min-width: 40px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.r-arrow-btn i {
    transition: transform 0.25s ease;
}

.r-arrow-btn.active i {
    transform: rotate(180deg);
}

.r-sub-cat-menu,
.r-child-cat-menu-wrap,
.r-child-cat-menu-item {
    display: none;
}

.r-mobile-menu-wrap {
    padding-right: 40px;
}

.aiz-card-box .cart-btn {
    display: none !important;
}
.product-condition-label,
.product-discount-label {
    z-index: 99;
}

.hummingbird-treeview label,
.hummingbird-treeview input[type=checkbox]{
    cursor: not-allowed!important;
}

.hummingbird-treeview input[type=checkbox]{
    display: none!important;
}

/* Homepage advertise slider */
.advertise-slider-area {
    width: 100%;
    overflow: hidden;
}

.advertise-slider .carousel-box {
    line-height: 0;
}

/* Full width, never cropped: the image keeps its own aspect ratio */
.advertise-slider .advertise-slider-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Show only the first slide until slick has initialised */
.advertise-slider:not(.slick-initialized) > .carousel-box:not(:first-child) {
    display: none;
}

.advertise-slider .slick-dots {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .advertise-slider .slick-arrow {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }

    .advertise-slider.dots-inside-bottom .slick-dots {
        bottom: 2px;
    }
}


/* Floating quick-links (All Categories / Flash Sale / Today's Deal)
   Parked in the bottom-left corner instead of the middle of the left edge,
   where they used to cover section headings and the carousel prev arrows. */
.floating-buttons-section {
    top: auto;
    bottom: 0;
    transform: none;
}

/* The quick-links column occupies the leftmost ~86px, and the carousel arrows
   sit at the very edge. On short screens the column reaches the arrows' height,
   so inset the advertise slider arrows past it. */
@media (min-width: 992px) {
    .advertise-slider .slick-prev {
        left: 100px;
    }

    .advertise-slider .slick-next {
        right: 100px;
    }
}

/* Keep the quick-links translucent so the page shows through them, and bring
   the whole column back to full strength as soon as the pointer is over it.
   Touch screens have no hover, so they keep the buttons fully opaque. */
@media (hover: hover) and (min-width: 992px) {
    .floating-buttons-section .aiz-floating-button {
        opacity: 0.5;
        transition: all 0.8s, opacity 0.25s;
    }

    .floating-buttons-section:hover .aiz-floating-button,
    .floating-buttons-section .aiz-floating-button:hover,
    .floating-buttons-section .aiz-floating-button:focus-within {
        opacity: 1;
    }
}


/* ==========================================================================
   Home featured categories — admin picker (Homepage Settings → tab)
   ========================================================================== */
.hfc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hfc-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 340px;
}

.hfc-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #9da3ae;
    font-size: 16px;
    pointer-events: none;
}

.hfc-search .form-control {
    padding-left: 34px;
}

.hfc-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hfc-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 50em;
    background: #eef2ff;
    color: #4353ff;
    font-size: 12px;
    font-weight: 700;
}

.hfc-tree {
    border: 1px solid #e4e5eb;
    border-radius: 6px;
    max-height: 520px;
    overflow-y: auto;
    background: #fff;
}

.hfc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #f2f3f7;
    transition: background 0.15s;
}

.hfc-item:last-child > .hfc-row {
    border-bottom: 0;
}

.hfc-row:hover {
    background: #fafbfd;
}

/* one indent step per tree level */
.hfc-indent {
    flex: 0 0 auto;
    width: 14px;
    align-self: stretch;
    border-left: 1px solid #e9eaf0;
    margin-left: 7px;
}

.hfc-toggle {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #9da3ae;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.hfc-toggle:hover {
    background: #eef0f5;
    color: #575b6a;
}

.hfc-toggle[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

.hfc-toggle i {
    transition: transform 0.2s;
}

.hfc-toggle-leaf {
    cursor: default;
}

.hfc-thumb {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
    background: #f2f3f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hfc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hfc-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #253d4e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hfc-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 50em;
    background: #f2f3f7;
    color: #9da3ae;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.hfc-switch {
    flex: 0 0 auto;
    margin-left: 4px;
}

/* Smooth open/close: animating grid-template-rows between 0fr and 1fr eases to the
   branch's real height without JS measuring anything. Needs the single
   .hfc-children-inner child to carry the overflow. */
.hfc-children {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hfc-children-inner {
    min-height: 0;
    overflow: hidden;
}

.hfc-children.hfc-collapsed {
    grid-template-rows: 0fr;
}

/* a search forces every branch open so deep matches are reachable */
.hfc-tree.hfc-searching .hfc-children {
    grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
    .hfc-children,
    .hfc-toggle i {
        transition: none;
    }
}

.hfc-empty {
    padding: 24px 14px;
    text-align: center;
    color: #9da3ae;
    font-size: 13px;
}

/* ==========================================================================
   Home featured categories — storefront cards
   ========================================================================== */
.home-featured-categories-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.home-featured-category {
    flex: 0 0 auto;
    width: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 12px;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    background: #fff;
    color: #253d4e;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s, color 0.25s;
}

.home-featured-category:hover,
.home-featured-category:focus {
    color: var(--primary);
    text-decoration: none;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(20, 23, 28, 0.12);
    transform: translateY(-4px);
}

.home-featured-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    padding: 11px;
    border-radius: 14px;
    background: #f6f7fb;
    transition: background 0.25s;
}

.home-featured-category:hover .home-featured-category-icon {
    background: #eef1f8;
}

/* contain, never cover: these icons are illustrations and several are not square */
.home-featured-category-icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.home-featured-category-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    /* two lines reserved so cards keep an even height when a name wraps */
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .home-featured-categories-list {
        gap: 12px;
    }

    .home-featured-category {
        width: 124px;
    }

    .home-featured-category-icon {
        width: 66px;
        height: 66px;
    }
}

@media (max-width: 575px) {
    .home-featured-categories-list {
        gap: 10px;
    }

    .home-featured-category {
        width: 104px;
        gap: 9px;
        padding: 14px 6px;
        border-radius: 10px;
    }

    .home-featured-category-icon {
        width: 54px;
        height: 54px;
        padding: 8px;
        border-radius: 12px;
    }

    .home-featured-category-name {
        font-size: 11.5px;
    }
}

/* --- Product category tree: the "Select Main" radio column ------------------
   Root cause: the project-wide `input[type="checkbox"], input[type="radio"]
   { height:20px; width:20px }` rule near the top of this file, meeting
   `.hummingbird-treeview * { line-height:12px }` from aiz-core.css.

   Each radio is float:right, and a 20px float does not fit a 12px line box.
   An <li> does not contain its own float, so every radio joined one shared
   float stack and was pushed down-and-left out of its row: the circles drifted
   diagonally away from their labels, overlapping and clipping each other.

   Taking the radio out of flow and pinning it to its own row makes the column
   immune to the control's height, so a future change to that 20px rule cannot
   bring the drift back. Sizing it to 14px keeps the circles from touching at
   this row pitch (12px line + 5px li margins).

   li{position:relative} is inert on its own -- it only creates the containing
   block. That matters because the storefront category filter
   (hummingbird-treeview2, resources/views/frontend/product_listing.blade.php)
   renders the same .hummingbird-treeview markup with no radios at all, and
   must not shift. */
.hummingbird-treeview li {
    position: relative;
}

.hummingbird-treeview input[type="radio"] {
    position: absolute;
    top: -1px;
    right: 10px;
    float: none;
    width: 14px;
    height: 14px;
    margin: 0;
}

[dir="rtl"] .hummingbird-treeview input[type="radio"] {
    right: auto;
    left: 10px;
    float: none;
    margin: 0;
}