/**
 * EMERE Auctions - Light Industrial Design System (Premium Polished & Balanced Grid Edition)
 * A premium, highly performant, mobile-first CSS architecture for an industrial marketplace.
 * Features warm light backgrounds, solid borders, geometric typography, and high-visibility yellow indicators.
 */

/* ==========================================================================
   1. DESIGN TOKENS & RESET SYSTEM
   ========================================================================== */
:root {
    /* Color Palette */
    --bg-page: #f4f5f7;
    --bg-surface: #ffffff;
    --bg-dark-charcoal: #111827;
    --bg-dark-charcoal-hover: #1f2937;
    
    --accent-yellow: #f2a900;
    --accent-yellow-hover: #d99700;
    --accent-yellow-glow: rgba(242, 169, 0, 0.15);
    
    --success-green: #10b981;
    --success-green-glow: rgba(16, 185, 129, 0.12);
    --upcoming-blue: #3b82f6;
    
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #8b96a5;
    
    --border-slate: #e5e7eb;
    --border-slate-hover: #d1d5db;
    --border-yellow-glow: rgba(242, 169, 0, 0.35);
    
    /* Typography System */
    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --transition-smooth: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Normalized Spacing Scale */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-xxl: 45px;

    /* Normalized Typography Scale (Mobile Default) */
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.72rem;
    --font-size-base: 0.8rem;
    --font-size-md: 0.85rem;
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
}

/* Reset and Container normalization */
.emere-auctions-wrapper.light-industrial-theme {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-primary);
    padding: var(--space-md);
    border-radius: 12px;
    border: 1px solid var(--border-slate);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
    /* CRITICAL FIX: Overflow MUST be visible to allow sticky sidebars to function! */
    overflow: visible !important;
}

.emere-auctions-wrapper.light-industrial-theme * {
    box-sizing: border-box;
}

/* Utility Color Classes */
.font-green {
    color: #10b981 !important;
}
.font-red {
    color: #ef4444 !important;
}

/* Strict Icon Sizing & Boundary Constraints */
.emere-auctions-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
}

.emere-icon {
    width: 18px !important;
    height: 18px !important;
    vertical-align: -0.125em;
    display: inline-block;
    flex-shrink: 0;
}

/* ==========================================================================
   2. MOBILE DEFAULT LAYOUT SYSTEM (MOBILE-FIRST)
   ========================================================================== */

/* Main Layout Wrapper (Default: single column stacked layout) */
.emere-auctions-layout-three-columns {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow: visible !important;
}

.layout-column {
    min-width: 0; /* Prevents overflow blowouts in flex items */
}

/* Navigation & Hero Bar (Mobile View) */
.emere-auctions-hero-bar {
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    border-radius: 8px;
    margin-bottom: var(--space-md);
    gap: var(--space-sm);
}

.hero-brand {
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.yellow-text {
    color: var(--accent-yellow);
}

.hero-bar-divider {
    display: none; /* Hide on mobile to prevent clutter */
}

.hero-bar-tagline {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.hero-bar-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
}

.hero-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.hero-nav-item:hover,
.hero-nav-item.is-active {
    color: var(--accent-yellow);
    border-bottom-color: var(--accent-yellow);
}

.nav-icon {
    width: 14px;
    height: 14px;
}

/* Mobile-Only Top Search Toolbar (Normal flow, static scroll) */
.industrial-mobile-top-bar {
    display: block;
    margin-bottom: var(--space-md);
}

.mobile-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-search-icon {
    display: none !important;
}

.mobile-search-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.mobile-search-input {
    width: 100%;
    height: 44px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    padding: 0 40px 0 16px;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.mobile-search-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 3px var(--accent-yellow-glow);
}

.mobile-search-clear {
    position: absolute;
    right: var(--space-md);
    background: transparent !important;
    border: none !important;
    font-size: 1.4rem;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
}

/* Hide desktop banner search by default on mobile */
.industrial-search-banner {
    display: none !important;
}

/* Loop Header Bar (Normal Flow, Static Layout on Mobile) */
.industrial-loop-header-light {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    margin: 0 0 var(--space-md) 0;
    padding: var(--space-xs);
    transition: var(--transition-smooth);
}

/* Hide desktop controls/counts in default mobile view */
.desktop-only-count,
.desktop-only-controls {
    display: none !important;
}

/* Mobile Controls Row alignment and Touch target scaling */
.mobile-action-row {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    width: 100%;
}

.mobile-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate) !important;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    gap: var(--space-xxs);
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0 var(--space-xs);
    line-height: 1;
}

.mobile-action-btn:hover {
    background-color: var(--bg-page);
    border-color: var(--border-slate-hover) !important;
}

.mobile-sort-wrapper {
    flex: 1.3;
    position: relative;
    height: 44px;
}

.mobile-sort-select {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding-left: 28px;
    padding-right: 12px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.sort-icon-overlay {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-primary);
    width: 14px !important;
    height: 14px !important;
}

.mobile-layout-toggle-btn {
    flex: 0 0 44px;
    width: 44px;
    background-color: transparent;
    color: var(--text-muted);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-layout-toggle-btn .emere-icon {
    vertical-align: middle !important;
    margin: 0 !important;
    display: block !important;
}

.mobile-layout-toggle-btn.is-active {
    background-color: var(--bg-dark-charcoal) !important;
    color: var(--accent-yellow) !important;
    border-color: var(--bg-dark-charcoal) !important;
}

/* Off-canvas Left Filter Sidebar System */
.emere-left-sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 290px;
    height: 100vh;
    background-color: var(--bg-surface);
    z-index: 9999;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-105%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.emere-left-sidebar-wrapper.is-open {
    transform: translateX(0);
}

.offcanvas-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    flex-shrink: 0;
}

.offcanvas-title {
    font-weight: 800;
    font-size: var(--font-size-md);
    letter-spacing: 0.05em;
}

.offcanvas-close-btn {
    background: transparent !important;
    border: none !important;
    color: var(--bg-surface) !important;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* Ensure inner column scrolls on mobile offcanvas */
.layout-column.column-left {
    flex-grow: 1;
    overflow-y: auto;
    position: static;
    height: auto;
}

/* Filter Widget Items styling */
.emere-left-sidebar {
    background-color: var(--bg-surface);
    padding: var(--space-md);
}

.industrial-widget {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-slate);
}

.industrial-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.industrial-widget-title {
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.industrial-sidebar-scroll-list {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* Scrollbar styling for filters */
.industrial-sidebar-scroll-list::-webkit-scrollbar {
    width: 4px;
}
.industrial-sidebar-scroll-list::-webkit-scrollbar-track {
    background: transparent;
}
.industrial-sidebar-scroll-list::-webkit-scrollbar-thumb {
    background: var(--border-slate);
    border-radius: 4px;
}

/* Customizable checkboxes */
.industrial-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    cursor: pointer;
    background-color: #fafbfc;
    transition: var(--transition-smooth);
}

.industrial-checkbox-row:hover {
    border-color: var(--border-slate-hover);
    background-color: var(--bg-page);
}

.industrial-checkbox-row.is-active {
    border-color: var(--accent-yellow);
    background-color: rgba(242, 169, 0, 0.02);
}

.industrial-checkbox-left-col {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* CRITICAL FIX: Hide the native browser checkboxes completely */
.industrial-checkbox-hidden {
    display: none !important;
}

.industrial-checkbox-visual {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-slate);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface);
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.industrial-checkbox-visual::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid var(--bg-surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: var(--transition-smooth);
    margin-bottom: 2px;
}

.industrial-checkbox-row.is-active .industrial-checkbox-visual {
    border-color: var(--accent-yellow);
    background-color: var(--accent-yellow);
}

.industrial-checkbox-row.is-active .industrial-checkbox-visual::after {
    transform: rotate(45deg) scale(1);
}

.industrial-checkbox-label {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
}

.industrial-checkbox-badge {
    font-size: var(--font-size-xs);
    font-weight: 800;
    color: var(--text-secondary);
    background-color: var(--border-slate);
    padding: 2px 6px;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.industrial-checkbox-row.is-active .industrial-checkbox-badge {
    background-color: var(--accent-yellow);
    color: var(--bg-dark-charcoal);
}

/* Price Range & Primary Buttons */
.industrial-price-range-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.industrial-price-inputs-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.industrial-price-input {
    width: 100%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 4px;
    padding: 10px;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: center;
    transition: var(--transition-smooth);
}

.industrial-price-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
}

.price-input-divider {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 700;
}

.industrial-primary-btn {
    background-color: var(--accent-yellow);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    padding: 0 var(--space-md);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
}

.industrial-primary-btn:hover {
    background-color: var(--accent-yellow-hover);
}

/* Reset Filter button container - BEAUTIFULLY POLISHED RED DOTTED BUTTON */
#sidebar-reset-container {
    margin-top: var(--space-md);
}

.industrial-reset-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    height: 44px;
    background-color: transparent;
    border: 2px dashed #ef4444 !important;
    border-radius: 6px;
    color: #ef4444 !important;
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0 var(--space-xs);
}

.industrial-reset-button:hover {
    background-color: rgba(239, 68, 68, 0.05);
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

.industrial-reset-icon {
    width: 16px !important;
    height: 16px !important;
    color: currentColor;
    flex-shrink: 0;
}

.industrial-secondary-btn {
    background-color: var(--border-slate);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
}

.industrial-secondary-btn:hover {
    background-color: var(--border-slate-hover);
}

/* Backdrop for Mobile offcanvas drawer */
.industrial-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.6);
    z-index: 9998;
    display: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.industrial-offcanvas-overlay.is-active {
    display: block;
}

/* Right promo sidebar is completely hidden on mobile default */
.layout-column.column-right {
    display: none;
}

/* Accordion triggers default on mobile: interactive and toggleable */
.accordion-trigger {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.accordion-icon {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease;
}

.accordion-widget.is-open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
}

.accordion-widget.is-open .accordion-content {
    display: block;
}

/* ==========================================================================
   3. MOBILE DENSE GRID & CARD STYLES
   ========================================================================== */
.industrial-grid-panel {
    position: relative;
    min-width: 0;
    overflow: visible !important;
}

.emere-auctions-grid {
    transition: var(--transition-smooth);
    overflow: visible !important;
}

/* Mobile Dense Grid: 2 Cards per Row (Highly structured, auto-fits width) */
.emere-auctions-grid.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
}

/* Card foundation: Equal height flexboxes with fluid scaling */
.industrial-compact-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
    height: 100%;
}

.industrial-compact-card:hover {
    border-color: var(--border-yellow-glow);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Media Thumbnail Container */
.compact-card-media {
    position: relative;
    aspect-ratio: 1.35;
    overflow: hidden;
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--border-slate);
    width: 100%;
    flex-shrink: 0;
}

.compact-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.compact-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-smooth);
}

.compact-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.compact-image-placeholder svg {
    width: 32px;
    height: 32px;
}

/* Ends-In Floating Pill Overlay */
.floating-ends-in-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    background-color: rgba(17, 24, 39, 0.85);
    color: var(--accent-yellow);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 6px;
    border-radius: 3px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    max-width: calc(100% - 36px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PREMIUM NATIVE CIRCULAR WATCHLIST HEART BUTTON - Glassmorphic B2B Favorite Button */
.floating-watchlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10 !important; /* Locks clearly above thumbnails or layouts */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(229, 231, 235, 0.7) !important;
    color: var(--text-secondary) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06) !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.floating-watchlist-btn:hover {
    background: #ffffff !important;
    border-color: var(--accent-yellow) !important;
    color: #ef4444 !important; /* Premium Red heart on hover */
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(242, 169, 0, 0.22) !important;
}

.floating-watchlist-btn:hover .heart-icon {
    transform: scale(1.1);
}

/* Active "Is Watched" State: Solid Premium Red fill and clean border highlight */
.floating-watchlist-btn.is-watched {
    background: #ffffff !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.1) !important;
}

.floating-watchlist-btn.is-watched:hover {
    border-color: #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22) !important;
}

.floating-watchlist-btn.is-watched .heart-icon {
    fill: #ef4444 !important;
}

.heart-icon {
    width: 15px !important;
    height: 15px !important;
    color: currentColor !important;
    fill: none;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Card details container */
.compact-card-details {
    padding: var(--space-xs);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.industrial-compact-card .industrial-card-cats {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compact-card-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.25;
    margin: 4px 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.compact-card-title a:hover {
    color: var(--accent-yellow);
}

.compact-card-location {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: auto; /* Push metadata and bidding downwards */
}

.compact-card-location::before {
    content: '•';
    color: var(--accent-yellow);
    font-weight: 800;
    margin-right: 1px;
}

.compact-card-meta-row {
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-muted);
}

/* Card Actions / Bidding Panel */
.compact-card-actions {
    background-color: #fafbfc;
    border-top: 1px solid var(--border-slate);
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: auto;
    flex-shrink: 0;
}

.compact-pricing-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.current-bid-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.price-bids-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.compact-pricing-display .price-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.compact-pricing-display .current-bid-value {
    font-size: var(--font-size-md);
    font-weight: 800;
    color: var(--text-primary);
}

.compact-pricing-display .woocommerce-Price-currencySymbol {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 700;
}

.price-value-secondary {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-decoration: line-through;
    font-weight: 600;
}

.meta-bids-count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-muted);
}

/* Interactive Quick Bid Forms */
.compact-quick-bid-form-wrapper {
    position: relative;
}

/* MOBILE DEFAULT STACKING for both grid AND ALL list card forms globally (mobile, tablet, desktop) to avoid squishing */
.layout-grid .compact-quick-bid-form,
.emere-auctions-grid.layout-list .compact-quick-bid-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.layout-grid .quick-bid-input-group,
.emere-auctions-grid.layout-list .quick-bid-input-group {
    width: 100%;
}

.layout-grid .quick-bid-input-field,
.emere-auctions-grid.layout-list .quick-bid-input-field {
    width: 100%;
}

.layout-grid .compact-quick-bid-btn,
.emere-auctions-grid.layout-list .compact-quick-bid-btn {
    width: 100%;
}

/* Base side-by-side styles used inside desktop layout grid */
.compact-quick-bid-form {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 4px;
}

.quick-bid-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.bid-input-currency-symbol {
    position: absolute;
    left: 6px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-muted);
    pointer-events: none;
}

.quick-bid-input-field {
    width: 100%;
    height: 36px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 4px;
    padding: 0 2px 0 14px;
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    font-family: var(--font-primary);
    font-weight: 700;
    transition: var(--transition-smooth);
    text-align: center;
}

.quick-bid-input-field:focus {
    outline: none;
    border-color: var(--accent-yellow);
}

