/* =========================================================================
   StarTech-style header + hero overrides (Muslim Gadget)
   Loaded LAST so it wins. Safe to delete this file + its <link> to revert.
   ========================================================================= */

:root {
    --st-red: #E02C2C;
    --st-red-dark: #B3231D;
    --st-dark: #1B1B1B;
    --st-dark-2: #262626;
    --st-border: #e5e7eb;
    /* keep the app's primary vars in sync in case DB value is empty */
    --web-primary: #E02C2C;
    --web-secondary: #B3231D;
    --web-primary-10: #E02C2C1a;
    --web-primary-20: #E02C2C33;
    --web-primary-40: #E02C2C66;
}

/* ------------------------------------------------------------------ */
/* 1. TOP UTILITY BAR                                                  */
/* ------------------------------------------------------------------ */
.__inline-10 .topbar {
    background-color: var(--st-dark) !important;
    border-bottom: none !important;
}
.__inline-10 .topbar .topbar-link,
.__inline-10 .topbar .topbar-text a,
.__inline-10 .topbar .topbar-text span {
    color: #e5e5e5 !important;
}
.__inline-10 .topbar .topbar-link:hover {
    color: #fff !important;
}
.__inline-10 .topbar .topbar-link i.fa-phone {
    color: var(--st-red) !important;
}

/* ------------------------------------------------------------------ */
/* 2. MAIN HEADER ROW (logo | search | tools)                         */
/* ------------------------------------------------------------------ */
.__inline-10 .navbar-sticky.bg-light {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.__inline-10 .navbar-brand img.__inline-11 {
    max-height: 46px;
    width: auto;
}

/* --- Search bar: big, pill, red button (StarTech signature) --- */
.__inline-10 .search_form {
    width: 100%;
}
.__inline-10 .search-bar-input.form-control {
    height: 46px;
    border: 2px solid var(--st-red) !important;
    border-radius: 6px 0 0 6px !important;
    font-size: 14px;
    padding-left: 18px;
    background-color: #fff;
}
.__inline-10 .search-bar-input.form-control:focus {
    box-shadow: none;
    border-color: var(--st-red) !important;
}
.__inline-10 .search_form .d-flex.align-items-center.gap-2 {
    gap: 0 !important;
}
.__inline-10 .search_button {
    background-color: var(--st-red) !important;
    height: 46px;
    min-width: 64px;
    border-radius: 0 6px 6px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}
.__inline-10 .search_button:hover {
    background-color: var(--st-red-dark) !important;
}
.__inline-10 .search_button .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 14px;
}

/* --- Tool icons (wishlist / account / cart) --- */
.__inline-10 .navbar-tool-icon-box.bg-secondary {
    background-color: #f4f5f7 !important;
    color: var(--st-dark) !important;
    border-radius: 8px;
}
.__inline-10 .navbar-tool-icon-box.bg-secondary:hover {
    background-color: var(--st-red) !important;
    color: #fff !important;
}
.__inline-10 .navbar-tool-label {
    background-color: var(--st-red) !important;
}
.__inline-10 .navbar-tool-text small {
    color: #6b7280;
}

