/*
Theme Name: EcomzCare
Theme URI: https://ecomzcare.com
Author: EcomzCare Team
Author URI: https://ecomzcare.com
Description: A modern premium ecommerce WordPress theme with advanced search, real-time cart, beautiful product display, location-based delivery, and seamless WooCommerce integration. Perfect for Bangladeshi e-commerce stores. The theme consists of well organized components so it's easy to edit and customize everything to create a specific website for your needs. It is designed for E-commerce but this is competent for every kind of site such as personal blog, business, portfolio etc. With a focus on Shopping sites, it features multiple sections on the front page as well as widgets, multiple navigation and social menus, a logo and more. This theme supports popular plugins like WooCommerce, Contact Form 7, Yoast SEO and many more. It is 100% translation ready and you can easily customize with lots of options using WordPress Customizer. Get support at https://ecomzcare.com/support and View demo site at https://demo.ecomzcare.com.
Version: 1.0.1
Requires at least: 5.0
Requires PHP: 7.4
Tested up to: 6.4
Text Domain: ecomzcare
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, woocommerce, responsive, modern, clean, business, custom-background, custom-logo, custom-menu, featured-images, footer-widgets, rtl-language-support, threaded-comments, translation-ready, blog, two-columns, three-columns, four-columns, right-sidebar, custom-header, flexible-header
All files, unless otherwise stated, are released under the GNU General Public License
version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
==================================================
*/
/* ==========================================
   Theme: EcomzCare
   Modern Premium E-commerce WordPress Theme
   Version: 1.0.1 – Fixed Header Display & Search Suggestions Z-Index
   ========================================== */
/* ==========================================
   1. CSS VARIABLES & RESET
   ========================================== */
:root {
    --primary-color: #2c3e50;
    --header-bg: #e74c3c;
    --header-text: #ffffff;
    --header-hover: #c0392b;
    --secondary-color: #f39c12;
    --text-color: #333333;
    --light-gray: #f8f9fa;
    --border-color: #ddd;
    --white: #ffffff;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --transition: all 0.3s ease;
    --header-height: 150px;
    /* Z-index scale - properly layered */
    --z-negative: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-suggestions: 1002;
    --z-sidebar: 1002;
    --z-modal: 1003;
    --z-overlay: 1001;
    --z-header-main: 1000;
    --z-header-nav: 999;
    --z-header-top: 998;
    --z-floating: 999;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
    width: 100%;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f4f4f4;
    padding-top: var(--header-height);
    overflow-x: hidden;
}
/* Container - MODIFIED TO MATCH EXACT SPECIFICATION */
.container-wrapper {
    width: 90%;
    margin: 0 auto;
}
/* ==========================================
   2. UTILITY CLASSES
   ========================================== */
.no-visible-scrollbar {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.no-visible-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Mobile/Desktop visibility utilities */
.mobile-only {
    display: none;
}
.desktop-only {
    display: flex;
}
/* ==========================================
   3. HEADER STYLES - FIXED DISPLAY ISSUE
   ========================================== */
.site-header {
    background-color: var(--header-bg);
    color: var(--header-text);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header-main);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.header-main {
    padding: 12px 0;
    position: relative;
    z-index: var(--z-header-main);
    background-color: var(--header-bg);
    width: 100%;
}
.header-inline-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
}
/* Site Branding */
.site-branding {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.site-branding a {
    color: var(--white);
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-branding img {
    max-height: 50px;
    width: auto;
}
.site-branding i {
    font-size: 28px;
}
/* Location Selector */
.location-selector {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    transition: var(--transition);
}
.location-selector:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Search Bar - Desktop */
.search-container {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: calc(var(--z-suggestions) + 1);
}
.search-form {
    display: flex;
    height: 40px;
    border-radius: 4px;
    overflow: visible;
    background: var(--white);
    position: relative;
}
.search-category {
    border: none;
    background: var(--light-gray);
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    outline: none;
    cursor: pointer;
    border-right: 1px solid #ddd;
    min-width: 100px;
}
.search-field {
    flex: 1;
    border: none;
    padding: 0 15px;
    outline: none;
    font-size: 14px;
}
.search-submit {
    background-color: #f1c40f;
    border: none;
    width: 50px;
    cursor: pointer;
    color: #333;
    transition: var(--transition);
}
.search-submit:hover {
    background-color: #f39c12;
}

/* ==========================================
   FIX: Ensure search input cursor is visible
   ========================================== */
#search-field:focus,
#mobile-search-field-inline:focus,
#mobile-search-field:focus {
    caret-color: var(--header-bg) !important;
    outline: none !important;
    box-shadow: inset 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
}

/* Ensure input doesn't lose focus styles */
.search-field:focus,
.mobile-search-field:focus {
    border-color: var(--header-bg) !important;
    background-color: #fff !important;
}

/* Prevent any transformations that might hide cursor */
.search-field,
.mobile-search-field {
    transform: none !important;
    transition: all 0.2s ease !important;
}
/* Search Suggestions - FIXED Z-INDEX ISSUE */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: var(--z-suggestions) !important;
    box-shadow: var(--shadow-lg);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    pointer-events: auto;
}
/* Mobile search suggestions - same high z-index */
#mobile-search-suggestions-inline,
#mobile-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: var(--z-suggestions) !important;
    box-shadow: var(--shadow-lg);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.search-suggestions.active,