.quick-bid-input-field::-webkit-outer-spin-button,
.quick-bid-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.compact-quick-bid-btn {
    background-color: var(--accent-yellow);
    color: var(--text-primary);
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition-smooth);
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-quick-bid-btn:hover {
    background-color: var(--accent-yellow-hover);
}

/* Fallback button layout */
.compact-action-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    background-color: var(--bg-page);
    border: 1px solid var(--border-slate);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.compact-action-link-btn:hover {
    background-color: var(--border-slate);
}

/* Inline feedback toasts */
.quick-bid-feedback-toast {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: all 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 5;
}

.quick-bid-feedback-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.quick-bid-feedback-toast.toast-error {
    background-color: #ef4444;
}

.quick-bid-feedback-toast.toast-success {
    background-color: #10b981;
}

/* Mobile List View Layout Adaptation (Safe details padding added) */
.emere-auctions-grid.layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.emere-auctions-grid.layout-list .industrial-compact-card {
    display: grid;
    grid-template-columns: 105px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "media details"
        "media actions";
    height: auto;
}

.emere-auctions-grid.layout-list .compact-card-media {
    grid-area: media;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--border-slate);
}

/* CRITICAL FIX: Safe padding right (36px) clears the absolute watchlist button */
.emere-auctions-grid.layout-list .compact-card-details {
    grid-area: details;
    padding: 8px 36px 4px 10px;
}

.emere-auctions-grid.layout-list .compact-card-actions {
    grid-area: actions;
    padding: 0 10px 8px 10px;
    border-top: none;
    background-color: transparent;
}

.emere-auctions-grid.layout-list .compact-card-title {
    font-size: var(--font-size-md);
    margin-bottom: 2px;
}

/* ==========================================================================
   4. INTERACTIVE GLOBAL ELEMENTS
   ========================================================================== */

/* Pagination container */
.emere-auctions-pagination-container {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: center;
}

.industrial-pagination-list {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    overflow: hidden;
}

.industrial-pagination-item {
    border-right: 1px solid var(--border-slate);
}

.industrial-pagination-item:last-child {
    border-right: none;
}

.industrial-pagination-item a,
.industrial-pagination-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px; /* Optimal touch target */
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 700;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.industrial-pagination-item svg {
    width: 10px;
    height: 10px;
}

.industrial-pagination-item a:hover {
    background-color: var(--bg-page);
    color: var(--accent-yellow);
}

.industrial-pagination-item.is-active span,
.industrial-pagination-item.is-active a {
    background-color: var(--accent-yellow);
    color: var(--text-primary);
    cursor: default;
}

/* Empty State / No Auctions Found */
.industrial-no-records-light {
    grid-column: 1 / -1;
    background-color: var(--bg-surface);
    border: 2px dashed var(--border-slate);
    border-radius: 8px;
    padding: 40px var(--space-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-records-shield {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(75, 85, 99, 0.05);
    border: 1px solid var(--border-slate);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.no-records-shield svg {
    width: 22px;
    height: 22px;
}

.no-records-title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.no-records-desc {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.4;
    margin: 0 0 var(--space-md) 0;
}

.center-button {
    margin: 0 auto;
}

/* Loader Shimmer Overlays */
.emere-auctions-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    border-radius: 6px;
}

.emere-auctions-grid-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.industrial-shimmer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-slate);
    padding: var(--space-md) var(--space-lg);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.industrial-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(242, 169, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--accent-yellow);
    animation: spinning-gear 0.75s linear infinite;
}

.industrial-spinner-text {
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

@keyframes gear-spin {
    to { transform: rotate(360deg); }
}

@keyframes spinning-gear {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   5. PROGRESSIVE VIEWPORT ENHANCEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Tablet Viewport Adjustment (min-width: 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --font-size-xs: 0.7rem;
        --font-size-sm: 0.78rem;
        --font-size-base: 0.85rem;
        --font-size-md: 0.9rem;
        --font-size-lg: 1.15rem;
        --font-size-xl: 1.4rem;
        --font-size-xxl: 1.8rem;
        
        --space-md: 20px;
        --space-lg: 25px;
    }

    .emere-auctions-wrapper.light-industrial-theme {
        padding: var(--space-md);
    }

    /* Tablet Grid View: Perfect auto-fit to scale dynamically and fill voids */
    .emere-auctions-grid.layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-md);
    }

    .compact-card-details {
        padding: var(--space-sm);
    }

    .compact-card-actions {
        padding: var(--space-sm);
    }

    /* Restore price display layout inside tablet grids only, keeping list view stacked */

    /* Tablet List View Cards: Wide horizontal rows */
    .emere-auctions-grid.layout-list .industrial-compact-card {
        display: flex;
        flex-direction: row;
        height: auto;
        align-items: stretch;
    }

    .emere-auctions-grid.layout-list .compact-card-media {
        width: 180px;
        aspect-ratio: auto;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid var(--border-slate);
    }

    .emere-auctions-grid.layout-list .compact-card-details {
        padding: var(--space-md) 44px var(--space-md) var(--space-md);
        justify-content: center;
        flex-grow: 1;
    }

    .emere-auctions-grid.layout-list .compact-card-actions {
        width: 200px;
        flex-shrink: 0;
        border-top: none;
        border-left: 1px solid var(--border-slate);
        justify-content: center;
        background-color: #fafbfc;
        padding: var(--space-md);
    }
}

/* --------------------------------------------------------------------------
   B. Desktop & Laptop Viewports (min-width: 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    :root {
        --font-size-xs: 0.72rem;
        --font-size-sm: 0.8rem;
        --font-size-base: 0.88rem;
        --font-size-md: 0.95rem;
        --font-size-lg: 1.2rem;
        --font-size-xl: 1.6rem;
        --font-size-xxl: 2.1rem;

        --space-md: 24px;
        --space-lg: 30px;
    }

    /* Reorganize wrapper into elegant 3-column system */
    .emere-auctions-layout-three-columns {
        display: grid;
        grid-template-columns: 260px 1fr 260px;
        gap: var(--space-lg);
        align-items: start;
        overflow: visible !important;
    }

    /* Hero / Top Navigation Bar (Desktop layout) */
    .emere-auctions-hero-bar {
        flex-direction: row;
        justify-content: space-between;
        padding: 16px 30px;
        margin-bottom: var(--space-lg);
    }

    .hero-brand {
        font-size: var(--font-size-xxl);
    }

    .hero-bar-divider {
        display: inline;
        color: rgba(255, 255, 255, 0.15);
        margin: 0 15px;
        font-weight: 300;
    }

    .hero-bar-tagline {
        font-size: 0.75rem;
    }

    .hero-bar-right {
        width: auto;
        gap: 25px;
    }

    .hero-nav-item {
        font-size: 0.75rem;
    }

    /* Display Desktop Search Banner & Hide Mobile Top Bar */
    .industrial-search-banner {
        display: flex !important;
        background-color: var(--bg-surface);
        border: 2px solid var(--border-slate);
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: var(--space-md);
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        transition: var(--transition-smooth);
        height: 50px;
    }

    .industrial-search-banner:focus-within {
        border-color: var(--accent-yellow);
        box-shadow: 0 0 0 3px var(--accent-yellow-glow);
    }

    .industrial-mobile-top-bar {
        display: none !important;
    }

    /* Search Banner components */
    .search-banner-select-wrapper {
        position: relative;
        width: 170px;
        border-right: 2px solid var(--border-slate);
        background-color: #fafbfc;
        flex-shrink: 0;
    }

    .search-banner-select {
        width: 100%;
        height: 46px; /* balanced inside 50px container with borders */
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: var(--font-size-md);
        font-weight: 700;
        font-family: var(--font-primary);
        padding: 0 32px 0 15px;
        cursor: pointer;
        outline: none;
    }

    .select-banner-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-secondary);
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    .search-banner-input-wrapper {
        position: relative;
        flex-grow: 1;
        display: flex;
        align-items: center;
    }

    .search-banner-input {
        width: 100%;
        height: 46px;
        border: none;
        background: transparent;
        padding: 0 45px 0 20px;
        font-size: var(--font-size-md);
        color: var(--text-primary);
        font-family: var(--font-primary);
        font-weight: 500;
        outline: none;
    }

    .banner-search-clear-btn {
        position: absolute;
        right: 15px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.4rem;
        cursor: pointer;
        padding: 0;
        display: none;
    }

    .search-banner-submit-btn {
        background-color: var(--accent-yellow) !important;
        color: var(--text-primary) !important;
        border: none !important;
        font-size: var(--font-size-base);
        font-weight: 800;
        letter-spacing: 0.05em;
        padding: 0 35px;
        cursor: pointer;
        transition: var(--transition-smooth);
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-banner-submit-btn:hover {
        background-color: var(--accent-yellow-hover);
    }

    /* Transform Left Filters back to Inline Sidebar (Not Drawer) */
    .emere-left-sidebar-wrapper {
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        z-index: auto;
        box-shadow: none;
        transform: none;
        display: block;
    }

    .offcanvas-header-bar {
        display: none;
    }

    .emere-left-sidebar {
        border: 1px solid var(--border-slate);
        border-radius: 8px;
        padding: var(--space-md);
    }

    /* PREMIUM DESKTOP STICKY SIDEBARS - Stacked beautifully close to the top of screen */
    .layout-column.column-left {
        position: sticky !important;
        top: 20px !important; /* Close to the top of screen since loop header is normal static flow */
        z-index: 90 !important;
        overflow-y: visible !important;
        transition: top 0.2s ease;
    }

    /* Support offsets for active WordPress admin bar on desktop sidebars */
    .admin-bar .layout-column.column-left {
        top: 52px !important;
    }

    /* Force accordions to stay open on desktop */
    .accordion-content {
        display: block !important;
    }

    .accordion-trigger {
        cursor: default;
    }

    .accordion-icon {
        display: none !important;
    }

    /* Render Right promo sidebar inline & make sticky scroll-friendly */
    .layout-column.column-right {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        position: sticky !important;
        top: 20px !important; /* Aligned with left sidebar top offset */
        z-index: 90 !important;
        transition: top 0.2s ease;
        overflow: visible !important;
    }

    /* Support offsets for active WordPress admin bar on desktop right sidebars */
    .admin-bar .layout-column.column-right {
        top: 52px !important;
    }

    .industrial-promo-card {
        background-color: var(--bg-dark-charcoal);
        border-radius: 8px;
        padding: var(--space-lg) var(--space-md);
        color: var(--bg-surface);
        position: relative;
        overflow: hidden;
    }

    .promo-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .promo-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--accent-yellow);
        font-size: var(--font-size-xs);
        font-weight: 800;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-xs);
    }

    .font-green {
        color: #10b981 !important;
    }

    .promo-badge-icon {
        width: 12px;
        height: 12px;
    }

    .promo-card-title {
        font-size: var(--font-size-lg);
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 var(--space-md) 0;
        letter-spacing: -0.01em;
    }

    .promo-card-illustration {
        margin-bottom: var(--space-md);
        width: 76px;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.03);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .industrial-gears-svg {
        width: 44px;
        height: 44px;
        animation: gear-spin 12s linear infinite;
    }

    .industrial-handshake-svg {
        width: 40px;
        height: 40px;
    }

    .promo-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px var(--space-md);
        border-radius: 4px;
        font-size: var(--font-size-base);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-decoration: none;
        transition: var(--transition-smooth);
    }

    .eshop-btn {
        background-color: var(--accent-yellow);
        color: var(--bg-dark-charcoal);
    }

    .eshop-btn:hover {
        background-color: var(--accent-yellow-hover);
    }

    .stock-btn {
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--bg-surface);
    }

    .stock-btn:hover {
        background-color: var(--bg-surface);
        color: var(--bg-dark-charcoal);
    }

    /* NORMAL STATIC LOOP HEADER BAR (No sticky positions, scrolls naturally) */
    .industrial-loop-header-light {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-slate);
        border-radius: 8px;
        margin: 0 0 var(--space-md) 0;
        padding: 12px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-action-row {
        display: none !important; /* Hide sticky action row */
    }

    .desktop-only-count {
        display: block !important;
    }

    .industrial-count-block .count-value {
        font-size: var(--font-size-md);
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: 0.03em;
    }

    .desktop-only-controls {
        display: flex !important;
        align-items: center;
        gap: 20px;
    }

    /* Desktop Sorting Select - balanced heights */
    .industrial-header-sort-widget {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sort-prefix {
        font-size: var(--font-size-xs);
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .sort-select-container {
        position: relative;
        display: flex;
        align-items: center;
    }

    .sort-select-field {
        appearance: none;
        -webkit-appearance: none;
        background-color: var(--bg-surface);
        border: 1px solid var(--border-slate);
        border-radius: 4px;
        padding: 8px 30px 8px 12px;
        color: var(--text-primary);
        font-size: var(--font-size-base);
        font-weight: 700;
        font-family: var(--font-primary);
        cursor: pointer;
        transition: var(--transition-smooth);
        height: 38px;
        line-height: 1;
        outline: none;
    }

    .sort-select-field:focus {
        border-color: var(--accent-yellow);
    }

    .sort-chevron-icon {
        position: absolute;
        right: 10px;
        color: var(--text-secondary);
        pointer-events: none;
        display: flex;
        align-items: center;
    }

    /* Desktop Grid/List Layout Switcher */
    .industrial-layout-switcher {
        display: flex;
        background-color: var(--bg-page);
        padding: 3px;
        border-radius: 6px;
        border: 1px solid var(--border-slate);
        height: 38px;
        align-items: center;
    }

    .layout-toggle-btn {
        background: transparent !important;
        border: none !important;
        height: 30px;
        width: 32px;
        padding: 0;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: var(--transition-smooth);
    }

    .layout-toggle-btn .emere-icon {
        vertical-align: middle !important;
        margin: 0 !important;
        display: block !important;
    }

    .layout-toggle-btn:hover {
        color: var(--text-primary);
    }

    .layout-toggle-btn.is-active {
        background-color: var(--bg-dark-charcoal) !important;
        color: var(--accent-yellow) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }

    /* Grid scaling for desktop card content - Limit stretch for 1-item search results */
    .emere-auctions-grid.layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--space-md);
    }

    /* Limit card stretch in grid layout for clean proportions when 1 result is returned */
    .layout-grid .industrial-compact-card {
        max-width: 330px;
        width: 100%;
    }


    .layout-grid .quick-bid-input-field {
        height: 40px;
        font-size: var(--font-size-base);
        padding-left: 18px;
    }

    .layout-grid .compact-quick-bid-btn,
    .layout-grid .compact-action-link-btn {
        height: 40px;
    }
}

/* --------------------------------------------------------------------------
   C. Ultra-Wide Adjustments (min-width: 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Stabilize wider multi-column layout proportions */
    .emere-auctions-layout-three-columns {
        grid-template-columns: 270px 1fr 270px;
        gap: var(--space-xl);
    }

    .emere-auctions-grid.layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    }
}