/* ------------------------------------------------------------------ */
/* 3. MAIN MENU STRIP  ->  WHITE category bar (StarTech look)          */
/* ------------------------------------------------------------------ */
.__inline-10 .navbar-stuck-menu {
    background-color: #ffffff !important;
    border-top: 3px solid var(--st-red);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* On desktop the categories ARE the menu, so hide the old
   "Categories" toggle button + its hover mega panel. */
@media (min-width: 992px) {
    .__inline-10 .navbar-stuck-menu .__mega-nav,
    .__inline-10 .navbar-stuck-menu .mega-nav1,
    .__inline-10 .megamenu-wrap {
        display: none !important;
    }
}

/* Links on the white bar: dark text, red hover/active. Compact = single line. */
.__inline-10 .navbar-stuck-menu .navbar-nav .nav-link,
.__inline-10 .navbar-stuck-menu .navbar-nav .nav-item > button {
    color: #24303f !important;
    font-weight: 600 !important;
    font-size: 13px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.__inline-10 .navbar-stuck-menu .navbar-nav .nav-item.active > .nav-link,
.__inline-10 .navbar-stuck-menu .navbar-nav .nav-link:hover,
.__inline-10 .navbar-stuck-menu .navbar-nav .nav-item > button:hover {
    color: var(--st-red) !important;
    opacity: 1 !important;
}

/* --- Horizontal category list: one tight row --- */
.__inline-10 .st-category-nav {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    width: 100%;
    justify-content: space-between;
}
.__inline-10 .st-cat-nav-item {
    position: relative;             /* dropdown anchors under the item */
}
.__inline-10 .st-cat-nav-item > .nav-link {
    position: relative;
    white-space: nowrap;
}
/* red underline on hover/active */
/* (no red underline on hover — red text only) */

/* --- Level 2: vertical dropdown of sub-categories --- */
.__inline-10 .st-cat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 235px;
    background: #fff;
    border: 1px solid var(--st-border);
    border-top: 3px solid var(--st-red);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    display: none;
}
.__inline-10 .st-cat-nav-item:hover > .st-cat-dropdown {
    display: block;
}
.__inline-10 .st-cat-sub-item {
    position: relative;
}
.__inline-10 .st-cat-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px;
    font-size: 13px;
    color: #2b2b2b;
    white-space: nowrap;
}
.__inline-10 .st-cat-sub-item:hover > .st-cat-sub-link {
    background: #f6f7f9;
    color: var(--st-red);
}
.__inline-10 .st-cat-caret {
    font-size: 10px;
    color: #9aa4af;
}
.__inline-10 .st-cat-sub-item:hover > .st-cat-sub-link .st-cat-caret {
    color: var(--st-red);
}

/* --- Level 3: flyout to the right --- */
.__inline-10 .st-cat-flyout {
    position: absolute;
    top: -3px;
    left: 100%;
    z-index: 1001;
    min-width: 215px;
    max-height: 380px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--st-border);
    border-top: 3px solid var(--st-red);
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    display: none;
}
.__inline-10 .st-cat-sub-item:hover > .st-cat-flyout {
    display: block;
}
.__inline-10 .st-cat-flyout-link {
    display: block;
    padding: 8px 18px;
    font-size: 12.5px;
    color: #5b6570;
    white-space: nowrap;
}
.__inline-10 .st-cat-flyout-link:hover {
    background: #f6f7f9;
    color: var(--st-red);
}

/* If a right flyout would overflow the viewport, flip it to the left */
.__inline-10 .st-cat-nav-item:last-child .st-cat-flyout,
.__inline-10 .st-cat-nav-item:nth-last-child(2) .st-cat-flyout {
    left: auto;
    right: 100%;
    border-radius: 6px 0 6px 6px;
}

/* ------------------------------------------------------------------ */
/* 4. HERO SECTION (category card | slider)                           */
/* ------------------------------------------------------------------ */
/* Category panel on the left of the hero -> solid StarTech card */
.__top-slider-cate .category-menu-wrap .category-menu {
    margin-top: 0 !important;
    border: 1px solid var(--st-border) !important;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    padding-top: 0 !important;
    max-height: none;
    overflow: visible;
}
/* Red header strip on top of the category card */
.__top-slider-cate .category-menu-wrap .category-menu::before {
    content: attr(data-label);
    display: block;
    background-color: var(--st-red);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 15px;
    margin: 0 -10px 4px -15px;
    border-radius: 8px 8px 0 0;
    letter-spacing: .2px;
}
.__top-slider-cate .category-menu-wrap .category-menu > li > a {
    font-size: 13.5px;
    color: #2b2b2b;
}
.__top-slider-cate .category-menu-wrap .category-menu > li > a:hover {
    color: var(--st-red);
}
.__top-slider-cate .category-menu-wrap .category-menu > li > a:hover i {
    color: var(--st-red);
}

