/*
Theme Name: Yobazar Child
Theme URI: https://demo.theme-sky.com/yobazar/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: yobazar
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: yobazar-child
*/

/* Global fix for full-width elements */
body {
    overflow-x: hidden;
}

/* Header Component Z-Index Fix - ensure it stays below offcanvas sidebars */
.offslime-header-component {
    position: relative !important;
    z-index: 1000 !important; /* High, but lower than offcanvas */
}

/* Filter Offcanvas UI Cleanup */
#ts-filter-widget-area.ts-floating-sidebar .ts-header-search,
#ts-filter-widget-area.ts-floating-sidebar .my-account-wrapper,
#ts-filter-widget-area.ts-floating-sidebar .ts-wishlist-container,
#ts-filter-widget-area.ts-floating-sidebar .ts-tiny-cart-wrapper,
#ts-filter-widget-area.ts-floating-sidebar .header-container,
#ts-filter-widget-area.ts-floating-sidebar .search-button,
#ts-filter-widget-area.ts-floating-sidebar .shopping-cart,
#ts-filter-widget-area.ts-floating-sidebar .wishlist,
#ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content > .header-container,
#ts-filter-widget-area.ts-floating-sidebar .close > * {
    display: none !important;
}

#ts-filter-widget-area.ts-floating-sidebar h3.sidebar-title {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Filter Offcanvas Z-Index Fix */
#ts-filter-widget-area.ts-floating-sidebar,
#ts-filter-widget-area.ts-floating-sidebar .ts-sidebar-content {
    z-index: 1500 !important;
}

.ts-floating-sidebar-overlay {
    z-index: 1499 !important;
}

@media only screen and (max-width: 1279px) {
    #main-content #ts-filter-widget-area .ts-sidebar-content {
        z-index: 1500 !important;
    }
    
    #ts-filter-widget-area.active .ts-sidebar-content {
        transform: translateX(0) !important;
        visibility: visible !important;
        z-index: 1500 !important;
    }
}

/* =============================================
   SHOP HERO HEADER
   ============================================= */

.breadcrumb-title-wrapper.offslime-shop-hero {
    background-size: cover !important;
    background-position: 65% center !important;
    background-repeat: no-repeat !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    /* Full-bleed stretch */
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

/* Add spacing below hero on Cart, Checkout, Single Product, and Blog pages */
.woocommerce-cart .breadcrumb-title-wrapper.offslime-shop-hero,
.woocommerce-checkout .breadcrumb-title-wrapper.offslime-shop-hero,
.single-product .breadcrumb-title-wrapper.offslime-shop-hero,
.blog .breadcrumb-title-wrapper.offslime-shop-hero,
.single-post .breadcrumb-title-wrapper.offslime-shop-hero,
.offslime-wishlist-hero,
.archive:not(.post-type-archive-product):not(.tax-product_cat):not(.tax-product_tag) .breadcrumb-title-wrapper.offslime-shop-hero {
    margin-bottom: 50px !important;
}

/* Gradient: dark on the left for text legibility, clears on right so models show */
.breadcrumb-title-wrapper.offslime-shop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.50) 35%,
        rgba(0, 0, 0, 0.18) 65%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}

/* =============================================
   HERO CONTENT — left-aligned inside 1200px block
   ============================================= */

.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumb-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding: 0 30px;
}

/* Override theme's column-reverse → title first, breadcrumb below */
.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumb-title {
    flex-flow: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

/* Page title */
.breadcrumb-title-wrapper.offslime-shop-hero h1.page-title {
    color: #ffffff !important;
    font-size: 30px !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 4px !important;
    text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.60) !important;
    line-height: 1.1 !important;
    font-family: 'Poppins', sans-serif !important;
    max-width: none !important;
    padding-right: 0 !important;
    display: block !important;
}

/* Breadcrumb trail */
.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
}