/* ==========================================================================
   6. PREMIUM NESTED CATEGORY TREE & SIDEBAR STABILIZATION
   ========================================================================== */

/* Indent subcategory nodes visually under parents */
.category-tree-node {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.category-row-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    background-color: #fafbfc;
    transition: var(--transition-smooth);
    min-height: 40px; /* Capped consistent row heights */
    width: 100%;
    box-sizing: border-box;
}

.category-row-wrapper:hover {
    border-color: var(--border-slate-hover);
    background-color: var(--bg-page);
}

.category-row-wrapper.is-active {
    border-color: var(--accent-yellow);
    background-color: rgba(242, 169, 0, 0.02);
}

.category-row-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Tighter grouping */
    min-width: 0;
    flex-grow: 1;
}

.category-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
    flex-grow: 1;
    user-select: none;
}

/* Visual toggle chevron integrated directly inside tree-row */
.category-node-toggle {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
    padding: 0;
    flex-shrink: 0;
}

.category-node-toggle:hover {
    color: var(--text-primary);
}

.category-node-toggle svg {
    width: 9px;
    height: 9px;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.category-node-toggle-spacer {
    width: 20px;
    flex-shrink: 0;
    display: inline-block;
}

/* Strict ellipsis name wrapping constraints to prevent multi-line breaks */
.industrial-checkbox-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 145px; /* Perfect B2B text boundary limit */
    display: inline-block;
    vertical-align: middle;
}

/* Progressive hierarchical indentation - Align sub-checkbox directly under parent text */
.subcategory-wrapper {
    margin-left: 20px !important; /* Visual offset to align subcategory checkbox perfectly under parent text */
    border-left: none !important;
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Neutralize cumulative nesting padding and borders for deeper levels */
.subcategory-wrapper .subcategory-wrapper {
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
}

/* Completely hide chevrons and spacer slots to match the clean checkbox list example */
.category-node-toggle,
.category-node-toggle-spacer {
    display: none !important;
}

/* Strong typography and prominence for Main Category (depth-0) */
.category-tree-node.depth-0 > .category-row-wrapper .industrial-checkbox-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: #111827;
    max-width: 170px;
}

/* ALL child levels (depth >= 1) render using the SAME subcategory visual style and same alignment */
.category-tree-node:not(.depth-0) > .category-row-wrapper {
    min-height: 24px; /* Perfectly consistent compact row height */
}

.category-tree-node:not(.depth-0) > .category-row-wrapper .industrial-checkbox-name {
    font-size: 0.82rem;
    font-weight: 400;
    color: #374151;
    max-width: 150px;
}

/* Parentheses count badge style placed inline directly next to text */
.industrial-checkbox-badge {
    font-size: inherit !important;
    font-weight: 400 !important;
    background-color: transparent !important;
    background: transparent !important;
    color: #5c6873 !important;
    padding: 0 !important;
    border: none !important;
    margin-left: 4px !important;
    display: inline !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Row elements perfect vertical alignment & flat non-boxy style */
.category-row-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left-aligned flex structure */
    padding: 2px 0; /* Minimal tight vertical gap */
    border: none !important; /* Absolutely remove all boxy borders */
    border-radius: 0 !important; /* Absolutely flat */
    background-color: transparent !important; /* Absolutely transparent */
    background: transparent !important;
    transition: var(--transition-smooth);
    min-height: 26px; /* High density catalog spacing */
    width: 100%;
    box-sizing: border-box;
}

.category-row-wrapper:hover {
    background-color: transparent !important;
}

.category-row-wrapper:hover .industrial-checkbox-name {
    color: var(--accent-yellow) !important;
}

.category-row-wrapper.is-active .industrial-checkbox-name {
    color: var(--accent-yellow) !important;
}

.category-row-left {
    display: flex;
    align-items: center;
    gap: 6px; /* Unified tight spacing */
    min-width: 0;
    flex-grow: 1;
    height: 100%;
}

.category-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 0;
    flex-grow: 1;
    user-select: none;
    margin: 0;
    height: 100%;
}

/* Flat structured category tree nodes with no spacing borders */
.category-tree-node {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Premium grey, rounded-square B2B checkbox visuals */
.industrial-checkbox-visual {
    width: 14px;
    height: 14px;
    border: 1px solid #8b96a5 !important;
    border-radius: 3px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface);
    transition: var(--transition-smooth);
    flex-shrink: 0;
    margin: 0;
}

.industrial-checkbox-visual::after {
    border: solid var(--bg-surface);
    border-width: 0 1.5px 1.5px 0;
    width: 4px;
    height: 7px;
}

.category-row-wrapper.is-active .industrial-checkbox-visual {
    border-color: var(--accent-yellow) !important;
    background-color: var(--accent-yellow) !important;
}

.category-row-wrapper.is-active .industrial-checkbox-visual::after {
    transform: rotate(45deg) scale(1) !important; /* Force scale checkmark when active */
}

.industrial-checkbox-name {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* Force B2B catalog subcategories to stay open and always expanded */
.subcategory-wrapper {
    display: flex !important;
}

/* Softer empty row muted state (opacity is highly readable but visually distinct) */
.category-row-wrapper.is-empty-muted {
    opacity: 0.62 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.category-row-wrapper.is-empty-muted:hover {
    opacity: 0.85 !important;
}

/* Scrollbar independent list wrapper padding */
.industrial-sidebar-scroll-list {
    max-height: 340px; /* Highly scalable scroll list */
    overflow-y: auto;
    padding-right: 8px; /* Safe scroll padding prevents visual scroll overlap */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ==========================================================================
   7. PREMIUM DUAL PRICE RANGE SLIDER
   ========================================================================== */
.emere-price-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: 25px; /* Leave space for bubbles */
    margin-bottom: 15px;
    padding: 0 5px;
}

.price-slider-bubble-container {
    position: relative;
    height: 18px;
    width: 100%;
    margin-bottom: 8px;
}

.price-slider-bubble {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-primary);
    background-color: var(--border-slate);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1;
    pointer-events: none;
    font-family: var(--font-primary);
}

.price-slider-container {
    position: relative;
    height: 20px;
    width: 100%;
    display: flex;
    align-items: center;
}

.price-slider-track-bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
    background-color: var(--border-slate);
    border-radius: 3px;
    z-index: 1;
}

.price-slider-track-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--accent-yellow), var(--accent-yellow-hover));
    border-radius: 3px;
    z-index: 2;
}

.price-slider-input {
    position: absolute;
    width: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    margin: 0;
    z-index: 3;
}

/* Chrome, Safari, Opera, and Edge input styles */
.price-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 3px solid var(--accent-yellow) !important;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin-top: 0;
    transition: transform 0.1s ease;
}

.price-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Firefox input styles */
.price-slider-input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff !important;
    border: 3px solid var(--accent-yellow) !important;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease;
}

.price-slider-input::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.price-slider-input::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.price-slider-input::-moz-range-track {
    background: transparent;
    border: none;
}

/* ==========================================================================
   AUTHENTICATION & PORTAL ECOSYSTEM (PHASE 3: HIGH-FIDELITY B2B SAAS STYLE)
   ========================================================================== */

/* 1. Guest Authentication Flow Layout */
.emere-auth-ecosystem-wrapper.centered-tabs-layout {
    background-color: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    margin: 60px auto;
    max-width: 580px;
    font-family: var(--font-primary);
}

/* Guest Account Escape Sourcing Navigation Row */
.emere-auth-escape-actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--font-primary);
    text-align: center;
}

.escape-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}

.escape-buttons-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.escape-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 50px;
    background-color: #ffffff;
    border: 1px solid rgba(229, 231, 235, 0.8);
    font-size: 11px;
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.02);
}

.escape-pill-btn:hover {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    box-shadow: 0 4px 12px rgba(242, 169, 0, 0.06);
    transform: translateY(-1px);
}

.escape-pill-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.escape-pill-btn:hover .dashicons {
    color: var(--accent-yellow);
}

.emere-auth-card-container {
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.7);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.04), 0 4px 12px rgba(17, 24, 39, 0.01);
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-auth-card-container:hover {
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.06);
    border-color: rgba(229, 231, 235, 0.9);
}

/* Tabs Switcher Segmented Control (Premium SaaS/Stripe Style) */
.emere-auth-tabs {
    display: flex;
    background-color: #f3f4f6;
    padding: 6px;
    margin: 24px 24px 0 24px;
    border-radius: 10px;
    border: 1px solid rgba(229, 231, 235, 0.8);
}

.emere-auth-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    outline: none !important;
    padding: 11px 16px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.emere-auth-tab-btn:hover {
    color: var(--bg-dark-charcoal);
    background-color: rgba(0, 0, 0, 0.03);
}

.emere-auth-tab-btn.active {
    color: var(--bg-dark-charcoal);
    background-color: var(--bg-surface);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    font-weight: 700;
}

/* Clear gold underline highlight under active button is not needed due to segmented control, but we keep tab btn extremely simple & polished */

/* Tab Contents */
.emere-auth-tab-contents {
    padding: var(--space-xl) var(--space-xl) 32px var(--space-xl);
}

.emere-auth-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-auth-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Form rhythms and inputs */
.emere-auth-form {
    margin-top: var(--space-xs);
}

.emere-auth-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 576px) {
    .emere-auth-row {
        flex-direction: row;
        gap: var(--space-md);
    }
    .emere-auth-row .half-width {
        flex: 1;
    }
}

.emere-auth-field-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.emere-auth-field-group label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.emere-auth-input {
    width: 100%;
    height: 48px;
    background-color: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 8px;
    padding: 0 var(--space-md);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-auth-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.emere-auth-input:hover {
    border-color: rgba(209, 213, 219, 1);
    background-color: #f3f4f6;
}

.emere-auth-input:focus {
    outline: none;
    border-color: var(--accent-yellow);
    background-color: var(--bg-surface);
    box-shadow: 0 0 0 4px var(--accent-yellow-glow);
}

.emere-auth-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    font-size: var(--font-size-xs);
}

.emere-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.emere-auth-remember input {
    accent-color: var(--accent-yellow);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.emere-auth-lost-password {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(75, 85, 99, 0.4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition-smooth);
}

.emere-auth-lost-password:hover {
    color: var(--accent-yellow);
    border-bottom-color: var(--accent-yellow);
}

/* High-End Enterprise Submit Button */
.emere-auth-submit-btn {
    width: 100%;
    height: 50px;
    background-color: var(--bg-dark-charcoal) !important;
    background-image: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    color: var(--bg-surface) !important;
    border: 1px solid #1f2937 !important;
    border-radius: 8px !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.emere-auth-submit-btn:hover {
    background-color: var(--accent-yellow) !important;
    background-image: linear-gradient(180deg, #f5b01a 0%, #f2a900 100%) !important;
    border-color: #d99700 !important;
    color: var(--bg-dark-charcoal) !important;
    box-shadow: 0 4px 15px rgba(242, 169, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px);
}

.emere-auth-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(242, 169, 0, 0.15) !important;
}

/* Notice formatting */
.emere-auth-notices-container .woocommerce-message,
.emere-auth-notices-container .woocommerce-error {
    border-radius: 8px;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-weight: 600;
    font-size: var(--font-size-base);
    list-style: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.emere-auth-notices-container .woocommerce-message {
    background-color: var(--success-green-glow);
    border-left: 4px solid var(--success-green);
    color: #065f46;
}

.emere-auth-notices-container .woocommerce-error {
    background-color: #fee2e2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

/* 2. Premium SaaS-style Tabbed Dashboard Shell */
.emere-dashboard-wrapper {
    background-color: var(--bg-page);
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    font-family: var(--font-primary);
}

.emere-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .emere-dashboard-grid {
        grid-template-columns: 260px 1fr;
    }
}

/* ==========================================================================
   DASHBOARD MOBILE OFF-CANVAS DRAWER SYSTEM
   ========================================================================== */

/* Top Mobile Dashboard Header */
.emere-dashboard-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-dark-charcoal);
    padding: 12px var(--space-md);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 992px) {
    .emere-dashboard-mobile-header {
        display: none !important;
    }
}

.emere-dashboard-drawer-trigger {
    background: transparent;
    border: none;
    color: var(--bg-surface);
    cursor: pointer;
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.emere-dashboard-drawer-trigger:hover {
    color: var(--accent-yellow);
}

.emere-mobile-brand {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--font-size-md);
    letter-spacing: 0.05em;
    color: var(--bg-surface);
}

.emere-mobile-brand .gold-text {
    color: var(--accent-yellow);
}

.emere-mobile-avatar img {
    border-radius: 50%;
    border: 1px solid var(--accent-yellow);
}

/* Overlay Backdrop */
.emere-dashboard-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-dashboard-drawer-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar Drawer - Mobile Viewport */
@media (max-width: 991px) {
    .emere-dashboard-sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Hidden offscreen */
        width: 280px;
        height: 100vh;
        z-index: 9999;
        box-shadow: 20px 0 45px rgba(17, 24, 39, 0.15);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .emere-dashboard-sidebar.drawer-open {
        transform: translateX(280px); /* Slide in */
    }
}

/* Sidebar Drawer - Close Button */
.emere-drawer-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    line-height: 1;
    display: block;
    z-index: 10;
    transition: var(--transition-smooth);
}

.emere-drawer-close-btn:hover {
    color: var(--bg-surface);
}

@media (min-width: 992px) {
    .emere-drawer-close-btn {
        display: none !important;
    }
}

/* Left Sidebar (Dark B2B SaaS Style) */
.emere-dashboard-sidebar {
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    padding: var(--space-xl) var(--space-md);
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 992px) {
    .emere-dashboard-sidebar {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        min-height: 750px;
        padding: var(--space-xl) var(--space-md);
    }
}

.emere-dashboard-user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-xl);
    padding-top: 10px;
}

.user-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--accent-yellow);
    flex-shrink: 0;
}

.user-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-profile-welcome {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    line-height: 1.2;
}

.user-profile-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--bg-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Sidebar Navigation */
.emere-dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emere-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 3px solid transparent;
}

.emere-dashboard-nav-item .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.emere-dashboard-nav-item:hover {
    color: var(--bg-surface);
    background-color: rgba(255, 255, 255, 0.04);
}

.emere-dashboard-nav-item:hover .dashicons {
    transform: scale(1.1);
}

.emere-dashboard-nav-item.is-active {
    color: var(--accent-yellow);
    background-color: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent-yellow);
}

.emere-dashboard-nav-item.item-logout {
    margin-top: 20px;
    color: #fca5a5;
    background-color: rgba(239, 68, 68, 0.03);
}

@media (min-width: 992px) {
    .emere-dashboard-nav-item.item-logout {
        margin-top: auto;
    }
}