/* Slider: rounded corners + subtle shadow to match the card */
.__top-slider-images .__slide-img {
    border-radius: 8px;
}
.hero-slider {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Slider arrows in StarTech red */
.hero-slider.owl-theme .owl-nav [class*="owl-"] {
    background-color: rgba(224, 44, 44, 0.9) !important;
    color: #fff !important;
    border-color: var(--st-red) !important;
}

/* Section titles / "view all" links pick up the red primary */
.feature-product-title,
.arrival-title .text-capitalize {
    color: var(--st-red) !important;
}

/* ------------------------------------------------------------------ */
/* 5. RESPONSIVE                                                       */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* Mobile uses the existing collapsible category dropdown (mega-nav1),
       so hide the inline horizontal category items to avoid duplication. */
    .__inline-10 .st-cat-nav-item {
        display: none !important;
    }
    .__inline-10 .search-bar-input.form-control {
        border-radius: 6px 0 0 6px !important;
    }
}

/* ================================================================== */
/* 6. LAYOUT CLEANUP TWEAKS (per client request)                      */
/* ================================================================== */

/* 6.1 Remove the black top utility bar (phone + language) */
.__inline-10 .topbar {
    display: none !important;
}

/* 6.2 Remove the "My cart / price" text next to the cart icon
       (keep the cart icon itself) */
#cart_items .navbar-tool-text {
    display: none !important;
}

/* 6.3 Sticky CATEGORY nav bar on scroll.
   The theme adds .navbar-stuck (position:fixed) to the header past 200px.
   We pin the header, then HIDE the logo/search row so that only the
   bottom category bar (with all the categories) stays stuck at the top.
   On scroll back up it stays pinned; at the very top everything shows. */