.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs,
.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs span,
.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs a,
.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs .brn_arrow {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs a {
    transition: opacity 0.2s ease;
    opacity: 0.80;
}

.breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs a:hover {
    color: #fff !important;
    opacity: 1;
    text-decoration: underline !important;
}

/* =============================================
   FILTER TOOLBAR — Modernized
   ============================================= */

.woocommerce.archive .before-loop-wrapper {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 12px 18px !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* Filter toggle button */
.filter-widget-area-button {
    flex-shrink: 0;
}

.filter-widget-area-button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 18px !important;
    background: #111 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.filter-widget-area-button a:hover,
.filter-widget-area-button a.active {
    background: #61CE70 !important;
    color: #fff !important;
}

.filter-widget-area-button a::before {
    content: "";
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
}

/* Grid view buttons */
.ts-products-header .ts-loop-layout-buttons,
.before-loop-wrapper .ts-loop-layout-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}

.ts-products-header .ts-loop-layout-buttons a,
.before-loop-wrapper .ts-loop-layout-buttons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    color: #bbb !important;
    transition: all 0.2s ease !important;
}

.ts-products-header .ts-loop-layout-buttons a:hover,
.before-loop-wrapper .ts-loop-layout-buttons a:hover,
.ts-products-header .ts-loop-layout-buttons a.active,
.before-loop-wrapper .ts-loop-layout-buttons a.active {
    background: #111 !important;
    color: #fff !important;
}

/* Sort/per-page dropdowns */
.woocommerce.archive .before-loop-wrapper .woocommerce-ordering {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* =============================================
   FILTER PANEL — Fixed overlay drawer (desktop + mobile)
   ============================================= */

/* Reset ALL parent conflicting styles for the filter panel */
#ts-filter-widget-area {
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    float: none !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    overflow: visible !important;
}

/* The actual sliding panel lives inside .ts-sidebar-content */
#ts-filter-widget-area .ts-sidebar-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: 310px !important;
    max-width: 88vw !important;
    height: 100% !important;
    background: #fff !important;
    z-index: 15000 !important;
    transform: translateX(-100%) !important; /* Fixed: use -100% to hide completely regardless of width */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    box-shadow: 6px 0 40px rgba(0,0,0,0.18) !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: hidden !important; /* Fixed: hidden by default */
}

/* Admin bar offset */
.admin-bar #ts-filter-widget-area .ts-sidebar-content {
    top: 32px !important;
}

#ts-filter-widget-area.active .ts-sidebar-content {
    transform: translateX(0) !important;
    visibility: visible !important; /* Fixed: visible when active */
}

/* Panel header — "FILTERS" title + close button */
#ts-filter-widget-area .close {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 22px !important;
    height: 64px !important;
    min-height: 64px !important;
    background: #111111 !important; /* Solid black-grey */
    background-color: #111111 !important;
    cursor: pointer !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important; /* Adjusted to 1500 */
    flex-shrink: 0 !important;
    border-bottom: 2px solid #61CE70 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Ensure it catches all clicks */
    /* reset parent theme's absolute positioning */
    transform: none !important;
    right: auto !important;
    border-radius: 0 !important;
    transition: none !important;
}

#ts-filter-widget-area .close::before {
    content: "FILTERS" !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #61CE70 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    display: block !important;
}

#ts-filter-widget-area .close::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    font-size: 0 !important;
}

/* Scrollable widget content */
#ts-filter-widget-area .ts-sidebar-content .filter-widget-area {
    padding: 24px 22px !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

/* Overlay — covers the right side of screen when filter is open */
#ts-filter-widget-area .overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 310px !important;
    right: 0 !important;
    width: auto !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 1499 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
}

#ts-filter-widget-area.active .overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Body scroll lock when filter panel is open */
body.offslime-filter-open {
    overflow: hidden !important;
}

/* Hide any previously injected desktop-close div (superseded by .close span) */
#ts-filter-widget-area .offslime-filter-close-desktop {
    display: none !important;
}

/* Prevent product grid push on all screens — we use overlay approach */
.woocommerce.archive #main-content.show-filter-sidebar #primary > *:not(.before-loop-wrapper) {
    transform: none !important;
    max-width: 100% !important;
}

/* Widget styling inside filter */
#ts-filter-widget-area .widget {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-top: 20px !important;
}

#ts-filter-widget-area .widget:first-child {
    margin-top: 0 !important;
}

#ts-filter-widget-area .widget:last-child {
    border-bottom: none !important;
}

#ts-filter-widget-area .widget .widgettitle,
#ts-filter-widget-area .widget-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #111 !important;
    margin-bottom: 14px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Mobile: prevent content shift + adjust panel/overlay widths */