#mobile-search-suggestions-inline.active,
#mobile-search-suggestions.active {
    display: block;
}
.suggestion-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover {
    background-color: var(--light-gray);
}
.suggestion-item.no-results {
    cursor: default;
    opacity: 0.8;
    justify-content: center;
    padding: 15px;
}
.suggestion-item.no-results:hover {
    background: transparent;
}
.suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.suggestion-info {
    margin-left: 10px;
    flex: 1;
}
.suggestion-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.suggestion-info .price {
    font-size: 12px;
    color: var(--header-bg);
    font-weight: 600;
}
.search-suggestions.active {
    display: block;
    max-height: 400px;
    overflow-y: auto;
}
/* Loading state for search */
.search-loading-indicator {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}
/* Results count badge */
.count-badge {
    background: var(--header-bg);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
}
/* Rewards Link */
.rewards-link {
    flex: 0 0 auto;
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    transition: var(--transition);
}
.rewards-link:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Sign In Link */
.signin-link {
    flex: 0 0 auto;
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-signin {
    background-color: var(--white);
    color: var(--header-bg);
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 700;
    transition: var(--transition);
}
.btn-signin:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}
/* Header Icons */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}
.account-icon {
    color: var(--white);
    font-size: 24px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.account-icon:hover {
    color: var(--secondary-color);
    transform: scale(1.1);
}
/* Dots Menu */
.dots-menu-container {
    position: relative;
    display: none;
}
.dots-menu-toggle {
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    transition: var(--transition);
}
.dots-menu-toggle:hover {
    color: var(--secondary-color);
}
.dots-menu-dropdown {
    position: fixed;
    top: calc(var(--header-main-height) + var(--header-nav-height, 40px));
    right: 15px;
    width: 280px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 0;
    display: none;
    z-index: 1002;
    overflow: hidden;
}
.dots-menu-dropdown.active {
    display: block;
    animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.dots-menu-content {
    padding: 10px 0;
}
.dots-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.dots-menu-item:last-child {
    border-bottom: none;
}
.dots-menu-item i {
    font-size: 18px;
    width: 24px;
    color: var(--header-bg);
}
.dots-menu-item:hover {
    background: var(--light-gray);
    padding-left: 25px;
}
.rewards-dots-item i {
    color: var(--secondary-color);
}
.contact-dots-item {
    cursor: default;
}
.contact-dots-item:hover {
    background: transparent;
    padding-left: 20px;
}
.contact-details {
    display: flex;
    flex-direction: column;
}
.contact-label {
    font-size: 11px;
    color: #999;
}
.contact-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}
.app-download-item i {
    color: #27ae60;
}
.mobile-location-dots {
    display: none;
}
.mobile-location-dots i {
    color: var(--header-bg);
}
/* ==========================================
   3.1 HEADER TOP ROW
   ========================================== */
.header-top-row {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(0);
    opacity: 1;
    position: relative;
    z-index: var(--z-header-top);
}
.header-top-row.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
.header-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-info i {
    font-size: 12px;
    color: var(--secondary-color);
}
.contact-info .separator {
    opacity: 0.3;
    margin: 0 5px;
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    color: #fff;
    transition: var(--transition);
}
.social-icons a:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
}
/* ==========================================
   3.2 MOBILE SEARCH INLINE
   ========================================== */
#mobile-search-field-container {
    position: relative;
    z-index: calc(var(--z-suggestions) + 1);
}
.mobile-search-form-inline {
    display: flex;
    align-items: center;
    height: 44px;
    border-radius: 999px;
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border: 1px solid #e0e0e0;
    width: 100%;
    max-width: 100%;
    position: relative;
}
.mobile-search-field {
    flex: 1;
    height: 100%;
    border: none !important;
    padding: 0 16px;
    font-size: 14px;
    background: transparent;
    outline: none;
}
.mobile-search-submit {
    width: 48px;
    height: 100%;
    background: var(--secondary-color) !important;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 999px 999px 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.mobile-search-submit:hover {
    background: var(--header-hover) !important;
}
.mobile-search-field::placeholder {
    color: #999;
    font-size: 14px;
}
/* ==========================================
   3.3 STICKY HEADER - FIXED DISPLAY ISSUE
   ========================================== */
.header-main {
    transition: top 0.3s ease;
    position: relative;
    z-index: var(--z-header-main);
    background-color: var(--header-bg);
    width: 100%;
    top: 0;
}
/* Remove the sticky class from header-main - we don't need it */
.header-main.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-header-main);
    background-color: var(--header-bg);
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease;
}
.header-nav-row {
    background-color: #c0392b;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: var(--z-header-nav);
    width: 100%;
    display: block;
    visibility: visible;
    opacity: 1;
    transition: top 0.3s ease;
}
.header-nav-row.sticky {
    position: fixed;
    top: var(--header-main-height, 70px);
    width: 100%;
    z-index: var(--z-header-nav);
    background-color: #c0392b;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease;
}
/* When header-top-row is hidden, adjust sticky positioning */
.header-top-row.header-hidden ~ .header-main {
    top: 0;
}
.header-top-row.header-hidden ~ .header-nav-row {
    /* No change needed - stays below header-main */
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
/* ==========================================
   4. NAVIGATION ROW - ALWAYS VISIBLE
   ========================================== */
.nav-container {
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
}
/* Shop by Category Wrapper */
.shop-by-category-wrapper {
    position: relative;
    display: inline-block;
    z-index: var(--z-dropdown);
}
.shop-by-category-btn {
    background: transparent;
    border: none;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 0 20px 0 0;
    height: 40px;
    line-height: 40px;
    transition: var(--transition);
}
.shop-by-category-btn:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Custom Navigation Links */
.custom-nav-links {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding-left: 10px;
}
.custom-nav-link {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: var(--transition);
    white-space: nowrap;
}
.custom-nav-link i {
    font-size: 14px;
    color: var(--secondary-color);
    transition: var(--transition);
}
.custom-nav-link:hover {
    color: var(--white);
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}
.custom-nav-link:hover i {
    color: var(--white);
}
.monthly-bazar-link i {
    color: #f1c40f;
}
.party-order-link i {
    color: #e67e22;
}
/* Promo Links */
.promo-links-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.promo-links {
    display: flex;
    gap: 5px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.promo-links li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.promo-links a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
.promo-links a:hover {
    color: var(--white);
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
    text-decoration: none;
}
.hover-effect {
    color: var(--white) !important;
    background-color: rgba(255,255,255,0.1) !important;
    transform: translateY(-2px) !important;
}
/* ==========================================
   5. CATEGORY DROPDOWN (DESKTOP)
   ========================================== */
.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    border-radius: 0 0 6px 6px;
    display: none;
    z-index: var(--z-dropdown);
    padding: 8px 0;
}
.shop-by-category-wrapper:hover .category-dropdown {
    display: block;
}
.category-dropdown-item-wrapper {
    position: relative;
}
.category-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
}
.category-dropdown-item:last-child {
    border-bottom: none;
}
.category-dropdown-item:hover,
.category-dropdown-item.active {
    background: #fdf8f4;
    color: var(--header-bg);
    padding-left: 24px;
}
.category-dropdown-item .arrow {
    font-size: 12px;
    color: #aaa;
    transition: transform 0.2s;
}
.category-dropdown-item:hover .arrow {
    transform: translateX(4px);
    color: var(--header-bg);
}
.category-dropdown-item .count {
    margin-left: auto;
    padding-left: 12px;
    color: #999;
    font-size: 12px;
}
.sub-dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 260px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    border-radius: 6px;
    display: none;
    z-index: calc(var(--z-dropdown) + 1);
    padding: 8px 0;
    margin-left: 2px;
}
.category-dropdown-item-wrapper:hover > .sub-dropdown {
    display: block;
}
/* ==========================================
   6. MOBILE CATEGORY SIDEBAR
   ========================================== */