.__inline-10 .navbar-sticky.navbar-stuck {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Desktop only: hide the logo/search/tools row while stuck so just the
   category bar remains. (On mobile the hamburger lives in that row, so we
   keep the full header pinned there.) */
@media (min-width: 992px) {
    .__inline-10 .navbar-sticky.navbar-stuck > .navbar.navbar-light {
        display: none !important;
    }
    /* The base theme HIDES the category bar when stuck (theme.css:
       ".navbar-stuck .navbar-stuck-menu{display:none}", shows only on
       hamburger toggle). Force it visible so it stays pinned on scroll. */
    .__inline-10 .navbar-sticky.navbar-stuck .navbar-stuck-menu {
        display: block !important;
    }
    .__inline-10 .navbar-sticky.navbar-stuck .navbar-stuck-menu .navbar-collapse {
        display: flex !important;
    }
    /* the theme padded <body> by the full header height; while stuck only
       the short category bar shows, so shrink the padding to match.
       :has() + !important overrides the theme's inline body padding. */
    body:has(.navbar-sticky.navbar-stuck) {
        padding-top: 54px !important;
    }
}

/* 6.4 Remove the always-floating WhatsApp button */
.__floating-btn,
.wa-widget-send-button {
    display: none !important;
}

/* 6.5 Hero image: full width (category sidebar removed), balanced sides,
       shorter top-to-bottom. The base theme reserved 254px on the side for
       the (now removed) category column and forced a taller height at
       >=1280px, so we override those here. */
.__top-slider-images {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media (min-width: 768px) {
    .__top-slider-images .__slide-img {
        height: 280px !important;
        max-height: 280px !important;
        object-fit: cover !important;
    }
}
@media (min-width: 992px) {
    .__top-slider-images .__slide-img {
        height: 300px !important;
        max-height: 300px !important;
    }
}
/* kill the 254px side reservation + tall-height override from the base theme */
@media (min-width: 1280px) {
    .__top-slider-images {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .__top-slider-images .__slide-img {
        height: 310px !important;
        max-height: 310px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* 6.6 Reduce the big empty gutters on the left/right of the whole site
       by widening the container */
@media (min-width: 1200px) {
    .__inline-10 .container,
    .__inline-61 .container,
    footer .container,
    .container {
        max-width: 1400px;
    }
}

/* ================================================================== */
/* 7. CATEGORY / PRODUCT LISTING PAGE — StarTech-style cards           */
/* ================================================================== */

/* Listing page header (title + sort) as a white card strip */
.search-page-header {
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.search-page-header h5 {
    color: #1b2d46;
    font-weight: 700;
}
.view-page-item-count {
    color: var(--st-red);
    font-weight: 700;
}

/* --- Product card --- */
.st-filter-card.product-single-hover.style--card {
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease;
    overflow: visible;
}
/* hover: subtle shadow only — no red border, no lift (StarTech) */
.st-filter-card.product-single-hover.style--card:hover {
    border-color: var(--st-border) !important;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.10);
    transform: none !important;
}
.st-filter-card .overflow-hidden {
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* round only the image area (card no longer clips its children) */
.st-filter-card .inline_product {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border: none !important;
}
/* remove the hover "eye"/quick-view overlay on the image */
.st-filter-card .quick-view { display: none !important; }
.st-filter-card:hover .inline_product { border-color: transparent !important; }
/* image */
.st-filter-card .inline_product img {
    height: 190px;
    object-fit: contain;
    width: 100%;
    mix-blend-mode: multiply;
}
/* discount badge -> red pill top-left */
.st-filter-card .for-discount-value {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: var(--st-red);
    color: #fff;
    border-radius: 4px;
}
/* details block: left aligned like StarTech */
.st-filter-card .single-product-details {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}
.st-filter-card .single-product-details .rating-show,
.st-filter-card .single-product-details > div {
    text-align: left !important;
    justify-content: flex-start !important;
}
.st-filter-card .single-product-details > .text-center > a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden;
    text-align: left;
    color: #1455ac;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 36px;
}
.st-filter-card .single-product-details > .text-center > a:hover {
    color: var(--st-red);
}
/* StarTech-style spec bullets under the title */
.st-filter-card .st-spec-list {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0;
    text-align: left;
}
.st-filter-card .st-spec-list li {
    position: relative;
    padding-left: 12px;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-filter-card .st-spec-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--st-red);
}
.st-filter-card .st-spec-list .st-spec-key {
    color: #374151;
    font-weight: 600;
}
.st-filter-card .product-price {
    justify-content: flex-start !important;
    margin-top: 4px;
}
/* push the price + buttons group to the bottom (spec list flexes) */
.st-filter-card .st-spec-list { margin-bottom: auto !important; }
.st-filter-card .st-price {
    color: var(--st-red) !important;
    font-weight: 700;
    font-size: 16px;
}
.st-filter-card .category-single-product-price {
    color: #9aa4af;
    font-size: 12.5px;
}

/* Buy Now button (added in the card partial).
   Strong selector + !important to beat the theme's
   ".single-product-details a { display:-webkit-box; -webkit-line-clamp:1 }". */
.st-filter-card .single-product-details a.st-buy-now-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    text-align: center;
    background: #eef2f7;
    color: #1455ac !important;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    padding: 9px 10px;
    border-radius: 6px;
    margin-top: 10px;
    overflow: visible;
    transition: background-color .2s ease, color .2s ease;
}
.st-filter-card .single-product-details a.st-buy-now-btn:hover {
    background: var(--st-red);
    color: #fff !important;
}
.st-filter-card .st-buy-now-btn i { font-size: 14px; }

/* purple "Save: X" badge (StarTech) */
.st-filter-card .st-save-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: #7c3aed;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 4px;
    white-space: nowrap;
}

/* "Add to Compare" link under Buy Now */
.st-filter-card .single-product-details a.st-add-compare {
    display: flex !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    color: #6b7280 !important;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    overflow: visible;
}
.st-filter-card .single-product-details a.st-add-compare:hover { color: var(--st-red) !important; }
.st-filter-card .single-product-details a.st-add-compare.active { color: var(--st-red) !important; }

/* Filter sidebar: clean white card look */
.left-filter-panel,
.web-filter,
.filter-widget,
.side-filter {
    background: #fff;
}

/* Pagination active in red (page already sets var(--web-primary)=red) */
.page-item.active .page-link {
    background-color: var(--st-red) !important;
    border-color: var(--st-red) !important;
}

/* Category listing sidebar: hide the redundant category tree
   (categories now appear as pills at the top, StarTech-style). */
.__search-sidebar .__cate-side-arrordion {
    display: none !important;
}

/* Category page: products-per-row control + grid override */
.st-cols-toggle {
    display: inline-flex;
    border: 1px solid var(--st-border);
    border-radius: 6px;
    overflow: hidden;
}
.st-cols-toggle .st-cols-btn {
    border: none;
    background: #fff;
    color: #6b7280;
    width: 34px;
    height: 32px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-left: 1px solid var(--st-border);
}
.st-cols-toggle .st-cols-btn:first-child {
    border-left: none;
}
.st-cols-toggle .st-cols-btn.active,
.st-cols-toggle .st-cols-btn:hover {
    background: var(--st-red);
    color: #fff;
}
/* override the product column widths on lg+ per selected density */
@media (min-width: 992px) {
    #ajax-products.st-cols-2 > [class*="col-"]:not(.col-12) { flex: 0 0 50%; max-width: 50%; }
    #ajax-products.st-cols-3 > [class*="col-"]:not(.col-12) { flex: 0 0 33.3333%; max-width: 33.3333%; }
    #ajax-products.st-cols-4 > [class*="col-"]:not(.col-12) { flex: 0 0 25%; max-width: 25%; }
    #ajax-products.st-cols-5 > [class*="col-"]:not(.col-12) { flex: 0 0 20%; max-width: 20%; }
}

/* Category page: top toolbar (Show + Sort) */
.st-toolbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.st-show-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.st-show-item .for-sorting {
    margin: 0;
    opacity: .75;
}
.st-per-page-select {
    border: 1px solid var(--st-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.st-per-page-select:focus {
    outline: none;
    border-color: var(--st-red);
}

/* Results bar sitting above the products column (StarTech layout) */
.st-results-bar {
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 13px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.st-results-bar h5 {
    font-size: 18px;
    text-transform: capitalize;
    color: #1f2937;
}
.st-results-bar .view-page-item-count {
    color: var(--st-red);
    font-weight: 700;
}
@media (min-width: 992px) {
    /* drop the old "Filter / Choose" area so Price sits at the top of the sidebar */
    #shop-sidebar > .pb-0 { display: none; }
}

/* Category page: breadcrumb */
.st-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 14px;
}
.st-breadcrumb a {
    color: var(--st-red);
    font-weight: 600;
}
.st-breadcrumb .st-bc-sep {
    color: #c4c9d0;
}
.st-breadcrumb .st-bc-current {
    color: #374151;
    text-transform: capitalize;
}

/* Category page: title + description */
.st-cat-head {
    margin-bottom: 14px;
}
.st-cat-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f5fbf;
    margin: 0 0 6px;
    text-transform: capitalize;
}
.st-cat-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #5b6570;
    margin: 0;
    max-width: 1000px;
}

/* Category page: sub-category pills */
.st-subcat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.st-subcat-pills .st-pill {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--st-border);
    border-radius: 30px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all .18s ease;
}
.st-subcat-pills .st-pill:hover {
    border-color: var(--st-red);
    color: var(--st-red);
    box-shadow: 0 2px 8px rgba(224, 44, 44, 0.12);
}

/* Sidebar: collapsible accordion facet groups */
.st-facet-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    border-top: 1px solid #eef0f2;
    padding: 12px 6px;
    font-size: 14px;
    font-weight: 600;
    color: #24303f;
    cursor: pointer;
    text-transform: capitalize;
}
.st-facet-head:hover {
    color: var(--st-red);
}
.st-facet-caret {
    font-size: 15px;
    color: #9aa4af;
    transition: transform .2s ease;
}
/* closed = chevron points down; open = points up */
.st-accordion:not(.st-collapsed) .st-facet-caret {
    transform: rotate(180deg);
    color: var(--st-red);
}
.st-accordion.st-collapsed .st-facet-body {
    display: none;
}