.emere-dashboard-nav-item.item-logout:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* Dashboard Viewport Panel */
.emere-dashboard-viewport {
    background-color: var(--bg-surface);
    padding: 24px;
}

@media (min-width: 992px) {
    .emere-dashboard-viewport {
        padding: 40px 32px;
    }
}

.emere-dashboard-panel-header {
    border-bottom: 1px solid rgba(229, 231, 235, 0.7);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-xl);
}

.emere-dashboard-panel-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 576px) {
    .emere-dashboard-panel-header h2 {
        font-size: var(--font-size-lg);
    }
}

.emere-dashboard-panel-header .description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Premium KPI Widgets */
.emere-dashboard-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

@media (min-width: 576px) {
    .emere-dashboard-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.emere-kpi-card {
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.015);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.04);
    border-color: rgba(229, 231, 235, 1);
}

.kpi-icon-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-surface);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kpi-icon-wrapper.watchlist-kpi {
    background-image: linear-gradient(135deg, #f472b6, #ec4899);
}
.kpi-icon-wrapper.bids-kpi {
    background-image: linear-gradient(135deg, #4b5563, #111827);
}
.kpi-icon-wrapper.orders-kpi {
    background-image: linear-gradient(135deg, #34d399, #10b981);
}

.kpi-icon-wrapper .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.kpi-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    line-height: 1;
}

/* Quick Action Tiles */
.emere-dashboard-quick-actions-panel {
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 24px;
    margin-top: 36px;
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.01);
}

.emere-panel-section-header {
    border-bottom: 1px solid rgba(229, 231, 235, 0.7);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.emere-panel-section-header h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.emere-quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .emere-quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.emere-action-tile {
    display: flex;
    flex-direction: column;
    background-color: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none !important;
    color: var(--text-primary) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-action-tile .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--accent-yellow);
    margin-bottom: 12px;
    background-color: var(--accent-yellow-glow);
    padding: 8px;
    box-sizing: content-box;
    border-radius: 8px;
}

.emere-action-tile h4 {
    margin: 0 0 6px 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
}

.emere-action-tile p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.45;
}

.emere-action-tile:hover {
    border-color: var(--accent-yellow);
    box-shadow: 0 12px 30px var(--accent-yellow-glow);
    transform: translateY(-2px);
    background-color: var(--bg-surface);
}

/* Watchlist UI tweaks */
.emere-watchlist-card {
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
}

.watchlist-card-actions {
    background-color: #f9fafb;
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 0 0 12px 12px;
}

/* Settings fields polish */
.emere-dashboard-settings-form input.emere-auth-input {
    background-color: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 8px;
    height: 46px;
}

.emere-dashboard-settings-form input.emere-auth-input:focus {
    background-color: var(--bg-surface);
    border-color: var(--accent-yellow);
}

.emere-dashboard-field-group {
    margin-bottom: 16px;
}


/* Success Panel Styling */
.emere-auth-success-panel {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    font-family: var(--font-primary);
}

.success-icon-wrapper {
    width: 64px;
    height: 64px;
    background-color: var(--accent-yellow-glow);
    color: var(--accent-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg) auto;
}

.success-icon-wrapper .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.emere-auth-success-panel h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.emere-auth-success-panel p {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.emere-auth-success-panel p.verification-note {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ==========================================================================
   FINAL PREMIUM B2B SAAS DASHBOARD INTERFACE REDESIGN
   ========================================================================== */

/* Wrapper padding adjustments for mobile bottom sticky nav */
@media (max-width: 991px) {
    .emere-dashboard-wrapper {
        padding-bottom: 90px !important;
    }
}

/* 1. Top App Header Glassmorphism Adjustments */
.emere-dashboard-mobile-header {
    background-image: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.08);
}

/* 2. Welcome Hero Card (Premium dark gradient widget) */
.emere-dashboard-hero-card {
    background-image: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-xl);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-card-content {
    max-width: 65%;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: var(--accent-yellow);
    background-color: rgba(242, 169, 0, 0.12);
    border: 1px solid rgba(242, 169, 0, 0.2);
    padding: 3px 8px;
    border-radius: 50px;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.08em;
}

.hero-greeting {
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 var(--space-xs) 0 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

.hero-tagline {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.5;
}

.hero-card-graphic {
    width: 140px;
    height: auto;
    z-index: 1;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.emere-dashboard-hero-card:hover .hero-card-graphic {
    transform: scale(1.05) rotate(2deg);
}

@media (max-width: 768px) {
    .emere-dashboard-hero-card {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
        border-radius: 12px !important;
    }
    .hero-card-content {
        max-width: 100% !important;
    }
    .hero-badge {
        font-size: 8px !important;
        padding: 2px 6px !important;
        margin-bottom: var(--space-xxs) !important;
    }
    .hero-greeting {
        font-size: 15px !important;
    }
    .hero-tagline {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .hero-card-graphic {
        display: none !important;
    }
}

/* 3. Sticky Mobile Bottom Navigation App Bar */
.emere-dashboard-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 68px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9995;
    box-shadow: 0 -8px 30px rgba(17, 24, 39, 0.04);
}

@media (min-width: 992px) {
    .emere-dashboard-bottom-nav {
        display: none !important;
    }
}

.emere-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none !important;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-primary);
    width: 64px;
    height: 100%;
    gap: 4px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-bottom-nav-item .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.emere-bottom-nav-item:hover {
    color: var(--bg-dark-charcoal);
}

.emere-bottom-nav-item.is-active {
    color: var(--accent-yellow);
}

.emere-bottom-nav-item.is-active .dashicons {
    transform: translateY(-2px);
}

/* ==========================================================================
   EMERE DASHBOARD ORDERS & PROCUREMENT STYLING
   ========================================================================== */

.emere-dashboard-orders-table-wrapper {
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.01);
}

.emere-dashboard-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    text-align: left;
}

.emere-dashboard-orders-table th {
    background-color: #f9fafb;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

.emere-dashboard-orders-table td {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    color: var(--text-primary);
    vertical-align: middle;
}

.order-row-tr {
    transition: background-color 0.2s ease;
}

.order-row-tr:hover {
    background-color: #f9fafb;
}

.emere-dashboard-orders-table tr:last-child td {
    border-bottom: none;
}

/* Status Badges */
.emere-order-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.emere-order-status-badge.status-completed {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.emere-order-status-badge.status-processing {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.emere-order-status-badge.status-pending {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.emere-order-status-badge.status-on-hold {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.emere-order-status-badge.status-cancelled,
.emere-order-status-badge.status-failed {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.emere-order-status-badge.status-refunded {
    background-color: #f5f5f7;
    color: #374151;
    border: 1px solid #e5e7eb;
}

/* Table Actions Button */
.emere-order-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--bg-page);
    color: var(--text-secondary);
    border: 1px solid rgba(229, 231, 235, 0.8);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-order-action-btn:hover {
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    border-color: var(--bg-dark-charcoal);
}

.emere-order-action-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.emere-order-action-btn:hover .dashicons {
    transform: translateX(2px);
}

.text-right {
    text-align: right;
}

.text-dark {
    color: var(--bg-dark-charcoal) !important;
}

.font-bold {
    font-weight: 700;
}

/* Grid display defaults */
.emere-dashboard-orders-mobile-grid {
    display: none;
}

/* Premium Dynamic Sourcing Drawer Layout (Desktop Right-Slide) */
.emere-order-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(4px);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.emere-order-drawer-backdrop.is-active {
    opacity: 1;
    visibility: visible;
}

.emere-order-drawer {
    position: fixed;
    top: 0;
    right: -460px;
    bottom: 0;
    width: 460px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -10px 0 40px rgba(17, 24, 39, 0.15);
    z-index: 99995;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-primary);
}

.emere-order-drawer.is-open {
    right: 0;
}

.emere-order-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    background-color: #f9fafb;
}

.drawer-header-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.emere-order-drawer-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.emere-order-drawer-close:hover {
    background-color: rgba(229, 231, 235, 0.5);
    color: var(--bg-dark-charcoal);
}

.emere-order-drawer-close .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.emere-order-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Dynamic Content Elements styling */
.emere-order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.emere-order-detail-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    margin: 0;
}

.emere-order-detail-meta {
    background-color: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.emere-order-detail-meta .meta-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-base);
}

.emere-order-detail-meta .meta-label {
    color: var(--text-secondary);
}

.emere-order-detail-meta .meta-value {
    color: var(--bg-dark-charcoal);
    font-weight: 600;
}

.emere-order-detail-items h4 {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    margin: 0 0 14px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    padding-bottom: 6px;
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.emere-order-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(229, 231, 235, 0.6);
}

.emere-order-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.emere-order-item-row .item-thumb {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(229, 231, 235, 0.8);
}

.emere-order-item-row .item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emere-order-item-row .item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.emere-order-item-row .item-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-badge-row {
    display: flex;
    margin: 2px 0;
}

.order-item-type-badge {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 4px;
}

.order-item-type-badge.type-auction {
    background-color: rgba(17, 24, 39, 0.08);
    color: var(--bg-dark-charcoal);
}

.order-item-type-badge.type-eshop {
    background-color: var(--accent-yellow-glow);
    color: var(--bg-dark-charcoal);
}

.emere-order-item-row .item-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.emere-order-item-row .item-price {
    font-size: var(--font-size-base);
    color: var(--bg-dark-charcoal);
    flex-shrink: 0;
}

/* Actions Section */
.emere-order-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    border-top: 1px solid rgba(229, 231, 235, 0.8);
    padding-top: 20px;
}

.detail-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-primary);
}

.detail-action-btn.print-btn {
    background-color: var(--bg-dark-charcoal);
    color: #ffffff;
    border: 1px solid var(--bg-dark-charcoal);
}

.detail-action-btn.print-btn:hover {
    background-color: #374151;
    border-color: #374151;
}

.detail-action-btn.disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
}

.detail-action-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Loader indicators inside Drawer */
.emere-order-drawer-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: var(--text-secondary);
    gap: 12px;
}

.emere-order-drawer-loader .spin-icon {
    font-size: 32px;
    width: 32px;
    height: 32px;
    animation: emere-spin 1.2s infinite linear;
}

@keyframes emere-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.emere-order-drawer-loader p {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.emere-order-drawer-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: #ef4444;
    gap: 10px;
}

.emere-order-drawer-error .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.emere-order-drawer-error p {
    font-weight: 600;
    margin: 0;
}

/* Billing Details & Notes Styles inside Drawer */
.emere-order-detail-billing h4,
.emere-order-detail-notes h4 {
    font-size: var(--font-size-md) !important;
    font-weight: 700 !important;
    color: var(--bg-dark-charcoal) !important;
    margin: 24px 0 14px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6) !important;
    padding-bottom: 6px !important;
}

.billing-details-card,
.notes-details-card {
    background-color: #f9fafb !important;
    border: 1px solid rgba(229, 231, 235, 0.8) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.billing-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: var(--font-size-base) !important;
}

.billing-row.address-row {
    flex-direction: column !important;
    gap: 4px !important;
}

.billing-row .info-label {
    color: var(--text-secondary) !important;
}

.billing-row .info-val {
    text-align: right !important;
}

.billing-row.address-row .info-val {
    text-align: left !important;
}

.notes-details-card p {
    margin: 0 !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
}

/* 4. Recent Activity Log Widget */
.emere-dashboard-activity-panel {
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 24px;
    margin-top: var(--space-xl);
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.01);
}

.emere-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.emere-activity-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    transition: var(--transition-smooth);
}

.emere-activity-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.emere-activity-row:hover {
    transform: translateX(3px);
}