.category-sidebar {
    position: fixed;
    left: -300px;
    top: calc(var(--header-main-height) + var(--header-nav-height, 80px));
    width: 300px;
    height: calc(100vh - (var(--header-main-height) + var(--header-nav-height, 40px)));
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transition: left 0.3s ease;
    z-index: var(--z-sidebar);
    padding: 0 0 20px;
}
.category-sidebar.active {
    left: 0;
}
.category-sidebar-header {
    display: none !important;
}
.category-sidebar-content {
    margin-top: 0;
    padding: 20px;
}
.close-category-btn {
    display: none;
}
.category-item {
    display: block;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}
.category-item:hover {
    background: var(--light-gray);
    color: var(--header-bg);
    padding-left: 20px;
}
.category-item .count {
    float: right;
    color: #999;
    font-size: 12px;
}
.mobile-cat-item > a.main-cat {
    font-weight: 600;
    background: #f8f9fa;
    margin: 2px 0;
    padding: 12px 16px;
}
.mobile-toggle {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.mobile-cat-item.open > .mobile-toggle {
    transform: rotate(180deg);
}
.mobile-sub-level {
    display: none;
    padding-left: 20px;
    background: rgba(0,0,0,0.02);
}
.mobile-cat-item > .mobile-sub-level {
    display: none;
}

.mobile-cat-item.open > .mobile-sub-level {
    display: block;
}
/* ==========================================
   7. HERO SECTION
   ========================================== */
.hero-section {
    background: #fff;
    padding: 20px 0;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.hero-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    padding: 0 20px;
}

/* Hero Categories - Accordion Version */
.hero-categories {
    background: var(--light-gray);
    padding: 16px;
    border-radius: 8px;
    height: 350px;
    position: relative;
    /* Default scrollbar styling (visible) */
    scrollbar-width: thin;
    scrollbar-color: var(--header-bg) #f1f1f1;
}

/* Default scrollbar for Webkit */
.hero-categories::-webkit-scrollbar {
    width: 6px;
}
.hero-categories::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.hero-categories::-webkit-scrollbar-thumb {
    background: var(--header-bg);
    border-radius: 4px;
}
.hero-categories::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* CATEGORY TITLE REMOVED (Requested) */
.hero-categories h3 {
    display: none; 
}

/* List Base Styles */
.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cat-item {
    position: relative;
}

/* Category Link Styles */
.category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
.category-link:hover {
    background: white;
    color: var(--header-bg);
    transform: translateX(4px);
}

/* Toggle Icon and Wrapper */
.toggle-wrapper {
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.toggle-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
    margin-left: 5px;
}

/* Rotate icon when open */
.cat-item.open > .category-link .toggle-icon {
    transform: rotate(180deg);
}

.count {
    color: #999;
    font-size: 12px;
}

/* ==========================================
   ACCORDION SUBMENU STYLES (MODIFIED)
   ========================================== */

/* All submenus (Level 1 through Infinity) */
.sub-level {
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Start hidden */
    display: none; 
    
    /* Accordion Layout: Relative, inside parent */
    position: relative;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    
    /* Spacing for nested levels */
    padding-left: 20px; 
    border-left: 1px solid #e0e0e0;
    
    /* Animation setup */
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Specific styling for Level 2 (Direct children of main list) */
.level-0 > .cat-item > .sub-level {
    margin-top: 5px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* When open, ensure it's block and visible */
.cat-item.open > .sub-level {
    display: block;
    opacity: 1;
}

/* Adjust links inside submenus */
.sub-level .category-link {
    font-size: 13px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sub-level .category-link:last-child {
    border-bottom: none;
}
.sub-level .cat-name {
    flex-grow: 1;
}
/* Hero Slider */
.hero-slider {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 8px;
}
.slider-container {
    height: 100%;
    position: relative;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.slide.active {
    opacity: 1;
}
.slide-content {
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.slide-content h2 {
    font-size: 32px;
    margin-bottom: 10px;
}
.slide-content p {
    font-size: 18px;
    margin-bottom: 20px;
}
.btn-shop-now {
    display: inline-block;
    padding: 12px 30px;
    background: var(--secondary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: var(--transition);
}
.btn-shop-now:hover {
    background: var(--header-bg);
    transform: translateY(-2px);
}
.slider-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.slider-nav button:hover {
    background: rgba(0,0,0,0.8);
}
.prev-slide {
    left: 10px;
}
.next-slide {
    right: 10px;
}
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.slider-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.slider-dots .dot.active {
    background: var(--white);
    transform: scale(1.2);
}
/* ==========================================
   8. SECTION TITLES
   ========================================== */
.section-title {
    font-size: 22px;
    margin: 30px 0 15px;
    color: var(--primary-color);
    border-left: 5px solid var(--header-bg);
    padding-left: 15px;
    font-weight: 700;
}
/* ==========================================
   9. PRODUCTS GRID & CARDS - MODIFIED
   ========================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}
.product-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}
/* Badge Container - Top Right */
.product-badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    z-index: 2;
    pointer-events: none;
}
/* Sale Badge */
.product-badge {
    background: var(--secondary-color);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
}
/* Save Money Badge */
.save-money-badge {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}
.save-money-badge i {
    font-size: 10px;
}
/* Hide badges for out of stock products */
.product-card.outofstock .product-badge,
.product-card.outofstock .save-money-badge {
    display: none;
}
.product-img-container {
    position: relative;
    overflow: hidden;
    height: 180px;
    width: 100%;
}
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.product-card:hover .product-img {
    transform: scale(1.05);
}
/* Product Info - Contains title, price, and actions */
.product-info {
    padding: 12px 12px 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--white);
    align-items: center;
}
.product-title {
    font-size: 14px;
    margin: 0 0 8px 0;
    font-weight: 600;
    line-height: 1.4;
    min-height: 40px;
}
.product-title a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
}
.product-title a:hover {
    color: var(--header-bg);
}
/* Product Price - Now visible and properly styled */
.product-price {
    color: var(--header-bg);
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 10px 0;
    display: block;
    line-height: 1.3;
}
.product-price del {
    color: #999;
    font-size: 12px;
    margin-right: 5px;
    font-weight: 400;
}
.product-price ins {
    text-decoration: none;
    background: none;
}
/* Product Actions Container */
.product-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 5px;
}
.add-to-cart-btn {
    background: var(--header-bg);
    color: var(--white);
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
}
.add-to-cart-btn:hover {
    background: var(--secondary-color);
}
.add-to-cart-btn:active {
    transform: scale(0.98);
}
.add-to-cart-btn.disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #95a5a6;
    pointer-events: none;
}
/* Quick View Button */
.quick-view-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.quick-view-btn:hover {
    background: var(--secondary-color);
}
.quick-view-btn:active {
    transform: scale(0.95);
}
/* Select Options Button for Variable Products - EXACT same as Add to Cart */
.select-options-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--header-bg) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    flex: 1;
    height: 42px;
    line-height: 1;
    font-family: inherit;
}