/* Left sidebar spec facet filters (StarTech-style) */
.st-facet-group {
    margin-bottom: 0;
}

/* ---- StarTech-style filter sidebar: each section is its own white card ---- */
.__search-sidebar #shop-sidebar { background: transparent; }
.st-filter-section,
.__search-sidebar .st-facet-group.st-accordion {
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
/* accordion head as a clean card header */
.__search-sidebar .st-facet-head {
    border-top: none !important;
    padding: 13px 16px;
    font-size: 14.5px;
}
/* section titles left-aligned & bold (Price Range, etc.) */
.st-price-box .__cate-side-title {
    text-align: left !important;
    padding: 13px 16px 4px !important;
    border: none !important;
}
.st-price-box .__cate-side-title .widget-title {
    font-size: 15px;
    font-weight: 700;
    color: #24303f;
}
.st-price-box .st-price-inputs {
    padding: 0 16px 14px;
    gap: 10px;
}
.st-price-box .__w-45p { width: 47%; }
.st-price-box .st-price-inputs input {
    height: 34px;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    font-size: 13px;
}

/* red noUiSlider to match StarTech */
#st-price-slider {
    height: 6px;
    margin: 20px 18px 16px;
    border: none;
    box-shadow: none;
    background: #e9ecef;
}
#st-price-slider .noUi-connect { background: var(--st-red); }
#st-price-slider .noUi-handle {
    width: 18px;
    height: 18px;
    right: -9px;
    top: -6px;
    border: 3px solid var(--st-red);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
}
#st-price-slider .noUi-handle:active { cursor: grabbing; }
#st-price-slider .noUi-handle::before,
#st-price-slider .noUi-handle::after { display: none; }
#st-price-slider .noUi-handle:focus { outline: none; }
.st-facet-list {
    list-style: none;
    margin: 0 0 4px;
    padding: 4px 6px 0;
    max-height: 190px;
    overflow-y: auto;
    text-align: left;
}
.st-facet-list li {
    margin: 0;
}
.st-facet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    margin: 0;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    border-radius: 4px;
}
.st-facet-item:hover {
    background: #f6f7f9;
    color: var(--st-red);
}
.st-facet-item input[type="checkbox"] {
    accent-color: var(--st-red);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.st-facet-item .st-facet-name {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-facet-item .st-facet-count {
    font-size: 11px;
    color: #9aa4af;
    background: #eef1f4;
    border-radius: 10px;
    padding: 1px 7px;
}

/* Product details: StarTech-style tabs (Specification / Description / Questions / Reviews) */
.st-detail-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin-bottom: 18px !important;
}
.st-detail-tabs .nav-item { margin: 0; }
.st-detail-tabs .st-detail-tab {
    border: 1px solid var(--st-border) !important;
    border-radius: 8px !important;
    background: #fff;
    color: #374151 !important;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 20px !important;
    transition: all .18s ease;
}
.st-detail-tabs .st-detail-tab:hover {
    border-color: var(--st-red) !important;
    color: var(--st-red) !important;
}
.st-detail-tabs .st-detail-tab.active {
    background: var(--st-red) !important;
    border-color: var(--st-red) !important;
    color: #fff !important;
}

/* StarTech-style specification table with group header */
.st-spec-wrap {
    border: 1px solid var(--st-border);
    border-radius: 8px;
    overflow: hidden;
}
.st-spec-group-head {
    background: #eef2f8;
    color: #1f5fbf;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 18px;
    text-transform: capitalize;
}
.st-spec-table {
    margin: 0;
}
.st-spec-table tr { border-bottom: 1px solid #eef0f2; }
.st-spec-table tr:last-child { border-bottom: none; }
.st-spec-table th.st-spec-th {
    width: 32%;
    background: transparent;
    color: #7a8494;
    font-weight: 500;
    font-size: 13.5px;
    padding: 12px 18px;
    vertical-align: top;
    border: none;
}
.st-spec-table td {
    font-size: 13.5px;
    color: #24303f;
    font-weight: 500;
    padding: 12px 18px;
    vertical-align: top;
    border: none;
}

/* Product details: Q&A tab */
.st-qa-ask {
    background: #f7f8fa;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.st-qa-title { font-size: 15px; font-weight: 700; color: #1f2937; margin-bottom: 10px; }
.st-qa-list { list-style: none; margin: 0; padding: 0; }
.st-qa-item {
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.st-qa-q, .st-qa-a { display: flex; gap: 10px; align-items: flex-start; }
.st-qa-a { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.st-qa-badge {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
}
.st-qa-badge-q { background: #1f5fbf; }
.st-qa-badge-a { background: var(--st-red); }
.st-qa-text { font-size: 13.5px; color: #24303f; line-height: 1.6; }
.st-qa-meta { font-size: 11.5px; color: #9aa4af; margin-top: 3px; }

/* ================================================================== */
/* 7. MOBILE RESPONSIVE (StarTech-style)                              */
/* ================================================================== */
/* ---- StarTech-style MOBILE HEADER: hamburger + logo + icons on row 1,
       full-width always-visible search on row 2 (not a slide-down overlay) ---- */
@media (max-width: 991px) {
    .__inline-10 .mobile-head .navbar.navbar-light > .container {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
        column-gap: 6px;
    }
    /* logo stays compact on the top row */
    .__inline-10 .navbar-brand.d-sm-none { margin: 0 auto 0 6px; }
    .__inline-10 .mobile-logo-img { max-height: 34px; width: auto; }

    /* Mobile search: hidden by default, opens as a full-width bar just BELOW
       the header when the search icon is tapped (toggles .active). */
    .__inline-10 .search-form-mobile {
        position: static !important;
        transform: none !important;
        order: 9;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: auto !important;
    }
    .__inline-10 .search-form-mobile:not(.active) { display: none !important; transform: none !important; }
    .__inline-10 .search-form-mobile.active { display: block !important; padding-top: 4px !important; }
    .__inline-10 .search-form-mobile .search_form { width: 100%; }
    .__inline-10 .search-form-mobile .search_form > .d-flex { width: 100%; gap: 0 !important; }
    .__inline-10 .search-form-mobile .search-bar-input { flex: 1 1 auto; width: 100%; }
    .__inline-10 .search-form-mobile .search_button {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .__inline-10 .close-search-form-mobile { display: inline-block !important; }

    /* Right-side header icons: keep SEARCH icon + CART only.
       Hide the redundant "expand menu" toggler, wishlist and account
       (account/wishlist move to the bottom app nav). */
    .__inline-10 .navbar-stuck-toggler { display: none !important; }
    .__inline-10 .open-search-form-mobile { display: flex !important; order: 7; }
    .__inline-10 #cart_items { order: 8; }
    /* account dropdown = direct .dropdown child of the toolbar (not .navbar-tool) */
    .__inline-10 .navbar-toolbar > .dropdown:not(.navbar-tool) { display: none !important; }

    /* hide the theme's old nested "Categories" dropdown (we use our accordion) */
    .__inline-10 .mega-nav1 { display: none !important; }

    /* hide the theme's old nested "Categories" dropdown (we use our accordion) */
    .__inline-10 .mega-nav1 { display: none !important; }
}

/* ---- Mobile category drawer: slide in from the LEFT with a clean
       StarTech-style accordion (tap to expand sub / sub-sub) ---- */
@media (max-width: 767px) {
    .__inline-10 #navbarCollapse {
        left: 0 !important;
        right: auto !important;
        max-width: 320px !important;
        width: 88% !important;
        padding: 0 !important;
        display: block !important;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
    }
    .__inline-10 #navbarCollapse.show {
        transform: translateX(0);
    }
    /* close (X) button row */
    .__inline-10 #navbarCollapse > .w-100.d-md-none {
        display: flex !important;
        justify-content: flex-end;
        padding: 12px 14px 4px;
    }

    .st-mobile-cats { margin: 0 0 6px; }
    .st-mobile-cats-title {
        background: var(--st-red);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        padding: 11px 16px;
        text-transform: capitalize;
    }
    .st-mcat-list, .st-msub { list-style: none; margin: 0; padding: 0; }
    .st-mcat { border-bottom: 1px solid #eef0f2; }
    .st-mcat-row { display: flex; align-items: center; }
    .st-mcat-link {
        flex: 1 1 auto;
        display: block;
        padding: 11px 16px;
        color: #24303f;
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
    }
    .st-mcat-link:hover, .st-mcat-link:focus { color: var(--st-red); }
    .st-mcat-toggle {
        background: none;
        border: none;
        border-left: 1px solid #eef0f2;
        padding: 10px 15px;
        color: #9aa4af;
        cursor: pointer;
        align-self: stretch;
    }
    .st-mcat-toggle i { transition: transform .2s ease; display: inline-block; font-size: 12px; }
    .st-mcat.open > .st-mcat-row .st-mcat-toggle i { transform: rotate(180deg); color: var(--st-red); }

    /* nested levels */
    .st-msub { display: none; background: #f7f8fa; }
    .st-mcat.open > .st-msub { display: block; }
    .st-msub .st-mcat-link { padding-left: 30px; font-weight: 400; font-size: 13.5px; color: #45505d; }
    .st-msub .st-msub { background: #f0f2f5; }
    .st-msub .st-msub .st-mcat-link { padding-left: 46px; font-size: 13px; color: #5b6570; }
    .st-msub .st-mcat { border-bottom: 1px solid #edeff2; }

    /* drawer shows ONLY the category accordion — hide Home/Brand/Vendor etc. */
    .__inline-10 #navbarCollapse > .navbar-nav,
    .__inline-10 #navbarCollapse .logout-btn { display: none !important; }

    /* dark backdrop behind the drawer; tap to close (toggled by JS) */
    .st-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease;
    }
    .st-drawer-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ---- Mobile app-style bottom navigation ---- */
.st-bottom-nav { display: none; }
@media (max-width: 767px) {
    body { padding-bottom: 60px; }
    .st-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        height: 58px;
        background: #fff;
        border-top: 1px solid #e8eaed;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
    }
    .st-bottom-nav > a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        position: relative;
        color: #6b7280;
        font-size: 10.5px;
        font-weight: 500;
        text-decoration: none;
        text-transform: capitalize;
    }
    .st-bottom-nav > a i { font-size: 18px; line-height: 1; }
    .st-bottom-nav > a.active,
    .st-bottom-nav > a:hover { color: var(--st-red); }
    .st-bottom-nav .st-bn-badge {
        position: absolute;
        top: 5px;
        left: calc(50% + 4px);
        background: var(--st-red);
        color: #fff;
        font-size: 9px;
        line-height: 15px;
        min-width: 15px;
        height: 15px;
        border-radius: 10px;
        text-align: center;
        padding: 0 3px;
    }

    /* category header sizing */
    .st-cat-title { font-size: 20px; }
    .st-cat-desc { font-size: 12.5px; }
    .st-breadcrumb { padding: 9px 13px; font-size: 12.5px; margin-bottom: 10px; }

    /* sub-category / brand pills -> horizontal scroll strip (like StarTech mobile) */
    .st-subcat-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .st-subcat-pills .st-pill { flex: 0 0 auto; }

    /* facet accordions taller inside the mobile off-canvas filter */
    .st-facet-list { max-height: 240px; }
}

@media (max-width: 767px) {
    /* 2 products per row (StarTech mobile); tighten gutters */
    #ajax-products > [class*="col-"]:not(.col-12) { padding-left: 6px; padding-right: 6px; }

    /* product card tuned for the narrow 2-col mobile layout */
    .st-filter-card .inline_product img { height: 140px; }
    .st-filter-card .single-product-details { padding: 4px 8px 10px; gap: 4px; }
    .st-filter-card .single-product-details > .text-center > a { font-size: 12.5px; min-height: 32px; }
    .st-filter-card .st-spec-list li { font-size: 10.5px; padding-left: 11px; }
    .st-filter-card .st-spec-list li::before { top: 7px; }
    .st-filter-card .st-price { font-size: 14px; }
    .st-filter-card .category-single-product-price { font-size: 11px; }
    .st-filter-card .single-product-details a.st-buy-now-btn { font-size: 12.5px; padding: 8px; margin-top: 8px; }

    /* discount badge smaller */
    .st-filter-card .for-discount-value { font-size: 11px; }
}

@media (max-width: 400px) {
    .st-cat-title { font-size: 18px; }
    .st-filter-card .inline_product img { height: 120px; }
    .st-filter-card .single-product-details > .text-center > a { font-size: 12px; }
}