.activity-icon-bullet {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.activity-icon-bullet.watchlist-bullet {
    background-image: linear-gradient(135deg, #f472b6, #ec4899);
}

.activity-icon-bullet.bid-bullet {
    background-image: linear-gradient(135deg, #4b5563, #111827);
}

.activity-icon-bullet.order-bullet {
    background-image: linear-gradient(135deg, #34d399, #10b981);
}

.activity-icon-bullet.alert-bullet {
    background-image: linear-gradient(135deg, #f59e0b, #d97706);
}

.activity-icon-bullet .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.activity-text-content {
    display: flex;
    flex-direction: column;
}

.activity-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--bg-dark-charcoal);
}

.activity-timestamp {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 1px;
}

/* ==========================================================================
   HORIZONTAL WATCHLIST LIST-CARDS & SEGMENTED SWITCHER (B2B PORTAL SPECIAL)
   ========================================================================== */

/* 1. Watchlist top segmented switcher styling */
.emere-watchlist-switcher-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.emere-watchlist-switcher {
    display: inline-flex;
    background-color: #f3f4f6;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(229, 231, 235, 0.8);
    width: 100%;
    max-width: 440px;
}

.emere-watchlist-switch-btn {
    flex: 1;
    background: transparent;
    border: none;
    outline: none !important;
    padding: 10px 14px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.emere-watchlist-switch-btn:hover {
    color: var(--bg-dark-charcoal);
}

.emere-watchlist-switch-btn.active {
    color: var(--bg-dark-charcoal);
    background-color: var(--bg-surface);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.05);
    font-weight: 700;
}

/* 2. pane switching animation */
.emere-watchlist-container-pane {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.emere-watchlist-container-pane.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 3. Horizontal list card layouts */
.emere-dashboard-watchlist-horizontal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.emere-watchlist-horizontal-card {
    display: flex;
    background-color: var(--bg-surface);
    border: 1px solid rgba(229, 231, 235, 0.7);
    border-radius: 12px;
    padding: 14px;
    align-items: center;
    gap: var(--space-md);
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.01);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.emere-watchlist-horizontal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
    border-color: rgba(229, 231, 235, 1);
}

/* Thumbnail Column */
.watchlist-card-thumb-col {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-page);
    flex-shrink: 0;
    border: 1px solid rgba(229, 231, 235, 0.6);
}

.watchlist-card-thumb-col a {
    display: block;
    width: 100%;
    height: 100%;
}

.watchlist-card-thumb-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Column */
.watchlist-card-content-col {
    flex-grow: 1;
    min-width: 0; /* Prevents text overflow breaks */
    display: flex;
    flex-direction: column;
}

.watchlist-item-category {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.watchlist-item-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-item-title a {
    text-decoration: none !important;
    color: var(--bg-dark-charcoal) !important;
    transition: var(--transition-smooth);
}

.watchlist-item-title a:hover {
    color: var(--accent-yellow) !important;
}

/* Metadata layout */
.watchlist-item-meta-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.meta-item-bid,
.meta-item-time {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.meta-label {
    color: var(--text-secondary);
}

.meta-value {
    color: var(--bg-dark-charcoal);
    font-weight: 800;
}

.meta-value.price-value,
.meta-value.time-value {
    color: var(--bg-dark-charcoal);
}

/* Actions Column */
.watchlist-card-actions-col {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.watchlist-open-arrow-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--bg-page);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(229, 231, 235, 0.8);
}

.watchlist-open-arrow-btn:hover {
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    border-color: var(--bg-dark-charcoal);
    transform: translateX(2px);
}

/* ==========================================================================
   FINAL MOBILE RESPONSIVE POLISH & METRIC OPTIMIZATION
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Mobile Container & Spacing System */
    .emere-dashboard-wrapper {
        margin: 8px 0 !important;
        border-radius: 8px !important;
        padding-bottom: 76px !important; /* Proper buffer for bottom sticky nav */
    }
    
    .emere-dashboard-viewport {
        padding: 14px 12px !important; /* Unified horizontal gutters */
    }
    
    .emere-dashboard-viewport-inner {
        gap: 12px !important;
    }
    
    .emere-dashboard-panel-header {
        padding-bottom: var(--space-sm) !important;
        margin-bottom: var(--space-md) !important;
    }
    
    .emere-dashboard-panel-header h2 {
        font-size: 16px !important;
        letter-spacing: 0.01em !important;
    }
    
    .emere-dashboard-panel-header .description {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* 2. Hero Card Responsiveness */
    .emere-dashboard-hero-card {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }
    
    .hero-card-content {
        max-width: 100% !important;
    }
    
    .hero-badge {
        font-size: 8px !important;
        padding: 1px 5px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.05em !important;
    }
    
    .hero-greeting {
        font-size: 14px !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.2 !important;
    }
    
    .hero-tagline {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }
    
    .hero-card-graphic {
        display: none !important;
    }

    /* 3. KPI Card Refinement (Compact Enterprise Mobile Widgets) */
    .emere-dashboard-kpi-grid {
        grid-template-columns: 1fr !important; /* Tighter vertical rhythm */
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .emere-kpi-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 10px !important;
    }
    
    .kpi-icon-wrapper {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
    }
    
    .kpi-icon-wrapper .dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }
    
    .kpi-label {
        font-size: 9px !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 1px !important;
    }
    
    .kpi-value {
        font-size: 16px !important;
    }

    /* 4. Quick Action Cards (2-Column Mobile Layout) */
    .emere-dashboard-quick-actions-panel {
        padding: 12px !important;
        margin-top: 14px !important;
        border-radius: 10px !important;
    }
    
    .emere-panel-section-header {
        margin-bottom: 12px !important;
        padding-bottom: 6px !important;
    }
    
    .emere-panel-section-header h3 {
        font-size: 11px !important;
    }
    
    .emere-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Rebuild as 2-column actions grid */
        gap: 8px !important;
    }
    
    .emere-action-tile {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .emere-action-tile .dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
        margin-bottom: 6px !important;
        padding: 5px !important;
        border-radius: 6px !important;
    }
    
    .emere-action-tile h4 {
        font-size: 11px !important;
        line-height: 1.2 !important;
        margin-bottom: 3px !important;
    }
    
    .emere-action-tile p {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }

    /* 5. Recent Activity Panel */
    .emere-dashboard-activity-panel {
        padding: 12px !important;
        margin-top: 14px !important;
        border-radius: 10px !important;
    }
    
    .emere-activity-feed {
        gap: 10px !important;
    }
    
    .emere-activity-row {
        gap: 10px !important;
        padding-bottom: 8px !important;
    }
    
    .activity-icon-bullet {
        width: 28px !important;
        height: 28px !important;
    }
    
    .activity-icon-bullet .dashicons {
        font-size: 12px !important;
        width: 12px !important;
        height: 12px !important;
    }
    
    .activity-title {
        font-size: 11px !important;
    }
    
    .activity-timestamp {
        font-size: 9px !important;
    }

    /* 6. Mobile Bottom Navigation Bar Update */
    .emere-dashboard-bottom-nav {
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        justify-content: space-between !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid rgba(229, 231, 235, 0.9) !important;
    }
    
    .emere-bottom-nav-item {
        flex: 1 !important;
        width: auto !important;
        gap: 1px !important;
        font-size: 9px !important;
    }
    
    .emere-bottom-nav-item .dashicons {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    .emere-bottom-nav-item.is-active .dashicons {
        transform: translateY(-1px) !important;
    }

    /* 7. Watchlist Swticher Control & Horizontal Cards */
    .emere-watchlist-switcher-wrapper {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    
    .emere-watchlist-switcher {
        display: flex !important;
        width: 100% !important;
        max-width: 320px !important;
        background-color: #f3f4f6 !important;
        border-radius: 50px !important; /* Premium capsule layout */
        padding: 4px !important;
        gap: 4px !important;
        border: 1px solid rgba(229, 231, 235, 0.8) !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
    
    .emere-watchlist-switch-btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 50px !important; /* Premium pill style */
        color: var(--text-secondary) !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .emere-watchlist-switch-btn.active {
        background-color: #ffffff !important;
        color: var(--bg-dark-charcoal) !important;
        box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06) !important;
        font-weight: 800 !important;
    }

    .emere-watchlist-horizontal-card {
        display: flex !important;
        background-color: var(--bg-surface) !important;
        padding: 8px !important;
        gap: 10px !important;
        border-radius: 10px !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important; /* Flexbox safety overflow hook */
    }
    
    .watchlist-card-thumb-col {
        width: 56px !important;
        height: 56px !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }
    
    .watchlist-card-content-col {
        flex: 1 !important;
        min-width: 0 !important; /* Prevents long titles from expanding parent */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    .watchlist-item-category {
        font-size: 8px !important;
        margin-bottom: 1px !important;
        letter-spacing: 0.04em !important;
    }
    
    .watchlist-item-title {
        font-size: 12px !important;
        margin-bottom: 2px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important; /* Cap to single line */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .watchlist-item-meta-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
        margin-top: 1px !important;
    }
    
    .meta-item-bid,
    .meta-item-time {
        display: inline-flex !important;
        align-items: center !important;
        gap: 2px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    
    .watchlist-card-actions-col {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .watchlist-open-arrow-btn,
    .emere-watchlist-remove-btn {
        width: 30px !important;
        height: 30px !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(229, 231, 235, 0.8) !important;
    }
    
    .watchlist-open-arrow-btn .dashicons,
    .emere-watchlist-remove-btn .dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    /* 8. Orders Dashboard Panel Mobile Responsive Styles */
    .emere-dashboard-orders-table-wrapper {
        display: none !important;
    }
    
    .emere-dashboard-orders-mobile-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .emere-mobile-order-card {
        background-color: var(--bg-surface) !important;
        border: 1px solid rgba(229, 231, 235, 0.8) !important;
        border-radius: 10px !important;
        padding: 12px !important;
        box-shadow: 0 2px 8px rgba(17, 24, 39, 0.01) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    
    .order-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .order-number-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--bg-dark-charcoal) !important;
    }
    
    .order-card-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .order-meta-info {
        display: flex !important;
        justify-content: space-between !important;
        font-size: 11px !important;
    }
    
    .order-meta-info.total-row {
        border-top: 1px dashed rgba(229, 231, 235, 0.6) !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
    }
    
    .order-meta-info .info-label {
        color: var(--text-secondary) !important;
    }
    
    .order-meta-info .info-val {
        color: var(--bg-dark-charcoal) !important;
        font-weight: 600 !important;
    }
    
    .order-meta-info .info-val.total-amount {
        font-weight: 800 !important;
        color: var(--bg-dark-charcoal) !important;
    }
    
    .order-card-footer {
        margin-top: 10px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    .emere-mobile-order-action-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--accent-yellow) !important;
        text-decoration: none !important;
    }
    
    .emere-mobile-order-action-link .dashicons {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    /* Mobile full-screen bottom sheet / modal overrides for Order Details Drawer */
    .emere-order-drawer {
        bottom: -100% !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 80vh !important;
        border-radius: 20px 20px 0 0 !important;
        transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .emere-order-drawer.is-open {
        bottom: 0 !important;
        right: 0 !important;
    }
    
    .emere-order-drawer-header {
        padding: 16px 20px !important;
    }
    
    .drawer-header-title {
        font-size: 13px !important;
    }
    
    .emere-order-drawer-body {
        padding: 16px !important;
    }
    
    .emere-order-detail-header h3 {
        font-size: 15px !important;
    }
    
    .emere-order-detail-meta {
        padding: 12px !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    
    .emere-order-detail-meta .meta-row {
        font-size: 12px !important;
    }
    
    .emere-order-detail-items h4 {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .order-items-list {
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    
    .emere-order-item-row {
        gap: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .emere-order-item-row .item-thumb {
        width: 44px !important;
        height: 44px !important;
    }
    
    .emere-order-item-row .item-name {
        font-size: 12px !important;
    }
    
    .emere-order-item-row .item-meta {
        font-size: 10px !important;
    }
    
    .emere-order-item-row .item-price {
        font-size: 12px !important;
    }
    
    .emere-order-detail-actions {
        grid-template-columns: 1fr !important; /* Stack actions buttons vertically on mobile for thumb reachability */
        gap: 8px !important;
        padding-top: 16px !important;
    }
    
    .detail-action-btn {
        padding: 12px !important;
        font-size: 12px !important;
    }

    /* Mobile Guest Escape Buttons stack overrides */
    .escape-buttons-row {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 320px !important;
        gap: 8px !important;
        margin: 0 auto !important;
    }
    
    .escape-pill-btn {
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   9. EMERE GLOBAL HEADER & MOBILE NAVIGATION ECOSYSTEM STYLES
   ========================================================================== */

/* A. Desktop Header Foundation */
.emere-global-desktop-header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-slate);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 0 var(--space-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    font-family: var(--font-primary);
    transition: var(--transition-smooth);
}

.emere-header-container {
    max-width: 1540px;
    margin: 0 auto;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* Brand Logo Layout */
.emere-logo-col {
    flex-shrink: 0;
}

.emere-header-brand-logo {
    text-decoration: none !important;
    display: inline-block;
}

.emere-header-brand-logo .brand-logo-img {
    max-height: 40px;
    display: block;
    width: auto;
}

.emere-header-brand-logo .brand-logo-text {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--bg-dark-charcoal);
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.emere-header-brand-logo .brand-logo-text .accent-gold {
    color: var(--accent-yellow);
}

/* Desktop Navigation columns */
.emere-desktop-menu-col {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.emere-desktop-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.emere-menu-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

.emere-menu-link-a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none !important;
    padding: 6px 4px;
    position: relative;
    transition: var(--transition-smooth);
}

.emere-menu-link-a:hover {
    color: var(--bg-dark-charcoal);
}

.emere-menu-link-a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-yellow);
    transform: scaleX(0);
    transition: var(--transition-smooth);
    transform-origin: left;
}

.emere-menu-link-a:hover::after {
    transform: scaleX(1);
}

/* Category Dropdown (Desktop) */
.has-emere-dropdown {
    position: relative;
}

.has-emere-dropdown .dropdown-arrow {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.has-emere-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.emere-category-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #1A1D21;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    pointer-events: none;
    border: 1px solid #2C3137;
    padding: 24px;
}

.emere-cat-cols-1 { width: 340px; }
.emere-cat-cols-2 { width: 640px; }
.emere-cat-scrollable { width: 640px; }

.emere-category-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.has-emere-dropdown:hover .emere-category-dropdown-menu,
.has-emere-dropdown.is-active .emere-category-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.emere-category-grid {
    display: grid;
    gap: 8px 32px;
}
.emere-cat-cols-1 .emere-category-grid { grid-template-columns: 1fr; }
.emere-cat-cols-2 .emere-category-grid,
.emere-cat-scrollable .emere-category-grid { grid-template-columns: 1fr 1fr; }

.emere-cat-scrollable .emere-category-grid {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 12px;
}

/* Custom Scrollbar for Grid */
.emere-category-grid::-webkit-scrollbar {
    width: 4px;
}

.emere-category-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.emere-category-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.emere-category-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.emere-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: #F5F7FA;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.emere-category-item .cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emere-category-item .cat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: rgba(245, 247, 250, 0.6);
    transition: color 0.2s ease;
}

.emere-category-item:hover {
    background-color: rgba(214, 163, 84, 0.08);
    color: #D6A354;
}

.emere-category-item:hover .cat-icon {
    color: #D6A354;
}

.emere-category-item .cat-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.emere-category-item .cat-count {
    color: #D6A354;
    font-size: 0.8rem;
    font-weight: 600;
}

.emere-category-dropdown-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #2C3137;
}

.view-all-cats-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #D6A354;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.view-all-cats-link:hover {
    background-color: rgba(214, 163, 84, 0.08);
}

.view-all-cats-link .arrow-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.view-all-cats-link:hover .arrow-icon {
    transform: translateX(4px);
}

/* Right-side Action Pillars */
.emere-actions-col {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

/* Marketplace Search widgets */
.emere-header-search-container {
    position: relative;
}

.emere-header-search-form {
    display: flex;
    align-items: center;
    position: relative;
}

.emere-header-search-input {
    width: 200px;
    height: 38px;
    background-color: var(--bg-page);
    border: 1px solid var(--border-slate);
    border-radius: 20px;
    padding: 0 40px 0 16px;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.emere-header-search-input:focus {
    width: 300px;
    outline: none;
    background-color: var(--bg-surface);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 0 3px var(--accent-yellow-glow);
}

.emere-header-search-submit {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.emere-header-search-submit:hover {
    color: var(--bg-dark-charcoal);
}

.emere-header-search-submit .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Action Shortcut badges */
.emere-header-action-shortcut {
    color: var(--text-secondary);
    text-decoration: none !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--transition-smooth);
}

.emere-header-action-shortcut:hover {
    background-color: var(--bg-page);
    color: var(--bg-dark-charcoal);
    border-color: var(--border-slate-hover);
}

/* Specific smooth rounded corners for Notification Bell and Cart Buttons */
#emere-notifications-dropdown-btn,
#emere-header-cart-trigger {
    border-radius: 10px !important;
    background-color: #ffffff;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease;
}

#emere-notifications-dropdown-btn:hover,
#emere-header-cart-trigger:hover,
#emere-notifications-dropdown-btn:hover .dashicons,
#emere-header-cart-trigger:hover .dashicons {
    background-color: #f8fafc;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
}

.emere-header-action-shortcut .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.emere-header-action-shortcut .shortcut-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-surface);
}

/* Logged-in Avatar & Dropdown system */
.emere-header-account-state-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.emere-header-avatar-dropdown-container {
    position: relative;
}

.emere-header-avatar-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.emere-header-avatar-btn img {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-slate);
    transition: var(--transition-smooth);
}

.emere-header-avatar-btn:hover img {
    border-color: var(--accent-yellow);
}

.emere-header-avatar-btn .font-arrow-icon {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.emere-header-avatar-btn:hover .font-arrow-icon {
    color: var(--bg-dark-charcoal);
}

/* Avatar Dropdown Panel */
.emere-header-avatar-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 240px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: none;
    flex-direction: column;
    z-index: 1010;
    overflow: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.emere-header-avatar-dropdown-menu.is-active {
    display: flex;
    transform: translateY(0);
}

.emere-header-avatar-dropdown-menu .dropdown-header {
    background-color: var(--bg-page);
    padding: 16px;
    border-bottom: 1px solid var(--border-slate);
    display: flex;
    flex-direction: column;
}

.emere-header-avatar-dropdown-menu .dropdown-welcome {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.emere-header-avatar-dropdown-menu .dropdown-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-dark-charcoal);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.emere-header-avatar-dropdown-menu .dropdown-links-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a:hover {
    background-color: var(--bg-page);
    color: var(--bg-dark-charcoal);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a:hover .dashicons {
    color: var(--accent-yellow);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list .border-top-separator {
    border-top: 1px solid var(--border-slate);
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a.dropdown-logout-link:hover {
    background-color: #fef2f2;
    color: #ef4444;
}

.emere-header-avatar-dropdown-menu .dropdown-links-list a.dropdown-logout-link:hover .dashicons {
    color: #ef4444;
}

/* Guest buttons */
.emere-header-login-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none !important;
    transition: var(--transition-smooth);
    padding: 8px 12px;
}

.emere-header-login-link:hover {
    color: var(--bg-dark-charcoal);
}

.industrial-header-cta-btn {
    background-color: var(--bg-dark-charcoal);
    color: var(--accent-yellow) !important;
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 10px 18px;
    border-radius: 20px;
    transition: var(--transition-smooth);
    text-transform: uppercase;
}

.industrial-header-cta-btn:hover {
    background-color: var(--accent-yellow);
    color: var(--bg-dark-charcoal) !important;
}

/* B. Mobile Sticky Top Header */
.emere-global-mobile-header {
    background-color: var(--bg-dark-charcoal);
    color: var(--bg-surface);
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: none; /* Desktop default */
    padding: 0 var(--space-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.mobile-header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-hamburger-btn {
    background: transparent !important;
    border: none !important;
    color: var(--bg-surface) !important;
    cursor: pointer;
    padding: var(--space-xxs);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-hamburger-btn .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.mobile-brand-logo-container {
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-brand-logo-container a {
    text-decoration: none !important;
}

.mobile-logo-img {
    max-height: 28px;
    width: auto;
    display: block;
}

.mobile-logo-text {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--bg-surface);
    text-transform: uppercase;
}

.mobile-logo-text .gold {
    color: var(--accent-yellow);
}

.mobile-header-actions-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.mobile-action-btn-shortcut {
    background: transparent !important;
    border: none !important;
    color: var(--bg-surface) !important;
    cursor: pointer;
    padding: var(--space-xxs);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-action-btn-shortcut .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mobile-action-btn-shortcut img {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent-yellow);
}

/* C. Mobile Fullscreen Search Overlay */
.emere-mobile-search-overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.98);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: var(--space-md);
}

.emere-mobile-search-overlay-container.is-open {
    opacity: 1;
    pointer-events: auto;
}

.search-overlay-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

.search-overlay-content-inner {
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.search-overlay-content-inner h3 {
    color: #ffffff;
    font-size: var(--font-size-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
}

.search-overlay-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.search-overlay-input-field {
    width: 100%;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 var(--space-md);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    text-align: center;
    transition: var(--transition-smooth);
}

.search-overlay-input-field:focus {
    outline: none;
    border-color: var(--accent-yellow);
    background-color: rgba(255, 255, 255, 0.1);
}

.search-overlay-submit-btn {
    height: 50px;
    background-color: var(--accent-yellow);
    color: var(--bg-dark-charcoal);
    border: none !important;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.search-overlay-submit-btn:hover {
    background-color: var(--accent-yellow-hover);
}

/* D. Offcanvas Sidebar Mobile Menu Drawer */
.emere-mobile-menu-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.emere-mobile-menu-drawer-backdrop.is-active {
    display: block;
    opacity: 1;
}

.emere-mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background-color: var(--bg-surface);
    z-index: 9999;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.emere-mobile-menu-drawer.is-open {
    left: 0;
}

.drawer-mobile-header {
    padding: 20px;
    background-color: var(--bg-dark-charcoal);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-mobile-title {
    font-weight: 800;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drawer-mobile-close-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.drawer-mobile-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.drawer-mobile-contact-panel {
    background-color: var(--bg-page);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.contact-meta-row .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.drawer-mobile-navigation-links {
    display: flex;
    flex-direction: column;
}

.drawer-mobile-menu-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-mobile-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

.drawer-mobile-list-item.border-top-separator {
    border-top: 1px solid var(--border-slate);
    padding-top: 12px;
    margin-top: 12px !important;
}

.drawer-mobile-menu-a {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.drawer-mobile-menu-a:hover {
    color: var(--accent-yellow);
}

/* Category Dropdown (Mobile) */
.has-emere-mobile-dropdown .dropdown-arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.has-emere-mobile-dropdown.is-expanded .dropdown-arrow {
    transform: rotate(180deg);
}

.emere-mobile-category-dropdown {
    display: none;
    padding: 10px 0 10px 16px;
    border-left: 2px solid rgba(15, 23, 42, 0.05);
    margin-top: 4px;
    margin-bottom: 8px;
}

.mobile-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    color: var(--bg-dark-charcoal);
    font-size: 0.85rem;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mobile-cat-item:hover {
    color: #D6A354;
    background-color: rgba(214, 163, 84, 0.08);
}

.mobile-cat-item .cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-cat-item .cat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: rgba(15, 23, 42, 0.4);
    transition: color 0.2s ease;
}

.mobile-cat-item:hover .cat-icon {
    color: #D6A354;
}

.mobile-cat-item .cat-count {
    color: #D6A354;
    font-size: 0.8rem;
    font-weight: 600;
}

.drawer-mobile-menu-a.font-gold {
    color: var(--accent-yellow);
}

.drawer-mobile-menu-a.text-red {
    color: #ef4444;
}

/* E. Mobile Sticky Bottom Tab Bar */
.emere-global-bottom-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-slate);
    z-index: 999;
    display: none; /* Desktop default */
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}

.bottom-bar-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    height: 100%;
    color: var(--text-muted);
    text-decoration: none !important;
    font-family: var(--font-primary);
    position: relative;
    transition: var(--transition-smooth);
}

.bottom-bar-nav-item .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.bottom-bar-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bottom-bar-nav-item:hover,
.bottom-bar-nav-item.is-active {
    color: var(--accent-yellow);
}

.bottom-bar-nav-item.is-active .dashicons {
    transform: translateY(-2px);
    color: var(--accent-yellow);
}

.bottom-bar-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    background-color: #ef4444;
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    height: 14px;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bg-surface);
}

/* Responsive Media Queries to toggle headers view states */
@media (max-width: 991.98px) {
    .emere-global-desktop-header {
        display: none !important;
    }
    
    .emere-global-mobile-header {
        display: block !important;
    }
    
    .emere-global-bottom-sticky-bar {
        display: flex !important;
    }
    
    /* Pad body to prevent sticky navigation overlap footer content */
    body {
        padding-bottom: 74px !important;
    }
}

/* ==========================================================================
   10. EMERE REAL-TIME NOTIFICATIONS SYSTEM STYLES
   ========================================================================== */

/* Header Bell & Dropdown Container */
.emere-header-notifications-container {
    position: relative;
    display: inline-block;
}

.emere-header-notifications-container .notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-surface);
    box-sizing: border-box;
}

/* Header Bell Notifications Dropdown Menu */
.emere-header-notifications-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(17, 24, 39, 0.08);
    display: none;
    flex-direction: column;
    z-index: 1010;
    overflow: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.emere-header-notifications-dropdown-menu.is-active {
    display: flex;
    transform: translateY(0);
}

.emere-header-notifications-dropdown-menu .dropdown-header {
    background-color: var(--bg-page);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-slate);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.emere-header-notifications-dropdown-menu .dropdown-welcome {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.emere-header-notifications-dropdown-menu .mark-all-read-btn {
    background: transparent !important;
    border: none !important;
    color: var(--accent-yellow) !important;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0;
}

.emere-header-notifications-dropdown-menu .mark-all-read-btn:hover {
    color: var(--accent-yellow-hover) !important;
    text-decoration: underline;
}

/* Header Notifications Dropdown List Wrapper */
.dropdown-notifications-list-wrapper {
    max-height: 320px;
    overflow-y: auto;
}

.dropdown-notifications-list-wrapper::-webkit-scrollbar {
    width: 4px;
}
.dropdown-notifications-list-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.dropdown-notifications-list-wrapper::-webkit-scrollbar-thumb {
    background: var(--border-slate);
    border-radius: 4px;
}

/* Empty State inside Dropdown */
.emere-notifications-dropdown-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-muted);
}

.emere-notifications-dropdown-empty .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
}

.emere-notifications-dropdown-empty p {
    font-size: 11px;
    font-weight: 600;
    margin: 0;
}

.emere-notifications-dropdown-loader {
    padding: 30px 0;
    text-align: center;
    color: var(--text-muted);
}

.emere-notifications-dropdown-loader .spin-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    animation: emere-spin 1s infinite linear;
}

@keyframes emere-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Individual Dropdown Item Card */
.header-notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-slate);
    position: relative;
    transition: var(--transition-smooth);
}

.header-notification-item:hover {
    background-color: rgba(244, 245, 247, 0.5);
}

.header-notification-item.is-unread {
    background-color: rgba(242, 169, 0, 0.02);
}

.header-notification-item.is-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--accent-yellow);
}