.select-options-btn:hover {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--header-bg) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
    color: white;
    text-decoration: none;
}

.select-options-btn i {
    font-size: 16px;
}

.select-options-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Variable badge - subtle indicator */
.variable-badge {
    background: var(--header-bg) !important;
    opacity: 0.9;
}

/* Product Actions Layout - exactly as before */
.product-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.product-actions .add-to-cart-btn,
.product-actions .select-options-btn {
    flex: 1;
    height: 42px;
}

.product-actions .quick-view-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-actions .quick-view-btn:hover {
    background: var(--header-bg);
    color: white;
    border-color: var(--header-bg);
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .select-options-btn,
    .add-to-cart-btn {
        padding: 8px 12px;
        font-size: 13px;
        height: 38px;
    }
    
    .product-actions .quick-view-btn {
        width: 38px;
        height: 38px;
    }
}
/* Quantity Controls - Replaces Add to Cart */
.quantity-controls-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid var(--header-bg);
    border-radius: 4px;
    overflow: hidden;
    height: 36px;
}
.qty-action-btn {
    background: var(--header-bg);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}
.qty-action-btn:hover {
    background: var(--secondary-color);
}
.qty-action-btn:active {
    transform: scale(0.95);
}
.qty-action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.qty-display {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    background: white;
    line-height: 36px;
    min-width: 30px;
}
/* Out of stock styling */
.outofstock .product-img-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1;
    pointer-events: none;
}
.outofstock .add-to-cart-btn.disabled {
    background: #95a5a6;
    cursor: not-allowed;
}
.outofstock .quick-view-btn {
    background: #7f8c8d;
}
.outofstock .quick-view-btn:hover {
    background: var(--primary-color);
}
/* Loading State */
.add-to-cart-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}
.add-to-cart-btn.loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* ==========================================
   10. BRANDS SECTION
   ========================================== */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.brand-item {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    cursor: pointer;
}
.brand-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.brand-item img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}
.brand-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.brand-placeholder i {
    font-size: 40px;
    color: var(--header-bg);
}
.brand-placeholder span {
    font-size: 14px;
    color: var(--text-color);
}
/* ==========================================
   11. BUYERS SECTION
   ========================================== */
