body { background: #eaeded; font-family: 'Inter', sans-serif; }
.amazon-search-bar { background: #131921; padding: 0.8rem 0; border-bottom: 8px solid #f0c14b; }
.facet-sidebar { background: #fff; padding: 1.5rem; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.facet-header { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; color: #111; margin-bottom: 0.8rem; letter-spacing: 0.3px; }

.dark-navbar { background-color: #131921 !important; border-radius: 0px !important; margin-bottom: 0px !important; }
.sidebar-category-link { color: #334155 !important; font-weight: 600; }
.sidebar-category-link:hover { color: #f0c14b !important; background: #f1f5f9 !important; }

/* =================================================================
   Header Alignment & Space Optimization Rules
   ================================================================= */

@media only screen and (max-width: 767px) {
    /* Ensure the search bar grid layout sits tight with no top gaping */
    .ui.fluid.amazon-search-bar {
        padding: 0.75rem 0 !important;
    }

    /* Force the brand text and hamburger to stand centered horizontally */
    .brand-column-wrapper {
        text-align: left !important;
        padding-bottom: 0.5rem !important;
    }

    .brand-logo {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
    }

    /* Prevent custom action wrapper spacing overrides on smaller viewports */
    .user-actions-wrapper {
        padding-top: 0.5rem !important;
        text-align: right !important;
    }
}

/* =================================================================
   MEGAMART Professional Mobile Navigation Drawer Aesthetics
   ================================================================= */

/* Main drawer panel adjustments */
#app-mobile-sidebar.ui.sidebar.vertical.menu {
    background-color: #0f172a !important; /* Rich Dark Slate Slate */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-right: 1px solid #1e293b;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
}

/* Premium Header Banner Block */
#app-mobile-sidebar .drawer-header {
    background-color: #1e293b !important; /* Elevated Slate tint */
    padding: 1.5rem 1.2rem !important;
    border-bottom: 2px solid #f0c14b; /* Matches your gold motif accent line */
    margin-bottom: 0.5rem;
}

#app-mobile-sidebar .drawer-header .ui.header {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    color: #ffffff !important;
}

/* Category & Section Label Titles */
#app-mobile-sidebar .item > .header {
    color: #94a3b8 !important; /* Muted steel text color */
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.6rem !important;
    padding-left: 0.5rem;
}

/* Navigation Row Links Architecture */
#app-mobile-sidebar .menu .item,
#app-mobile-sidebar > a.item {
    color: #cbd5e1 !important; /* High contrast readable light grey text */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 0.85rem 1.2rem !important;
    margin: 0.2rem 0.6rem !important;
    border-radius: 6px !important; /* Rounded pill structures */
    transition: all 0.2s ease-in-out !important;
}

/* Smooth Interactive Hover Matrix */
#app-mobile-sidebar .menu .item:hover,
#app-mobile-sidebar > a.item:hover {
    background-color: #1e293b !important;
    color: #f0c14b !important; /* Smooth gold illumination focus point */
    padding-left: 1.5rem !important; /* Subtle elastic push effect on focus */
}

/* Active Highlight Tracking State Rule */
#app-mobile-sidebar .menu .item.active {
    background-color: rgba(240, 193, 75, 0.15) !important; /* Faint glowing gold background */
    color: #f0c14b !important;
    font-weight: 700 !important;
    border-left: 3px solid #f0c14b;
    border-radius: 0 6px 6px 0 !important;
}

/* Inline Functional Menu Icons Alignment */
#app-mobile-sidebar .item i.icon {
    color: #f0c14b !important; /* Enforces clean global gold styling elements */
    opacity: 0.9;
    margin-right: 10px !important;
}

/* Clean Divider Rules for System Blocks */
#app-mobile-sidebar .item + a.item[style*="f43f5e"] {
    margin-top: 2rem !important;
    border-top: 1px solid #1e293b !important;
    padding-top: 1.2rem !important;
}

/* ==========================================================================
   Amazon-Style Header Search Bar Module Stylesheet
   ========================================================================= */

/* Main Header Bar Row Grounding */
.ui.fluid.amazon-search-bar {
    background: #131921;
    padding: 0.8rem 0;
}

/* Brand Logo Typography */
.brand-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: 0.5px;
}

/* Primary Action Search Button Override */
.ui.button.orange.massive.brand-search-btn {
    background-color: #f0c14b !important;
    color: #111111 !important;
}

.ui.button.orange.massive.brand-search-btn:hover {
    background-color: #ddb13b !important;
}

/* Right-Aligned Session Column Utilities */
.user-actions-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

/* Fomantic-UI Account Menu Dropdown Overrides */
.account-dropdown {
    font-weight: 600;
    color: #ffffff !important;
    background: transparent !important;
    cursor: pointer;
}

.account-dropdown-caret {
    color: #ffffff !important;
    margin-left: 0.5rem !important;
}

.account-dropdown-menu {
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Dropdown Menu Items */
.account-dropdown-menu .item.order-history-link {
    color: #0f172a !important;
    font-weight: 600;
    padding: 0.8rem 1.2rem !important;
}

.account-dropdown-menu .item.logout-link {
    color: #dc2626 !important;
    font-weight: 600;
    padding: 0.8rem 1.2rem !important;
}

/* Guest Mode Typography Link */
.guest-login-link {
    font-weight: 600;
    color: #ffffff !important;
}

/* Header Basket Element Layout */
.header-cart-anchor {
    color: #ffffff !important;
    display: flex !important;
    align-items: center;
    padding: 0.5rem 0.8rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
}

.header-cart-anchor:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.cart-label {
    margin-left: 0.2rem;
    color: #ffffff;
    font-weight: 700;
}

/* Dynamic Live Count Badge Indicator */
.dynamic-cart-badge {
    margin-left: 0.3rem !important;
    background-color: #e67e22 !important;
    font-weight: 700 !important;
}

/* Color & Icon Utility Shortcuts */
.gold-icon {
    color: #f0c14b !important;
}

.white-icon {
    color: #ffffff !important;
    opacity: 1 !important;
}

.zero-margin {
    margin: 0 !important;
}

@media only screen and (max-width: 767px) {
    /* Stretch the flex banner layout space neatly */
    .brand-column-wrapper {
        width: 100% !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Target the bottom search container row to sit tightly underneath */
    .nine.wide.column {
        width: 100% !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Completely hide the old desktop row shell wrapper on mobile viewports */
    .user-actions-wrapper.computer.only {
        display: none !important;
    }
}