.header-notification-item .item-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.header-notification-item .item-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 14px;
}

.header-notification-item .item-link {
    text-decoration: none !important;
}

.header-notification-item .item-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

.header-notification-item .item-link:hover .item-title {
    color: var(--accent-yellow);
}

.header-notification-item .item-message {
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.header-notification-item .item-time {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
}

.header-notification-item .dismiss-notif-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: var(--transition-smooth);
}

.header-notification-item:hover .dismiss-notif-btn {
    opacity: 1;
}

.header-notification-item .dismiss-notif-btn:hover {
    color: #ef4444 !important;
}

.emere-header-notifications-dropdown-menu .dropdown-footer {
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--border-slate);
    background-color: var(--bg-page);
}

.emere-header-notifications-dropdown-menu .dropdown-footer a {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-secondary);
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.emere-header-notifications-dropdown-menu .dropdown-footer a:hover {
    color: var(--bg-dark-charcoal);
}

/* Icon Colors */
.text-yellow { color: var(--accent-yellow) !important; }
.text-red { color: #ef4444 !important; }
.text-orange { color: #f97316 !important; }
.text-blue { color: #3b82f6 !important; }
.text-green { color: #10b981 !important; }
.text-gold { color: #d97706 !important; }
.text-grey { color: #6b7280 !important; }


/* ==========================================================================
   11. EMERE DASHBOARD NOTIFICATIONS FEED STYLES
   ========================================================================== */
.flex-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.flex-header-actions .compact-btn {
    height: 38px;
    padding: 0 14px;
    font-size: var(--font-size-xs);
}

.emere-dashboard-notifications-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* Dashboard Notification Card wrapper */
.emere-dashboard-notification-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    gap: 16px;
    position: relative;
    transition: var(--transition-smooth);
}

.emere-dashboard-notification-card:hover {
    border-color: var(--border-slate-hover);
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.02);
}

.emere-dashboard-notification-card.is-unread {
    background-color: rgba(242, 169, 0, 0.01);
    border-left: 3px solid var(--accent-yellow);
}

.emere-dashboard-notification-card .notif-card-left {
    flex-shrink: 0;
}

.emere-dashboard-notification-card .notif-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.emere-dashboard-notification-card .notif-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.emere-dashboard-notification-card .notif-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emere-dashboard-notification-card .notif-link {
    text-decoration: none !important;
}

.emere-dashboard-notification-card .notif-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.emere-dashboard-notification-card .notif-link:hover .notif-title {
    color: var(--accent-yellow);
}

.emere-dashboard-notification-card .unread-pill-indicator {
    background-color: var(--accent-yellow);
    color: var(--bg-dark-charcoal);
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.emere-dashboard-notification-card .notif-message {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.emere-dashboard-notification-card .notif-timestamp {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 700;
}

/* Card Actions */
.emere-dashboard-notification-card .notif-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.emere-dashboard-notification-card .notif-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-slate);
    background-color: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition-smooth);
}

.emere-dashboard-notification-card .notif-action-btn:hover {
    background-color: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border-slate-hover);
}

.emere-dashboard-notification-card .notif-action-btn.mark-read-btn:hover {
    color: #10b981;
    border-color: #10b981;
    background-color: rgba(16, 185, 129, 0.05);
}

.emere-dashboard-notification-card .notif-action-btn.dismiss-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
}

.emere-dashboard-notification-card .notif-action-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}


/* Dropdown Responsive Overrides */
@media (max-width: 575.98px) {
    .emere-header-notifications-dropdown-menu {
        width: calc(100vw - 32px);
        right: -60px;
    }
}

/* ==========================================================================
   12. CHATGPT-INSPIRED PREMIUM LIGHT-THEME POLISH UPGRADES
   ========================================================================== */