.buyers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.buyer-card {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.buyer-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.buyer-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.buyer-info h4 {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--primary-color);
}
.buyer-spent {
    font-size: 14px;
    color: var(--header-bg);
    font-weight: 600;
    margin-bottom: 5px;
}
.buyer-joined {
    font-size: 12px;
    color: #999;
}
/* ==========================================
   12. COMMENTS SECTION
   ========================================== */
.comments-slider {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.comment-card {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.comment-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.commenter-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.commenter-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}
.product-name {
    font-size: 12px;
    color: #999;
}
.comment-rating {
    margin-bottom: 10px;
}
.comment-rating i {
    color: #ddd;
    font-size: 12px;
}
.comment-rating i.active {
    color: var(--secondary-color);
}
.comment-text {
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.6;
}
.comment-date {
    font-size: 11px;
    color: #999;
    text-align: right;
}
/* ==========================================
   13. FLOATING CART BUTTON - REDESIGNED
   ========================================== */
.floating-cart-btn {
    position: fixed;
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
    background-color: var(--primary-color);
    color: var(--white);
    width: 70px;
    height: auto;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    box-shadow: -4px 0 15px rgba(0,0,0,0.2);
    z-index: var(--z-floating);
    transition: var(--transition);
    padding: 12px 5px;
    gap: 8px;
    text-decoration: none;
    border: none;
}
.floating-cart-btn:hover {
    width: 75px;
    background-color: var(--secondary-color);
}
.floating-cart-btn .cart-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.floating-cart-btn .cart-count-float {
    background-color: var(--secondary-color);
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    border: 2px solid var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.floating-cart-btn .divider {
    width: 30px;
    height: 2px;
    background-color: rgba(255,255,255,0.3);
    margin: 2px 0;
}
/* Better total display in floating cart buttons */
.floating-cart-btn .cart-total-float {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    padding: 3px 7px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    color: var(--white);
    display: inline-block;
}
/* Desktop version - give more horizontal space */
.floating-cart-btn.desktop-cart {
    width: 78px;
    min-height: 100px;
    padding: 14px 6px;
    gap: 9px;
}
.floating-cart-btn.desktop-cart:hover {
    width: 84px;
}
.floating-cart-btn.desktop-cart .cart-total-float {
    max-width: 64px;
    font-size: 11.5px;
    padding: 4px 8px;
}
/* Mobile Floating Cart Button (inside bottom bar) */
.mobile-bottom-bar .floating-cart-btn {
    position: relative;
    min-width: 110px;
    max-width: 140px;
    padding: 8px 14px;
    border-radius: 999px;
    gap: 10px;
    background: var(--primary-color);
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    flex-direction: row;
    transform: none;
    bottom: auto;
    right: auto;
    margin: 0;
    width: auto;
    height: auto;
    min-height: auto;
}
.mobile-bottom-bar .floating-cart-btn .cart-info {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
}
.mobile-bottom-bar .floating-cart-btn .cart-count-float {
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    border: 2px solid white;
    background: var(--secondary-color);
    position: relative;
    top: auto;
    right: auto;
}
.mobile-bottom-bar .floating-cart-btn .divider {
    width: 2px;
    height: 22px;
    background: rgba(255,255,255,0.35);
    margin: 0;
}
.mobile-bottom-bar .floating-cart-btn .cart-total-float {
    font-size: 13px;
    padding: 4px 9px;
    max-width: 80px;
    background: rgba(255,255,255,0.20);
    border-radius: 12px;
    color: var(--white);
    display: inline-block;
}
/* ==========================================
   14. CART SIDEBAR
   ========================================== */
.cart-sidebar {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transition: right 0.3s ease;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
}
.cart-sidebar.active {
    right: 0;
}
.cart-sidebar-header {
    padding: 20px;
    background: var(--header-bg);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.close-cart-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
}
.cart-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 8px;
    position: relative;
    transition: var(--transition);
}
.cart-item:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.cart-item img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}
.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 65px;
}
.cart-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-item-title a {
    color: var(--text-color);
    text-decoration: none;
}
.cart-item-title a:hover {
    color: var(--header-bg);
}
.cart-item-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}
.cart-item-price {
    font-size: 14px;
    color: var(--header-bg);
    font-weight: 700;
}
.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}
.qty-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #f8f9fa;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.qty-btn:hover {
    background: var(--secondary-color);
    color: #fff;
}
.qty-input {
    width: 28px;
    height: 24px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    outline: none;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.remove-item {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    transition: var(--transition);
    padding: 5px;
}
.remove-item:hover {
    color: var(--header-bg);
}
.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--white);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cart-coupon-section {
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 15px;
}
.cart-coupon-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}
.coupon-input-group {
    display: flex;
    gap: 8px;
}
.coupon-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: var(--transition);
}
.coupon-input:focus {
    border-color: var(--header-bg);
}
.apply-coupon-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.apply-coupon-btn:hover {
    background: var(--header-bg);
}
.coupon-message {
    font-size: 12px;
    margin-top: 5px;
    min-height: 18px;
}
.coupon-message.success {
    color: #27ae60;
}
.coupon-message.error {
    color: #e74c3c;
}
.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}
.buy-now-btn {
    background: var(--secondary-color);
    color: var(--white);
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
}
.buy-now-btn:hover {
    background: #e67e22;
}
.buy-now-total-btn {
    background: var(--primary-color);
    color: var(--white);
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: default;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    flex-direction: column;
    line-height: 1.2;
}
.buy-now-total-btn span {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
}
.empty-cart {
    text-align: center;
    padding: 40px;
    color: #999;
    width: 100%;
}
/* ==========================================
   16. OVERLAY
   ========================================== */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: var(--z-overlay);
}
.overlay.active {
    display: block;
}
/* ==========================================
   17. SEARCH RESULTS SECTION
   ========================================== */