@media (max-width: 767px) {
    .woocommerce.archive #main-content.show-filter-sidebar #primary > *:not(.before-loop-wrapper) {
        transform: none !important;
        max-width: 100% !important;
    }
    /* On mobile the panel is 88vw */
    #ts-filter-widget-area .ts-sidebar-content {
        width: 88vw !important;
        max-width: 88vw !important;
    }
    /* Overlay starts at the right edge of the 88vw panel */
    #ts-filter-widget-area .overlay {
        left: 88vw !important;
        right: 0 !important;
        width: auto !important;
    }
}

/* =============================================
   MOBILE MENU — #offslime-mnav (ground-up, self-contained)
   All classes prefixed offslime-mnav- to avoid ALL conflicts.
   Every property uses !important to beat parent + dynamic CSS.
   ============================================= */

/* ── 1. Kill parent theme panel on mobile ────────────────────── */
@media (max-width: 767px) {
    #group-icon-header,
    #group-icon-header .ts-sidebar-content,
    #group-icon-header .overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ── 2. Hide our drawer entirely on desktop ──────────────────── */
@media (min-width: 768px) {
    #offslime-mnav,
    #offslime-mnav-overlay {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ── 3. Overlay backdrop ─────────────────────────────────────── */
#offslime-mnav-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 199990 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    cursor: pointer !important;
}
#offslime-mnav-overlay.offslime-mnav-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── 4. Drawer panel ─────────────────────────────────────────── */
#offslime-mnav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 88vw !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 200000 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.25) !important;
    transform: translateX(-110%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
#offslime-mnav.offslime-mnav-open {
    transform: translateX(0) !important;
}

/* ── 5. Header bar ───────────────────────────────────────────── */
#offslime-mnav .offslime-mnav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 20px !important;
    background: #111111 !important;
    background-color: #111111 !important;
    border-bottom: 2px solid #61CE70 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
#offslime-mnav .offslime-mnav-label {
    color: #61CE70 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
#offslime-mnav .offslime-mnav-close {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    opacity: 0.8 !important;
    transition: opacity 0.15s !important;
    line-height: 0 !important;
    box-shadow: none !important;
}
#offslime-mnav .offslime-mnav-close:hover {
    opacity: 1 !important;
}
#offslime-mnav .offslime-mnav-close svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* ── 6. Scrollable nav body ──────────────────────────────────── */
#offslime-mnav .offslime-mnav-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ── 7. Reset all lists inside our drawer ────────────────────── */
#offslime-mnav ul,
#offslime-mnav li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-start: 0 !important;
    background: none !important;
    border: none !important;
}
#offslime-mnav ul li::before,
#offslime-mnav ul li::after {
    display: none !important;
    content: none !important;
}

/* ── 8. Top-level menu items ─────────────────────────────────── */
#offslime-mnav .offslime-mnav-body > ul > li {
    border-bottom: 1px solid #f0f0f0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
#offslime-mnav .offslime-mnav-body > ul > li > a {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 15px 20px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    transition: background 0.15s, color 0.15s !important;
    box-sizing: border-box !important;
}
#offslime-mnav .offslime-mnav-body > ul > li > a:hover,
#offslime-mnav .offslime-mnav-body > ul > li > a:focus {
    background: #f8f8f8 !important;
    color: #61CE70 !important;
}

/* ── 9. Submenu toggle chevron button ────────────────────────── */
#offslime-mnav .offslime-mnav-toggle {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
    min-width: 44px !important;
}
#offslime-mnav .offslime-mnav-toggle svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    transition: transform 0.22s ease !important;
}
#offslime-mnav .offslime-mnav-toggle.offslime-mnav-expanded svg {
    transform: rotate(180deg) !important;
}

/* ── 10. Sub-menu ────────────────────────────────────────────── */
#offslime-mnav .sub-menu {
    display: none !important;
    width: 100% !important;
    background: #f8f8f8 !important;
    background-color: #f8f8f8 !important;
    border-top: 1px solid #f0f0f0 !important;
}
#offslime-mnav .sub-menu.offslime-mnav-expanded {
    display: block !important;
}
#offslime-mnav .sub-menu > li {
    border-bottom: 1px solid #eeeeee !important;
    display: block !important;
}
#offslime-mnav .sub-menu > li:last-child {
    border-bottom: none !important;
}
#offslime-mnav .sub-menu > li > a {
    display: block !important;
    padding: 12px 20px 12px 36px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
    text-decoration: none !important;
    background: #f8f8f8 !important;
    transition: background 0.15s, color 0.15s !important;
}
#offslime-mnav .sub-menu > li > a:hover,
#offslime-mnav .sub-menu > li > a:focus {
    background: #f0f0f0 !important;
    color: #61CE70 !important;
}