/* A. Premium Glassy Light Mobile Bottom Nav Bar Upgrade */
.emere-global-bottom-sticky-bar {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(242, 169, 0, 0.18) !important;
    box-shadow: 0 -10px 35px rgba(17, 24, 39, 0.05) !important;
    height: 68px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

/* Elevated Gavel Auctions Center Button Style */
.bottom-bar-nav-item.is-elevated-center-btn {
    position: relative !important;
    overflow: visible !important;
}

.bottom-bar-nav-item.is-elevated-center-btn .elevated-center-circle {
    width: 52px;
    height: 52px;
    background-color: var(--bg-dark-charcoal);
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 20px rgba(242, 169, 0, 0.35);
    transition: var(--transition-smooth);
    z-index: 10;
}

.bottom-bar-nav-item.is-elevated-center-btn .elevated-center-circle .dashicons {
    color: var(--accent-yellow) !important;
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    transition: var(--transition-smooth);
}

/* Hover & Active states for elevated button */
.bottom-bar-nav-item.is-elevated-center-btn:hover .elevated-center-circle,
.bottom-bar-nav-item.is-elevated-center-btn.is-active .elevated-center-circle {
    background-color: var(--accent-yellow);
    box-shadow: 0 8px 25px rgba(242, 169, 0, 0.5);
    transform: translateX(-50%) scale(1.05);
}

.bottom-bar-nav-item.is-elevated-center-btn:hover .elevated-center-circle .dashicons,
.bottom-bar-nav-item.is-elevated-center-btn.is-active .elevated-center-circle .dashicons {
    color: var(--bg-dark-charcoal) !important;
    transform: rotate(-15deg);
}

.bottom-bar-nav-item.is-elevated-center-btn .bottom-bar-label {
    margin-top: 32px !important;
}

/* B. Polished Light Mobile Fullscreen Search Overlay Upgrade */
.emere-mobile-search-overlay-container {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    transition: opacity 0.25s ease !important;
}

.emere-mobile-search-overlay-container .search-overlay-close-btn {
    color: var(--bg-dark-charcoal) !important;
    font-size: 2.2rem !important;
    top: 16px !important;
    right: 20px !important;
    transition: var(--transition-smooth);
}

.emere-mobile-search-overlay-container .search-overlay-close-btn:hover {
    color: var(--accent-yellow) !important;
}

/* Search input field updates */
.search-overlay-content-inner {
    max-width: 480px !important;
    padding: 0 var(--space-xs);
}

.search-overlay-content-inner .search-overlay-title {
    color: var(--bg-dark-charcoal) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: var(--space-md) !important;
    letter-spacing: -0.01em !important;
}

.search-input-field-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-overlay-input-field {
    background-color: var(--bg-page) !important;
    border: 1px solid var(--border-slate) !important;
    color: var(--bg-dark-charcoal) !important;
    border-radius: 30px !important;
    height: 48px !important;
    font-size: 0.9rem !important;
    padding: 0 46px 0 var(--space-md) !important;
    text-align: left !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.02) !important;
}

.search-overlay-input-field:focus {
    border-color: var(--accent-yellow) !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(242, 169, 0, 0.1) !important;
}

.search-field-icon-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-dark-charcoal) !important;
    color: var(--accent-yellow) !important;
    border: none !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.search-field-icon-btn:hover {
    background: var(--accent-yellow) !important;
    color: var(--bg-dark-charcoal) !important;
}

.search-field-icon-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Suggested searches & tags pills section styles */
.search-overlay-suggested-section,
.search-overlay-recent-section {
    margin-top: var(--space-lg);
    text-align: left;
}

.suggested-section-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.suggested-search-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggested-search-pill {
    background: var(--bg-surface);
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-slate);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.suggested-search-pill:hover {
    background: rgba(242, 169, 0, 0.03);
    border-color: var(--accent-yellow);
    color: var(--bg-dark-charcoal) !important;
    transform: translateY(-1px);
}

/* Recent searches list */
.recent-searches-list-group {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-searches-list-group li {
    margin: 0 !important;
    padding: 0 !important;
}

.recent-searches-list-group a {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.recent-searches-list-group a:hover {
    background-color: var(--bg-page);
    color: var(--bg-dark-charcoal) !important;
}

.recent-searches-list-group .item-recent-clock {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.recent-searches-list-group a:hover .item-recent-clock {
    color: var(--accent-yellow);
}

/* C. Dynamic Header Dropdown Styling refinements for premium feel */
.emere-header-notifications-dropdown-menu,
.emere-header-avatar-dropdown-menu {
    border: 1px solid rgba(242, 169, 0, 0.15) !important;
}

/* ==========================================================================
   13. EMERE AJAX MINI-CART & PROCUREMENT BASKET DRAWER STYLE SHEETS
   ========================================================================== */

/* Slide-out Backdrop mask */
.emere-mini-cart-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.emere-mini-cart-drawer-backdrop.is-active {
    display: block;
    opacity: 1;
}

/* Slide-out Drawer Panel */
.emere-mini-cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 380px;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(242, 169, 0, 0.15);
    z-index: 9999;
    box-shadow: -10px 0 35px rgba(17, 24, 39, 0.08);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: var(--font-primary);
}

.emere-mini-cart-drawer.is-open {
    right: 0;
}

/* Drawer Header */
.emere-mini-cart-drawer-header {
    padding: 20px;
    background-color: var(--bg-dark-charcoal);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-header-title {
    font-size: var(--font-size-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.emere-mini-cart-drawer-close-btn {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emere-mini-cart-drawer-close-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.emere-mini-cart-drawer-close-btn:hover {
    color: var(--accent-yellow) !important;
}

/* Drawer Body */
.emere-mini-cart-drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

#emere-mini-cart-drawer-content-inner {
    height: 100%;
}

.emere-mini-cart-drawer-content-ajax {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* Empty State inside Cart Drawer */
.mini-cart-empty-state {
    margin: auto 0;
    text-align: center;
    color: var(--text-muted);
    padding: 40px 10px;
}

.mini-cart-empty-state .empty-icon {
    font-size: 40px;
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.mini-cart-empty-state h3 {
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--bg-dark-charcoal);
    margin-bottom: var(--space-xs);
}

.mini-cart-empty-state p {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    margin: 0;
}

/* Items Feed list cards */
.mini-cart-items-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding-right: 4px;
    flex-grow: 1;
    margin-bottom: var(--space-lg);
}

.mini-cart-items-feed::-webkit-scrollbar {
    width: 4px;
}
.mini-cart-items-feed::-webkit-scrollbar-track {
    background: transparent;
}
.mini-cart-items-feed::-webkit-scrollbar-thumb {
    background: var(--border-slate);
    border-radius: 4px;
}

/* Individual Item card */
.mini-cart-item-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-slate);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 12px;
    position: relative;
    transition: var(--transition-smooth);
}

.mini-cart-item-card:hover {
    border-color: var(--border-slate-hover);
    box-shadow: 0 4px 15px rgba(17, 24, 39, 0.015);
}

.mini-cart-item-card.is-working {
    opacity: 0.5;
    pointer-events: none;
}

.mini-cart-item-card .item-card-left {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-slate);
    background-color: var(--bg-page);
}

.mini-cart-item-card .item-card-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-cart-item-card .item-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-cart-item-card .item-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 2px 0;
}

.mini-cart-item-card .item-title a {
    color: var(--bg-dark-charcoal);
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.mini-cart-item-card .item-title a:hover {
    color: var(--accent-yellow);
}

.mini-cart-item-card .item-price {
    font-size: 11px;
    font-weight: 800;
    color: var(--bg-dark-charcoal);
}

/* Compact quantity increments controls */
.item-qty-selector-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-slate);
    border-radius: 20px;
    height: 28px;
    background-color: var(--bg-page);
    width: 80px;
    margin-top: 6px;
    overflow: hidden;
}

.item-qty-selector-wrapper .qty-btn {
    background: transparent !important;
    border: none !important;
    width: 24px;
    height: 100%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.item-qty-selector-wrapper .qty-btn:hover {
    background-color: var(--border-slate) !important;
    color: var(--bg-dark-charcoal);
}

.item-qty-selector-wrapper .qty-input-field {
    width: 32px;
    height: 100%;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--bg-dark-charcoal);
    padding: 0;
    pointer-events: none;
    -moz-appearance: textfield;
}

.item-qty-selector-wrapper .qty-input-field::-webkit-inner-spin-button,
.item-qty-selector-wrapper .qty-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Row Trash dismiss icon */
.mini-cart-item-card .mini-cart-remove-item-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.mini-cart-item-card .mini-cart-remove-item-btn:hover {
    color: #ef4444 !important;
}

.mini-cart-item-card .mini-cart-remove-item-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Sticky Footer subtotal math panels */
.mini-cart-drawer-footer {
    border-top: 1px solid var(--border-slate);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-surface);
}

.footer-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.footer-summary-row.subtotal-row {
    border-top: 1px dashed var(--border-slate);
    padding-top: 8px;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--bg-dark-charcoal);
}

.footer-summary-row.subtotal-row .subtotal-price-value {
    color: var(--bg-dark-charcoal);
    font-size: 14px;
}

.footer-actions-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.footer-actions-group .drawer-action-btn {
    height: 44px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.05em;
    border-radius: 6px;
    text-decoration: none !important;
}

.footer-actions-group .checkout-glow-btn {
    box-shadow: 0 4px 15px rgba(242, 169, 0, 0.25);
}


/* ==========================================================================
   14. MOBILE RESPONSIVE OVERRIDES (MOBILE-FIRST SHEET CONVERTER)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Slide up Bottom Sheet Modal for Cart Drawer */
    .emere-mini-cart-drawer {
        bottom: -100% !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 80vh !important;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(242, 169, 0, 0.15) !important;
        transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        box-shadow: 0 -10px 30px rgba(17, 24, 39, 0.15) !important;
    }
    
    .emere-mini-cart-drawer.is-open {
        bottom: 0 !important;
    }
    
    .emere-mini-cart-drawer-header {
        padding: 16px 20px !important;
        border-radius: 20px 20px 0 0 !important;
    }
    
    .emere-mini-cart-drawer-body {
        padding: 16px !important;
    }
    
    .mini-cart-item-card {
        padding: 10px !important;
    }
    
    .mini-cart-items-feed {
        margin-bottom: var(--space-md) !important;
    }
/* Tab Layout Styling */
.emere-tabs-nav {
    display: flex;
    justify-content: space-between;
}

    /* Stack buttons for easy mobile thumb reachability */
    .footer-actions-group {
        margin-top: 8px !important;
    }
}

/* ==========================================================================
   Single Product Auction Layout
   ========================================================================== */
.emere-auction-layout {
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: 'Outfit', sans-serif;
}

.emere-auction-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.emere-auction-section-header {
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.emere-auction-section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}
.emere-auction-section-title .dashicons {
    color: #64748b;
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 1;
}

.emere-auction-section-content {
    padding: 24px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Accordion Specific */
.emere-layout-accordion .emere-auction-section-header {
    cursor: pointer;
    border-bottom: none;
}
.emere-layout-accordion .emere-auction-section-header:hover {
    background: #f1f5f9;
}
.emere-layout-accordion .emere-auction-section-content {
    display: none;
    border-top: 1px solid #e2e8f0;
}
.emere-layout-accordion .emere-auction-section.is-open .emere-auction-section-content {
    display: block;
}
.emere-layout-accordion .emere-auction-section.is-open .emere-accordion-icon {
    transform: rotate(180deg);
}
.emere-accordion-icon {
    transition: transform 0.3s ease;
    color: #64748b;
}

/* Lot Details Table */
.emere-lot-details-table {
    width: 100%;
    border-collapse: collapse;
}
.emere-lot-details-table th, 
.emere-lot-details-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.emere-lot-details-table th {
    width: 35%;
    font-weight: 600;
    color: #0f172a;
    background: #f8fafc;
}
.emere-lot-details-table tr:last-child th,
.emere-lot-details-table tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   Full Single Product Page Layout Engine (Premium Upgrade)
   ========================================================================== */
:root {
    --emere-gold: #D6A354;
    --emere-dark: #111315;
    --emere-dark-soft: #1A1D21;
    --emere-bg: #F5F7FA;
    --emere-white: #FFFFFF;
    --emere-border: #e2e8f0;
    --emere-text: #475569;
}

.emere-single-product-container {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background: var(--emere-bg);
}

.emere-sp-hero-wrapper {
    background: var(--emere-white);
    padding: 50px 40px 30px 40px; /* Increased padding for better desktop breathing room */
    border-bottom: 1px solid var(--emere-border);
}

.emere-sp-top {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Fixes the 100% + gap overflow issue */
    gap: 50px; /* Sleeker gap */
    align-items: start;
}

/* Premium Gallery Styling */
.emere-sp-gallery {
    position: relative;
    width: 100%;
}
/* FORCE WooCommerce gallery to override its native 48% float layout */
.emere-sp-gallery .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    max-width: 100% !important;
}
.emere-sp-gallery img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    object-fit: contain;
}

/* Floating Gallery Badges */
.emere-lot-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--emere-dark);
    color: var(--emere-white);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(17,19,21,0.15);
}
.emere-watchlist-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--emere-white);
    color: var(--emere-text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(17,19,21,0.1);
    transition: all 0.2s ease;
}
.emere-watchlist-badge:hover {
    color: var(--emere-gold);
    transform: scale(1.05);
}

/* Premium Summary Card */
.emere-sp-summary {
    position: sticky;
    top: 120px;
    height: max-content;
}

/* Top Meta Data */
.emere-premium-top-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}
.emere-meta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--emere-dark);
}
.emere-meta-badge:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: var(--emere-border);
}

/* Summary Typography & Spacing */
.emere-sp-summary,
.emere-sp-summary.summary.entry-summary,
.woocommerce div.product .emere-sp-summary.summary.entry-summary {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}
.emere-sp-summary .product_title {
    font-size: 2.2rem !important;
    font-weight: 500 !important;
    color: var(--emere-dark) !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    letter-spacing: -0.01em;
    font-family: serif, "Times New Roman"; /* Classic serif look for the title */
}
.emere-title-divider {
    display: none; /* Removed the gold divider for extreme minimalism */
}

.emere-sp-summary .woocommerce-product-details__short-description {
    background: #FFF9F0;
    border: 1px solid #F3E5D8;
    border-radius: 8px;
    padding: 25px;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin-top: 40px;
    margin-bottom: 30px;
}
.emere-sp-summary .woocommerce-product-details__short-description ul {
    padding-left: 0;
    list-style: none;
}
.emere-sp-summary .woocommerce-product-details__short-description li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px;
    font-weight: 500;
}
.emere-sp-summary .woocommerce-product-details__short-description li::before {
    content: "\f147"; /* Dashicons yes */
    font-family: "dashicons";
    position: absolute;
    left: 0;
    color: var(--emere-gold);
    font-size: 20px;
}

.emere-sp-summary .price,
.emere-sp-summary .price ins,
.emere-sp-summary .price .amount,
.emere-sp-summary p.price {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #D6A354 !important;
    margin-bottom: 25px;
    text-decoration: none !important;
}
.emere-sp-summary .price del,
.emere-sp-summary .price del .amount {
    color: #94a3b8 !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
}

/* WisdmLabs Bidding Box Overrides for Premium Feel */
.emere-sp-summary .auction-ajax-change {
    padding: 20px 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--emere-border);
    border-bottom: 1px solid var(--emere-border);
}

/* Premium Input Fields and Buttons */
.emere-sp-summary form.cart,
.emere-sp-summary form.buy-now,
.emere-sp-summary form.auction_form {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    margin-top: 25px;
    width: 100%;
}
.emere-sp-summary input[type="text"],
.emere-sp-summary input[type="number"],
.emere-sp-summary .qty {
    height: 54px !important;
    padding: 0 20px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--emere-dark) !important;
    background: #f8fafc !important;
    min-width: 80px;
    box-shadow: none !important;
    transition: all 0.2s ease;
}
.emere-sp-summary .quantity {
    display: flex !important;
    align-items: center;
}
.emere-sp-summary input[type="text"]:focus,
.emere-sp-summary input[type="number"]:focus {
    outline: none !important;
    border-color: var(--emere-dark) !important;
    background: var(--emere-white) !important;
}
.emere-sp-summary button.button,
.emere-sp-summary button.bid_button {
    height: 54px !important;
    padding: 0 40px !important;
    background-color: var(--emere-dark) !important;
    color: var(--emere-white) !important;
    border: 2px solid var(--emere-dark) !important;
    border-radius: 6px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease !important;
}
.emere-sp-summary button.button:hover,
.emere-sp-summary button.bid_button:hover {
    background-color: var(--emere-gold) !important;
    border-color: var(--emere-gold) !important;
}