.search-results-section {
    margin-bottom: 30px;
}
.no-products {
    text-align: center;
    padding: 50px;
    background: var(--white);
    border-radius: 8px;
    color: #999;
}
/* ==========================================
   18. FOOTER STYLES
   ========================================== */
.site-footer {
    background-color: var(--primary-color);
    color: #ccc;
    padding: 40px 0 20px;
    margin-top: 50px;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.footer-widget h3 {
    color: var(--white);
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
    display: inline-block;
}
.footer-links {
    list-style: none;
}
.footer-links li {
    margin-bottom: 10px;
}
.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: var(--transition);
}
.footer-links a:hover {
    color: var(--white);
    padding-left: 5px;
}
.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 14px;
}
/* ==========================================
   19. MOBILE BOTTOM BAR - REDESIGNED
   ========================================== */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 68px;
    background: white;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.12);
    z-index: 998;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.mobile-bottom-bar > * {
    flex: 1;
    text-align: center;
}
/* Mobile Location (left) */
.mobile-location {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: var(--transition);
    color: #555;
}
.mobile-location i {
    font-size: 20px;
    margin-bottom: 2px;
    color: var(--header-bg);
}
.mobile-location span {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mobile Delivery Time (right) */
.mobile-delivery-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #e67e22;
    font-weight: 600;
}
.mobile-delivery-time i {
    font-size: 20px;
    margin-bottom: 2px;
}
.mobile-delivery-time span {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}
/* ==========================================
   20. NOTIFICATION STYLES
   ========================================== */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    z-index: 10000;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.notification.success {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.notification.error {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* ==========================================
   21. LOCATION MODAL STYLES
   ========================================== */
.location-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.location-modal.active {
    display: flex;
}
.location-modal-content {
    background: var(--white);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.location-modal-header {
    padding: 20px 25px;
    background: var(--header-bg);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.location-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.location-modal-header h3 i {
    color: var(--secondary-color);
}
.close-location-modal {
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    transition: var(--transition);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.close-location-modal:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}
.location-modal-body {
    padding: 25px;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}
/* Map Container */
.location-map-container {
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
#location-map {
    height: 250px;
    width: 100%;
}
.map-search-box {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--border-color);
}
.map-search-box input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    transition: var(--transition);
}
.map-search-box input:focus {
    border-color: var(--header-bg);
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
}
.map-search-results {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    width: calc(100% - 30px);
    z-index: 1000;
    display: none;
    border-radius: 0 0 6px 6px;
    box-shadow: var(--shadow-sm);
}
.map-search-results.active {
    display: block;
}
.map-search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid #eee;
}
.map-search-result-item:last-child {
    border-bottom: none;
}
.map-search-result-item:hover {
    background: #f0f0f0;
}
/* Manual Input Section */
.location-manual-input {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed var(--border-color);
}
.location-manual-input h4 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.location-manual-input h4 i {
    color: var(--secondary-color);
}
.location-form-group {
    margin-bottom: 15px;
}
.location-form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.location-form-group select,
.location-form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: var(--transition);
}
.location-form-group select:focus,
.location-form-group input:focus {
    border-color: var(--header-bg);
    outline: none;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
}
.location-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 45px;
}
/* Current Location Button (Standalone) */
.current-location-btn {
    width: 100%;
    padding: 15px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.current-location-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
}
.current-location-btn i {
    font-size: 18px;
}
.current-location-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}
.current-location-btn.loading i {
    animation: spin 1s linear infinite;
}
/* Location Action Buttons */
.location-action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
    align-items: stretch;
}
.current-location-btn,
.use-location-btn {
    flex: 1;
    min-width: 200px;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    margin-top: 0;
}
.current-location-btn {
    background: #4CAF50;
    color: white;
}
.current-location-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
.use-location-btn {
    background: var(--header-bg) !important;
    color: white;
}
.use-location-btn:hover:not(:disabled) {
    background: var(--header-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}
.use-location-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
}
/* ==========================================
   22. RESPONSIVE STYLES
   ========================================== */