/* ── 11. Mobile bottom bar ───────────────────────────────────── */
@media (max-width: 767px) {
    #ts-mobile-button-bottom {
        background: #ffffff !important;
        border-top: 1px solid #ebebeb !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important;
        height: 56px !important;
    }
    #ts-mobile-button-bottom > div svg line {
        stroke: #111111 !important;
    }
}

/* ── 12. Body scroll-lock ────────────────────────────────────── */
body.offslime-mnav-open {
    overflow: hidden !important;
}

/* =============================================
   REDESIGNED MOBILE PANEL (.mm-panel)
   ============================================= */
.mm-panel {
    background: #ffffff !important;
    padding: 0 !important;
}

.mm-header {
    display: none !important;
}

@media (max-width: 767px) {
    .mm-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 22px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        position: relative !important;
        background: #fff !important;
        min-height: 70px !important;
    }

    .mm-title {
        font-family: 'Poppins', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        margin: 0 !important;
        color: #111 !important;
        line-height: 1.2 !important;
    }

    .cart-dropdown-header h3 {
        display: none !important;
    }
}

/* Better Close Button Styling */
.offslime-close-btn.mm-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background: #111111 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    outline: none !important;
}

.offslime-close-btn.mm-close svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.3s ease !important;
}

.offslime-close-btn.mm-close:hover {
    background: #61CE70 !important;
    transform: rotate(90deg) !important;
    box-shadow: 0 6px 16px rgba(97, 206, 112, 0.3) !important;
}

.offslime-close-btn.mm-close:active {
    transform: rotate(90deg) scale(0.9) !important;
}

.mm-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mm-nav-item {
    border-bottom: 1px solid #f2f2f2 !important;
    display: block !important;
    position: relative !important;
}

.mm-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 25px !important;
    color: #111111 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

.mm-nav-link:hover, 
.mm-nav-link:active {
    background: #f9f9f9 !important;
    color: #61CE70 !important;
}

/* Utility items (Language/Currency) */
.mm-nav-item button.mm-nav-link {
    cursor: pointer !important;
}

.mm-nav-link i {
    margin-right: 15px !important;
    color: #61CE70 !important;
    font-size: 16px !important;
    opacity: 1 !important; /* Overriding the 0.6 in HTML */
}