/* Mobile Responsiveness for Bidding Form */
@media (max-width: 767.98px) {
    .emere-sp-summary form.buy-now,
    .emere-sp-summary form.auction_form {
        flex-wrap: wrap; /* Stack on tiny screens */
        gap: 10px;
    }
    .emere-sp-summary .quantity {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
    }
    .emere-sp-summary input[type="text"],
    .emere-sp-summary input[type="number"],
    .emere-sp-summary .qty {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 auto !important; /* Forces the input to grow and fill remaining space */
    }
    .emere-sp-summary button.button,
    .emere-sp-summary button.bid_button {
        width: 100% !important;
    }
}

/* Data Grid (Replaces Quick Info Cards) */
.emere-data-grid {
    width: 100%;
    margin-bottom: 35px;
    border-top: 1px solid var(--emere-border);
}
.emere-data-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--emere-border);
    font-size: 0.9rem;
}
.emere-data-label {
    color: var(--emere-text);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.emere-data-value {
    color: var(--emere-dark);
    font-weight: 600;
    text-align: right;
}

/* Main Content Wrapper */
.emere-sp-content-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
}

/* ==========================================================================
   Horizontal Tabs Engine (Premium Stripe/Linear Match)
   ========================================================================== */
.emere-tabs-nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap; /* Restore wrapping */
    gap: 12px;
    border-bottom: none;
    margin-bottom: 30px;
    list-style: none;
    padding-left: 0;
}
.emere-tabs-nav::-webkit-scrollbar {
    display: none;
}
.emere-tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px; /* Compact height */
    padding: 0 20px;
    cursor: pointer;
    font-size: 14px;
    color: #64748b;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--emere-border);
    font-weight: 600;
    margin-bottom: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.emere-tab-item:hover {
    background-color: #f8fafc;
    color: var(--emere-dark);
}
.emere-tab-item.active {
    background-color: #111315; /* Active tab dark background */
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #D6A354; /* Gold accent border */
    box-shadow: 0 4px 12px rgba(17, 19, 21, 0.15); /* Subtle premium shadow */
}
.emere-tab-item .dashicons {
    display: none; /* Hide icons in tabs for minimalism */
}
.emere-layout-tabs .emere-auction-section {
    border: none;
    background: transparent;
    border-radius: 0;
}
.emere-layout-tabs .emere-auction-section-header {
    display: none; /* Hide headers in tab mode */
}
.emere-layout-tabs .emere-auction-section-content {
    display: none;
    padding: 0;
}
.emere-layout-tabs .emere-auction-section-content.active {
    display: block;
}

/* Mobile Responsiveness for Tabs (MUST BE AFTER DESKTOP) */
@media (max-width: 767.98px) {
    .emere-tabs-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    
    .emere-tab-item {
        font-size: 12px !important; /* Slightly smaller to guarantee fit on 320px */
        height: 44px !important;
        padding: 0 5px !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
        flex-shrink: 1 !important;
    }
}

/* ==========================================================================
   Premium Lot Details (2-Column Grid + Notice)
   ========================================================================== */
.emere-lot-details-grid {
    display: flex;
    gap: 40px;
}
.emere-lot-details-left {
    flex: 1;
}
.emere-lot-details-right {
    width: 320px;
    flex-shrink: 0;
}
.emere-important-notice-box {
    background-color: #fdfaf3; /* Light gold tint */
    border: 1px solid #f2e2b8;
    border-radius: 8px;
    padding: 24px;
}
.emere-important-notice-box h4 {
    color: #0f172a;
    font-weight: 700;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}
.emere-important-notice-box p {
    color: #475569;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
@media (max-width: 767.98px) {
    .emere-lot-details-grid {
        flex-direction: column;
    }
    .emere-lot-details-right {
        width: 100%;
    }
}

/* ==========================================================================
   Bottom Navigation Bar
   ========================================================================== */
.emere-bottom-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}
.emere-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.emere-btn-outline {
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    background: #fff !important;
}
.emere-btn-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}
.emere-btn-gold {
    background: #D6A354 !important;
    color: #fff !important;
    border: 1px solid #D6A354 !important;
}
.emere-btn-gold:hover {
    background: #c39247 !important;
    color: #fff !important;
}

/* ==========================================================================
   Trust Badges Footer
   ========================================================================== */
.emere-trust-badges-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    background: var(--emere-dark-soft);
    border-radius: 16px;
    padding: 50px;
    margin-top: 60px;
    color: var(--emere-white);
    box-shadow: 0 20px 40px rgba(17,19,21,0.1);
}
.emere-trust-badge {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.emere-trust-badge .dashicons {
    color: var(--emere-gold);
    font-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
.emere-trust-badge h4 {
    color: var(--emere-white);
    margin: 0 0 8px 0;
    font-size: 1.15rem;
    font-weight: 600;
}
.emere-trust-badge p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
@media (max-width: 991.98px) {
    .emere-trust-badges-bar {
        grid-template-columns: 1fr 1fr;
    }
    .emere-sp-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .emere-sp-summary {
        position: static;
    }
}
@media (max-width: 767.98px) {
    .emere-trust-badges-bar {
        grid-template-columns: 1fr;
    }
    .emere-bottom-actions-bar {
        flex-direction: column;
        gap: 15px;
    }
    .emere-bottom-actions-bar .emere-btn {
        width: 100%;
    }
    .emere-sp-hero-wrapper {
        padding: 30px 15px;
    }
    .emere-quick-info-strip {
        margin: 20px auto 40px auto;
        padding: 0 15px;
    }
    .emere-sp-summary .product_title {
        font-size: 2rem !important;
    }
}

/* ==========================================================================
   Login to Bid Button (Logged Out State)
   ========================================================================== */
.emere-login-to-bid-wrapper {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--emere-border);
}
.emere-login-to-bid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid var(--emere-border);
    border-radius: 8px;
    color: var(--emere-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.emere-login-to-bid-btn:hover {
    background-color: var(--emere-dark);
    color: #ffffff;
    border-color: var(--emere-dark);
}
.emere-login-to-bid-btn .dashicons {
    color: var(--emere-gold);
    line-height: 1;
}
@media (max-width: 480px) {
    .emere-login-to-bid-btn {
        font-size: 0.8rem;
        padding: 12px;
        white-space: nowrap; /* Prevent ugly wrapping on tiny screens */
    }
}

/* ==========================================================================
   DASHBOARD ADDRESS BOOK POLISH
   ========================================================================== */
.emere-dashboard-billing-form-wrapper h3,
.emere-dashboard-billing-form-wrapper header.title h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    color: var(--bg-dark-charcoal) !important;
    font-family: 'Outfit', sans-serif !important;
}

.emere-dashboard-billing-form-wrapper address {
    font-style: normal !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-slate);
    margin-bottom: 20px;
}

.emere-dashboard-billing-form-wrapper header.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.emere-dashboard-billing-form-wrapper header.title a.edit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-yellow) !important;
    text-decoration: none !important;
    background: rgba(242, 169, 0, 0.1);
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
}

.emere-dashboard-billing-form-wrapper header.title a.edit:hover {
    background: var(--accent-yellow);
    color: var(--bg-dark-charcoal) !important;
}

.emere-dashboard-billing-form-wrapper .woocommerce-Address {
    margin-bottom: 30px;
}

/* "Add New Address" Links */
.emere-dashboard-billing-form-wrapper a[href*="address-book=new"] {
    display: inline-block;
    background: var(--bg-dark-charcoal);
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 10px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.emere-dashboard-billing-form-wrapper a[href*="address-book=new"]:hover {
    background: var(--accent-yellow);
    color: var(--bg-dark-charcoal) !important;
    box-shadow: 0 6px 12px rgba(242, 169, 0, 0.2);
}

/* Make Columns Responsive */
.emere-dashboard-billing-form-wrapper .u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
}
.emere-dashboard-billing-form-wrapper .u-columns .u-column1,
.emere-dashboard-billing-form-wrapper .u-columns .u-column2 {
    width: 100% !important;
    float: none !important;
}
@media (max-width: 767.98px) {
    .emere-dashboard-billing-form-wrapper .u-columns {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   DASHBOARD EDIT ACCOUNT FORM POLISH
   ========================================================================== */
.woocommerce-EditAccountForm.edit-account fieldset {
    border: 1px solid var(--border-slate);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    background: #f8fafc;
}
.woocommerce-EditAccountForm.edit-account legend {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bg-dark-charcoal);
    padding: 0 15px;
    font-family: 'Outfit', sans-serif;
}
.woocommerce-EditAccountForm.edit-account input[type="text"],
.woocommerce-EditAccountForm.edit-account input[type="email"],
.woocommerce-EditAccountForm.edit-account input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-slate);
    border-radius: 6px;
    background: #ffffff;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
}
.woocommerce-EditAccountForm.edit-account input:focus {
    border-color: var(--accent-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.1);
}
.woocommerce-EditAccountForm.edit-account p.form-row {
    margin-bottom: 20px;
}
.woocommerce-EditAccountForm.edit-account label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.woocommerce-EditAccountForm.edit-account button[type="submit"] {
    background: var(--bg-dark-charcoal) !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    margin-top: 20px;
    cursor: pointer;
}
.woocommerce-EditAccountForm.edit-account button[type="submit"]:hover {
    background: var(--accent-yellow) !important;
    color: var(--bg-dark-charcoal) !important;
    box-shadow: 0 6px 12px rgba(242, 169, 0, 0.2) !important;
}
.woocommerce-EditAccountForm.edit-account em {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: normal;
    display: block;
    margin-top: 4px;
}
/* Basic User Avatar UI Polish */
.woocommerce-EditAccountForm.edit-account .basic-user-avatars {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid var(--border-slate);
    display: flex;
    align-items: center;
    gap: 20px;
}
.woocommerce-EditAccountForm.edit-account .basic-user-avatars img {
    border-radius: 50%;
    border: 3px solid var(--accent-yellow);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.woocommerce-EditAccountForm.edit-account .basic-user-avatars input[type="file"] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Reorder Single Product Bid Form */
.uwa_auction_product_ajax_change {
    display: flex;
    flex-direction: column;
}
.uwa_auction_product_ajax_change .uwa_auction_form {
    order: -1;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}

/* Hide Timezone */
.uwa_auction_product_timezone {
    display: none !important;
}

/* Premium Bid Form Layout */
.uwa_auction_form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 15px;
}

/* Input Field Styling */
.uwa_auction_form .quantity {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0 20px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.uwa_auction_form .quantity:focus-within {
    border-color: var(--accent-yellow, #f59e0b);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
    background: #fff;
}
.uwa_auction_form .uwa_currency {
    font-size: 1.3rem;
    font-weight: 600;
    color: #64748b;
    margin-right: 12px;
}
.uwa_auction_form input[type=number].qty.bid {
    border: none !important;
    background: transparent !important;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    padding: 16px 0;
    width: 100%;
    outline: none;
    box-shadow: none !important;
    -moz-appearance: number-input;
}

/* Restore Native Up/Down Arrows */
.uwa_auction_form input[type=number].qty.bid::-webkit-inner-spin-button, 
.uwa_auction_form input[type=number].qty.bid::-webkit-outer-spin-button { 
    -webkit-appearance: inner-spin-button; 
    opacity: 1;
    height: 40px;
    cursor: pointer;
}

/* Premium Place Bid Button */
.uwa_auction_form .bid_button {
    flex: 1;
    min-width: 180px;
    background: var(--accent-yellow, #f59e0b) !important;
    color: #0f172a !important;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    padding: 16px 24px;
    border: none;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uwa_auction_form .bid_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    background: #fbbf24 !important;
}

/* Helper text & Notices */
.uwa_auction_form .uwa_inc_price_hint {
    width: 100%;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 5px;
}
.uwa_auction_form .uwa_inc_latest_price {
    font-weight: 700;
    color: #334155;
}
.uwa_auction_end_time {
    color: #475569;
    font-size: 1.05rem;
    font-weight: 500;
}
.checkreserve p {
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 5px;
    font-weight: 600;
}
.checkreserve .uwa_auction_reserve_not_met {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.checkreserve .uwa_auction_reserve_met {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
}

/* Related Products Section */
.emere-related-products-section {
    padding: 60px 0;
    background: #F5F7FA;
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
}
.emere-related-title {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 30px;
    font-weight: 700;
}
.emere-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1024px) {
    .emere-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .emere-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Quick Bid Card Form Redesign */
.compact-quick-bid-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: transparent !important;
    padding-top: 10px;
}

.compact-quick-bid-form .quick-bid-input-group {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    transition: all 0.3s ease !important;
}

.compact-quick-bid-form .quick-bid-input-group:focus-within {
    border-color: var(--accent-yellow, #f59e0b) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
    background: #fff !important;
}

.compact-quick-bid-form .bid-input-currency-symbol {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-right: 5px !important;
}

.compact-quick-bid-form .quick-bid-input-field {
    width: 100% !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
    padding: 12px !important;
    border: none !important;
    background: transparent !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Custom Up/Down Spinner Controls */
.compact-quick-bid-form .emere-qty-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #e2e8f0;
    padding-left: 5px;
}
.compact-quick-bid-form .emere-qty-controls button {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 0.65rem !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}
.compact-quick-bid-form .emere-qty-controls button:hover {
    color: var(--accent-yellow, #f59e0b) !important;
}

/* Hide Native Spinners completely */
.compact-quick-bid-form .quick-bid-input-field::-webkit-inner-spin-button, 
.compact-quick-bid-form .quick-bid-input-field::-webkit-outer-spin-button { 
    -webkit-appearance: none !important; 
    margin: 0 !important;
}

.compact-quick-bid-form .compact-quick-bid-btn {
    width: 100% !important;
    padding: 14px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.compact-quick-bid-form .compact-quick-bid-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(15, 23, 42, 0.25) !important;
    background: var(--accent-yellow, #f59e0b) !important;
    color: #0f172a !important;
}

/* Sidebar Gap Adjustments */
.emere-right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.emere-right-sidebar .industrial-promo-card {
    margin-bottom: 24px; /* Fallback for browsers that don't support flex gap well */
}
.emere-right-sidebar .industrial-promo-card:last-child {
    margin-bottom: 0;
}