/* Desktop Styles (min-width: 992px) */
@media (min-width: 992px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: flex !important; }
    .mobile-search-bar { display: none !important; }
    .desktop-search { display: block !important; }
    .dots-menu-container { display: none !important; }
    .account-icon.mobile-only { display: none !important; }
    #mobile-search-field-container { display: none !important; }
    .category-sidebar { display: none !important; }
    .mobile-menu-toggle { display: none !important; }

    /* ==========================================
       HERO CATEGORIES - DESKTOP ACCORDION SCROLL FIX
       ========================================== */
    .hero-categories {
        display: block;
        overflow: visible !important;
        position: relative;
        z-index: 10;
        background: var(--light-gray);
        padding: 16px;
        border-radius: 8px;
        height: 350px;
    }

    /* Title is already hidden via general rule above, 
       but ensuring it's hidden here too for safety */
    .hero-categories h3 {
        display: none;
    }

    /* Main List Container - This handles the scrollbar */
    .hero-categories .category-list {
        /* Increased height since title is removed */
        max-height: 318px; 
        overflow-y: auto;
        padding-right: 5px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox - HIDING SCROLLBAR */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Hide scrollbar for Chrome/Safari/Opera */
    .hero-categories .category-list::-webkit-scrollbar {
        display: none;
    }

    .sub-level {
        background: rgba(255,255,255,0.6); 
    }
    
    /* Level 2 specific styling for desktop */
    .sub-level.level-2 {
        background: #ffffff;
        border-left: 3px solid var(--header-bg);
        border-radius: 4px;
        margin-top: 4px;
    }

    /* Level 3+ */
    .sub-level.level-3, .sub-level.level-4, .sub-level.level-5 {
        background: #fcfcfc;
        border-left: 3px solid var(--secondary-color);
    }

    .hero-categories .toggle-icon {
        display: inline-block;
    }

    .mobile-bottom-bar { display: none !important; }
    .floating-cart-btn { width: 70px; }
    .floating-cart-btn:hover { width: 75px; }
}
/* Tablet and Mobile (max-width: 991px) */
@media (max-width: 991px) {
    body {
        padding-top: 160px;
        padding-bottom: 64px;
    }
  
    .container-wrapper {
        width: 100%;
        padding: 0 15px;
    }
  
    .mobile-only {
        display: block !important;
    }
  
    .desktop-only {
        display: none !important;
    }
  
    .desktop-search {
        display: none !important;
    }
  
    .account-icon.mobile-only {
        display: flex !important;
        color: var(--white);
        font-size: 22px;
        margin-right: 5px;
    }
  
    #mobile-search-field-container {
        margin: 0 8px;
        padding: 0;
        background: transparent !important;
        position: relative;
        flex: 1;
        min-width: 0;
        z-index: calc(var(--z-suggestions) + 1);
    }
    /* Main pill container */
    .mobile-search-form-inline {
        display: flex;
        align-items: center;
        height: 44px;
        border-radius: 999px;
        background: var(--white);
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.14);
        border: 1px solid #e0e0e0;
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 2;
        isolation: isolate;
    }
    /* Make sure no background leaks from input or button */
    .mobile-search-field,
    .mobile-search-submit {
        background: transparent !important;
    }
    /* Input - fill the space without adding corners */
    .mobile-search-field {
        flex: 1 1 auto;
        height: 100%;
        border: none !important;
        padding: 0 16px;
        font-size: 14px;
        color: #333;
        outline: none;
        -webkit-appearance: none;
        background: transparent;
    }
    .mobile-search-field::placeholder {
        color: #aaa;
        opacity: 1;
    }
    /* Search button - perfect right-side rounding */
    .mobile-search-submit {
        width: 50px;
        height: 100%;
        background: var(--secondary-color) !important;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 999px 999px 0;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
        transition: background 0.2s ease;
    }
    .mobile-search-submit:hover {
        background: var(--header-hover) !important;
    }
    /* Remove any unwanted padding/margin from container */
    .header-inline-container {
        padding: 8px 12px !important;
        gap: 8px;
    }
    /* Safety: hide any overflowing background from siblings */
    .mobile-search-form-inline::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--white);
        border-radius: 999px;
        z-index: -1;
    }
  
    .site-branding {
        flex: 0 0 auto;
    }
  
    .site-branding img {
        max-height: 35px;
    }
  
    .site-branding a span {
        display: none;
    }
  
    .mobile-menu-toggle {
        display: block !important;
        flex: 0 0 auto;
        margin-right: 0;
    }
  
    .header-icons {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }
  
    .dots-menu-container {
        display: block;
    }
  
    .location-selector,
    .rewards-link,
    .signin-link {
        display: none !important;
    }
  
    .mobile-location-dots {
        display: flex !important;
    }
  
    .header-main.sticky {
        padding: 5px 0;
    }
  
    :root {
        --header-main-height: 60px;
    }
  
    .mobile-search-bar {
        display: none !important;
    }
  
    .mobile-search-item {
        display: none !important;
    }
  
    .shop-by-category-wrapper {
        display: none;
    }
  
    .hero-container {
        grid-template-columns: 1fr;
    }
  
    .hero-categories {
        display: none;
    }
  
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }
  
    .custom-nav-links,
    .promo-links-wrapper {
        white-space: nowrap;
    }
  
    .custom-nav-links {
        margin-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }
  
    .nav-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
  
    .sub-level {
        padding-left: 22px;
        background: rgba(0,0,0,0.025);
        border-left: 2px solid #eee;
    }
  
    .floating-cart-btn {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        border-radius: 50%;
        padding: 12px 16px;
        writing-mode: horizontal-tb;
        flex-direction: row;
        gap: 8px;
        background: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
  
    .floating-cart-btn:hover {
        width: auto;
    }
  
    .cart-icon-large {
        font-size: 20px;
        margin-bottom: 0;
        transform: none;
    }
  
    .cart-count-float {
        position: absolute;
        top: -8px;
        right: -8px;
        transform: none;
    }
  
    .mobile-bottom-bar {
        display: flex;
    }
  
    .mobile-bottom-bar .floating-cart-btn {
        position: relative;
        display: flex;
        margin: 0 auto;
    }
}
/* Mobile Only (max-width: 768px) */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
  
    .product-img-container {
        height: 150px;
    }
  
    .product-title {
        font-size: 13px;
        min-height: 36px;
    }
  
    .product-price {
        font-size: 14px;
        margin-bottom: 8px;
    }
  
    .add-to-cart-btn {
        padding: 6px 8px;
        font-size: 11px;
    }
  
    .quick-view-btn {
        width: 32px;
        height: 32px;
    }
  
    .quantity-controls-wrapper {
        height: 32px;
    }
  
    .qty-action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
  
    .qty-display {
        line-height: 32px;
        font-size: 13px;
    }
  
    .modal-product-content {
        grid-template-columns: 1fr;
    }
  
    .mobile-bottom-bar {
        height: 70px;
    }
  
    .floating-cart-btn {
        width: 70px;
        height: 50px;
        border-radius: 25px;
        padding: 8px 16px;
    }
  
    .location-action-buttons {
        flex-direction: column;
    }
  
    .current-location-btn,
    .use-location-btn {
        width: 100%;
        height: auto;
        min-height: 50px;
    }
}
/* Small Mobile (max-width: 576px) */
@media (max-width: 576px) {
    #mobile-search-field-container {
        margin: 0 5px;
    }
  
    .mobile-search-field {
        font-size: 12px;
        padding: 0 8px;
    }
  
    .mobile-search-submit {
        width: 36px;
    }
  
    .header-icons {
        gap: 5px;
    }
  
    .account-icon.mobile-only {
        font-size: 20px;
    }
  
    .dots-menu-toggle {
        font-size: 20px;
    }
  
    .header-nav-row {
        overflow-x: auto;
    }
  
    .promo-links {
        white-space: nowrap;
    }
  
    .site-branding a span {
        font-size: 18px;
    }
  
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
  
    .modal-product-actions {
        flex-direction: column;
    }
  
    .modal-quantity {
        width: 100%;
    }
  
    .modal-product-actions .add-to-cart-btn {
        width: 100%;
    }
  
    .custom-nav-links {
        margin-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }
  
    .mobile-bottom-bar {
        height: 60px;
        padding: 0 8px;
    }
  
    .mobile-bottom-bar .floating-cart-btn {
        padding: 6px 12px;
        gap: 8px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .cart-info {
        gap: 8px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .cart-count-float {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .divider {
        height: 16px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .cart-total-float {
        font-size: 12px;
        padding: 2px 6px;
    }
  
    .mobile-location span,
    .mobile-delivery-time span {
        font-size: 11px;
    }
  
    .floating-cart-btn {
        width: 60px;
        height: 45px;
        border-radius: 22px;
        padding: 6px 12px;
    }
  
    .cart-icon-large {
        font-size: 18px;
    }
}
/* Very Small Mobile (max-width: 380px) */
@media (max-width: 380px) {
    #mobile-search-field-container {
        margin: 0 3px;
    }
  
    .mobile-search-form-inline {
        height: 40px;
    }
  
    .mobile-search-field {
        font-size: 13px;
        padding: 0 12px;
    }
  
    .mobile-search-submit {
        width: 46px;
        font-size: 17px;
    }
  
    .mobile-location span,
    .mobile-delivery-time span {
        font-size: 10px;
    }
  
    .mobile-location i,
    .mobile-delivery-time i {
        font-size: 18px;
    }
  
    .mobile-bottom-bar .floating-cart-btn {
        min-width: 100px;
        padding: 7px 10px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .cart-count-float {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
  
    .mobile-bottom-bar .floating-cart-btn .cart-total-float {
        font-size: 12px;
        padding: 3px 7px;
        max-width: 70px;
    }
}
/* ==========================================
   23. NOTIFICATION & UTILITY STYLES
   ========================================== */
.ecomzcare-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    animation: slideInRight 0.3s ease;
    max-width: 350px;
}
.ecomzcare-notification.success {
    border-left: 4px solid #27ae60;
}
.ecomzcare-notification.error {
    border-left: 4px solid #e74c3c;
}
.ecomzcare-notification i {
    font-size: 20px;
}
.ecomzcare-notification.success i {
    color: #27ae60;
}
.ecomzcare-notification.error i {
    color: #e74c3c;
}
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* Completed step style */
.checkout-steps .step.completed {
    background: #27ae60;
    color: var(--white);
}
.checkout-steps .step.completed i {
    margin-right: 5px;
}
/* Input error state */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #e74c3c;
}
.form-group input.error:focus,
.form-group select.error:focus,
.form-group textarea.error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}
/* Empty cart message */
.empty-cart-message {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.empty-cart-message h3 {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.empty-cart-message p {
    color: #666;
    margin-bottom: 25px;
}
.empty-cart-message .shop-now-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #e67e22 100%);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}
.empty-cart-message .shop-now-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(243, 156, 18, 0.3);
}
/* Ensure smooth transitions */
.header-top-row,
.header-main,
.header-nav-row,
.mobile-search-bar,
#mobile-search-field-container {
    will-change: transform, opacity, top;
    backface-visibility: hidden;
}
/* Prevent overflow issues */
#mobile-search-field-container .search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-suggestions) !important;
}
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex-shrink: 0;
}
.signin-link.desktop-only {
    white-space: nowrap;
}
.signin-link.desktop-only i {
    margin-right: 6px;
    font-size: 20px;
}

/* Add to style.css */
.quantity-controls-wrapper .qty-display {
    min-width: 50px; /* Increased from default to accommodate decimals */
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    background: white;
    line-height: 36px;
    padding: 0 5px;
}

/* For mobile screens */
@media (max-width: 768px) {
    .quantity-controls-wrapper .qty-display {
        min-width: 45px;
        font-size: 13px;
    }
}

/*Remove woo order metadata*/
.wc-block-components-product-metadata {
   display: none;
}