.mm-active-val {
    margin-left: auto !important;
    margin-right: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #888888 !important;
    background: #f0f0f0 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}

/* Chevrons */
.mm-chevron {
    width: 8px !important;
    height: 12px !important;
    color: #cccccc !important;
    transition: transform 0.2s ease !important;
}

.mm-nav-link:hover .mm-chevron {
    color: #61CE70 !important;
    transform: translateX(3px) !important;
}

/* Divider */
.mm-divider {
    height: 10px !important;
    background: #f7f7f7 !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
    margin: 0 !important;
}

/* =============================================
   RESPONSIVE HERO
   ============================================= */

@media (max-width: 1200px) {
    .breadcrumb-title-wrapper.offslime-shop-hero h1.page-title {
        font-size: 26px !important;
    }
}

@media (max-width: 991px) {
    .breadcrumb-title-wrapper.offslime-shop-hero {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    .breadcrumb-title-wrapper.offslime-shop-hero h1.page-title {
        font-size: 24px !important;
        letter-spacing: 3px !important;
    }
}

@media (max-width: 767px) {
    .breadcrumb-title-wrapper.offslime-shop-hero {
        height: 140px !important;
        min-height: 140px !important;
        max-height: 140px !important;
        background-position: center center !important;
    }

    .breadcrumb-title-wrapper.offslime-shop-hero::before {
        background: rgba(0, 0, 0, 0.50) !important;
    }

    .breadcrumb-title-wrapper.offslime-shop-hero h1.page-title {
        font-size: 20px !important;
        letter-spacing: 2px !important;
    }

    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs span,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs a {
        font-size: 10px !important;
        letter-spacing: 1px !important;
    }

    /* Add spacing below hero on Cart, Checkout, Single Product, and Blog pages for mobile */
    .woocommerce-cart .breadcrumb-title-wrapper.offslime-shop-hero,
    .woocommerce-checkout .breadcrumb-title-wrapper.offslime-shop-hero,
    .single-product .breadcrumb-title-wrapper.offslime-shop-hero,
    .blog .breadcrumb-title-wrapper.offslime-shop-hero,
    .single-post .breadcrumb-title-wrapper.offslime-shop-hero,
    .archive:not(.post-type-archive-product):not(.tax-product_cat):not(.tax-product_tag) .breadcrumb-title-wrapper.offslime-shop-hero {
        margin-bottom: 30px !important;
    }

    /* Remove gap between hero and filters on mobile */
    .woocommerce.archive .before-loop-wrapper {
        margin-top: 0 !important;
        border-top: none !important;
        border-radius: 0 0 10px 10px !important;
    }
}

/* =============================================
   SINGLE PRODUCT PAGE ENHANCEMENTS
   ============================================= */

.single-product .product_title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 32px !important;
    margin-bottom: 15px !important;
    color: #111 !important;
}

.single-product .price {
    color: #61CE70 !important;
    font-weight: 700 !important;
    font-size: 28px !important;
}

/* Buttons */
.single-product .button.alt, 
.single-product .single_add_to_cart_button {
    background-color: #111 !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.single-product .button.alt:hover, 
.single-product .single_add_to_cart_button:hover {
    background-color: #61CE70 !important;
}

/* "Buy it now" button styling - assuming it's a specific class from a plugin like Shopify-like checkout or similar */
.single-product .edgtf-btn-buy-now,
.single-product .checkout-button-v2 {
    background-color: #61CE70 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;
    text-align: center !important;
    margin-top: 10px !important;
}

/* Product Tabs */
.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #f0f0f0 !important;
    padding-left: 0 !important;
    margin-top: 40px !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    padding: 0 25px 15px 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #999 !important;
    font-size: 14px !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #111 !important;
    border-bottom: 3px solid #61CE70 !important;
    padding-bottom: 12px !important;
}

/* Thumbnails */
.single-product .flex-control-thumbs li img {
    border-radius: 6px !important;
    transition: opacity 0.2s ease !important;
}

.single-product .flex-control-thumbs li img.flex-active,
.single-product .flex-control-thumbs li img:hover {
    opacity: 0.7 !important;
    border: 1px solid #111 !important;
}

/* =============================================
   SINGLE BLOG PAGE ENHANCEMENTS
   ============================================= */

.single-post .entry-meta-middle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.single-post .entry-meta-middle .date-time {
    font-size: 14px !important;
    color: #888 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
}

.single-post h1.single-post-title {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin: 10px 0 20px 0 !important;
    color: #111 !important;
    max-width: 900px !important;
}

.single-post .entry-meta-middle .vcard.author,
.single-post .entry-meta-middle .comment-count,
.single-post .entry-meta-middle .cats-link {
    font-size: 13px !important;
    color: #666 !important;
    margin: 5px 0 !important;
}

.single-post .entry-meta-top {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
}

.single-post .entry-meta-top .tags-link a {
    background: #111 !important;
    color: #fff !important;
    padding: 4px 15px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    margin: 0 4px !important;
    transition: background 0.2s ease !important;
}

.single-post .entry-meta-top .tags-link a:hover {
    background: #61CE70 !important;
}

/* Share Buttons Styling */
.social-sharing.top-sharing {
    margin: 15px 0 25px 0 !important;
}

.ts-social-sharing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

.ts-social-sharing span {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #888 !important;
}

.ts-social-sharing ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
}

.ts-social-sharing ul li a {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    color: #111 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

.ts-social-sharing ul li a:hover {
    background: #111 !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
}

/* Remove Orange Banner if it's the blog detail banner */
.single-post img[src*="banner-blog-detail"] {
    display: none !important;
}

/* =============================================
   COMMENTS SECTION ENHANCEMENTS
   ============================================= */

#comments {
    margin-top: 80px !important;
    padding-top: 60px !important;
    border-top: 1px solid #f0f0f0 !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.comments-title .heading-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #111 !important;
    margin-bottom: 15px !important;
}

/* Comment List Refinement */
.commentlist {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 60px !important;
}

.comment-wrapper {
    display: flex !important;
    gap: 0 !important;
    padding: 35px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 16px !important;
    margin-bottom: 25px !important;
    transition: all 0.3s ease !important;
}

.comment-wrapper:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
}

.comment-meta {
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.author-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.comment-meta .author a {
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #111 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.comment-meta .date-time {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 500 !important;
}

.comment-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444 !important;
}

.comment-reply-link {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #111 !important;
    letter-spacing: 1.5px !important;
    background: #f5f5f5 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
}

.comment-reply-link:hover {
    background: #111 !important;
    color: #fff !important;
}

/* Comment Form Refinement */
#comment-wrapper {
    background: #ffffff !important;
    padding: 50px !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 20px !important;
}

.offslime-comment-form .info-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.offslime-comment-form .field-wrapper {
    flex: 1 1 300px !important;
    display: flex !important;
    flex-direction: column !important;
}

.offslime-comment-form .message-wrapper .field-wrapper {
    flex: 1 1 100% !important;
    margin-bottom: 40px !important;
}

.offslime-comment-form label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 10px !important;
    color: #111 !important;
}

.offslime-comment-form input[type="text"],
.offslime-comment-form textarea {
    width: 100% !important;
    padding: 15px 20px !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 10px !important;
    background: #fafafa !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
}

.offslime-comment-form input[type="text"]:focus,
.offslime-comment-form textarea:focus {
    background: #fff !important;
    border-color: #61CE70 !important;
    box-shadow: 0 5px 15px rgba(97,206,112,0.1) !important;
}

.offslime-comment-form .form-submit {
    text-align: center !important;
    margin-top: 50px !important;
}

.offslime-comment-form .submit-btn {
    background: #111 !important;
    color: #fff !important;
    padding: 18px 45px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.offslime-comment-form .submit-btn:hover {
    background: #61CE70 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(97,206,112,0.2) !important;
}

@media (max-width: 767px) {
    #comment-wrapper { padding: 30px !important; }
    .comment-wrapper { padding: 25px !important; }
    .offslime-comment-form .field-wrapper { flex: 1 1 100% !important; }
}

/* =============================================
   DARK MODE COMPATIBILITY FIX
   ============================================= */
/* =============================================
   WISHLIST PAGE — spacing between hero and table
   ============================================= */

.ts-wishlist-table-wrapper {
    margin-top: 50px !important;
}

@media (max-width: 767px) {
    .ts-wishlist-table-wrapper {
        margin-top: 30px !important;
    }
}

/* =============================================
   DARK MODE COMPATIBILITY FIX
   ============================================= */
@media (prefers-color-scheme: dark) {
    /* Force visibility for elements that might blend with system dark backgrounds */
    .woocommerce.archive .before-loop-wrapper {
        background-color: #ffffff !important;
        border-color: #ebebeb !important;
    }

    .woocommerce.archive .before-loop-wrapper .woocommerce-result-count,
    .woocommerce.archive .before-loop-wrapper .orderby-label,
    .woocommerce.archive .before-loop-wrapper .orderby-current,
    .woocommerce.archive .before-loop-wrapper .perpage-current,
    .woocommerce.archive .before-loop-wrapper .product-on-sale-form label,
    .woocommerce.archive .before-loop-wrapper .perpage-current span,
    .woocommerce.archive .before-loop-wrapper .orderby-current span {
        color: #111111 !important;
    }

    /* Ensure dropdown arrows and selectors are visible */
    .woocommerce.archive .before-loop-wrapper select.orderby,
    .woocommerce.archive .before-loop-wrapper select.perpage {
        color: #111111 !important;
        background-color: #ffffff !important;
    }
    
    /* Ensure breadcrumbs and title in hero stay white (they have dark overlay anyway) */
    .breadcrumb-title-wrapper.offslime-shop-hero h1.page-title,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs span,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs a,
    .breadcrumb-title-wrapper.offslime-shop-hero .breadcrumbs .brn_arrow {
        color: #ffffff !important;
    }
}